@charset "utf-8";
/* CSS Document */
#main {
	margin-top: 8rem;
	height: 25rem;
	background: -webkit-linear-gradient(top left, #c7cb8d, #44aaa9, #013973);
	background: -o-linear-gradient(top left, #c7cb8d, #44aaa9, #013973);
	background: linear-gradient(to bottom right, #c7cb8d, #44aaa9, #013973);
}
#main .inner-s {position: relative;height: 100%;}
#main h1 {
	position: absolute;
	left: 50%;
	bottom: 50%;
	transform: translate(-50%,50%);
	color: #fff;
	font-size: 3.5rem;
}
#main figure {
	position: absolute;
	top: 1.5rem;
	right: 2rem;
	width: 25rem;
}
@media only screen and ( max-width : 896px ) {
	#main {height: 18rem;margin-top: 6rem;}
	#main .inner-s {max-width: 40rem;}
	#main h1 {left: 2rem;transform: translate(0,50%);font-size: 2.5rem;}
	#main figure {width: 15rem;top: 2rem;}
}
@media only screen and ( max-width : 500px ) {
	#main {height: 15rem;}
	#main h1 {font-size: 2rem;}
	#main figure {width: 13rem;}
}
/* ------------------------------------------------------------

　   CONTACT

--------------------------------------------------------------*/
#contact {margin-bottom: 5rem;}
#contact .title {color: #fff;}
#contact h4 {margin-bottom: 4rem;text-align: center;}
#contact form {padding: 2rem 0;background: #f6fff2;}
#contact table {
	border-collapse: inherit;
	border-spacing: 2rem;
	width: 100%;
	margin-bottom: 4.5rem;
}
#contact th {
	overflow: hidden;
	position: relative;
	width: 17rem;
	margin-bottom: 2rem;
	text-align: right;
	letter-spacing: .188em;
	vertical-align: middle;	
}
#contact td {
	border: .1rem solid #44aaa9;
	border-radius: 1rem;
	overflow: hidden;
	background: #fff;
	padding: 1rem;
}
#contact input[type="text"],
#contact input[type="email"],
#contact input[type="tel"] {border: none;width: 100%;height: 4rem;}
#contact input:focus {outline: none;}
#contact textarea {width: 100%;background: #fff;resize: vertical;}
#contact h3 {text-align: center;font-size: 1.8rem;}
#contact h3:nth-child(1) {margin-bottom: 4rem;}
#contact p {text-align: center;margin-bottom: 4rem;}
#contact p span {text-decoration: underline;}
::placeholder {letter-spacing: .2em;color: #AFAFAF;}
.check {display: none;}
.check + label {
	display: table;
	font-size: 1.6rem;
    margin: 0 auto 3rem;
    padding-left: 3.5rem;
    cursor: pointer;
    position: relative;
}
.check + label::before {
	content: "";
	position: absolute;
	left: 0;
	bottom: 50%;
	transform: translate(0,50%);
	border: .1rem solid #44aaa9;
	border-radius: .3rem;
    width: 2.3rem;
    height: 2.3rem;
	background: #fff;
}
.check:checked + label::before {background: #fff;}
.check:checked + label::after {
	content: "";
    border-radius: 0;
	display: block;
	position: absolute;
	top: .3rem;
	left: .7rem;
	width: .9rem;
	height: .4rem;
	border-left: .3rem solid #44aaa9;
	border-bottom: .3rem solid #44aaa9;
	transform: rotate(-45deg);
}
#contact input[type="submit"] {
	display: block;
	position: relative;
	transition: .5s;
	border: .3rem solid #44aaa9;
	border-radius: 1rem;
	max-width: 37.7rem;
	width: 100%;
	margin: 0 auto;
	padding: 1.5rem 0;
	background: #fff;
	color: #44aaa9;
	font-size: 2.8rem;
}
#contact input[type="submit"]:hover {background: #44aaa9;color: #fff;box-shadow: 1rem 1rem 0 rgb(78,78,78);}
@media only screen and ( max-width : 896px ) {
	#contact form {padding: 2rem;}
	#contact table {border-spacing: 0;margin-bottom: 0;}
	#contact th {display: block;width: 100%;text-align: left;}
	#contact td {display: block;width: 100%;margin-bottom: 2rem;}
	#contact h3 {font-size: 1.6rem;text-align: left;}
	#contact h3:nth-child(1) {margin-bottom: 2rem;}
	#contact p {text-align: left;}
	#contact input[type="submit"] {font-size: 2rem;}
}
/* ------------------------------------------------------------

　   ERROR

--------------------------------------------------------------*/
.error .inner-s {margin-bottom: 5rem;text-align: center;}
.error h4 {margin-bottom: 6rem;text-align: center;line-height: 1.8;}
.error .errorbox {margin-bottom: 8rem;}
.error .error_messe {color: red;text-align: center;}
.error input[type="button"] {
	border: .3rem solid #44aaa9;
    border-radius: 1rem;
    max-width: 25rem;
	width: 100%;
    padding: 1.5rem 0rem;
    background: #fff;
	color: #44aaa9;
    font-size: 2rem;
    text-align: center;
	transition: .5s;
}
.error input[type="button"]:hover {background: #44aaa9;color: #fff;box-shadow: 1rem 1rem 0 rgb(78,78,78);}
@media only screen and ( max-width : 896px ) {
	.error h4 {margin-bottom: 4rem;font-size: 1.6rem;}
	.error .errorbox {margin-bottom: 4rem;}
}
/* ------------------------------------------------------------

　   THANKS

--------------------------------------------------------------*/
#thanks {margin-bottom: 5rem;}
#thanks p {margin-bottom: 6rem;text-align: center;}
#thanks a {
	border: .3rem solid #44aaa9;
    border-radius: 1rem;
    max-width: 25rem;
    margin: 0 auto;
    padding: 1.5rem 0rem;
    background: #fff;
    font-size: 2rem;
    text-align: center;
}
#thanks a:hover {background: #44aaa9;color: #fff;box-shadow: 1rem 1rem 0 rgb(78,78,78);}