@charset "UTF-8";
body{
	background: #f3f3f3;
}
.section-offset{
	padding-top: 8vw;
}
h2{font-size: 5vw;
	position: relative;
	display: inline-block;
	font-family: 'Raleway';
}
.text{
position: relative;
z-index: 9;
}
#contact{
	background: #f3f3f3;
	margin-bottom: 0;
}
.contact-wrap{
	padding:0 20%;
}
.contact-wrap2{
	padding:0 10%;
	line-height: 2.0rem;
}
label{
	font-size: 1.4rem;
    line-height: 2em;
    position: relative;
    display: block;
    max-width: 100%;
    color: #221f1f;
    cursor: pointer;
    padding: 0 0.8vw;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    white-space: nowrap;
}
input,select,textarea{
	width: 100%;
	color: #221f1f;
	line-height: normal;
	outline: 0;
	vertical-align: middle;
	width: 100%;
	height: 45px;
	padding: 3px 18px;
	background: #fff;
	border-radius: 0;
	border: 0;
	position: relative;
	z-index: 1;
	transition-property: box-shadow;
	font-size: 1.4rem;
	font-weight: 300;
	box-sizing: border-box;
	font-family: 'Roboto', sans-serif;
}
select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border-radius: 0;
}
textarea{
	height: 90px;
    padding-top: 12px;
    padding-bottom: 12px;
    resize: none;
}
.selectWrap{
  width: 100%;
  position: relative;
  display: inline-block;
}
.selectWrap::after {
  content: '';
  width: 6px;
  height: 6px;
  border: 0px;
  border-bottom: solid 2px #221f1f;
  border-right: solid 2px #221f1f;
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  position: absolute;
  top: 50%;
  right: 10px;
	margin-top: -4px;
	z-index: 5;
}
#contact .col{
	margin-bottom: 2vw;
}
#contact input[type="submit"],
.submit_back,
.topButton{
	display: inline-block;
	background: #FF5B46;
	text-decoration: none;
	color: #fff;
	padding: 0.8vw 1.5vw;
	transition: 0.5s;
	opacity: 1;
	width: auto;
	height: auto;
	border: 2px solid#FF5B46;
	margin: 0 0.4vw;
	cursor: pointer;
	font-size: 1.4rem;
	font-weight: 300;
	vertical-align: middle;
	line-height: inherit;
}
#contact input[type="submit"]:disabled{
	background: #cfcfcf;
	border: 2px solid#cfcfcf;
	cursor: default;
}
#contact a:hover{
	opacity: 0.5;
}
#contact h2 span::after {
	content: attr(data-txt);
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	color: #1a1e24;
	clip: rect(0,0,200px,0);
	transition: clip 1.5s linear;
}
#contact h2 span:hover::after {
	clip: rect(0,800px,200px,0);
}

.submit_area{
	text-align: center;
}
.submit_back,
.topButton{
	background: #fff;
	color: #FF5B46;
}
.topButton{
margin-top: 2vw;
}
.text-area{
	margin-bottom: 2vw;
}
.text-box{
	padding: 0.2vw 0.8vw 0;
}
.formError .formErrorContent{
	font-size: 0.8vw;
	box-sizing: border-box;
	line-height: 1.8;
}

.text{
	animation: colorAnimation 15s infinite;
}
.contact_notice{
	line-height: initial;
	font-size: 14px;
	background: #fffbd9;
	padding: 10px 20px;
	border: 1px solid #FFEB3B;
}

.formError.inline{
	display: inline-block !important;
}

@keyframes colorAnimation {
	0% {
		color: #0e243d;
	}
	20% {
		color: #ff5b46;
	}
	40% {
		color: #4863ff;
	}
	60% {
		color: #33db92;
	}
	80% {
		color: #c62edb;
	}
	100% {
		color: #0e243d;
	}
}
/* 1300px以下 */
@media screen and (max-width: 1300px) {
	.contact-wrap{
		padding: 0 10%;
	}
	label,
	input, select, textarea{
		font-size: 1.6rem;
	}
	.text-box{
		font-size: 2.0rem;
		padding: 5px 10px;
	}
	#contact input[type="submit"], .submit_back, .topButton{
		font-size: 2.0rem;
	}
}

/* 1000px以下 */
@media screen and (max-width: 1000px) {
	.contact-wrap{
		padding: 0;
	}
	.section-offset{
		padding-top: 70px;
	}
	#contact input[type="submit"], .submit_back, .topButton{
		font-size: 1.6rem;
	}
	#contact{
		margin-bottom: 20px;
	}
	.formError .formErrorContent{
		font-size: 1.1rem;
	}
}
@media screen and (max-width: 500px) {
#contact .col{
	margin-bottom: 10px;
}
.submit_area{
	margin-top: 20px;
}
.contact-wrap2{
	padding:0;
}
#contact input[type="submit"], .submit_back{
	padding: 5px 25px;
}
label{
	font-size: 1.4rem;
}
.text-box{
	padding: 0 10px 15px 10px;
}
#confirm label{
	color: #ababab;
}
}