/* フォント設定 */
@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:18vw;
	padding:4.2vw 0;
	text-align:center;
	background-color:#EEE;
	font-family: mincho;
}

h1{
	transform: scale(0.8, 1);
	font-size:7.2vw;
}

/* ストビュー表示画面 */
#display{
	width:100vw;
	height:97vh;
	margin:0;
}

#round{
	position:absolute;
	height:10.4vw;
	width:100%;
	top:19vw;
}

section{
	float:left;
	margin-left:2vw;
	padding:1.5vw 6.5vw;
}

h2{
	float:right;
	margin-right:2vw;
	padding:1.5vw 3.5vw;
}

section, h2{
	font-size:5vw;
	font-family:mincho;
	background:#8258FA;
	width:34.5vw;
	height:10.4vw;
	border-radius:7vw;
	color:white;
	transform: scale(1, 1.1);
	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:22vw;
	padding:4vw 0;
	text-align:center;
	background-color:#EEE;
}

#bottombar ul{
	overflow:hidden;
	padding-left:7vw;
}

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

#bottombar li:first-child{	
	margin-right:4.8vw;
}

#bottombar li button{
	border-radius:9vw;
	font-size:6vw;
	width:40.5vw;
	height:14vw;
	padding:2.7vw 1vw;
	color:#FFF;
	border:none;
	cursor: pointer;
	font-family:maru;
	text-decoration:none;
}
	
#bottombar li:first-child button{background-color:#ff8c00;}
#bottombar li:last-child button{background-color:green;}
	
#bottombar li button:hover{
	opacity:0.6;
}

#bottombar li button p{
	transform: scale(0.8, 1);
}