/*
@font-face {
  font-family: 'Main';
  src: url('ZenKakuGothicAntique-Regular.ttf') format('truetype');
}
body{
  font-family: "Main";
}
*/
#star{
font-size: 32px;
}
img.tab_button{
	vertical-align: middle;
	width:209px;
	height:149px;
}
button.tab_button{
	vertical-align: middle;
	width:200px;
	height:100px;
}
.tab_button:hover{
	opacity:0.5;
	cursor: pointer;
}
.tab_button:active{
	position: relative;
	top: 3px;
}
.button_yellow{
	border: solid 3px #E0E060;
	background:radial-gradient(#D0D000, #FFFFC0);
}
.button_green{
	border: solid 3px #50FF60;
	background:radial-gradient(#00FF00, #A0FFC0);
}
.button_blue{
	border: solid 3px #80A0FF;
	background:radial-gradient(#0040FF, #A0C0FF);
}
.button_red{
	border: solid 3px #FF0000;
	background:radial-gradient(#FF0000, #FFA0C0);
}

.qz>input{
    width:100px;
    text-align: center;
}
.qz{
    width:120px;
    text-align: center;
    height: 120px;
}
.yazirusi{
    text-align: center;
    background: #FFFF00;
    width:120px;
    height: 120px;
    font-size: 48px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.s{
    background: #808080;
}
.m{
    background: #0000FF;
}
.r{
    background: #FF0000;
}
body{
color: #000000;
background: #E0E0E0;
}
.title{
text-align:center;
color: #FFFFFF;
background: #202020;
border-top: 1px solid #333;
padding: 1em 0px;
}
.main{
color: #000000;
background: #FFFFFF;
border-radius: 10px;
padding: 1em 0px;
margin: 1em 0px;
}
.tab{
padding: 1em 0px;
text-align:center;
color: #000000;
background: #0080FF;
border-radius: 10px;
padding: 1em 0px;
}

.text_frame{
	padding:0 1em;
	border-top: 1px solid #333;
	margin:1em 0;
}
div:not(.title) img{
width: 50%;
}
.index{
	width: 50%;
	color: #FFFFFF;
	background: #202020;
	padding: 1em 0px;
	margin: 1em 0px;
}
.index a{
	color:#B0B0FF;
}
.rd{
	color: #ff0000;
}
header{
	text-align:center;
	color: #FFFFFF;
	background: #101010;
}
header button{
	width: 19%;
	height: 50px;
	background: #FFFFFF00;
	color: #FFFFFF;
	margin: 1em 0px;
	vertical-align: middle;
}
header button:hover{
	background: #FFFFFF50;
}
.ct{
	text-align:center;
}
.trick{
	width: 50%;
	background: #FFFFFF;
}
@media (prefers-color-scheme: dark) {
  	.trick{
	width: 50%;
	background: #000000;
	}
}