@charset "utf-8";
/* CSS Document */

/*-----------------------------------------------
#1496DC
-----------------------------------------------*/

/* lead */
#contact .comment {
padding: 80px 4%;
}
#contact .comment .inner {
max-width: 640px;
margin: auto;
}
#contact .comment .text {
font-size: 1.25em;
font-weight: 500;
line-height: 1.75;
text-align: center;
}
#contact .comment .text.error {
color: #F00;
}
#contact .comment dt {
margin-top: 8%;
padding: 0.2em 1em;
font-size: 1.25em;
font-weight: 500;
text-align: center;
color: #FFF;
background: #1496DC;
border-radius: 3em;
}
#contact .comment .tel {
margin-top: 0.25em;
font-family: "Bebas Neue", cursive;
font-size: 2.75em;
font-weight: 700;
line-height: 1.25;
text-align: center;
color: #1496DC;
}
#contact .comment .tel strong {
font-size: 1.5em;
}
#contact .comment .mail {
margin-top: 2.5%;
font-size: 0.925em;
line-height: 1.75;
text-align: justify;
}
@media screen and (max-width: 767px) {
	#contact .comment {
	padding: 8% 4%;
	}
	#contact .comment .text {
	font-size: 1em;
	}
	#contact .comment dt {
	font-size: 1em;
	}
	#contact .comment .tel {
	font-size: 2em;
	}
}

/* form */
#contact .form {
padding: 80px 4%;
background: #F9F9F9;
}
#contact .form .inner {
max-width: 1080px;
margin: auto;
}
#contact .form table {
width: 100%;
font-size: 1.1em;
}
#contact .form th {
width: 16em;
padding: 1.25em 0.5em 1em 0;
font-weight: 500;
text-align: right;
}
#contact .form td {
padding: 1em 0 1em 0.5em;
}
#contact .form th span {
display: block;
float: right;
margin-left: 0.75em;
padding: 0 0.65em 0.25em 0.65em;
font-size: 0.85em;
font-weight: 400;
color: #FFF;
background: #DC2D1E;
border-radius: 1em;
}
#contact .form .error {
display: block;
margin-top: 0.5em;
font-weight: 500;
color: #DC2D1E;
}
#contact .form .post {
width: 100%;
max-width: 10em;
}
#contact .form .name,
#contact .form .kana,
#contact .form .tel {
width: 100%;
max-width: 25em;
}
#contact .form .mail,
#contact .form .address,
#contact .form .message {
width: 100%;
}
#contact .form .address {
margin-top: 0.5em;
}
#contact .form .message {
height: 15em;
}
#contact .form .subject,
#contact .form .reply {
display: flex;
}
#contact .form .subject li:not(:first-child),
#contact .form .reply li:not(:first-child) {
margin-left: 1em;
}
#contact .form .privacy {
margin-top: 4%;
font-size: 1.15em;
font-weight: 500;
text-align: center;
}
#contact .form .privacy a {
color: #1496DC;
text-decoration: underline;
}
@media screen and (max-width: 767px) {
	#contact .form {
	padding: 8% 0;
	}
	#contact .form table {
	font-size: 1em;
	}
	#contact .form th {
	display: block;
	width: 100%;
	padding: 0.5em 4%;
	text-align: left;
	color: #FFF;
	background: #37A6E1;
	}
	#contact .form tr:not(:first-child) th {
	margin-top: 8%;
	}
	#contact .form td {
	display: block;
	margin-top: 4%;
	padding: 0 4%;
	}
	#contact .form .privacy {
	margin-top: 8%;
	font-size: 1em;
	}
}

[type=submit] {
padding: 0.75em;
font-size: 1.25em;
font-weight: 700;
color: #1496DC;
background: #FFF;
border: 1px solid #1496DC;
border-radius: 3em;
}
[type=submit].modify {
color: #555;
background: #FFF;
border: 1px solid #555;
}
[type=submit]:hover {
color: #FFF;
background: #1496DC;
}
[type=submit]:hover.modify {
color: #FFF;
background: #555;
}
@media screen and (max-width: 767px) {
	[type=submit] {
	margin-top: 8%;
	font-size: 1.1em;
	}
	[type=submit].modify {
	margin-top: 4%;
	}
}


/* confirm */
#contact .confirm {
padding: 80px 4%;
background: #F9F9F9;
}
#contact .confirm .inner {
max-width: 1080px;
margin: auto;
}
#contact .confirm .text {
font-size: 1.25em;
font-weight: 500;
line-height: 1.75;
text-align: center;
}
#contact .confirm table {
width: 100%;
margin-top: 60px;
font-size: 1.1em;
}
#contact .confirm th {
width: 16em;
padding: 1em 0.5em 1em 0;
font-weight: 500;
text-align: right;
}
#contact .confirm td {
padding: 1em 0 1em 0.5em;
}
#contact .confirm tr:not(:first-child) {
border-top: 1px dotted #999;
}
@media screen and (max-width: 767px) {
	#contact .confirm {
	padding: 8% 0;
	background: none;
	}
	#contact .confirm .text {
	font-size: 1em;
	}
	#contact .confirm table {
	margin-top: 8%;
	font-size: 1em;
	}
	#contact .confirm th {
	display: block;
	width: 100%;
	padding: 0.5em 4%;
	text-align: left;
	color: #FFF;
	background: #37A6E1;
	}
	#contact .confirm tr:not(:first-child) th {
	margin-top: 8%;
	}
	#contact .confirm td {
	display: block;
	margin-top: 4%;
	padding: 0 4%;
	}
	#contact .confirm tr:not(:first-child) {
	border-top: none;
	}
}


/* thanks */
#contact .thanks {
padding: 80px 4%;
background: #F9F9F9;
}
#contact .thanks .inner {
max-width: 1080px;
margin: auto;
}
#contact .thanks .text {
font-size: 1.25em;
font-weight: 500;
line-height: 1.75;
text-align: center;
}
#contact .thanks .button a {
display: block;
max-width: 13em;
margin: auto;
margin-top: 2em;
padding: 0.75em;
font-size: 1.375em;
font-weight: 700;
text-align: center;
color: #1496DC;
border: 2px solid #1496DC;
border-radius: 3em;
}
#contact .thanks .button a:hover {
color: #FFF;
background: #1496DC;
}
@media screen and (max-width: 767px) {
	#contact .thanks {
	padding: 8% 4%;
	}
	#contact .thanks .text {
	font-size: 1em;
	}
	#contact .thanks .button a {
	max-width: 15em;
	margin-top: 8%;
	font-size: 1em;
	}
}