/* フォント設定 */
@font-face {
   font-family:maru;
   src: url('./fonts/KosugiMaru-Regular_min2.ttf') format("truetype");
   font-display: swap;
}

@font-face {
   font-family:mincho;
   src: url('./fonts/genkai-mincho_min2.ttf') format("truetype");
   font-display: swap;
}

body{
	margin:0;
	overflow:hidden;
}

/* トップバー */
#topbar{
	position:absolute;
	width:100%;
	height:120px;
	padding:30px 0;
	text-align:center;
	background-color:#EEE;
	font-family: mincho;
}

h1{
	font-size:40px;
}

/* ストビュー表示画面 */
#display{
	width:107vw;
	height:95vh;
	margin:0 0 0 -1vw;
}

#round{
	position:absolute;
	height:64px;
	width:100%;
	top:130px;
}

section{
	float:left;
	margin-left:20px;
	padding:12px 42px;
}

h2{
	float:right;
	margin-right:20px;
	padding:12px 30px;
}

section, h2{
	font-size:30px;
	font-family:mincho;
	background:#8258FA;
	width:216px;
	height:64px;
	border-radius:3vh;
	color:white;
	text-align:center;
}

input{
	border:none;
	outline:0;
	color:white;
	background-color:rgba(0,0,0,0);
}

/* ボトムバー */
#bottombar{
	position:absolute;
	bottom:0;
	width:100%;
	height:120px;
	padding:26px;
	text-align:center;
	background-color:#EEE;
}

#bottombar ul{
	overflow:hidden;
	padding:0 calc(50% - 330px);
}

#bottombar li{
	list-style:none;
	float:left;
}

#bottombar li:first-child{
	margin-right:60px;
}

#bottombar li button{
	font-size:30px;
	border-radius:3vh;
	width:300px;
	height:64px;
	padding:11px 30px 13px 30px;
	color:#FFF;
	border:none;
	cursor: pointer;
	font-family:maru;
	text-decoration:none;
}
	
#bottombar li:first-child button{background-color:red;}
#bottombar li:last-child button{background-color:green;}
	
#bottombar li button:hover{
	opacity:0.6;
}