@charset "utf-8";

/*-------------------------------------*/
/* テーブルフォーマット */
/*-------------------------------------*/

table.recruit01{
	border-top: 1px solid #ccc;
	width: 700px;
	margin-bottom: 30px;
}

table.recruit01 td{
	padding: 14px 7px;
	border: 1px solid #ccc;
	vertical-align: top;
	width: 100px;
}
table.recruit01 th{
	padding: 5px;
	width: 10px;
	background-color: #ccc;
	border-bottom: 1px solid #fff;
}


table.recruit01 td img{
	padding-left: 20px;
}

table.tableDec1 th{ background: #efefef; padding-left: 10px;}
table.tableDec2 th{ background: #333; color: #fff; padding-left: 10px;}
table.tableDec3 th{ background: #d5ceb1; color: #fff; padding-left: 10px; border-bottom: 1px solid #fff; color: #333;}

/*-------------------------------------*/
/* 研修 */
/*-------------------------------------*/

p{margin: 0;padding: 0;line-height: 1.8}

#r-box {
  width: 650px;
  overflow: hidden;/*float解除*/
  margin: auto;
}
#r-box .space {
  float: right;/*画像の位置を右下にしたい場合はright*/
  height: 4.7em;/*画像上の余白の高さ*/

}
#r-box .img {
  float: right;/*画像の位置を右下にしたい場合はright*/
  clear: both;/*.spaceのfloat解除*/
  margin: 1.2em 1.2em 0 0;/*画像の周りの余白*/
}

/*-------------------------------------*/
/* 20180921追加 */
/*-------------------------------------*/
body {
	font-size: 14px;
}

div#mainContents {
	float: none;
	margin: 0 auto;
}

.entrance {
	width: 93%;
	padding: 10px 15px;
	margin: 20px auto;
	text-align: left;
	border-radius: 10px;
	text-align: justify;
}

/*.entrance:hover {
	background-color: #FFFFEE;
	box-shadow: 2px 2px 3px #999999;
}*/

#main .entrance h4 p {
	font-size: 12px;
	margin: 0;
	display: inline;
}

#main a {
	color: #333333;
	text-decoration: none;
}

#main h3 {
	font-size: 20px;
	font-weight: normal;
}

#gaiyo h3 {
	font-size: 20px;
	font-weight: normal;
	margin-bottom: 5px;
	padding: 16px 10px 10px 10px;
	border-bottom: 1px dotted #ddd;
	background:#fff url("../fukusiyougu/images/bg_main_h3.gif") 0 0 repeat-x;
	color:#000;
	border-top: none;
	border-left: none;
	border-right: none;
	text-align: left;
}

#main h4 {
    margin: 4px 0 0;
    padding: 5px 5px 0;
    font-size: 18px;
    border-bottom: none;
    border-left: 0;
    font-weight: bold;
}

#main ul { margin: 5px 0 0;}
#main ul li{ 
	border-top: 1px dotted #ccc;
	line-height: 20px;
	margin: 5px 0;
	padding: 10px 0 0;
	line-height: 1.5em;
}

#main ul li:last-child{ 
	text-align: right;
	font-weight: bold;
	color: #63c068;
}

.chapter3 {
	font-size: 20px;
	font-weight: normal;
}

.employment {
	display: inline-block;
    text-align: left;
    padding: 1px 6px;
	font-size: 13px;
	vertical-align: top;
}

.beginning {
	color: #333;
	margin-top: 5px;
	font-size: 14px;
}

.beginning li span {
	color: #FFF;
	margin-top: 5px;
	font-size: 14px;
	padding: 6px 20px;
	background-color: #63c068;
	border-radius: 5px;
}

ul.bgList4 li.midashi {
	background: none;
	padding-left: 3px;
}

.b { 
	font-weight: bold;
	font-size: 14px;
}

.beginning .b {
	display: contents;
}

#rec_form a {
    border: 1px solid #FF69B4;
    background-color: #FF69B4;
}

#rec_form a:hover {
	background: none;
	color: #FF69B4;
	border: 1px solid #FF69B4;
}

#gaiyo { margin: 20px auto;}

.bp770 { display: none; }
.bp500 { display: none; }


.sdgs_img { text-align: center;}
.sdgs_img img {
	width: 80%;
	margin: 30px auto;
}

#main table.sdgs { 
	border: 1px solid #999;
}

#main tr.sdgs03 { background-color: rgba( 27, 151, 58, 0.1 )} #main tr.sdgs03 h4 { color: #1b973a;}
#main tr.sdgs04 { background-color: rgba( 197, 14, 40, 0.1 )} #main tr.sdgs04 h4 { color: #c50e28;}
#main tr.sdgs05 { background-color: rgba( 232, 52, 24, 0.1 )} #main tr.sdgs05 h4 { color: #e83418;}
#main tr.sdgs08 { background-color: rgba( 151, 10, 49, 0.1 )} #main tr.sdgs08 h4 { color: #970a31;}
#main tr.sdgs10 { background-color: rgba( 220, 9, 123, 0.1 )} #main tr.sdgs10 h4 { color: #dc097b;}
#main tr.sdgs11 { background-color: rgba( 245, 162, 11, 0.1 )} #main tr.sdgs11 h4 { color: #f5a20b;}
#main tr.sdgs12 { background-color: rgba( 211, 146, 6, 0.1 )} #main tr.sdgs12 h4 { color: #d39206;}
#main tr.sdgs13 { background-color: rgba( 64, 121, 54, 0.1 )} #main tr.sdgs13 h4 { color: #407936;}
#main tr.sdgs15 { background-color: rgba( 70, 175, 82, 0.1 )} #main tr.sdgs15 h4 { color: #46af52;}
#main tr.sdgs17 { background-color: rgba( 0, 48, 103, 0.1 )} #main tr.sdgs17 h4 { color: #003067;}

#main table.sdgs th { background: none;}
#main th .sdgs_logo {
	padding: 20%;
}
th .sdgs_logo img {width: 100%;}
td.explanation {width: 80%}

div.wrapBox {padding: 0;}

@media screen and (min-width:500px) and ( max-width:770px) {
    /*　画面サイズが500pxから770pxまではここを読み込む　*/
	
	body { font-size: 14px;}
	#main h4 { font-size: 17px;}
	.employment { font-size: 15px;}
	div#mainContents .OLVbtn .btn, div#mainContents .topicsBox .btn, .recbtn a , .beginning , .b { font-size: 15px; }
	
	.job_card {
		text-align: center;
	}
	
	/*#sales_staff .job_card , #head_office .job_card {
		text-align: left;
	}*/



	.entrance {
		width: 90%;
		}

	.bp770 { display: inherit;}
	.bp500 { display: none;}

}

@media screen and (max-width: 499px) {
    /* 499px以下の幅の場合に適応される */
	
	body { font-size: 14px;}
	#main h4 { font-size: 17px;}
	.employment {
		font-size: 14px;
		margin: 10px 2px 20px;
	}
	
	div#mainContents .OLVbtn .btn, div#mainContents .topicsBox .btn, .recbtn a , .beginning , .b { font-size: 15px; }
	
	.job_card {
		text-align: center;
	}
	
	#sales_staff .job_card , #head_office .job_card {
		text-align: center;
	}
	
	div#mainContents .OLVbtn .btn, div#mainContents .topicsBox .btn, .recbtn a , #rec_form a{
		width: 64%;
	}
	
	#main table {width: 100%;}
	
	#main th .sdgs_logo {
		padding: 10px;
		text-align: center;
	}
	
	#main table.sdgs th , td.explanation {
		display: table;
		width: 100%;
		border-top: 2px solid #999;
	}

	#main table.sdgs .sdgs03 th {
		border-top: 1px solid #999;
	}
	
	.sdgs_img img {width: 100%}
	th .sdgs_logo img {width: 50%;}
	
	.entrance {
		width: 80vw;
		}
	


	.bp770 { display: inherit;}
	.bp500 { display: inherit;}
}
