@charset "UTF-8";
/* =====================================================================================================================
=
= なにわ歯科衛生専門学校
= contact index
=
===================================================================================================================== */

/*
- contact 共通
--------------------------------------------------------------------------------------------------------------------- */
#contact{}
#contact #content-header h1{
	background-image:url('/_assets/img/pc/info/main_image.jpg');
}

#contact .button-list{
	display:flex;
	flex-flow:row wrap;
	justify-content:center;
	align-items:center;
}

#contact .button-list li{
	margin:0 10px;
}

#contact .bread-crumb,
#contact #footer-bread-crumb{display:none;}

/*
- contact お問い合わせフォーム
--------------------------------------------------------------------------------------------------------------------- */
#contact.index{}

/* 電話でのお問い合わせ */
#contact.index #tel-box{}

#contact.index #tel-box .tel{
	width:70%;
	margin:0 auto;
	padding:40px;
	border:2px solid #ff94c5;
	background:#fff3f9;
	text-align:center;
}

#contact.index #tel-box .tel dt{
	font-weight:bold;
	font-size:2.4rem;
}

#contact.index #tel-box .tel dd{
	margin:0 10px;
	font-size:3.2rem;
}

/* 入力画面 */
#contact.index .form-box{
}

#contact.index .form-box .mwform-tel-field,
#contact.index .form-box .mwform-zip-field{
	display:flex;
	flex-flow:row wrap;
	justify-content:flex-start;
	align-items:center;
	width:100%;
}

#contact.index .form-box .mwform-tel-field input,
#contact.index .form-box .mwform-zip-field input{
	width:4em;
	margin:0 10px;
}

#contact.index .form-box .mwform-tel-field input:first-child{
	margin-left:0;
}

#contact.index .caution{
	margin:16px 0 10px 0;
}

/* 確認画面 */
#contact .confirm form .caution,
#contact .confirm form .required:before{
	display:none;
}

/* 完了画面 */
#contact .complete{}
#contact .complete .text{
	margin:40px 0;
	text-align:center;
}


/*
- media query (smart phone)
--------------------------------------------------------------------------------------------------------------------- */
@media screen and (max-width:767px){

	#contact .button-list{
		display:flex;
		flex-flow:column wrap;
		justify-content:center;
		align-items:center;
	}

	#contact .confirm .button-list li{
		width:100%;
		margin:0;
	}

	#contact .confirm .button-list li .button{
		width:100%;
		margin:0 0 30px 0;
	}

	#contact.index{}

	/* 電話でのお問い合わせ */
	#contact.index #tel-box{}

	#contact.index #tel-box .tel{
		width:100%;
		margin:0 auto;
		padding:4%;
		border:2px solid #ff94c5;
		background:#fff3f9;
		text-align:center;
	}

	#contact.index #tel-box .tel dt{
		font-weight:bold;
		font-size:1.6rem;
	}

	#contact.index #tel-box .tel dd{
		margin:0 10px;
		font-size:1.8rem;
	}

	/* 入力画面 */
	#contact.index .form-box{
	}

	#contact.index .form-box .mwform-tel-field,
	#contact.index .form-box .mwform-zip-field{
		display:flex;
		flex-flow:row wrap;
		justify-content:flex-start;
		align-items:center;
		width:100%;
	}

	#contact.index .form-box .mwform-tel-field input,
	#contact.index .form-box .mwform-zip-field input{
		width:4em;
		margin:0 10px;
	}

	#contact.index .form-box .mwform-tel-field input:first-child{
		margin-left:0;
	}

	#contact.index .caution{
		margin:16px 0 10px 0;
	}

	/* 確認画面 */
	#contact .confirm form .caution,
	#contact .confirm form .required:before{
		display:none;
	}

	/* 完了画面 */
	#contact .complete{}
	#contact .complete .text{
		margin:40px 0;
		text-align:center;
	}

}