/* フォント設定 */
@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{
	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;
	padding:3vw;
	font-family:maru;
}

/* ボトムバー */
#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.return{	
	margin:0 10vw;
}

#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:blue;}
#bottombar li:last-child button{background-color:green;}
	
#bottombar li button:hover{
	opacity:0.6;
}

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

#bottombar li.return button{	
	width:65vw;
}

/* 入力フォーム */
form, #sendTitle, #sendOK{
	font-size:4vw;
}

input.link{
	width:60vw;
	height:6vw;
	margin:2.5vw;
}

input.time{
	width:44vw;
	height:6vw;
	margin:2.5vw;
}

input.sendButton{
	border-radius:9vw;
	font-size:5vw;
	width:25vw;
	height:10vw;
	margin-top:3vw;
	padding:0 1vw;
	color:#FFF;
	border:none;
	cursor: pointer;
	text-decoration:none;
	background:#777;
}

input.sendButton:hover{
	opacity:0.6;
}