*{
	box-sizing:border-box;
}









.time{
	display: none;

	color:#000;
	text-align:center;
	overflow: hidden;
	width:5em;
	
}


.time.finish{
	display: none;
	color:#fff;
}

body.time_attack_on .time{
	display: block;
}

body.time_attack_on .finish.time{
	display: inline;
	width:auto;
}

.time_result{
	display: none;
}


body.time_attack_on .time_result{
	display: block;
}

.highscore{
	font-size:1.2em;
	color:gold;
	font-weight:bold;
}


.wrapper{
position:relative;
display:flex;
width:100%;
justify-content:center;
align-items: flex-start;
align-content: flex-start;
flex-wrap:wrap;


background:#fff;
box-sizing: border-box;
height: 100vh;
height: 100dvh;
}



.upper{
display:flex;
justify-content:space-between;
align-items: flex-start;
align-content: flex-start;
flex-wrap:wrap;

width:100%;
height:auto;

}


.menu{
background:#000;
display:flex;
justify-content: space-around;
align-items: center;
align-content: center;
font-size:1.2em;
flex-wrap: wrap;
margin:0 ;
padding: 0.3em;

width:100%;
height:auto;

}

.menu .btn{
	font-size:1em;
	padding: 0.2em;
	margin:0;
	background:none;
	color:#fff;
	cursor: pointer;
}



.crossword{
text-align:center;
width:100%;

}

.crossword_wrapper{

	
	transform-origin: top left;
	display:inline-flex;
	flex-wrap: wrap;
	border-left:1px solid #000;
	border-top:1px solid #000;
	box-sizing: content-box;

	width: 10.1em;
	height: 10em;
	font-size: 1.6em;
}



.crossword span{
	box-sizing: border-box;
	font-size:1em;
	display:flex;
	justify-content: center;
	align-items: center;
	color:#000;
	margin:0;
	padding:0;
	border:0;
	border-right:1px solid #000;
	border-bottom:1px solid #000;
	background-size:auto 30%;

	animation-iteration-count: infinite;
	animation-name: pulse;

	width: 2em;
	height: 2em;

}

.disabled{background-color:#000;}

.crossword span.focus{
	background-color:#aaf;
}

/*
.ok{background-color:#aaf;}
.ng{background-color:#faa;}
*/




ul.hints{
display:flex;
flex-wrap: wrap;
overflow-y:auto;

width:100%;
padding:0.5em 0 3em;

}


ul.hints li {
	font-size: 1.35em;
vertical-align:top;
list-style-type:none;
width:100%;

line-height: 1.2em;
margin: 0 0 0.4em;
padding: 0 0.3em;
}

/* ad */
ul.hints li:last-of-type {
padding: 0;
margin-top:2em;
text-align: center;
}






tate,yoko{
	display: inline-block;
	padding:0 0.5em 0 0;
}

tate:after{
	content:"タテ";
}

yoko:after{
	content:"ヨコ";
}



.num1 {background-image:url(../images/num/1.png);background-position: 3px 3px ; background-repeat:no-repeat;}.num2 {background-image:url(../images/num/2.png);background-position: 3px 3px ; background-repeat:no-repeat;}.num3 {background-image:url(../images/num/3.png);background-position: 3px 3px ; background-repeat:no-repeat;}.num4 {background-image:url(../images/num/4.png);background-position: 3px 3px ; background-repeat:no-repeat;}.num5 {background-image:url(../images/num/5.png);background-position: 3px 3px ; background-repeat:no-repeat;}.num6 {background-image:url(../images/num/6.png);background-position: 3px 3px ; background-repeat:no-repeat;}.num7 {background-image:url(../images/num/7.png);background-position: 3px 3px ; background-repeat:no-repeat;}.num8 {background-image:url(../images/num/8.png);background-position: 3px 3px ; background-repeat:no-repeat;}.num9 {background-image:url(../images/num/9.png);background-position: 3px 3px ; background-repeat:no-repeat;}.num10 {background-image:url(../images/num/10.png);background-position: 3px 3px ; background-repeat:no-repeat;}.num11 {background-image:url(../images/num/11.png);background-position: 3px 3px ; background-repeat:no-repeat;}.num12 {background-image:url(../images/num/12.png);background-position: 3px 3px ; background-repeat:no-repeat;}.num13 {background-image:url(../images/num/13.png);background-position: 3px 3px ; background-repeat:no-repeat;}.num14 {background-image:url(../images/num/14.png);background-position: 3px 3px ; background-repeat:no-repeat;}.num15 {background-image:url(../images/num/15.png);background-position: 3px 3px ; background-repeat:no-repeat;}.num16 {background-image:url(../images/num/16.png);background-position: 3px 3px ; background-repeat:no-repeat;}.num17 {background-image:url(../images/num/17.png);background-position: 3px 3px ; background-repeat:no-repeat;}.num18 {background-image:url(../images/num/18.png);background-position: 3px 3px ; background-repeat:no-repeat;}.num19 {background-image:url(../images/num/19.png);background-position: 3px 3px ; background-repeat:no-repeat;}.num20 {background-image:url(../images/num/20.png);background-position: 3px 3px ; background-repeat:no-repeat;}.num21 {background-image:url(../images/num/21.png);background-position: 3px 3px ; background-repeat:no-repeat;}.num22 {background-image:url(../images/num/22.png);background-position: 3px 3px ; background-repeat:no-repeat;}.num23 {background-image:url(../images/num/23.png);background-position: 3px 3px ; background-repeat:no-repeat;}.num24 {background-image:url(../images/num/24.png);background-position: 3px 3px ; background-repeat:no-repeat;}.num25 {background-image:url(../images/num/25.png);background-position: 3px 3px ; background-repeat:no-repeat;}.num26 {background-image:url(../images/num/26.png);background-position: 3px 3px ; background-repeat:no-repeat;}.num27 {background-image:url(../images/num/27.png);background-position: 3px 3px ; background-repeat:no-repeat;}.num28 {background-image:url(../images/num/28.png);background-position: 3px 3px ; background-repeat:no-repeat;}.num29 {background-image:url(../images/num/29.png);background-position: 3px 3px ; background-repeat:no-repeat;}.num30 {background-image:url(../images/num/30.png);background-position: 3px 3px ; background-repeat:no-repeat;}.num31 {background-image:url(../images/num/31.png);background-position: 3px 3px ; background-repeat:no-repeat;}.num32 {background-image:url(../images/num/32.png);background-position: 3px 3px ; background-repeat:no-repeat;}.num33 {background-image:url(../images/num/33.png);background-position: 3px 3px ; background-repeat:no-repeat;}.num34 {background-image:url(../images/num/34.png);background-position: 3px 3px ; background-repeat:no-repeat;}.num35 {background-image:url(../images/num/35.png);background-position: 3px 3px ; background-repeat:no-repeat;}.num36 {background-image:url(../images/num/36.png);background-position: 3px 3px ; background-repeat:no-repeat;}.num37 {background-image:url(../images/num/37.png);background-position: 3px 3px ; background-repeat:no-repeat;}.num38 {background-image:url(../images/num/38.png);background-position: 3px 3px ; background-repeat:no-repeat;}.num39 {background-image:url(../images/num/39.png);background-position: 3px 3px ; background-repeat:no-repeat;}.num40 {background-image:url(../images/num/40.png);background-position: 3px 3px ; background-repeat:no-repeat;}.num41 {background-image:url(../images/num/41.png);background-position: 3px 3px ; background-repeat:no-repeat;}.num42 {background-image:url(../images/num/42.png);background-position: 3px 3px ; background-repeat:no-repeat;}.num43 {background-image:url(../images/num/43.png);background-position: 3px 3px ; background-repeat:no-repeat;}.num44 {background-image:url(../images/num/44.png);background-position: 3px 3px ; background-repeat:no-repeat;}.num45 {background-image:url(../images/num/45.png);background-position: 3px 3px ; background-repeat:no-repeat;}.num46 {background-image:url(../images/num/46.png);background-position: 3px 3px ; background-repeat:no-repeat;}.num47 {background-image:url(../images/num/47.png);background-position: 3px 3px ; background-repeat:no-repeat;}.num48 {background-image:url(../images/num/48.png);background-position: 3px 3px ; background-repeat:no-repeat;}.num49 {background-image:url(../images/num/49.png);background-position: 3px 3px ; background-repeat:no-repeat;}.num50 {background-image:url(../images/num/50.png);background-position: 3px 3px ; background-repeat:no-repeat;}.num51 {background-image:url(../images/num/51.png);background-position: 3px 3px ; background-repeat:no-repeat;}.num52 {background-image:url(../images/num/52.png);background-position: 3px 3px ; background-repeat:no-repeat;}.num53 {background-image:url(../images/num/53.png);background-position: 3px 3px ; background-repeat:no-repeat;}.num54 {background-image:url(../images/num/54.png);background-position: 3px 3px ; background-repeat:no-repeat;}

.red{
	background-color:red;
}



.highlight{
	background-color:rgb(100, 100, 255);
}



.keyboard{
	display:none;
	flex-wrap:wrap;
	position:fixed;
	width:100vw;
	height:100vh;
	height:100dvh;
	text-align:center;
	top:0;
	left:0;
	z-index:999;
	background-color:rgba(0,0,0,1);
	font-size:1.5em;
	line-height:1em;
	padding:0.2em 0.2em 0;
	justify-content:space-around;
	align-content:flex-start;
	align-items:flex-start;

	
}



.keyboard .kline{
	width:100%;
	max-width:768px;
	display:flex;	

	justify-content:space-around;
	align-content:center;
	align-items:center;
	height:1em;
	flex-wrap:nowrap;
	margin: 0.2em 0;

}


.keyboard .kanji{
	width:100%;
	max-width:768px;
	display:flex;
	flex-wrap: wrap;
	justify-content: center;
}


.keyboard span{
	color:#fff;
	text-shadow: 0px 0px 0.1em #000;
	padding:0;
	font-size: 1em;
}

.keyboard .kanji span{
padding:0.2em;
}




.clear{
	display:none;
	position:fixed;
	width:100%;
	height:100vh;
	height:100dvh;

	text-align:center;
	left:0;
	top:0;
	background-color:#000;
	color:#fff;
	overflow-y: auto;

}

.clear .kansei{
padding-top:30px;
font-size:1.5em;
	color:#fff;
	text-indent: 0.5em;

}

.clear .to_top{
	position:absolute;
	top:50%;
	left:50%;
	margin-top:-75px;
	margin-left:-120px;
}


.close_kotae{
display:inline;
}

.btn{
display: inline-block;
color:#000;
line-height:1em;
padding:0.2em 0.1em;
background-color:#ddd;
text-decoration:none;
margin:2%;
font-weight:bold;
}

/*
@media screen and  (min-width:768px) {
*/



@media screen and (min-aspect-ratio:10 / 10){


	
		.upper{
		width:50%;
		}
	
		ul.hints{
			width:50%;
			height:calc(100% - 1.4em);

		}

		ul.hints li {
		padding: 0 ;
		}
		
		.keyboard{
			justify-content:space-around;
			align-content: center;
			align-items: center;
			flex-direction: row-reverse;
		}
		
		.keyboard .kline{
			width:1em;
			height:100%;
			max-width:none;
			justify-content:center;
			align-content:space-around;
			align-items:center;
			flex-wrap:wrap;
			
		}

		

}

tate_check {
display: block;
width: 0;
height: 0;
opacity:1;
}
@media screen and (min-aspect-ratio:10 / 10){
tate_check {
opacity:0;
}
}