@charset "utf-8";

/* ===========================================================
	child contact
=========================================================== */

/*  contents white bg -------- */

.child .child-contents .contents-inner {
	background-color: #FFF;
	padding: 25px;
}

/*  fake tab -------- */

.fake-tab {
	padding: 0 !important;
	margin: 0 auto !important;
}

.fake-tab ul {
	width: 100%;
	overflow: hidden;
}

.fake-tab .tab {
	width: 50%;
	display: inline-block;
	background-color: #FFF;
}

.fake-tab .tab a {
	display: block;
}

.fake-tab .tab h3 {
	font-weight: 300;
	text-align: center;
	font-size: 1.4rem;
	color: #000;
	margin: 0 auto;
	padding: 20px 0;
}

#contact-form .fake-tab .training-tab {
	background-color: #16a1a9;
}

#contact-form .fake-tab .training-tab h3 {
	color: #FFF;
}

#training-form .fake-tab .contact-tab {
	background-color: #16a1a9;
}

#training-form .fake-tab .contact-tab h3 {
	color: #FFF;
}

/* --- */

@media screen and (min-width: 415px) {

	.fake-tab .tab h3 {
		font-size: 1.6rem;
	}

	.child .child-contents .contents-inner {
		padding: 35px;
	}

}

@media screen and (min-width: 768px) {

	.fake-tab .tab h3 {
		font-size: 2.0rem;
		padding: 30px 0;
	}

	.child .child-contents .contents-inner {
		padding: 45px;
	}

}

@media screen and (min-width: 1025px) {

	.fake-tab .tab h3 {
		font-size: 2.5rem;
	}

}

/*  form box -------- */

input, select, textarea {
	border: 1px solid rgba(0,0,0,0.1);
	width: 100%;
	padding: .75em;
	box-sizing: border-box;
	font-size: 1.3rem;
	font-family: inherit;
	color: rgba(0,0,0,.7);
	line-height: 1.5;
	border-radius: 2px;
}

textarea {
	padding: .5em;
}

select {
	-webkit-appearance: button;
	   -moz-appearance: button;
            appearance: button;
}

select {
	background: url(../images/common/ic_arrow_select.png) no-repeat left top #fff;
	background-position: calc(100% - 10px) center;
	background-size: 9px;
}

input[type=text],
input[type=email],
input[type=tel],
textarea {
	width: 100%;
	border : 1px solid rgba(0,0,0,0.1);
	-webkit-appearance : none;
	-webkit-tap-highlight-color : rgba(0,0,0,0);
}

table.txt,
table.txtarea {
	width: 100%;
	overflow: hidden;
}

#forms .table-wrap {
	overflow: hidden;
}

#forms .table-wrap .table1,
#forms .table-wrap .table2 {
	width: 100%;
	overflow: hidden;
}

.form-list,
.form-message {
	width: 100%;
}

th ,td {
	width: 100%;
	display: block;
}

#forms th {
	margin-bottom: 5px;
}

#forms td {
	margin-bottom: 15px;
}

.child .contents p a {
	padding-left: 0 !important;
	color: rgba(204,0,0,0.7) !important;
}

@media screen and (min-width: 414px) {

	textarea {
		padding: 1em;
	}
}

@media screen and (min-width: 1024px) {

	#forms .table-wrap {
		display: -webkit-box;
		display: -ms-flexbox;
		display: -webkit-flex;
		display: flex;
		-webkit-flex-wrap: wrap;
		-moz-flex-wrap: wrap;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
	}

	#forms .table-wrap .table1,
	#forms .table-wrap .table2 {
		width: calc((100% - 30px) / 2);
		/*float: left;*/
		display: -webkit-box;
		display: -ms-flexbox;
		display: -webkit-flex;
		display: flex;
		-webkit-align-items: flex-start;
		align-items: flex-start;
		vertical-align: top;
	}

	#forms .table-wrap .table1 {
		margin-right: 30px;
	}

}

/*  form material -------- */

.contact p {
	margin-bottom: 20px;
}

@media screen and (min-width: 768px) {

	.contact p {
		margin-bottom: 45px;
	}

}


/*  form button -------- */

.contact-btn {
	position: relative;
}

#forms .contact-btn-wrap {
	width: 100%;
	text-align: center;
	overflow: hidden;
}

.btn .contact-btn {
	-webkit-transition: all .3s ease;
	-moz-transition: all .3s ease;
	-o-transition: all .3s ease;
	transition: all .3s ease;
}

@media screen and (min-width: 1024px) {

	#forms .contact-btn-wrap {
		display: -webkit-box;
		display: -ms-flexbox;
		display: -webkit-flex;
		display: flex;
		-webkit-align-items: center;
		align-items: center;
		-webkit-justify-content: flex-end;
		justify-content: flex-end;
	}

}

/*  form label -------- */

label {
	font-size: 1.2rem;
	font-weight: 500;
}

/*  required -------- */

.required {
	display: inline !important;
}

/*  textarea -------- */

 #forms table.txtarea.form-message td {
	margin-bottom: 20px;
}

@media screen and (min-width: 414px) {

	 #forms table.txtarea.form-message td {
		margin-bottom: 35px;
	}

}

@media screen and (min-width: 768px) {

	table.txtarea.form-message td {
		margin-bottom: 45px;
	}

}

@media screen and (min-width: 1024px) {

	table.txtarea.form-message td textarea {
		height: 500px;
	}

}

.error-intro-message {
	font-weight: 500;
	color: #f00 !important;
	line-height: 1.5;
	padding: .75em;
	background: rgba(255,0,0,0.2);
	border-radius: 5px;
 }

.error-message-list {
	display: none;
}

.required {
	font-size: 1rem;
	margin-left: 5px;
	color: #f00;
}

.error-message {
	color: #f00;
	background-color: rgba(255,0,0,0.1);
	margin-top: .25em;
	padding: 0 .25em;
	display: inline-block;
	font-size: .8em;
}

.contact p.small-txt {
	font-size: .8em;
	line-height: 1.5;
	margin: 0 0 10px 0;
}

/* ===========================================================
	confirm
=========================================================== */

#contact-confirm #forms th {
	color: rgba(0,0,0,0.5);
	font-size: 1.2rem;
	font-weight: 300;
	margin-bottom: 0;
}

#contact-confirm #forms td {
	border-bottom: 1px solid rgba(0,0,0,0.2);
	font-weight: 500;
	font-size: 1.3rem;
	line-height: 1.5;
	margin-bottom: 1em;
	padding-bottom: 1.2em;
}

#contact-confirm #forms .txtarea td {
	margin-bottom: 20px;
}


/*  confirm button -------- */

#contact-confirm .contact-btn-wrap {
	width: 100%;
	display: -webkit-flex;
	display: flex;
	-webkit-flex-wrap: wrap;
	        flex-wrap: wrap;
	-webkit-justify-content: center;
	        justify-content: center;
	-webkit-align-items: center;
	        align-items: center;
}

#contact-confirm .contact-btn {
	min-width: 160px;
}

#contact-confirm .btn {
	-webkit-order: 1;
	        order: 1;
}

#contact-confirm #forms .prev-btn {
	width: 100%;
	margin: 10px 0 0 0;
	text-align: center;
	-webkit-order: 2;
	        order: 2;
}

#contact-confirm #forms .prev-btn a {
	color: #16a1a9 !important;
	text-decoration: underline;
	display: inline-block;
	font-size: 1.3rem;
}

@media screen and (min-width: 375px) {

	#contact-confirm .btn {
		-webkit-order: 2;
		        order: 2;
	}

	#contact-confirm #forms .prev-btn {
		width: auto;
		margin: 0 10px 0 0;
		text-align: left;
		-webkit-order: 1;
		        order: 1;
	}

}

@media screen and (min-width: 768px) {

	#contact-confirm #forms td {
		font-size: 1.4rem;
	}

}

/* ===========================================================
	finish
=========================================================== */

#contact-finish .notice {
	margin-top: 1em;
}

#contact-finish.child.gradient-bg .child-contents .txt-only h3 {
	font-size: 1.4rem;
	margin: .5em 0 1.5em;
}

@media screen and (min-width: 768px) {

	#contact-finish.child.gradient-bg .child-contents .txt-only h3 {
		font-size: 1.5rem;
	}

}