@charset "utf-8";

/* ===================================================================
CSS information
 file name  :  /contacts/index.css
=================================================================== */

@media screen and (min-width: 769px) {
/***** PC用のスタイル記述 *****/
article{
	position:relative;
}

/*** header_area ***/
#header_area{
	background:url(../../img/contact/top_bg.jpg) center top no-repeat;
	background-size: cover;
	height:300px;
}
#header_area h2{
	font-size:65px;
	color:#FFF;
	text-align:center;
	padding:90px 0 70px;
}

/*** top_area ***/
#top_area{
	width:980px;
	height:120px;
	margin:0 auto;
	background:#FFF;
}


/*** top_area ***/
#top_area{
	padding:0 0 5px;
}

#top_area h3{
	font-size:18px;
	font-weight:bold;
	text-align:center;
	padding:50px 0 0 30px;
	line-height:1.2;
}



/*** select_area ***/
#select_area{
	width:980px;
	margin:0 auto;
	padding:20px 0 40px;
	background:#FFF;
	overflow:hidden;
	
}

#select_area .select_box{
	background:#c0a15d;
	padding:20px 0;
	text-align:center;
	width:550px;
	margin:0 auto;
	border-radius:10px;
}

#select_area .select_box span{
	font-size:18px;
	font-weight:bold;
	color:#FFF;
	padding:0 20px 0 0;
}


#select_area .select_box select{
	width:200px;
	padding:5px;
}


/*** form_area ***/
#form_area{
	width:920px;
	margin:-30px auto 0;
	min-height:200px;
}

#form_area h2{
	font-size:21px;
	font-weight:bold;
	color:#FFF;
	padding:5px 0;
	text-align:center;
	background:#001e3a;
	margin:0 0 30px;
}


#form_area .job_box{
	border:2px solid #00ABE1;
	padding:20px;
	margin:0 0 30px;
	overflow:hidden;
	clear:both;
	
}

#form_area .job_box .img{
	float:left;
	width:180px;
}

#form_area .job_box img.img_default{
	width:180px;
	height:auto;
}


#form_area .job_box .info{
	float:right;
	width:680px;
}

#form_area .job_box .info h4{
	font-size:14px;
	margin:0 0 10px;
}

#form_area .job_box .info h4 span{
	display:inline-block;
	font-size:13px;
	color:#FFF;
	background:#808080;
	border-radius:3px;
	padding:0 5px;
	margin:0 5px 0 0;

}

#form_area .job_box .info h3{
	font-size:21px;
	font-weight:bold;
	margin:0 0 5px;
}

#form_area .job_box .info p{
	font-size:14px;
	margin:0 0 5px;
}

#form_area .mail_box{
	margin:0 0 20px;
}

#form_area .mail_box h3{
	font-size:21px;
	font-weight:bold;
	background:url(../../img/common/icon/icon_mail.png) left 2px no-repeat;
	padding:0 0 0 30px;
	margin:0 0 5px;
}

#form_area .mail_box p{
	font-size:14px;
}

#form_area .mail_box p span{
	color:#b12e04;
}


#form_area .form_box table{
	width:100%;
	border-top:1px solid #d3cec9;
	border-right:1px solid #d3cec9;
}

#form_area .form_box table th{
	background:#EEF0F2;
	width:245px;
	padding:10px 5px 10px 10px;
	vertical-align:middle;
	text-align:left;
	border-bottom:1px solid #d3cec9;
	border-left:1px solid #d3cec9;
}

#form_area .form_box table th span.required{
	display:inline-block;
	float:right;
	font-size:12px;
	color:#FFF;
	font-weight:normal;
	background:#b12e04;
	border-radius:3px;
	padding:1px 5px 0;
	line-height:1.5;
}

#form_area .form_box table th span.note{
	font-size:12px;
	font-weight:normal;
}



#form_area .form_box table td{
	padding:10px 15px;
	border-bottom:1px solid #d3cec9;
	border-left:1px solid #d3cec9;
	font-size:14px;
}

#form_area .form_box table td .sp_box{
	display:inline;
}


#form_area .form_box table td span.name{
	display:inline-block;
	width:40px;
	text-align:right;
	padding:0 5px 0 0;
}

#form_area .form_box table td .error-message{
	font-size:14px;
	font-weight:bold;
	color:#F00;
}

#form_area .form_box table td input{
	padding:5px;
	font-size:14px;
}

#form_area .form_box table td input.box_125{
	width:125px;
}
#form_area .form_box table td input.box_256{
	width:256px;
}
#form_area .form_box table td input.box_80{
	width:80px;
}



#form_area .form_box table td input[type="radio"]{
	margin:0 3px 0 0;
}

#form_area .form_box table td input[type="radio"]:last-child{
	margin:0 3px 0 30px;
}

#form_area .form_box table td select{
	font-size:14px;
	padding:5px;
}

#form_area .form_box table td textarea{
	padding:5px;
	font-size:14px;
	color:#333;
	width:600px;
	line-height:1.5;
}

#form_area .form_box table td textarea.h_65{
	height:65px;
}
#form_area .form_box table td textarea.h_130{
	height:130px;
}

#form_area .form_box table td p.note{
	font-size:12px;
	color:#b12e04;
}
	
#form_area .form_box .checkbox_list{
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
}
	
#form_area .form_box .checkbox_list .checkbox{
	width: 20%;
}

#form_area .form_box .pc_skill{
	margin: 0 0 10px;
}

#form_area .form_box .pc_skill span{
	display: inline-block;
	width: 150px;
}
	
#form_area .form_box .button{
	text-align:center;
	padding:20px 0 50px;
}

#form_area .form_box .button button[type="submit"]{
	width:250px;
	background:#001e3a;
	font-size:20px;
	font-weight:bold;
	color:#FFF;
	padding:10px 0;
	border:none;
	border-radius:5px;
}

#form_area .form_box .button button.revise{
	background: #ADADAD;
}

#form_area .form_box .button button[type="submit"]:hover{
	opacity:0.75;
}


/***** form_done *****/
/*** message_area ***/
#message_area{
	width:920px;
	margin:-50px auto 50px;
}

#message_area .message_box{
	border:1px solid #c0a15d;
	text-align:center;
	padding:50px 0;
}

#message_area .message_box .logo{
	margin:0 0 30px;
}

#message_area .message_box h2{
	font-size:24px;
	font-weight:bold;
	margin:0 0 10px;
}

#message_area .message_box p.h2_txt{
	font-size:18px;
	color:#b12e04;
	margin:0 0 30px;
}


#message_area .message_box p.to_top{
	width:250px;
	margin:0 auto;
}

#message_area .message_box p.to_top a{
	background:#c0a15d;
	font-size:20px;
	font-weight:bold;
	text-align:center;
	display:block;
	padding:10px;
	color:#FFF;
	border-radius:5px;
	position:relative;
}

@font-face {
    font-family: 'icon_arrow';
    src:    url('../../fonts/icon_arrow.eot?h800c4');
    src:    url('../../fonts/icon_arrow.eot?h800c4#iefix') format('embedded-opentype'),
        url('../../fonts/icon_arrow.ttf?h800c4') format('truetype'),
        url('../../fonts/icon_arrow.woff?h800c4') format('woff'),
        url('../../fonts/icon_arrow.svg?h800c4#icon_arrow') format('svg');
    font-weight: normal;
    font-style: normal;
}

#message_area .message_box p.to_top a:after {
	content: "\a900";
    font-family: 'icon_arrow' !important;
	color:#FFF;
	font-size:16px;
	position:absolute;
	right:10px;
	top:25%;
}

#message_area .message_box p.to_top a:hover{
	opacity:0.75;
}

#message_area .message_box p.to_contacts{
	width:250px;
	margin:0 auto;
}

#message_area .message_box p.to_contacts a{
	background:#c0a15d;
	font-size:18px;
	font-weight:bold;
	text-align:center;
	display:block;
	padding:10px;
	color:#FFF;
	border-radius:5px;
	position:relative;
}


#message_area .message_box p.to_contacts a:after {
	content: "\a900";
    font-family: 'icon_arrow' !important;
	color:#FFF;
	font-size:16px;
	position:absolute;
	right:10px;
	top:25%;
}

#message_area .message_box p.to_contacts a:hover{
	opacity:0.75;
}



}
@media screen and (max-width: 768px) {
/* タブレット用のスタイル記述 */
/* スマートフォン用のスタイル記述 */
article{
	position:relative;
}

/*** header_area ***/
#header_area{
	background:url(../../img/contact/top_bg.jpg) center top no-repeat;
	background-size: contain;
}
#header_area h2{
	font-size:200%;
	color:#FFF;
	text-align:center;
	padding:25px 0;
}


/*** top_area ***/
#top_area{
	width:100%;
	margin:0 auto;
	background:#FFF;
}


/*** top_area ***/
#top_area{
	padding:0 0 5px;
}

#top_area h3{
	font-size:140%;
	font-weight:bold;
	text-align:;left;
	padding:20px 10px 0;
	line-height:1.2;
}


/*** select_area ***/
#select_area{
	width:100%;
	margin:0 auto;
	padding:0 10px 40px;
	background:#FFF;
	overflow:hidden;
	
}

#select_area .select_box{

	background:#c0a15d;
	padding:10px 0;
	text-align:center;
	width:90%;
	margin:0 auto;
	border-radius:10px;
}

#select_area .select_box span{
	font-size:120%;
	font-weight:bold;
	color:#FFF;
	padding:0 20px 0 0;
}


#select_area .select_box select{
	width:60%;
	padding:5px;
	font-size:100%;
}


/*** form_area ***/
#form_area{
	width:100%;
	margin:0 auto;
	min-height:200px;
}

#form_area h2{
	font-size:150%;
	font-weight:bold;
	color:#FFF;
	padding:5px 0;
	text-align:center;
	background:#001e3a;
	margin:0 0 30px;
}


#form_area .job_box{
	border:2px solid #00ABE1;
	padding:5px;
	margin:0 5px 30px;
	overflow:hidden;
	clear:both;
	
}

#form_area .job_box .img{
	float:left;
	width:25%;
}

#form_area .job_box .img img{
	width:100%;
	height:auto;
}

#form_area .job_box .info{
	float:right;
	width:72%;
}

#form_area .job_box .info h4{
	font-size:14px;
	margin:0 0 10px;
}

#form_area .job_box .info h4 span{
	display:inline-block;
	font-size:13px;
	color:#FFF;
	background:#808080;
	border-radius:3px;
	padding:0 5px;
	margin:0 5px 0 0;

}

#form_area .job_box .info h3{
	font-size:16px;
	font-weight:bold;
	margin:0 0 5px;
}

#form_area .job_box .info p{
	font-size:13px;
	margin:0 0 5px;
	line-height:1.3;
}

#form_area .mail_box{
	margin:0 0 20px;
	padding:0 10px;
}

#form_area .mail_box h3{
	font-size:160%;
	font-weight:bold;
	background:url(../../img/common/icon/icon_mail.png) left 2px no-repeat;
	padding:0 0 0 30px;
	margin:0 0 5px;
}

#form_area .mail_box p{
	font-size:120%;
}

#form_area .mail_box p span{
	color:#b12e04;
}


#form_area .form_box table{
	width:95%;
	margin:0 auto;
	border-top:1px solid #d3cec9;
	border-right:1px solid #d3cec9;
}

#form_area .form_box table th{
	background:#EEF0F2;
	width:100%;
	padding:5px;
	vertical-align:middle;
	text-align:left;
	border-bottom:1px solid #d3cec9;
	border-left:1px solid #d3cec9;
	display:block;
	font-size:120%;
}

#form_area .form_box table th span.required{
	display:inline-block;
	float:right;
	font-size:90%;
	color:#FFF;
	font-weight:normal;
	background:#b12e04;
	border-radius:3px;
	padding:0 5px;
	line-height:1.5;
}

#form_area .form_box table th span.note{
	font-size:12px;
	font-weight:normal;
}



#form_area .form_box table td{
	padding:10px 15px;
	border-bottom:1px solid #d3cec9;
	border-left:1px solid #d3cec9;
	font-size:120%;
	display:block;
}

#form_area .form_box table td .sp_box{
	padding:3px 0;
}

#form_area .form_box table td span.name{
	display:inline-block;
	width:40px;
	text-align:right;
	padding:0 5px 0 0;
}

#form_area .form_box table td span.tel{
	display:block;
}


#form_area .form_box table td .error-message{
	font-size:100%;
	font-weight:bold;
	color:#F00;
}

#form_area .form_box table td input{
	padding:5px;
	font-size:16px;
	width:80%;
}

#form_area .form_box table td input.box_125{
	width:70%;
}
#form_area .form_box table td input.box_256{
	width:90%;
}
#form_area .form_box table td input.box_80{
	width:20%;
}



#form_area .form_box table td input[type="radio"]{
	margin:0 3px 0 0;
}

#form_area .form_box table td input[type="radio"]:last-child{
	margin:0 3px 0 30px;
}

#form_area .form_box table td select{
	font-size:18px;
	padding:5px;
}

#form_area .form_box table td textarea{
	padding:3px;
	font-size:120%;
	color:#333;
	width:90%;
	line-height:1.5;
}

#form_area .form_box table td textarea.h_65{
	height:65px;
}
#form_area .form_box table td textarea.h_130{
	height:130px;
}

#form_area .form_box table td input[type="file"]{
	font-size:90%;
	width:80%;
}

#form_area .form_box table td p.note{
	font-size:90%;
	color:#b12e04;
}
	
#form_area .form_box .checkbox_list{
}
	
#form_area .form_box .checkbox_list .checkbox{
}

#form_area .form_box table td input[type="checkbox"]{
	width: auto;
}
	
#form_area .form_box .pc_skill{
	margin: 0 0 10px;
}

#form_area .form_box .pc_skill span{
	display: inline-block;
	width: 30vw;
}
	
#form_area .form_box .button{
	text-align:center;
	padding:20px 0 50px;
}

#form_area .form_box .button button[type="submit"]{
	width:70%;
	background:#001e3a;
	font-size:20px;
	font-weight:bold;
	color:#FFF;
	padding:10px 0;
	border:none;
	border-radius:5px;
}

#form_area .form_box .button button.revise{
	background: #ADADAD;
	margin:0 0 20px;
}

#form_area .form_box .button button[type="submit"]:hover{
	opacity:0.75;
}

/***** form_done *****/
/*** message_area ***/
#message_area{
	width:100%;
	margin:-50px auto 50px;
	padding:0 10px;
}

#message_area .message_box{
	border:1px solid #c0a15d;
	text-align:center;
	padding:30px 0;
}

#message_area .message_box .logo{
	margin:0 auto 20px;
	width:50%;
}

#message_area .message_box .logo img{
	width:100%;
	height:inherit;
}


#message_area .message_box h2{
	font-size:130%;
	font-weight:bold;
	margin:0 0 10px;
}

#message_area .message_box p.h2_txt{
	font-size:110%;
	color:#b12e04;
	margin:0 0 30px;
	text-align:left;
	padding:0 20px;
}


#message_area .message_box p.to_top{
	width:80%;
	margin:0 auto;
}

#message_area .message_box p.to_top a{
	background:#c0a15d;
	font-size:150%;
	font-weight:bold;
	text-align:center;
	display:block;
	padding:10px;
	color:#FFF;
	border-radius:5px;
	position:relative;
}

@font-face {
    font-family: 'icon_arrow';
    src:    url('../../fonts/icon_arrow.eot?h800c4');
    src:    url('../../fonts/icon_arrow.eot?h800c4#iefix') format('embedded-opentype'),
        url('../../fonts/icon_arrow.ttf?h800c4') format('truetype'),
        url('../../fonts/icon_arrow.woff?h800c4') format('woff'),
        url('../../fonts/icon_arrow.svg?h800c4#icon_arrow') format('svg');
    font-weight: normal;
    font-style: normal;
}

#message_area .message_box p.to_top a:after {
	content: "\a900";
    font-family: 'icon_arrow' !important;
	color:#FFF;
	font-size:100%;
	position:absolute;
	right:10px;
	top:25%;
}

#message_area .message_box p.to_top a:hover{
	opacity:0.75;
}

#message_area .message_box p.to_contacts{
	width:80%;
	margin:0 auto;
}

#message_area .message_box p.to_contacts a{
	background:#c0a15d;
	font-size:120%;
	font-weight:bold;
	text-align:center;
	display:block;
	padding:10px;
	color:#FFF;
	border-radius:5px;
	position:relative;
}
#message_area .message_box p.to_contacts a:after {
	content: "\a900";
    font-family: 'icon_arrow' !important;
	color:#FFF;
	font-size:100%;
	position:absolute;
	right:10px;
	top:25%;
}

#message_area .message_box p.to_contacts a:hover{
	opacity:0.75;
}




}