@media screen and (max-width:1024px) {
	#nanpre-frame {
		width: 100vmin;
		height: 100vmin;
		margin-left: auto;
		margin-right: auto;
		text-align: center;
		letter-spacing: -6px;
		line-height: 0;
	}
}

@media screen and (min-width:1024px) {
	#nanpre-frame {
		width: 60vmin;
		height: 60vmin;
		margin-left: auto;
		margin-right: auto;
		text-align: center;
		letter-spacing: -6px;
		line-height: 0;
	}
}

#nanpre-frame>div {
	display: inline-block;
	width: 10%;
	height: 10%;
	/* padding-bottom : 10%; */
	/* 正方形にする（親要素(60%)＊自要素(50%)） */
	letter-spacing: normal;
	border: 1px #000000 solid;
	background-color: #FFFFFF;
}

#nanpre-frame>div.selected {
	background-color: yellow;
}

#nanpre-frame>div[data-row="0"] {
	border-top: 2px #000000 solid;
}

#nanpre-frame>div[data-row="3"] {
	border-top: 2px #000000 solid;
}

#nanpre-frame>div[data-row="6"] {
	border-top: 2px #000000 solid;
}

#nanpre-frame>div[data-row="8"] {
	border-bottom: 2px #000000 solid;
}

#nanpre-frame>div[data-col="0"] {
	border-left: 2px #000000 solid;
}

#nanpre-frame>div[data-col="3"] {
	border-left: 2px #000000 solid;
}

#nanpre-frame>div[data-col="6"] {
	border-left: 2px #000000 solid;
}

#nanpre-frame>div[data-col="8"] {
	border-right: 2px #000000 solid;
}

#nanpre-frame>[data-group="1"], button[data-group="1"] {
	background-color: rgba(255, 155, 155, 50);
}

#nanpre-frame>[data-group="2"], button[data-group="2"] {
	background-color: rgba(160, 255, 160, 50);
}

#nanpre-frame>[data-group="3"], button[data-group="3"] {
	background-color: rgba(160, 255, 250, 50);
}

#nanpre-frame>[data-group="4"], button[data-group="4"] {
	background-color: rgba(150, 150, 255, 50);
}

#nanpre-frame>[data-group="5"], button[data-group="5"] {
	background-color: rgba(255, 150, 255, 50);
}

#nanpre-frame>[data-group="6"], button[data-group="6"] {
	background-color: rgba(200, 150, 100, 50);
}

#nanpre-frame>[data-group="7"], button[data-group="7"] {
	background-color: rgba(100, 190, 200, 50);
}

#nanpre-frame>[data-group="8"], button[data-group="8"] {
	background-color: rgba(170, 100, 190, 50);
}

#nanpre-frame>[data-group="9"], button[data-group="9"] {
	background-color: rgba(160, 130, 150, 50);
}

[data-num="1"] {
	background: url('/img/num-1.png');
	background-size: cover;
}

[data-num="2"] {
	background: url('/img/num-2.png');
	background-size: cover;
}

[data-num="3"] {
	background: url('/img/num-3.png');
	background-size: cover;
}

[data-num="4"] {
	background: url('/img/num-4.png');
	background-size: cover;
}

[data-num="5"] {
	background: url('/img/num-5.png');
	background-size: cover;
}

[data-num="6"] {
	background: url('/img/num-6.png');
	background-size: cover;
}

[data-num="7"] {
	background: url('/img/num-7.png');
	background-size: cover;
}

[data-num="8"] {
	background: url('/img/num-8.png');
	background-size: cover;
}

[data-num="9"] {
	background: url('/img/num-9.png');
	background-size: cover;
}

#select-area {
	width: 60%;
	margin-top: 10px;
	margin-left: auto;
	margin-right: auto;
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-between;
}

#select-area-left {
	width: 100%;
	margin-right: 10px;
}

#select-area-right {
	width: 100%;
	margin-left: 10px;
}

#group-select {
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
}

#group-select>button {
	width: 30%;
	font-size: x-large;
	flex-grow: 1;
}

#num-select {
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
}

#num-select>button {
	width: 30%;
	font-size: x-large;
	flex-grow: 1;
}

#menu-area {
	width: 60%;
	margin-top: 10px;
	margin-left: auto;
	margin-right: auto;
}

#menu-select {
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-between;
}

#menu-select>button {
	width: 150px;
	font-size: x-large;
}

#nanpre-howto-title {
	margin-bottom: 0px;
	margin-top: 5px;
}

#drawer-howto {
	color: royalblue;
}

#drawer-howto:hover {
	cursor: pointer;
}

#drawer-howto:after {
	font-size: 16px;
	content: '  開く';
}

#drawer-howto.opened:after {
	font-size: 16px;
	content: '  閉じる';
}

#nanpre-howto {
	margin-top: 0px;
}