@charset "utf-8";

/* RESET
----------------------------------------------------------------------------------------------------*/
a,article,body,dd,div,dl,dt,em,form,footer,header,h1,h2,h3,h4,h5,h6,html,i,iframe,img,label,legend,li,nav,ol,p,section,main,span,table,tbody,tfoot,thead,time,tr,th,td,ul,video {
	font-family			: inherit;
	font-size			: 100%;
	font-weight			: normal;
	font-style			: inherit;
	vertical-align			: baseline;
	white-space			: normal;
	margin				: 0;
	padding				: 0;
	border				: 0;
	outline				: 0;
	background			: transparent;
	line-height			: 14px;
	text-align			: left;
}

input[type="checkbox"],
input[type="radio"] {
	display				: none;
}

input[type="text"],
input[type="number"],
input[type="password"],
select {
	padding				: 8px;
	font-size			: 100%;
	border				: 1px solid #ddd;
	box-sizing			: border-box;
	border-radius			: 5px;
}

input[type="text"]:focus,
input[type="number"]:focus,
input[type="password"]:focus {
	border-color			: #369;
	border-color			: #5500aa;
}

select {
	padding-right			: 30px;
	-moz-appearance			: none;
	-webkit-appearance		: none;
	appearance			: none;
	background			: transparent url(//www.ond.jp.net/contact/images/form-css-arrow.png) no-repeat center right 8px/16px 16px;
	cursor				: pointer;
}

/* WebKit, Blink, Edge */	/* Google Chrome, Safari, Opera 15+, Android, iOS */
::-webkit-input-placeholder {
	color				: #ccc;
	font-size			: 13px;
}

/* Firefox 18- */
:-moz-placeholder {
	color				: #ccc;
	font-size			: 13px;
}
/* Firefox 19+ */
::-moz-placeholder {
	color				: #ccc;
	font-size			: 13px;
}

/* Internet Explorer 10-11 */
:-ms-input-placeholder {
	color				: #ccc;
	font-size			: 13px;
}

/* Others */
::placeholder {
	color				: #ccc;
	font-size			: 13px;
}

select::-ms-expand {
	display				: none;
}

select:focus {
	box-shadow			: none;
	outline				: none;
}

textarea {
	outline				: 0;
	margin				: 1px;
	padding				: 8px;
	vertical-align			: baseline;
	font-family			: inherit;
	font-size			: 100%;
	font-weight			: normal;
	font-style			: inherit;
	background			: transparent;
	line-height			: 18px;
	text-align			: left;
	transition			: border-color ease .2s;
	border				: 1px solid #ddd;
	box-sizing			: border-box;
	border-radius			: 5px;
}

textarea:focus {
	border-color			: #369;
	border-color			: #5f98e1;
}


/* ???????
----------------------------------------------------------------------------------------------------*/
* {
	-webkit-box-sizing		: content-box;
	-moz-box-sizing			: content-box;
	/*box-sizing			: content-box;*/
	box-sizing			: border-box;
	*behavior			: url(/scripts/boxsizing.htc);
}

html, body {
	height				: 100%;
}

body {
	margin				: 0;
	padding				: 0;
	font-size			: 14px;
	line-height			: 1.6em;
	font-family			: 'Roboto',"????? Medium", "Yu Gothic Medium","?????",YuGothic,"?????? ProN W3","Hiragino Kaku Gothic ProN","????",Meiryo,sans-serif;
	font-weight			: 600;
	color				: #000055;
	-webkit-text-size-adjust	: 100%;
	overflow			: hidden;
}






/* Header
----------------------------------------------------------------------------------------------------*/
header#HeaderContainer {
	position			: fixed;
	display				: -webkit-flex;
	display				: flex;
	margin				: 0;
	padding				: 0;
	width				: 100%;
	height				: 50px;
	text-align			: center;
	z-index				: 9;
}

header#HeaderContainer h2 {
	position			: relative;
	margin				: auto;
	height				: 50px;
	text-align			: center;
	font-size			: 140%;
	font-weight			: 600;
	background			: #fff;
}

/*
header#HeaderContainer h2::before {
	content				: '';
	position			: absolute;
	top				: calc(50% - 1px);
	left				: 0;
	margin				: 0 5em;
	width				: calc(100% - 10em);
	height				: 2px;
	background			: #000;
}

header#HeaderContainer h2::before {
	content				: '?';
	margin-right			: 1rem;
}

header#HeaderContainer h2::after {
	content				: '?';
	margin-left			: 1rem;
}
*/

header#HeaderContainer h2 span {
	position			: relative;
/*
	padding				: 0 1.5em;
*/
	line-height			: 52px;
	letter-spacing			: .5em;
	background			: #fff;
}


/* Main
----------------------------------------------------------------------------------------------------*/
main#MainContainer {
	position			: relative;
	display				: block;
	top				: 50px;
	height				: calc(100% - 50px);
/*
	height				: 100%;
	overflow			: hidden;
*/
	background			: #fff;
	overflow-x			: hidden;
	overflow-y			: auto;
}

main#MainContainer form#Main_Contact {
	margin				: 0 auto;
	width				: 660px;
	text-align			: center;
}

main#MainContainer div#v3 {
	margin				: 0 auto;
	width				: 660px;
}

main#MainContainer form#Main_Contact div#v1 {
}

main#MainContainer form#Main_Contact div#v2,
main#MainContainer div#v3 {
	display				: none;
}

main#MainContainer div#v3 h3 {
	width				: 100%;
	line-height			: 40px;
	text-align			: center;
	font-weight			: 600;
}

main#MainContainer form#Main_Contact div#v1 p,
main#MainContainer form#Main_Contact div#v2 p,
main#MainContainer div#v3 p {
	width				: 100%;
	line-height			: 35px;
}

main#MainContainer form#Main_Contact div#v1 div.FormGroup,
main#MainContainer form#Main_Contact div#v2 div.FormGroup {
	margin-top			: 5px;
	padding				: 0;
	width				: 100%;
	vertical-align			: bottom;
	font-size			: 0;
	background			: #e9e9e9;
}

main#MainContainer form#Main_Contact div#v1 div.FormGroup div.FormTitle,
main#MainContainer form#Main_Contact div#v1 div.FormGroup div.FormContents,
main#MainContainer form#Main_Contact div#v2 div.FormGroup div.FormTitle,
main#MainContainer form#Main_Contact div#v2 div.FormGroup div.FormContents {
	position			: relative;
	display				: inline-block;
	padding				: 0 3px;
	vertical-align			: top;
	font-size			: 14px;
}

main#MainContainer form#Main_Contact div#v1 div.FormGroup div.FormTitle,
main#MainContainer form#Main_Contact div#v2 div.FormGroup div.FormTitle {
	width				: 240px;
	line-height			: 34px;
}
main#MainContainer form#Main_Contact div#v1 div.FormGroup div.FormContents,
main#MainContainer form#Main_Contact div#v2 div.FormGroup div.FormContents {
	width				: 420px;
	background			: #fff;
	min-height			: 34px;
	line-height			: 34px;
	/*border			: 1px solid #fff;*/
}

main#MainContainer form#Main_Contact div#v1 div.FormGroup div.FormTitle div.CheckCircle {
	position			: relative;
	display				: inline-block;
}

/*-----------------------------------------------------------------------------------------------------*/
main#MainContainer form#Main_Contact div#v1 div.FormGroup div.FormTitle div.OK_Circle,
main#MainContainer form#Main_Contact div#v1 div.FormGroup div.FormTitle div.NG_Circle {
	position			: relative;
	display				: inline-block;
	width				: 20px;
	height				: 20px;
	vertical-align			: middle;
	border-radius			: 50%;
	z-index				: 5;
}
main#MainContainer form#Main_Contact div#v1 div.FormGroup div.FormTitle div.OK_Circle span.OK,
main#MainContainer form#Main_Contact div#v1 div.FormGroup div.FormTitle div.NG_Circle span.NG {
	position			: absolute;
	/*top				: 26px;*/
	width				: 100%;
	line-height			: 22px;
	text-align			: center;
	font-size			: 100%;
	opacity				: 0;
	user-select			: none;
}
main#MainContainer form#Main_Contact div#v1 div.FormGroup div.FormTitle div.OK_Circle span.OK {
	color				: #2bd52b;
}
main#MainContainer form#Main_Contact div#v1 div.FormGroup div.FormTitle div.NG_Circle span.NG {
	color				: #d52b2b;
}
main#MainContainer form#Main_Contact div#v1 div.FormGroup div.FormTitle div.OK_Circle.Animation span.OK {
	animation			: OK 0.2s ease 0.5s forwards;
	z-index				: 7;
}
main#MainContainer form#Main_Contact div#v1 div.FormGroup div.FormTitle div.NG_Circle.Animation span.NG {
	animation			: NG 0.2s ease 0.5s forwards;
	z-index				: 7;
}
/* ??????????? */
@keyframes OK {
	0% {
		transform: scale(0.5) rotate(30deg);
		opacity: 0;
	}
	90% {
		transform: scale(1.3) rotate(-15deg);
		opacity: 1;
	}
	100% {
		transform: scale(1) rotate(0deg);
		opacity: 1;
	}
}
@keyframes NG {
	0% {
		transform: scale(0.5) rotate(30deg);
		opacity: 0;
	}
	90% {
		transform: scale(1.3) rotate(-15deg);
		opacity: 1;
	}
	100% {
		transform: scale(1) rotate(0deg);
		opacity: 1;
	}
}
/*-----------------------------------------------------------------------------------------------------*/

main#MainContainer form#Main_Contact div#v1 div.FormGroup div.FormTitle span#Mandatory,
main#MainContainer form#Main_Contact div#v1 div.FormGroup div.FormTitle span#Any,
main#MainContainer form#Main_Contact div#v2 div.FormGroup div.FormTitle span#Mandatory,
main#MainContainer form#Main_Contact div#v2 div.FormGroup div.FormTitle span#Any {
	position			: absolute;
	right				: 3px;
	margin-top			: 6px;
	padding				: 2px 5px;
	font-size			: 85%;
	text-align			: center;
	-webkit-box-shadow		: inset 1px 1px 1px #fff;
	box-shadow			: inset 1px 1px 1px #fff;
	border-radius			: 5px;
}

main#MainContainer form#Main_Contact div#v1 div.FormGroup div.FormTitle span#Mandatory,
main#MainContainer form#Main_Contact div#v2 div.FormGroup div.FormTitle span#Mandatory {
	color				: #fff4f4;
	border				: 1px solid #dc4e4e;
	background			: #ff8080;
	background			: -webkit-gradient(linear, left top, left bottom, from(#ff8080), to(#ff0000));
	background			: -webkit-linear-gradient(top, #ff8080 0%, #ff0000 100%);
	background			: linear-gradient(to bottom, #ff8080 0%, #ff0000 100%);
}

main#MainContainer form#Main_Contact div#v1 div.FormGroup div.FormTitle span#Any,
main#MainContainer form#Main_Contact div#v2 div.FormGroup div.FormTitle span#Any {
	color				: #f4f4ff;
	border				: 1px solid #7272b8;
	background			: #aaaaff;
	background			: -webkit-gradient(linear, left top, left bottom, from(#aaaaff), to(#0000ff));
	background			: -webkit-linear-gradient(top, #aaaaff 0%, #0000ff 100%);
	background			: linear-gradient(to bottom, #aaaaff 0%, #0000ff 100%);
}

main#MainContainer form#Main_Contact div#v1 div.FormGroup div.FormContents label.Switch_toi,
main#MainContainer form#Main_Contact div#v1 div.FormGroup div.FormContents label.Switch_new {
	display				: inline-block;
	width				: 204.5px;
	height				: 32px;
	padding				: 0 10px;
	line-height			: 34px;
	text-align			: center;
	color				: #c9c9c9;
	background			: #e9e9e9;
	transition			: .2s;
	border-radius			: 5px;
	cursor				: pointer;
}

main#MainContainer form#Main_Contact div#v1 div.FormGroup div.FormContents input[type="radio"]:checked + .Switch_toi,
main#MainContainer form#Main_Contact div#v1 div.FormGroup div.FormContents input[type="radio"]:checked + .Switch_new {
	background-color		: #000080;
	color				: #fff;
}

main#MainContainer form#Main_Contact div#v1 div.FormGroup div.FormContents input#CompanyName,
main#MainContainer form#Main_Contact div#v1 div.FormGroup div.FormContents input#Address {
	width				: calc(650px - 231px);
}

main#MainContainer form#Main_Contact div#v1 div.FormGroup div.FormContents input#YourName1,
main#MainContainer form#Main_Contact div#v1 div.FormGroup div.FormContents input#YourName2,
main#MainContainer form#Main_Contact div#v1 div.FormGroup div.FormContents input#YourNameKana1,
main#MainContainer form#Main_Contact div#v1 div.FormGroup div.FormContents input#YourNameKana2 {
	width				: calc( calc(660px - 280px) / 2);
}

main#MainContainer form#Main_Contact div#v1 div.FormGroup div.FormContents input#Postal {
	width				: 180px;
	ime-mode			: disabled;
}

main#MainContainer form#Main_Contact div#v1 div.FormGroup div.FormContents input#Tel {
	width				: 200px;
	ime-mode			: disabled;
}

main#MainContainer form#Main_Contact div#v1 div.FormGroup div.FormContents input#Email,
main#MainContainer form#Main_Contact div#v1 div.FormGroup div.FormContents input#Email_Check {
	width				: calc(650px - 231px);
	ime-mode			: disabled;
}

main#MainContainer form#Main_Contact div#v1 div.FormGroup div.FormContents textarea#MailContents {
	width				: calc(650px - 231px);
	height				: 200px;
}

main#MainContainer form#Main_Contact div#v1 div.FormGroup div.FormContents .form-control {
	background-color		: #fff;
}

main#MainContainer form#Main_Contact div#v1 div.FormGroup div#CountBox {
	padding				: 2px;
	width				: calc(100% - 4px);
	text-align			: right;
}

main#MainContainer form#Main_Contact div#v1 div.FormBtn,
main#MainContainer form#Main_Contact div#v2 div.FormBtn {
	position			: relative;
	display				: block;
	padding				: 20px 0;
	width				: 100%;
	height				: 80px;
	text-align			: center;
	background-color		: #fff;
}

main#MainContainer form#Main_Contact div#v1 div.FormBtn a.ConfirmationScreenBtn,
main#MainContainer form#Main_Contact div#v2 div.FormBtn a.BackBtn,
main#MainContainer form#Main_Contact div#v2 div.FormBtn input.SendMailBtn {
	display				: inline-block;
	margin				: auto;
	width				: 200px;
	height				: 35px;
	line-height			: 35px;
	vertical-align			: middle;
	text-align			: center;
	border				: 1px solid #ccc;
	background			: #e9e9e9;
	background			: -webkit-gradient(linear, left top, left bottom, from(#fdfbfb), to(#ebedee));
	background			: -webkit-linear-gradient(top, #fdfbfb 0%, #ebedee 100%);
	background			: linear-gradient(to bottom, #fdfbfb 0%, #ebedee 100%);
	-webkit-box-shadow		: inset 1px 1px 1px #fff;
	box-shadow			: inset 1px 1px 1px #fff;
	border-radius			: 5px;
	cursor				: pointer;
}

main#MainContainer form#Main_Contact div#v1 div.FormBtn a.ConfirmationScreenBtn:hover,
main#MainContainer form#Main_Contact div#v2 div.FormBtn a.BackBtn:hover,
main#MainContainer form#Main_Contact div#v2 div.FormBtn input.SendMailBtn:hover {
	background			: -webkit-gradient(linear, left bottom, left top, from(#fdfbfb), to(#ebedee));
	background			: -webkit-linear-gradient(bottom, #fdfbfb 0%, #ebedee 100%);
	background			: linear-gradient(to top, #fdfbfb 0%, #ebedee 100%);
}

main#MainContainer form#Main_Contact div#v1 div.FormBtn a.ConfirmationScreenBtn.Disabled {
	pointer-events			: none;		/* a???????????? */
	cursor				: default;	/* ??????????????default??? */
	text-decoration			: none;		/* ??????? */
	color				: #dfdfdf;
}



/* ????? */
p.error, span.error {
	color				: red;
}

/* ??????? */
.confirm_table {
	margin				: 30px 0;
}
.confirm_table table caption{
	caption-side			: top;
}
.confirm {
	float: left;
	margin-right			: 20px;
}












@media only screen and ( max-width : 375px ) {
	main#MainContainer form#Main_Contact,
	main#MainContainer div#v3 {
		width			: 98%;
	}
	main#MainContainer form#Main_Contact div#v1 div.FormGroup div.FormTitle,
	main#MainContainer form#Main_Contact div#v1 div.FormGroup div.FormContents,
	main#MainContainer form#Main_Contact div#v2 div.FormGroup div.FormTitle,
	main#MainContainer form#Main_Contact div#v2 div.FormGroup div.FormContents {
		display			: block;
	}
	main#MainContainer form#Main_Contact div#v1 div.FormGroup div.FormTitle,
	main#MainContainer form#Main_Contact div#v2 div.FormGroup div.FormTitle {
		width			: 100%;
	}
	main#MainContainer form#Main_Contact div#v1 div.FormGroup div.FormContents,
	main#MainContainer form#Main_Contact div#v2 div.FormGroup div.FormContents {
		padding			: 5px 5px 0;
		width			: 100%;
	}
	main#MainContainer form#Main_Contact div#v1 div.FormGroup div.FormContents label.Switch_toi,
	main#MainContainer form#Main_Contact div#v1 div.FormGroup div.FormContents label.Switch_new {
		width			: 49.3%;
	}
	main#MainContainer form#Main_Contact div#v1 div.FormGroup div.FormContents input#CompanyName,
	main#MainContainer form#Main_Contact div#v1 div.FormGroup div.FormContents input#Address,
	main#MainContainer form#Main_Contact div#v1 div.FormGroup div.FormContents input#Email,
	main#MainContainer form#Main_Contact div#v1 div.FormGroup div.FormContents input#Email_Check {
		width			: 100%;
	}
	main#MainContainer form#Main_Contact div#v1 div.FormGroup div.FormContents input#YourName1,
	main#MainContainer form#Main_Contact div#v1 div.FormGroup div.FormContents input#YourName2,
	main#MainContainer form#Main_Contact div#v1 div.FormGroup div.FormContents input#YourNameKana1,
	main#MainContainer form#Main_Contact div#v1 div.FormGroup div.FormContents input#YourNameKana2 {
		width			: 49.3%;
	}
	main#MainContainer form#Main_Contact div#v1 div.FormGroup div.FormContents input#Postal {
		width			: 49.3%;
	}
	main#MainContainer form#Main_Contact div#v1 div.FormGroup div.FormContents input#Tel {
		width			: 60%;
	}
	main#MainContainer form#Main_Contact div#v1 div.FormGroup div.FormContents textarea#MailContents {
		width			: 100%;
		height			: 200px;
	}
	main#MainContainer form#Main_Contact div#v2 div.FormBtn a.BackBtn,
	main#MainContainer form#Main_Contact div#v2 div.FormBtn input.SendMailBtn {
		width			: 49%;
	}
}