@charset "UTF-8";

/* ===============================
	style
=============================== */
section {
	background-color: #e9e8e6;
	margin:3em auto;
	padding:5em 0;
}

section h2 {
	font-size:2.2rem;
	text-align: center;
	margin-bottom:2em;
}

section p {
	text-align: center;
	margin-top:4em;
}

section p a {
	text-decoration: underline;
}

#contactForm {
	padding:0;
}

#login form {
	width: 50%;
	margin:0 auto;
}

.form-item {
	width: 100%;
	margin-bottom: 1em;
}

.form-item input {
	background: #FFFFFF;
	border: none;
	color: #666;
	height: 50px;
	transition: border-color 0.3s;
	width: 100%;
	padding:0 2%;
	border-radius: 5px;
}

.form-item input:focus {
    border:solid 1px #068f63;
}

.button-panel {
  margin: 3em 0 0;
  width: 100%;
}

.linkbtn.signin {
	display: block;	
	width:80%;
	margin:0 auto;
	color: #FFFFFF;
	font-size:1.7rem;
	background-color: #383322;
	text-align: center;
	padding:0.5em 0;
	border:none;
}

.linkbtn.signin:hover {
	background-color: #044e2f;
	color: #FFFFFF;
}

/* ===============================
	PC / Tab Style
=============================== */
@media print , screen and (min-width: 481px) {	
		
}

/* ===============================
	Mobile Style
=============================== */
@media screen and (max-width: 480px) {
	
#top-image .ttlfont h1 {
	padding-left:0;
}
	
section {
 	width:90%;
	padding:2em 2em;
}
	
section h2 {
	font-size:1.4rem;
	margin-bottom:2em;
}

section p {
	text-align: left;
	margin-top:3em;
}
	
#login form {
	width: 100%;
}

.form-item {
	width: 100%;
	margin-bottom: 1em;
}

.form-item input {
	height: 40px;
	width: 100%;
}
	
.linkbtn.signin {
	width:80%;
	font-size:1rem;
	padding:0.5em 0;
}
	
	
}