@charset "utf-8";
/* CSS Document */
#h1-container{
	background-color: #006e87;
	padding: 1rem 0;
}
#h1-container h1{
	font-size: 1.4rem;
	color: #fff;
	text-align: center;
	width: 100%;
	margin: 0;
}
.lead{
	font-size: 1.1rem;
	text-align: left;
	width: 100%;
	padding: 0 1rem;
	margin-bottom: 1.5rem;
}
/* =========================================
   Layout
========================================= */
#form{
	max-width: 100%;
	padding: 0.5rem;
	margin: 0 auto;
}
.form-group{
	font-size: 1.2rem;
	line-height: 4rem;
}
label{
	display: flex;
}
.req{
	color: red;
	margin-left: 1rem;
}
.any{
	color: blue;
	margin-left: 1rem;
}
.form-control{
	width:100%;
	height: 8vh;
	box-sizing:border-box;
}
textarea{
	width: 100%;
	min-height: 180px;
	padding: 1rem;
	box-sizing: border-box;
	font-size: 16px;
	resize: vertical;
}
#privacy,#thanks-text{
	margin: 0 auto 3rem;
	padding: 1rem;
}

/* スマフォで拡大させない設定*/
input,textarea{
	font-size: 16px!important;
	padding-left: 1rem;
} 

/* 必須を目立たせる*/
select:required,input:required{
	background-color: rgba(0,160,233,0.1);
}
select:valid,input:valid{
	background: transparent;
}
/* 確認・リセット*/
.btn-area{
	display: flex;
	justify-content: space-around;
	margin: 2rem 0;
}
input[type="submit"]{
	display: inline-block;
	width: 100px;
	padding: 0.5em 1em;
	background: #006e87;
	color: #FFF;
	border-radius: 4px;
	box-shadow: 0px 0px 0px 5px #006e87;
	border: dashed 1px #FFF;
}
input[type="submit"]:hover,input[type="reset"]:hover{
	background: white;
	color: #006e87;
	border: dashed 1px #006e87;
}
input[type="reset"]{
	display: inline-block;
	width: 100px;
	padding: 0.5em 1em;
	background: #dcdddd;
	border-radius: 4px;
	box-shadow: 0px 0px 0px 5px #dcdddd;
	border: dashed 1px #FFF;
}
/*タブレット表示設定*/
@media (min-width: 768px){
/* =========================================
   Layout
========================================= */
	
	#form,#privacy,#thanks-text{
		max-width: 980px;
	}	
	.lead{
		text-align: center;
	}
	input[type="submit"],input[type="reset"]{
		width: 250px;
	
	
}
}