@charset "utf-8";

/*breakpoint
@media screen and ( max-width:1420px) and ( min-width:1081px) {}
@media screen and ( max-width:1080px) and ( min-width:768px) {}
@media screen and ( max-width:767px) {}*/
/*breakpoint_ex
@media screen and ( max-width:1200px) and ( min-width:1081px) {}*/

/*header*/
.head_logo {
	float: left;
}
.logo {
	margin:10px 0 0 20px;
}
@media screen and ( max-width:1080px) {.logo {width:50%;margin:10px 0 0 10px;}}
.tel {
	margin: 20px 20px 0 0;
	float: right;
}
@media screen and ( max-width:1080px) {.tel {display: none;}}

/*mainimage*/
#firstview {
	width:100%;
	height:600px;
	margin: 0 auto;
    max-width: 100%;
	background:url(../img/recruit_bg.png) no-repeat bottom;
    background-size:cover;
}
@media screen and ( max-width:1080px) and ( min-width:768px) {#firstview {width:100%; height: 450px;}}
@media screen and ( max-width:767px) {#firstview {width:100%; height: 450px;}}

.catchcopy {
	width: 80%;
	margin: 0 auto;
	padding: 120px 0 0 30px;
    max-width: 488px;
	min-width: 200px;
	max-height:100%;
}
@media screen and ( max-width:1080px) and ( min-width:768px) {.catchcopy {width:70%; padding: 80px 0 0 30px;}}
@media screen and ( max-width:767px) {.catchcopy {width:80%; padding: 120px 0 0 0;}}

.logo_main {
	width:50%;
	margin: 0 auto;
    max-width: 240px;
	max-height:100%;
	padding: 70px 0 100px;
	text-align: center;
}
@media screen and ( max-width:1080px) and ( min-width:768px) {.logo_main {width:40%; padding: 30px 0 100px;}}
@media screen and ( max-width:767px) {.logo_main {width:45%; padding: 60px 0 100px;}}

.sub_nav {
	width: 100%;
	height: 50px;
	background-color: #5bc1db;
}
.sub_nav ul {
	width: 1024px;
	margin: 0 auto;
	padding: 12px 0 0;
	font-size: 16px;
}
@media screen and ( max-width:1079px) {.sub_nav ul {display: none;}}
.sub_nav li {
	margin: 0 19px;
	float: left;
}
.sub_nav li a {
	font-weight: 700;
}

/*navigation*/
.nav_bt {
	width: 1024px;
	margin: 0 auto;
	position: relative;
	top:-40px;
}
@media screen and ( max-width:1080px) {.nav_bt{display: none;}}
.nav_bt {
	width: 1024px;
	margin: 0 auto;
	position: relative;
}
.nav_bt_sp {
	width:600px;
	max-width: 96%;
	margin: 0 auto;
	position: relative;
	top:-50px;
}
@media screen and ( min-width:1081px) {.nav_bt_sp{display: none;}}
@media screen and ( max-width:1080px) and ( min-width:768px) {.nav_bt_sp{max-width: 80%;}}
.nav_bt li,
.nav_bt_sp li{
	margin: 0 10px 0;
	float: left;
	text-align: center;
	display: block;
	position: relative;
	overflow: hidden;
}
.nav_visi:before,
.nav_bt li:before,
.nav_bt_sp li:before {
	content:"";
	position: absolute;
	top: -140px;
	left: -250px;
	height:680px;
	width:40px;
	background : #fff;
	opacity: 0.25;
	transform: rotate(45deg);
	transition: 0.3s;
}
.nav_visi:hover:before,
.nav_bt li:hover:before,
.nav_bt_sp li:hover:before {
	left:98%;
}
@media screen and ( max-width:1080px) {.nav_bt_sp li{width:30%; height:30%; margin: 3% 1.5% 0 1.5%}}
.nav_bt li span {
	margin: 0 auto;
	text-align: center;
	position: relative;
	font-size: 105%;
	color: #fff;
	top:-42px;
}
.nav_bt li span.exc {
	font-size: 82.5%;
}
.nav_bt_ex {
	width: 1024px;
	margin: 20px auto 0;
}
@media screen and ( max-width:1080px) and ( min-width:768px) {.nav_bt_ex {width: 579px; margin: 0 auto;}}
@media screen and ( max-width:767px) {.nav_bt_ex {width: 98%; max-width: 579px; margin: 0 auto;}}

/*contents*/
.recruit_01 {
	width: 960px;
	margin: 0 auto;
}
@media screen and ( max-width:1080px) {.recruit_01 {width: 90%;}}
.recruit_01 p {
	margin: 100px auto 30px;
	font-size: 31px;
	font-weight: 700;
	color: #42210b;
	text-align: center;
	line-height: 2.0em;
}
@media screen and ( max-width:1080px) and ( min-width:768px) {.recruit_01 p {margin: 40px auto 30px; font-size: 21px;}}
@media screen and ( max-width:767px) {.recruit_01 p {margin: 40px auto 10px;text-align: left; font-size: 20px; font-weight: 400; padding: 0 5%;line-height: 2.2em;}}
.recruit_01_logo {
	width: 240px;
	margin: 80px auto;
	position: relative;
	left: -30px;
}
@media screen and ( max-width:767px) {.recruit_01_logo {left: -20px;}}

/*template*/
.recruit_cont {
	width: 960px;
	height: 480px;
	margin: 100px auto 0;
	clear: both;
}
@media screen and ( max-width:1023px) and ( min-width:768px) {.recruit_cont {width: 70%; margin: 60px auto 0;}}
@media screen and ( max-width:767px) {.recruit_cont {width: 95%;margin: 50px auto 0;}}
.category_txt_r {
	width: 385px;
	float: left;
}
@media screen and ( max-width:1023px) and ( min-width:768px) {.category_txt_r {width: 100%; margin: 20px 0 50px;}}
@media screen and ( max-width:767px) {.category_txt_r {width: 100%;}}
.recruit_cont h2 {
	margin: 15px 0 20px 0;
	font-size: 27px;
	line-height: 2.0em;
	color: #422100;
}
@media screen and ( max-width:767px) and ( min-width:331px) {.recruit_cont h2 {font-size:24px; padding-top: 60px;}}
@media screen and ( max-width:330px) {.recruit_cont h2 {font-size:21px; padding-top: 60px;}}

.recruit_cont h3 {
	margin: -15px 0 20px 0;
	font-size: 27px;
	line-height: 2.0em;
	color: #422100;
}
@media screen and ( max-width:1023px) and ( min-width:768px) {.recruit_cont h3 {margin: 0px 0 20px 0;font-size: 24px;}}
@media screen and ( max-width:767px) and ( min-width:415px) {.recruit_cont h3 {font-size: 28px;}}
@media screen and ( max-width:414px) and ( min-width:361px) {.recruit_cont h3 {font-size: 25px;}}
@media screen and ( max-width:360px) and ( min-width:321px) {.recruit_cont h3 {font-size: 22px;}}
@media screen and ( max-width:320px) {.recruit_cont h3 {font-size: 21px;}}
.recruit_cont p {
	margin: 0 0 20px 0;
	font-size: 17px;
	line-height:2.0em;
}
@media screen and ( max-width:1023px) and ( min-width:768px) {.recruit_cont p { margin: 0px 0 20px 53%;font-size: 18px;}}
@media screen and ( max-width:767px) {.recruit_cont p {margin: 0px 0 20px 0;font-size: 18px;}}
.recruit_cont img {
	width: 545px;
	margin: 0 30px 0 0;
	float: left;
}
@media screen and ( max-width:767px) {.recruit_cont img {width: 100%;margin: 0px 0 30px 0;font-size: 18px;}}

/*tbl_employment*/
.tbl_rec {
	border: solid 1px #000;
}
@media screen and ( max-width:767px) {.tbl_rec {width: 99%;}}
.tbl_emp {
	width: 390px;
	height: 331px;
}
@media screen and ( max-width:1023px) and ( min-width:768px) {.tbl_emp {width: 390px; height: 331px;}}
@media screen and ( max-width:767px) {.tbl_emp {width: 95%; height: 600px; margin: 0 auto;}}
.tbl_item {
	font-size: 13px;
	padding: 3px 4px;
	vertical-align: middle;
	color: #fff;
	background-color: #5bc1db;
	border: solid 1px #000;
}
@media screen and ( max-width:381px) {.tbl_item {display: none;}}
.tbl_item_sp {
	font-size: 13px;
	padding: 3px 5px;
	vertical-align: middle;
	color: #fff;
	background-color: #5bc1db;
	border: solid 1px #000;	
}
@media screen and ( min-width:380px) {.tbl_item_sp {display: none;}}
.tbl_conditions {
	font-size: 13px;
	padding: 3px 5px;
	vertical-align: middle;
	border: solid 1px #000;		
}
.recruit_others {
	width: 960px;
	margin: 100px auto 0;
	clear: both;
}
@media screen and ( max-width:1023px) and ( min-width:768px) {.recruit_others {width: 70%;}}
@media screen and ( max-width:767px) {.recruit_others {width: 90%;}}
.recruit_others h2 {
	font-size: 24px;
	margin: 50px 0;
}
.tbl_others {
	width: 100%;
	height: 200px;
	margin: 0 auto;
	border: solid 1px #000;
}
.tbl_others_cont {
	width: 100%;
	text-align: center;
	vertical-align: middle;
	padding: 50% 0;
}
.tbl_others_cont td{
	padding: 10px;
}

/*contact*/
.recruit_contact {
	width: 960px;
	margin: 80px auto 0;
	padding-top:100px;
	clear: both;
}
@media screen and ( max-width:1023px) and ( min-width:768px) {.recruit_contact {width: 95%;}}
@media screen and ( max-width:767px) {.recruit_contact {width: 90%;}}

.contact_l {
	width:140px;
	margin: 50px 10px 0 0;
	float: left;
}
@media screen and ( max-width:767px) {.contact_l {width: 60%;margin: 30px auto 0; float: none;}}
.contact_r {
	margin: 55px  0 0 180px;
}
@media screen and ( max-width:767px) {.contact_r {width: 95%;margin: 20px auto;}}
.recruit_contact h2 {
	font-size: 24px;
}
.contact_r p {
	font-size: 18px;
	margin-top: 30px;
	line-height: 2.4em;
	font-family: 'Noto Serif';
	font-weight: 700;
	color: #796a56;
}
.contact_ad {
	width: 695px;
	height :220px;
	margin: 80px 0 0;
}
@media screen and ( max-width:768px) {.contact_ad {display: none;}}
.contact_ad_sp {
	width: 100%;
	height :auto;
	margin-top: 50px;
}
@media screen and ( min-width:769px) {.contact_ad_sp {display: none;}}

.bt_others {
	width: 450px;
	height: 90px;
	margin: 60px 0;
}
@media screen and ( max-width:767px) {.bt_others { width: 98%;height: auto;margin: 15px auto 0px;}} 

/*footer*/
footer {
	width: 100%;
	height: auto;
	margin-top: 300px;
	padding: 20px 0;
	background: #92EAFF;
}
@media screen and ( max-width:1080px) {footer { margin-top: 150px;}} 

footer h3 {
	font-size:18px;
	color: #000;
}
footer ul {
	margin-top: 20px;
	line-height: 2.0em;
}
footer a {color: #000;}
footer a:hover {color: #006bbb;}
.foot_inner {
	width:1080px;
	margin: 0 auto;
}
@media screen and ( max-width:1080px) {.foot_inner  {width:98%;}}
#foot_logo {
	width: 25%;
	float: left;
	margin-top: 20px;
}
@media screen and ( max-width:1080px) and ( min-width:768px) {#foot_logo {width: 30%; max-width: 200px; margin-left: 15px;}}
@media screen and ( max-width:767px) {#foot_logo {width: 75%; max-width: 200px; margin: 20px 0 -10px 15px;}}
.foot_cont {
	width:70%;
	float: right;
}
@media screen and ( max-width:1080px) {.foot_cont {width: 100%;}}
.foot_cont_01,
.foot_cont_02,
.foot_cont_03 {
	width: 220px;
	float: left;
	margin: 50px 0 0 30px;
}
@media screen and ( max-width:1080px) and ( min-width:768px) {.foot_cont_01,.foot_cont_02,.foot_cont_03 {width: 30%;margin: 30px 0 0 20px;}}
@media screen and ( max-width:767px) {.foot_cont_01,.foot_cont_02,.foot_cont_03 {width:90%;margin: 50px auto 0px; float: none;}}
small {
	width: 1080px;
	margin: 60px auto 10px;
	text-align: center;
	font-size:14px;
	display: block;
}
@media screen and ( max-width:1080px) {small {width: 100%; font-size:11px;}}

/*breadcrumbs*/
.breadcrumbs {
	width:960px;
	margin: 0 auto;
}
@media screen and ( max-width:1080px) and ( min-width:768px) {.breadcrumbs{width:95%;}}
@media screen and ( max-width:767px) {.breadcrumbs{width:90%;}}
.breadcrumbs ul {
	margin-left:  -4px;
}
.breadcrumbs ul li {
    float: left;
}
#breadcrumbs h1 {
	width:960px;
	margin: 0 auto;
	padding: 60px 0 10px;
	font-family: 'Noto Serif';
	font-size: 32px;
	color: #333;
}
@media screen and ( max-width:1080px) and ( min-width:768px) {#breadcrumbs h1 {width:95%;padding: 40px 0 10px;}}
@media screen and ( max-width:767px) {#breadcrumbs h1 {width:90%; padding: 30px 0 0 0px; font-size: 24px; font-weight: 700;}}
body #contents #breadcrumbs .breadcrumbs ul li span a span {
	font-family: 'Noto Serif';
	font-size: 16px;
	color: #333;
}
@media screen and ( max-width:767px) {body #contents #breadcrumbs .breadcrumbs ul li span a span{font-size: 12px;}}
.breadcrumbs ul li:first-child::before {
    padding: 0 7px 0 0;
	color: #333;
	font-family: "Font Awesome 5 Free";
	content: "";
	font-family: FontAwesome;
    font-size: 16px;
}
.breadcrumbs ul li::before {
    padding: 0 7px 0;
	color: #333;
	font-family: "Font Awesome 5 Free";
	content: "\f105";
    font-family: FontAwesome;
    font-size: 16px;
}

/*switch_css*/
.switch_css {
	width: ;
	height: ;
	position: absolute;
	top: 37px;
	right: 360px;
}
@media screen and ( max-width:1080px) and ( min-width:768px) {.switch_css {top: 6px; right: 50px;}}
@media screen and ( max-width:767px) {.switch_css {top: 8px; right: 50px;}}

.switch_css li {
	width: 32px;
	height: 28px;
	margin: 0 10px;
	padding-top: 5px;
	float: left;
	text-align: center;
	font-size: 15px;
	border: solid 3px #ccc;
}
.switch_css li.large {
	width: 32px;
	height: 30px;
	padding-top: 3px;
	font-size: 18px;
	color: #ccc;
	border: solid 3px #5bc1db;
}
.switch_css li a {
	display: block;
}

/*background*/
.bg_01 {
	width: 330px;
	height: auto;
	position: absolute;
	top: 780px;
	right: 0;
	z-index: -9999;
}
@media screen and ( max-width:1080px) and ( min-width:768px) {.bg_01 {width: 180px; top: 550px;}}
@media screen and ( max-width:767px) and ( min-width:415px) {.bg_01 {width: 150px;top: auto;}}
@media screen and ( max-width:414px) {.bg_01 {width: 60px;top: auto;}}

.bg_02 {
	width: 100px;
	height: auto;
	position: absolute;
	top: 780px;
	left: 0;
	z-index: -9999;
}
@media screen and ( max-width:1080px) and ( min-width:1024px) {.bg_02 {width: 80px; top: 550px;}}
@media screen and ( max-width:1023px) and ( min-width:768px) {.bg_02 {width: 70px; top: 550px;}}
@media screen and ( max-width:767px) and ( min-width:415px) {.bg_02 {width: 60px;top: auto;}}
@media screen and ( max-width:414px) {.bg_02 {width: 15px;top: auto;}}