@charset "UTF-8";
/* otoiawase.css */

/* ===========================
.contact-intro
============================== */
#contact-area h2 {
	font-size: 18px;
	font-weight: normal;
	letter-spacing: 0.2em;
	text-align: center;
}
.contact-intro {
	margin: 30px 0 0;
	background: #f0f0f0;
	display: flex;
	justify-content: center;
}
.contact-intro p {
	padding: 20px;
	font-size: 14px;
	line-height: 1.7;
	letter-spacing: 0.1em;
}
.contact-intro p .caution {
	color: #e10000;
}
@media screen and (min-width: 48em) { /* 768px md */
	#contact-area h2 {
		font-size: 24px;
	}
	.contact-intro {
		margin: 50px 0 0;
	}
	.contact-intro p {
		padding: 50px;
		font-size: 16px;
		line-height: 2;
	}
}

/* ===========================
#form-area
============================== */
#form-area {
	margin: 30px 0 70px;
}
.select-content {
	display: none;
}
.select-content.is-active {
	display: block;
}
.input-area {
	margin: 0 0 10px;
}
.item {
	display: inline-block;
	padding: 10px 0;
	font-size: 14px;
	letter-spacing: 0.1em;
	line-height: 1.7;
}
.required {
	display: inline-block;
	margin: 0 0 0 0.6em;
	padding: 1px 2px 2px;
	font-size: 10px;
	line-height: 1;
	color: #e10000;
	vertical-align: 1px;
	border: #F08080 1px solid;
}
.input-area input,
.input-area textarea,
.input-area select {
	width: 100%;
	box-sizing: border-box;
	padding: 0.7em 0.8em;
	font-size: 14px;
	line-height: 1.7;
	color: #323232;
	outline: none;
	border: #e3e3e3 1px solid;
	border-radius: 5px;
	background: #fff;
}
.input-area select {
	cursor: pointer;
	appearance: none;
}
.input-area input:focus,
.input-area textarea:focus,
.input-area select:focus {
	background: #F2F5F9;
}
.input-area .field {
	position: relative;
	width: 100%;
}
.input-area .field.select-box::before {
	content: '▼';
	display: block;
	position: absolute;
	top: calc(50% - 5px);
	right: 18px;
	font-size: 10px;
	color: #646464;
	pointer-events: none;
	z-index: 1;
}
.message {
	display: inline-block;
	margin: 0 0 0 0.5em;
	font-size: 10px;
	letter-spacing: 0.1em;
	color: #e10000;
}
#submit-msg.message {
	width: 100%;
	margin: 15px 0 0;
	text-align: center;
}
.input-area .is-error {
	background: #fef7f7;
	border: #F08080 1px solid;
}
.privacy-note {
	padding: 20px 0 30px;
	text-align: center;
}
.privacy-note p {
	display: inline-block;
	font-size: 14px;
	letter-spacing: 0.1em;
	line-height: 2;
	text-align: left;
}
.privacy-note p a {
	color: #323232;
}
.privacy-note p a:hover {
	color: #004190;
}
.agreement-area {
	text-align: center;
}
.agreement-area .field {
	width: auto;
}
#agreement {
	width: auto;
	margin: 0 0 0 0.6em;
	transform: scale(1.2);
}
.conv-btn {
	margin: 45px 0 0;
	text-align: center;
}
.conv-btn button {
	max-width: 340px;
	width: 100%;
	padding: 10px 0;
	outline: none;
	font-size: 16px;
	line-height: 2;
	letter-spacing: 0.2em;
	text-align: center;
	color: #fff;
	background: linear-gradient(90deg, #fff 0%, #fff 33.3%, #e10000 66.6%, #e10000 100%);
	background-size:300%;
	background-position:99% 0;
	border: #e10000 1px solid;
	cursor: pointer;
	transition: all 0.3s;
}
.conv-btn button:hover {
	color: #e10000;
	background-position:0% 0;
}
@media screen and (min-width: 48em) { /* 768px md */
	#form-area {
		margin: 60px 0 140px;
	}
	.input-area {
		margin: 0 0 20px;
	}
}

/* ===========================
確認画面
============================== */
#formWrap {
	margin-top: 40px;
}
#formWrap h2 {
	text-align: center;
	color: #00aeeb;
}
.otoiawase-copy {
	font-size: 16px;
	letter-spacing: 0.2em;
	text-align: center;
}
.kakunin-form {
	margin: 0 0 70px;
}
table.formTable{
	width:100%;
	margin:40px auto;
	border-collapse:collapse;
}
table.formTable td,table.formTable th{
	border:1px solid #ccc;
	padding:10px;
}
table.formTable th{
	width:30%;
	font-weight:normal;
	background:#efefef;
	text-align:left;
}
p.error_messe{
	margin:5px 0;
	color:red;
}
.modoru-btn,
.submit-btn {
	width: 140px;
	margin: 0 10px;
	box-sizing: border-box;
	padding: 15px;
	outline: none;
	font: inherit;
	font-size: 14px;
	color: inherit;
	background: none;
	cursor: pointer;
}
.modoru-btn {
	border: #cacaca 1px solid;
	transition: all 0.3s;
}
.modoru-btn:hover {
	background: #cacaca;
}
.submit-btn {
	color: #fff;
	border: #e10000;
	background: #e10000;
	transition: all 0.3s;
}
.submit-btn:hover {
	color: #e10000;
	border: #e10000;
	background: #FAD9D9;
}
@media screen and (min-width: 35.5em) { /* 568px sm */
}
@media screen and (min-width: 48em) { /* 768px md */
	table.formTable{
		margin:40px auto 70px;
	}
	.otoiawase-copy {
		font-size: 24px;
	}
	.kakunin-form {
		margin: 0 0 140px;
	}
	.modoru-btn,
	.submit-btn {
		width: 340px;
		font-size: 16px;
	}
}
@media screen and (min-width: 64em) { /* 1024px lg */
}
@media screen and (min-width: 80em) { /* 1280px xl */
}
@media screen and (min-width: 120em) { /* 1920px xxl */
}

/* ===========================
thanks.html
============================== */
.thanks-area {
	max-width: 900px;
	width: 94%;
	margin: 0 auto 70px;
}
.thanks-area h2 {
	font-size: 20px;
	font-weight: normal;
	line-height: 1.7;
	letter-spacing: 0.2em;
	text-align: center;
}
.thanks-area p {
	margin: 20px 0 0;
	font-size: 14px;
	line-height: 2;
	letter-spacing: 0.1em;
}
@media screen and (min-width: 48em) { /* 768px md */
	.thanks-area {
		margin: 0 auto 140px;
	}
	.thanks-area h2 {
		font-size: 24px;
		line-height: 2;
	}
	.thanks-area p {
		margin: 50px 0 0;
		font-size: 16px;
	}
}