/* ---------------------------------------------------------------
start contact CSS
--------------------------------------------------------------- */

/* --------------- contact --------------- */

#wrap.sub.contact {
	background-image: url(../img/contact/bg_contact.png);
	background-repeat: no-repeat;
	background-size: 879px auto;
	background-position: -320px 607px;
}

.contact .bg_pagettl {
	background-image: url(../img/contact/bg_pagettl.jpg);
	background-repeat: no-repeat;
}

.contact .bg_pagettl .pagettl .en {
	width: 200px;
}

.contact .bg_pagettl .pagettl .jp {
	color: #fff;
}

.col_contact {
	width: 100%;
	max-width: 780px;
	margin: 0 auto;
	padding: 0;
}

.lead_contact1 {
	margin:  0 0 15px;
	padding: 0;
	color: #666;
	line-height: 2;
	text-align: center;
}

.lead_contact_require {
	max-width: 350px;
	margin: 0 auto;
	padding: 0;
	color: #666;
	line-height: 2;
	text-align: center;
}

.contact .require { color: #ff2600; }

ul.flow_contact {
	width: 100%;
	max-width: 660px;
	margin: 0 auto;
	padding: 40px 0;
	list-style: none;
	display: flex;
	justify-content: space-between;
}

ul.flow_contact li {
	width: calc( ( 100% - 40px )/3 );
	height: 52px;
	margin: 0;
	padding: 11px 0 0;
	color: #666;
	text-align: center;
	border-top: solid 1px #003067;
	border-bottom: solid 1px #003067;
	box-sizing: border-box;
	position: relative;
	z-index: 0;
}

ul.flow_contact li:first-child { border-left: solid 1px #003067; }
ul.flow_contact li:last-child { border-right: solid 1px #003067; }

ul.flow_contact li .arrow {
	width: 10px;
	height: 100%;
	margin: 0;
	padding: 0;
	position: absolute;
	top: 0;
}

ul.flow_contact li .arrow.left { left: 0; }
ul.flow_contact li .arrow.right { left: 100%; }

ul.flow_contact li .arrow:before {
	content: "";
	margin: 0;
	padding: 0;
	border-left: solid 10px #003067;
	border-top: solid 26px transparent;
	border-bottom: solid 26px transparent;
	position: absolute;
	top: -1px;
	right: 0;
}

ul.flow_contact li .arrow:after {
	content: "";
	margin: 0;
	padding: 0;
	border-left: solid 10px #fff;
	border-top: solid 26px transparent;
	border-bottom: solid 26px transparent;
	position: absolute;
	top: -1px;
	right: 1px;
}

ul.flow_contact li.current {
	color: #fff;
	background-color: #003067;
}

ul.flow_contact li.current .arrow.right:after { border-left-color: #003067; }

.col_form_contact {
	margin: 0;
	padding: 14px 0;
	border-top: dotted 1px #bfbfbf;
}

.col_form_contact dl {
	width: 100%;
	margin: 0;
	padding: 18px 0;
	border-bottom: dotted 1px #bfbfbf;
	display: flex;
}

.col_form_contact dl:last-child { padding-bottom: 50px; }

.col_form_contact dl dt {
	width: 180px;
	margin: 0;
	padding: 0 10px;
	box-sizing: border-box;
}

.col_form_contact dl dd {
	width: calc( 100% - 180px );
	margin: 0;
	padding: 0 35px 0 0;
	box-sizing: border-box;
}

.col_form_contact dl dd input[type="text"] {
	width: 100%;
	margin: 0;
	padding: 10px 16px;
	border: solid 1px #bfbfbf;
	box-sizing: border-box;
}

.col_form_contact dl dd .radio {
	margin: 0;
	padding: 0 0 15px;
}

.col_form_contact dl dd .radio span.mwform-radio-field {
	margin: 0 0 10px;
	padding: 0;
	display: block;
}

.col_form_contact dl dd .input_corp {
	width: 100%;
	margin: 0 0 10px;
	padding: 0;
	display: flex;
}

.col_form_contact dl dd .input_corp .mds {
	width: 120px;
	margin: 0;
	padding: 0 0 0 18px;
	box-sizing: border-box;
	align-self: center;
}

.col_form_contact dl dd .input_corp input {
	width: calc( 100% - 120px );
}

.col_form_contact dl dd .zipcode {
	width: 100%;
	margin: 0 0 10px;
	padding: 0;
	display: flex;
}

.col_form_contact dl dd .zipcode .icon {
	margin: 0 10px 0 0;
	padding: 0;
	align-self: center;
	display: inline-block;
}

.col_form_contact dl dd .zipcode input {
	max-width: 200px;
}

.col_form_contact dl dd textarea {
	width: 100%;
	height: 12em;
	margin: 0;
	padding: 10px 16px;
	border: solid 1px #bfbfbf;
	box-sizing: border-box;
}

.txt_form_contact {
	margin: 0 0 50px;
	padding: 10px 0;
	line-height: 1.6;
	text-align: center;
}

txt_form_contact .txt1 {
    padding: 0 0 10px;
}

.cont_privacy_contact {
	padding: 20px 0 0;
}

.mw_wp_form_confirm .cont_privacy_contact:before {
	content: "\02714";
}

.btnarea_contact {
	margin: 0;
	padding: 0 0 50px;
	text-align: center;
}

.btnarea_contact input {
	width: 90%;
	max-width: 240px;
	height: 52px;
	margin: 10px;
	padding: 0;
	color: #fff;
	background: linear-gradient( 90deg, #0062aa, #169886 );
	border: none;
	cursor: pointer;
}

.btnarea_contact input[name="submitBack"] {
	background: none;
	background-color: #aaa;
}


/* --------------- contact error --------------- */

.lead_contact1.red { color: #df0000; }

.col_form_contact dl dd span.error {
	color: #df0000;
	font-size: 13px;
	line-height: 1.2;
}



/* --------------- contact confirm --------------- */

.mw_wp_form_confirm .col_form_contact dl dd .input_corp .mds:before {
	content: "";
	width: 10px;
	height: 10px;
	margin: 0 4px 0 0;
	padding: 0;
	background: linear-gradient( 120deg, #0062aa, #169886 );
	display: inline-block;
}



/* --------------- contact thanks --------------- */

.txt_contact_thanks {
	margin: 0 0 40px;
	padding: 0;
	text-align: center;
}

a.btn_contact_totop {
	width: 90%;
	max-width: 240px;
	height: 52px;
	margin: 0 auto 50px;
	padding: 12px 0 0;
	color: #fff;
	text-align: center;
	text-decoration: none;
	background: linear-gradient( 90deg, #0062aa, #169886 );
	border: none;
	box-sizing: border-box;
	display: block;
	cursor: pointer;
}




/* ---------------------------------------------------------------
	start max 1033px
--------------------------------------------------------------- */

@media screen and ( max-width: 1033px ) {






}

/* ---------------------------------------------------------------
	end max 1033px
--------------------------------------------------------------- */


/* ---------------------------------------------------------------
	start max 850px
--------------------------------------------------------------- */

@media screen and ( max-width: 850px ) {





}

/* ---------------------------------------------------------------
	end max 850px
--------------------------------------------------------------- */
/* ---------------------------------------------------------------
	start min 701px
--------------------------------------------------------------- */

@media print,screen and ( min-width: 701px ) {





}

/* ---------------------------------------------------------------
	end min 701px
--------------------------------------------------------------- */
/* ---------------------------------------------------------------
	start max 700px
--------------------------------------------------------------- */

@media print,screen and ( max-width: 700px ) {

/* --------------- contact --------------- */
	
	#wrap.sub.contact { background-image: none; }
	
	.contact .bg_pagettl {
		background-image: url(../img/contact/sp/bg_pagettl.jpg);
		background-repeat: no-repeat;
	}
	
	.contact .col_subcontent {
		background-image: url(../img/contact/bg_contact.png);
		background-repeat: no-repeat;
		background-position: -44vw calc( 100% - 50px );
		background-size: 102vw auto;
	}
	
	.col_form_contact dl dt {
		width: 160px;
	}
	
	.col_form_contact dl dd {
		width: calc( 100% - 160px );
		padding: 0 10px 0 0;
	}
	
	.col_form_contact dl dd .input_corp .mds {
		width: 100px;
		padding: 0;
	}
	
	.col_form_contact dl dd .input_corp input { width: calc( 100% - 100px ); }
	
	.txt_form_contact {
		margin: 0 0 30px;
	}
	
	.btnarea_contact {
		padding: 0 0 30px;
	}


}

/* ---------------------------------------------------------------
	end max 700px
--------------------------------------------------------------- */
/* ---------------------------------------------------------------
	start max 550px
--------------------------------------------------------------- */

@media screen and ( max-width: 550px ) {
	
/* --------------- contact --------------- */
	
	.col_form_contact {
		padding: 0 0 10px;
	}
	
	.col_form_contact dl {
		padding: 10px 0 14px;
		display: block;
	}
	
	.col_form_contact dl:last-child { padding-bottom: 25px; }
	
	.col_form_contact dl dt {
		width: 100%;
		margin: 0 0 5px;
	}
	
	.col_form_contact dl dd {
		width: 100%;
		padding: 0 10px;
	}
	
	.col_form_contact dl dd .radio span.mwform-radio-field {
		margin: 0;
	}
	
	
/* --------------- contact confirm --------------- */

	.mw_wp_form_confirm .col_form_contact dl dt:before {
		content: "";
		width: 10px;
		height: 10px;
		margin: 0 4px 0 0;
		padding: 0;
		background: linear-gradient( 120deg, #0062aa, #169886 );
		display: inline-block;
	}
	
	
	
}
/* ---------------------------------------------------------------
	end max 550px
--------------------------------------------------------------- */
/* ---------------------------------------------------------------
	start max 450px
--------------------------------------------------------------- */

@media screen and ( max-width: 450px ) {

/* --------------- contact --------------- */
	
	.contact .bg_pagettl .pagettl .en {
		width: 38vw;
		max-width: 200px;
	}
	
	.lead_contact1 { line-height: 1.7; }
	
	.lead_contact_require {
		line-height: 1.7;
		text-align: left;
	}
	
	.lead_contact_require .iblock { display: inline; }
	
	ul.flow_contact li {
		width: calc( ( 100% - 22px )/3 );
		padding: 11px 0 0 8px;
	}
	
	ul.flow_contact li:first-child { padding-left: 0 }
	
	.col_form_contact dl dd .input_corp { display: block; }
	.col_form_contact dl dd .input_corp .mds { width: 100%; }
	.col_form_contact dl dd .input_corp input { width: 100%; }


/* --------------- contact thanks --------------- */

	.txt_contact_thanks {
		text-align: left;
	}
	
	.txt_contact_thanks .iblock {
		display: inline;
	}


}

/* ---------------------------------------------------------------
	end max 450px
--------------------------------------------------------------- */