@charset "UTF-8";

html{
  font-size:62.5%;
}

body{
	font-size:1.4rem;
	font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
	height: 100%;
	margin: 0% 0% 0% 0%;
    display: flex;
    flex-direction: column;
	background-color: #FCF8F8;
}

#main{
	display: flex;
    flex-direction: column;
    height: 100%;
	background-color: #ffffff;
	max-width: 720px;
}

@media screen and (orientation: landscape) {
	#main{
		margin: 0% 20% 0% 20%;
		border-left: 1px solid #F46F2B;
		border-right: 1px solid #F46F2B;
	}
}

#logo{
	text-align: left;
	width: 234px;
	max-width: 50%;
	margin-top: 1rem;
	margin-left: 1.5rem;
	margin-bottom: 2rem;
}

#contents{
	display: flex;
    flex-direction: column;
	height: 100%;
	padding-left: 10%;
	padding-right: 10%;
	padding-bottom: 5%;
	
	background-color: #ffffff;
}

#title{
	text-align: center;
	font-size: 2rem;
	font-weight: bold;
}

#description{
	font-size: 1.5rem;
}

#forms{
	text-align: center;
}
.form{
	display: flex;
	flex-direction: column;
	text-align: left;
	font-size: 1.5rem;
	margin-bottom: 1rem;
}

.input{
	font-size: 2rem;
}

#notice{
    text-align: left;
    font-size: 1.2rem;
}

#genButton{
	width: 15rem;
	max-width: 200px;
	border-radius:5px;
	padding: 5px 2px 5px 2px;
	font-size: 1.5rem;
	color: #ffffff;
	background-color: F46F2B;
	border: none;
    -webkit-appearance: none;
}

#genButton:hover{
	background-color: F48D60;
}
#qrcode{
	margin: 20px 0px 20px 0px;
	flex-grow: 1;
    -webkit-appearance: none;
}