@charset "UTF-8";
#page-title{
	margin-top:-22px;
	margin-bottom:30px;
	position:relative;
	background:url(/hp-pack/img/design/page-title_bg.png) top left no-repeat;
	width:960px;
	height:264px;
}
#page-title h1{
	position:absolute;
	top:47px;
	left:25px;
}
#page-title p{
	position: absolute;
	top: 136px;
	left: 75px;
}


/*フォームエリア*/
.form-area{
	padding-bottom: 63px;
}
.form-area *{
	box-sizing: border-box;
}
.form-area h2{
	position: relative;
	font-size: 22px;
	line-height: 1;
	font-weight: bold;
	margin-bottom: 15px;
	padding: 4px 0 4px 15px;
}
.form-area h2::before{
	content: '';
	position: absolute;
	display: inline-block;
	background: #008cd6;
	width: 8px;
	border-radius: 3px;
	left: 0;
	top: 2px;
	bottom: 0px;
}
.form-area .message{
	font-size: 14px;
	margin-bottom: 20px;
}
.form-area .message .input{
	display: block;
}
.form-area .message .confirm{
	display: none;
}
.form-area .message.confirm .confirm{
	display: block;
}
.form-area .message.confirm .input{
	display: none;
}
table{
	 border: 3px solid #008cd6;
	 border-collapse: collapse;
	 font-size: 14px;
	 width: 100%;
	 margin-bottom: 25px;
	 text-align: left;
}
.form-area table th{
	line-height: 1;
	background: #008cd6;
	color: #fff;
	font-weight: bold;
	padding:11px 10px;
	width: 270px;
	border-bottom: 1px solid #fff;
}

.form-area table td{
	padding:11px 10px;
	border-right: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
	color: #222222;
}
input,textarea{
	font-size: 14px;
}
input[type="text"],
input[type="email"]{
	width: 25em;
}
input[type="tel"]{
	width: 15em;
}
input[name="郵便番号"]{
	width: 9em;
}
input[name="ご住所"]{
	width: 38em;
}
textarea{
	width: 90%;
	height: 8em;
}
/*必須　任意*/
.any,
.must{
	background: #2e6794;
	font-size: 11px;
	border-radius: 3px;
	padding: 3px 6px 4px;
	display: inline-block;
	vertical-align: middle;
	min-width: 38px;
	text-align: center;

}
.form-area .must{
	background: #fff;
	color: #f50000;
}
.message .must{
	border: 1px solid #008cd6;
	padding: 2px 10px 3px;
	margin-right: 5px;
}
th .text{
	vertical-align: middle;
}
/*前付きテキスト*/
.b-text{
	display: inline-block;
	vertical-align: middle;
	margin-right: 5px;
}
/*入力例*/
.ex{
	font-size: 12px;
	padding-top: 3px;
	color: #999;
}

td .postal-code{
	margin-bottom: 6px;
}
.form-area .free-text td{
	padding-top: 13px;
	padding-bottom: 13px;
}
.c-type label{
	display: block!important;
	margin-top: 4px;
	margin-bottom: 4px;
}
/*プライバシーリンク*/
.privacy {
	font-size: 13px;
	text-align: center;
	margin-bottom: 20px;
}
/*送信ボタン*/
button{
	background-color: transparent;
	border: none;
	cursor: pointer;
	outline: none;
	padding: 0;
	appearance: none;
}
.submit-area {
	text-align: center;
}

.submit-area button[type="submit"],
#mfp_button_send{
position: relative;
	color: #fff;
	text-align: center;
	display: inline-block;
	font-size: 16px;
	background: #5aa42f;
	color: #fff;
	text-align: center;
	display: inline-block;
	width: 360px;
	padding: 20px 10px;
	border-radius: 6px;
	transition: opacity .3s linear;
}
.submit-area button[type="submit"]::before,
#mfp_button_send::before{
	content: '';
	width: calc(100% + 2px);
	height: calc(100% + 2px);
	border: 2px solid #5aa42f;
	position: absolute;
	top: -3px;
	left: -3px;
	border-radius: 8px;
	font-weight: bold;
}
.submit-area button:hover,
#mfp_button_send:hover,
#mfp_button_cancel:hover{
	opacity: .7;
}
/*確認画面*/
#mfp_phase_confirm_inner h4{
	font-size: 21px;
	font-weight: bold;
	margin-bottom: 17px;
	text-align: center;
	color: #008cd6;
}
.mfp_buttons{
	position: relative;
}
.mfp_buttons button{
	margin: 0 5px;
}

#mfp_button_cancel{
	font-weight: bold;
	position: absolute;
	transform: translateY(-50%);
	top: 50%;
	left: 0;
	text-align: center;
	display: inline-block;
	font-size: 13px;
	background: #fff;
	border: 2px solid #999;
	display: inline-block;
	width: 180px;
	border-radius: 6px;
	transition: opacity .3s linear;
}
#mfp_button_cancel span{
	display: block;
	padding: 13px 10px;
	text-align: center;
	position: relative;
}
#mfp_button_cancel span::before{
	content:'';
	position: absolute;
	content: '';
	top: 0;
	bottom: 0;
	left:15px;
	width: 6px;
	height: 6px;
	display: inline-block;
	border-bottom: 2px solid #008cd6;
	border-right: 2px solid #008cd6;
	margin: auto;
	transform: rotate(135deg);
	transition: transform .1s linear;
}
#mfp_button_cancel span:hover::before{

	transform: rotate(135deg) translate(2px,2px);
}