@charset "UTF-8";

/*--------------------------------------------------------------------
 *	共通の記述
 *--------------------------------------------------------------------*/

#contact_form section#form_area span.required {
	color: #c70000;
}
#contact_form section#form_area div.error_messages {
	padding: 2%;
	background-color: #ffe6e6;
}
#contact_form section#form_area table#contact_form_items {
	width: 100%;
}
#contact_form section#form_area table#contact_form_items th,
#contact_form section#form_area table#contact_form_items td {
	box-sizing: border-box;
}
#contact_form section#form_area table#contact_form_items input,
#contact_form section#form_area table#contact_form_items textarea {
	box-sizing: border-box;
	padding: 2%;
	border-radius: 5px;
	border: 1px solid #666666;
}
#contact_form section#form_area table#contact_form_items input.name {
	width: 40%;
}
#contact_form section#form_area table#contact_form_items input.mail {
	width: 100%;
}
#contact_form section#form_area table#contact_form_items textarea {
	width: 100%;
	height: 10em;
}
#contact_form section#form_area table#contact_form_items input.company_name,
#contact_form section#form_area table#contact_form_items input.department {
	width: 100%;
}
#contact_form section#form_area p.operation_buttons {
	margin: 5% auto;
	text-align: center;
}
#contact_form section#form_area p.operation_buttons button {
	box-sizing: border-box;
	padding: 0.5% 0.5%;
    background-color: #006837;
	color: #ffffff;
    border-radius: 50px;
	border: none;
    text-align: center;
    opacity: 1;
    -webkit-transition: 0.1s ease-in-out;
    transition: 0.1s ease-in-out;
    cursor: pointer;
    font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif;
	font-weight: bold;
}
#contact_form section#form_area p.operation_buttons button:hover {
    opacity: 0.8;
}
#contact_form section#form_area p.operation_buttons button[name="btn_return"] {
	background-color: #666666;
}
#contact_form section#form_area p.operation_buttons button {
    position: relative;
    margin: 8% auto;
    padding: 1.2%;
	line-height: 1.4;
}
#contact_form section#form_area p.operation_buttons button::after {
    position: absolute;
    display: block;
    content: "";
    top: 0;
    left: 86%;
    background: url(/common/images/arrow.png);
    background-repeat: no-repeat;
    background-size: contain;
    z-index: 10;
}

/*--------------------------------------------------------------------
 *	768px未満用（SP用）の記述
 *--------------------------------------------------------------------*/
@media screen and (max-width: 768px) {

#contact_form section#form_area {
	width: 80%;
	margin: 0 auto;
	font-size: 3.2vw;
	line-height: 1.3;
}
#contact_form section#form_area table#contact_form_items th,
#contact_form section#form_area table#contact_form_items td {
	display: block;
	padding: 3% 2%;
}
#contact_form section#form_area p.operation_buttons button,
#contact_form section#form_area div.detail_link {
	width: 50%;
	padding: 1.5%;
	font-size: 2.6vw;
}
#contact_form section#form_area p.operation_buttons button::after {
    width: 2.2vw;
    height: 2.2vw;
    margin-top: 5.5%;
}

/* 768px未満用（SP用）の記述 end -------------------------------------*/
}



/*--------------------------------------------------------------------
 *	768px以上用（PC用）の記述
 *--------------------------------------------------------------------*/
@media screen and (min-width: 768px), print {

#contact_form section#form_area {
	width: 86%;
	margin: 0 auto;
	padding: 0 0 4% 0;
	font-size: clamp(17.14285714px, 1.428571429vw, 20px);
	line-height: 1.4;
}
#contact_form section#form_area table#contact_form_items th,
#contact_form section#form_area table#contact_form_items td {
	padding: 1% 2%;
}
#contact_form section#form_area table#contact_form_items th {
	width: 25%;
}
#contact_form section#form_area p.operation_buttons button,
#contact_form section#form_area div.detail_link {
	width: 32%;
	padding: 1.2%;
	font-size: clamp(22.28571429px, 1.857142857vw, 26px);
}
#contact_form section#form_area p.operation_buttons button::after {
    width: clamp(22.28571429px, 1.857142857vw, 26px);
    height: clamp(22.28571429px, 1.857142857vw, 26px);
    margin-top: 6%;
}


/* 768px以上用（PC用）の記述 end -------------------------------------*/
}