/* ===================================================================
CSS information
file name  :  siteoriginalcss.css
style info :  サイト固有デザインCSS
=================================================================== */
@keyframes fadeIn {
    from {opacity:0;}
    to {opacity:1;}
}
@keyframes fadeOut {
    from {opacity:1;}
    to {opacity:0;}
}
@keyframes fadeInOut {
/*animation: fadeInOut 2s ease infinite alternate;*/
    100% {opacity:1;}
    50% {opacity:0.5;}
    0% {opacity:1;}
}
@keyframes spin {
  100% {transform: rotate(1turn); }
}
@keyframes flash {
/*animation: flash 2s ease infinite alternate;*/
	from { opacity: 1; }	
	to { opacity: 0.6; }
}
@keyframes bounce {
/*animation: bounce 2s ease infinite;*/
	0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
	40% {transform: translateY(-15px);}
	60% {transform: translateY(-7px);}
}
@keyframes bounce-in {
  0% {transform: scale(1);}
25% {transform: scale(.3);}
  50% {transform: scale(1.02);}
  70% { transform: scale(.9); }
  100% { transform: scale(1); }
}

/*======================================右下固定======================================*/

.fixConsideration{
position:fixed;
width: 100%;
bottom: 0;
background-color: rgba(0,0,0,0.3);
z-index: 99;
display: none;
}

.fixconsiderationcontents{
padding: 20px 0;

}
/*======================================トップ======================================*/
/*-----------------検索-----------------*/
.topsearch_box{
display: flex;
align-items: flex-start;
flex-wrap: wrap;
}
.topsearch_left{width:52%;}
.topsearch_right{width:48%;}
.topserachtitle{
position: relative;
display: inline-block;
border-radius: 5px;
padding: 7px 10px;
min-width: 120px;
max-width: 100%;
color: #FFFFFF;
background-color: #EC233C;
font-weight: bold;
text-align: center;
}
.topserachtitle:before {
content: "";
position: absolute;
top: 50%;
left: 100%;
margin-top: -5px;
border: 5px solid transparent;
border-left: 10px solid #EC233C;
}
@media screen and (min-width:0px) and (max-width: 769px) {/* 769px以下*/
.topsearch_left{width:100%;}
.topsearch_right{width:100%;}
.topserachtitle{padding:0px; }
.topserachtitle:before {border:none;}
}
/*-----------------フリーワード-----------------*/
.freeword_box_input {
 width:378px;
 float:left;
 margin-right:10px;
}
.freeword_box_button {
 width:85px;
 float:left;
}
/*-----------------メニュー-----------------*/
.topmenuback_wrapper {
position: relative;
cursor: pointer;
}
.topmenuback_wrapper a {
position: absolute;
top: 0;
left: 0;
height:100%;
width: 100%;
}
.topmenuback_wrapper a:hover{/* マウスオーバー時に色変更*/
opacity: 0.1;
background-color: #000000;
}
.topmenuback{
text-align: center;
margin: 0 auto;
width:80%;
padding: 25px;
background-color: rgba(255,255,255,0.80);
}
.topmenubackicon{
color: #208ddb;
font-weight: bold;
}
.topmenubaktitle{
font-weight: bold;
}

/*======================================地図======================================*/
.japan_map{
    position: relative;
}
/* 日本地図ボタン */
.japan_map .area_btn{
    position: absolute;
    z-index: 1;
    cursor: pointer;
    padding: 0 10px 0 10px;
    text-align: center;
    white-space: nowrap;
    color: white;
    font-weight: bold;
}
.area_btn a{
color: white;
}

/* ボタン配置（使用する日本地図画像により微調整） */
.japan_map .area_btn.area_hokkaido{
top: 8%;
right: 40%;
background-color: #2D728C;
}
.japan_map .area_btn.area_tokyo{
top: 80%;
right: 1%;
background-color: #4CD060;
}
.japan_map .area_btn.area_koushin{
top: 32%;
right: 40%;
background-color: #DD777D;
}
.japan_map .area_btn.area_toukai{
top: 80%;
right: 40%;
background-color: #F19B4C;
}
.japan_map .area_btn.area_kinki{
top: 40%;
right: 58%;
background-color: #AF79A4;
}
.japan_map .area_btn.area_chugoku{
top: 90%;
left: 35%;
background-color: #8690CE;
}
.japan_map .area_btn.area_kyushu{
top: 50%;
left: 0;
background-color: #D83956;
}



/*======================================求人案内======================================*/
.jobstatus_title{
font-weight: bold;
}
.jobstatus_workno{
text-align: right;
}
.jobstatus_worknew{
font-weight: bold;
display: inline-block;
border: solid 1px #ec627a;
color: #FFFFFF;
background-color: #ec627a;
padding: 3px 10px 2px 10px;
border-radius: 5px;
animation: fadeInOut 2s ease infinite alternate;
}
.jobstatus_box{
padding: 25px;
border-radius: 4px;
background: #fff;
-webkit-box-shadow: 0 0 0 1px rgba(0,0,0,.02), 0 2px 4px 0 rgba(0,0,0,.2);
box-shadow: 0 0 0 1px rgba(0,0,0,.02), 0 2px 4px 0 rgba(0,0,0,.2);
}
.jobstatus_osusumetitle{
font-weight: bold;
color: #ff686c;
}
.jobstatus_normaltitle{
font-weight: bold;
color:#208ddb;
}
.jobstatus_employment_status{
display: inline-block;
font-weight: bold;
border-radius: 5px;
text-align: center;
padding: 2px 10px 1px 10px;
margin-right: 5px;
margin-bottom: 5px;
color: #AD152F;
border: solid 1px #AD152F;
animation: bounce-in 1s 1s 1 ease;
}
.jobstatus_jobfeatures_industry{
display: inline-block;
font-weight: bold;
border-radius: 5px;
text-align: center;
padding: 3px 10px 2px 10px;
margin-right: 5px;
margin-bottom: 5px;
color: #FF2D00;
border: solid 1px #FF2D00;
animation: bounce-in 1s 1.5s 1 ease;
}
.jobstatus_jobfeatures_requirements{
display: inline-block;
font-weight: bold;
border-radius: 5px;
text-align: center;
padding: 3px 10px 2px 10px;
margin-right: 5px;
margin-bottom: 5px;
color: #26A69A;
border: solid 1px #26A69A;
animation: bounce-in 1s 2s 1 ease;
}
.jobstatus_jobfeatures_workinghours{
display: inline-block;
font-weight: bold;
border-radius: 5px;
text-align: center;
padding: 3px 10px 2px 10px;
margin-right: 5px;
margin-bottom: 5px;
color: #FF8C00;
border: solid 1px #FF8C00;
animation: bounce-in 1s 2.5s 1 ease;
}
.jobstatus_jobfeatures_office{
display: inline-block;
font-weight: bold;
border-radius: 5px;
text-align: center;
padding: 3px 10px 2px 10px;
margin-right: 5px;
margin-bottom: 5px;
color: #9C27B0;
border: solid 1px #9C27B0;
animation: bounce-in 1s 3s 1 ease;
}
.jobstatus_area{
display: inline-block;
font-weight: bold;
border-radius: 5px;
text-align: center;
padding: 3px 10px 2px 10px;
margin-right: 5px;
margin-bottom: 5px;
color: #588F27;
border: solid 1px #588F27;
animation: bounce-in 1s 3.5s 1 ease;
}
.jobstatus_jobcategory{
display: inline-block;
font-weight: bold;
border-radius: 5px;
text-align: center;
padding: 3px 10px 2px 10px;
margin-right: 5px;
margin-bottom: 5px;
color: #420F8D;
border: solid 1px #420F8D;
animation: bounce-in 1s 4s 1 ease;
}

/*======================================求人詳細ページ文字レスポンシブ======================================*/

@media (min-width: 1000px) {/* 1000px以上*/
.jobstatus_osusumetitle,.jobstatus_normaltitle{font-size: 2rem;}
.jobstatus_title {font-size: 3.6rem;}
.jobstatus_worknew,
.jobstatus_jobfeatures_industry, 
.jobstatus_employment_status, 
.jobstatus_jobfeatures_requirements,
.jobstatus_jobfeatures_workinghours, 
.jobstatus_jobfeatures_office, 
.jobstatus_area, 
.jobstatus_jobcategory{font-size: 1.4rem;}
}
@media (min-width: 768px) and (max-width: 999px) {/* 999px以下*/
.jobstatus_title {
font-size: 3.6rem;/* IE8以下とAndroid4.3以下用フォールバック */
font-size: calc(2.4rem + ((1vw - 0.768rem) * (12/2.32)));/* 24px~36pxで可変*/
line-height: 1.3;
}
.jobstatus_osusumetitle,.jobstatus_normaltitle{
font-size: 2rem;/* IE8以下とAndroid4.3以下用フォールバック */
font-size: calc(1.4rem + ((1vw - 0.768rem) * (6/2.32)));/* 16px~36pxで可変*/
line-height: 1.3;
}
.jobstatus_worknew,
.jobstatus_jobfeatures_industry, 
.jobstatus_employment_status, 
.jobstatus_jobfeatures_requirements,
.jobstatus_jobfeatures_workinghours, 
.jobstatus_jobfeatures_office, 
.jobstatus_area, 
.jobstatus_jobcategory{
font-size: 1.4rem;/* IE8以下とAndroid4.3以下用フォールバック */
font-size: calc(1.2rem + ((1vw - 0.768rem) * (2/2.32)));/* 16px~36pxで可変*/
line-height: 1.3;
}
}
@media screen and (min-width:0px) and (max-width: 769px) {/* 769px以下*/
.jobstatus_title {font-size: 2.4rem;}
.jobstatus_osusumetitle,.jobstatus_normaltitle{font-size: 1.6rem;}
.jobstatus_worknew,
.jobstatus_jobfeatures_industry, 
.jobstatus_employment_status, 
.jobstatus_jobfeatures_requirements,
.jobstatus_jobfeatures_workinghours, 
.jobstatus_jobfeatures_office, 
.jobstatus_area, 
.jobstatus_jobcategory{font-size: 1.2rem;}
}
/*=======================求人情報=======================*/

/*=============================
Case Study/slick用
=============================*/
.newjob{
width: 100%;
}
.newjob_wrapper{
background-color: rgba(255,255,255,0.9);
margin: 0 5px 0 0;
border: solid 1px #bbb0b2;
}
.newjob_worknew{
font-weight: bold;
display: inline-block;
color: #FFFFFF;
background-color: #ec627a;
padding: 0px 10px 0px 10px;
border-radius: 5px;
animation: fadeInOut 2s ease infinite alternate;
}
.newjob_title_box{
padding: 10px 15px 15px 15px;
background-color: #C01A19;
color: #FFFFFF;
font-weight: bold;
}
.newjob_title{
color: white;
font-weight: bold;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.newjob_title2line{
font-weight: bold;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.newjob_contents{
padding: 0px 15px 15px 15px;
}
.newjob_contents_title{
color: white;
display: inline-block;
padding: 0px 10px 0 10px;
margin-right: 10px;
background-color: #EC233C;
}
.newjob_workarea{
display: inline-block;
font-weight: bold;
border-radius: 5px;
cursor: pointer;
text-align: center;
padding: 2px 10px 1px 10px;
margin-right: 5px;
margin-bottom: 5px;
color: #588F27;
border: solid 1px #588F27;
animation: bounce-in 1s 1s 1 ease;
}
.newjob_jobno{

}
/*======================================検討中ボタン======================================*/
.jobstatus_link_box{
display: inline-block;
text-align: center;
padding: 8px 10px 5px 10px;
color: #00796B;
border: solid 1px #00796B;
background-color: #FFF;
border-radius: 3px;
transition: .4s;
}
.jobstatus_link_box:after{
font-family: "Font Awesome 5 Free"; 
font-weight: 900; 
content: "\f105";
color: #00796B;
margin-left: 5px;
transition: .4s;
}
.jobstatus_link_box:hover {
background: #00796B;
color: #FFF;
border: solid 1px #00796B;
text-decoration: none;
cursor: pointer;
}
.jobstatus_link_box:hover:after{
color: #FFF;
}

/*======================================応募ボタン======================================*/
.submit_arrow_move_en {
display: inline-block;
padding: 8px 10px 5px 10px;
text-decoration: none;
color: white;
text-align: center;
border: solid 1px #AD152F;
background-color: #AD152F;
border-radius: 3px;
transition: .4s;
animation: bounce 4s 10s ease infinite;
}
.submit_arrow_move_en:after{
font-family: "Font Awesome 5 Free"; 
font-weight: 900; 
content: "\f105";
color: #FFFFFF;
margin-left: 5px;
transition: .4s;
}
.submit_arrow_move_en:hover {
background: #0073BC;
color: white;
border: solid 1px #0073BC;
cursor: pointer;
}
.submit_arrow_move_en:hover:after{
font-family: "Font Awesome 5 Free"; 
margin-left: 10px;
font-weight: 900; 
content: "\f101";
color: #FFFFFF;
transition: .4s;
}
a.submit_arrow_move_en{
text-decoration: none;
}

/*======================================検索ボタン======================================*/
.submit_arrow_move_or {
display: inline-block;
padding: 8px 10px 5px 10px;
text-decoration: none;
color: white;
text-align: center;
border: solid 1px #B89500;
background-color: #B89500;
border-radius: 3px;
transition: .4s;
animation: bounce 4s 10s ease infinite;
}
.submit_arrow_move_or:after{
font-family: "Font Awesome 5 Free"; 
font-weight: 900; 
content: "\f105";
color: #FFFFFF;
margin-left: 5px;
transition: .4s;
}
.submit_arrow_move_or:hover {
background: #0073BC;
color: white;
border: solid 1px #0073BC;
cursor: pointer;
}
.submit_arrow_move_or:hover:after{
color: white;
margin-left: 15px;
}
a.submit_arrow_move_or{
text-decoration: none;
}

/*======================================検索ボタン======================================*/
.submit_arrow_move_or2 {
display: inline-block;
padding: 8px 10px 5px 10px;
text-decoration: none;
color: white;
text-align: center;
border: solid 1px #B89500;
background-color: #B89500;
border-radius: 3px;
transition: .4s;
}
.submit_arrow_move_or2:after{
font-family: "Font Awesome 5 Free"; 
font-weight: 900; 
content: "\f105";
color: #FFFFFF;
margin-left: 5px;
transition: .4s;
}
.submit_arrow_move_or2:hover {
background: #0073BC;
color: white;
border: solid 1px #0073BC;
cursor: pointer;
}
.submit_arrow_move_or2:hover:after{
color: white;
margin-left: 15px;
}
a.submit_arrow_move_or2{
text-decoration: none;
}

/*======================================検索ページページャー======================================*/

.pagination{}
.pagination .disabled{  }
.pagination a{ 
font-weight: bold;
color: #FFF;
display: inline-block;
border: solid #FFF 3px;
background-color: #208AD8;
padding: 25px 0 25px 0;
text-decoration: none;
transition: .4s;
}
.pagination a:hover{
opacity: 0.8;
background-color:#EC233C;
border: solid #EC233C 1px; 
color: #FFF;
}
.pagination .current{ 
font-weight: bold; 
border: solid #208AD8 1px; 
background-color: #FFFFFF;
color: #000000;
}

/*======================================応募ページ======================================*/
.link_box_entrynohover{
display: inline-block;
padding: 8px 10px 5px 10px;
border: solid 3px #96CA2D;
background-color: #FFF;
border-radius: 3px;
transition: .4s;
pointer-events:none;
color: #43474b;
}

/*======================================ヘッダー要素======================================*/
.header_box{
display: flex;
align-items: center;
flex-wrap: wrap;
}
.header_left{width:40%;}
.header_right{width:60%;}
.header_faq,.header_faq a{font-size:1.2rem; text-align: center; font-weight: bold; color: black; text-decoration: none;}
.header_office,.header_office a{font-size:1.2rem; text-align: center; font-weight: bold; color: black; text-decoration: none;}
.header_company,.header_company a{font-size:1.2rem; text-align: center; margin-right: 5px; font-weight: bold; color: black; text-decoration: none;}

/*=======================ヘッダーhoverアニメーション=======================*/
.header_mypage{
font-size:1.2rem;
display: inline-block;
padding: 5px;
text-align: center;
color: #FFF;
background-color: #ff5252;
border-radius: 3px;
transition: .4s;
}
.header_mypage:after{
font-weight: 900; 
color: #ff5252;
margin-left: 5px;
transition: .4s;
}
.header_mypage:hover {
background: #ff8c8c;
color: #FFF;
text-decoration: none;
cursor: pointer;
}
.header_mypage:hover:after{
color: #ff8c8c;
}

/*============================ ヘッダー検討中フォルダ ============================*/
.header_come{
font-size:1.2rem;
display: inline-block;
padding: 5px;
text-align: center;
color: #FFF;
background-color: #00796B;
border: solid 1px #00796B;
border-radius: 3px;
transition: .4s;
}
.header_come:after{
font-weight: 900; 
color: #00796B;
margin-left: 5px;
transition: .4s;
}
.header_come:hover {
background: #FFFFFF;
color: #00796B;
text-decoration: none;
cursor: pointer;
border: solid 1px #00796B;
}

/*============================ ヘッダーマイページ ============================*/
.header_mypage_s {
display: inline-block;
padding: 0px 10px 0px 10px;
text-decoration: none;
border-radius: 3px;
transition: .4s;
text-align: center;
color: #AD152F;
border: solid 1px #AD152F;
background-color: #FFFFFF;
}
.header_mypage_s:hover {
background: #AD152F;
color: #FFFFFF;
cursor: pointer;
}
a.header_mypage_s {
text-decoration: none;
}

/*============================ ヘッダーマイページ ============================*/
.header_mypage_r_s {
display: inline-block;
padding: 0px 10px 0px 10px;
text-decoration: none;
text-align: center;
border-radius: 3px;
transition: .4s;
color: #FFFFFF;
border: solid 1px #FD7400;
background-color: #FD7400;
}
.header_mypage_r_s:hover {
color: #FD7400;
border: solid 1px #FD7400;
background: #FFFFFF;
cursor: pointer;
}

a.header_mypage_r_s {
text-decoration: none;
}

/*============================ 202109調整 ============================*/
.newjob_title_box {
min-height: 96px;
}

.newjob_contents {
min-height: 320px;
}

.submit_arrow_move_en,
.submit_arrow_move_or,
.jobstatus_employment_status,
.newjob_worknew,
.newjob_workarea,
.jobstatus_worknew,
.jobstatus_area,
.jobstatus_jobfeatures_industry,
.jobstatus_jobfeatures_requirements,
.jobstatus_jobfeatures_workinghours,
.jobstatus_jobfeatures_office,
.jobstatus_jobcategory {
    animation: none !important;
}

/*============================ top-mv 202109追記 ============================*/
.top-mv {
    height: 200px;
    position: relative;
}

@media screen and (max-width:768px) {
    .top-mv {
        padding: 16px;
        height: auto;
    }
}

.top-mv h2 {
    padding-top: 76px;
    margin: 0 !important;
    font-size: 2vw;
    font-weight: normal !important;
    color: #fff;
    text-align: center;
}

@media screen and (max-width:768px) {
    .top-mv h2 {
        padding: 0;
        margin: 16px 0 24px !important;
        font-size: 5vw;
    }
}

.top-mv-mypage-box {
    position: absolute;
    right: 1%;
    top: 50%;
    transform: translateY(-50%);
    background: #fff;
    border-radius: 3px;
    padding: 16px 16px 8px;
}

@media screen and (max-width:768px) {
    .top-mv-mypage-box {
        padding: 12px 12px 0px;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        position: unset;
        transform: unset;
    }
}

.top-mv-mypage-register,
.top-mv-mypage-login {
    width: 100%;
    margin-bottom: 8px;
    padding: 12px;
    color: #fff;
    background: #ad152f;
    border: solid 1px #ad152f;
    border-radius: 5px;
    font-size: 16px;
    font-weight: 600;
    text-align: center;
    display: block;
    line-height: 1;
    transition: .4s;
}

@media screen and (max-width:768px) {

    .top-mv-mypage-register,
    .top-mv-mypage-login {
        width: 48%;
        margin: 1%;
        font-size: 14px;
    }
}

.top-mv-mypage-register {
    color: #fff;
    background: #ad152f;
}

.top-mv-mypage-register:hover {
    color: #ad152f;
    background: #fff;
    text-decoration: none;
}

.top-mv-mypage-login {
    color: #ad152f;
    background: #fff;
}

.top-mv-mypage-login:hover {
    color: #FFF;
    background: #ad152f;
    text-decoration: none;
}


.top-mv-aboutmypage {
    text-align: right;
    display: block;
    font-size: 14px;
}

@media screen and (max-width:768px) {
    .top-mv-aboutmypage {
        font-size: 12px;
        width: 100%;
        line-height: 3;
    }
}

/*======================================求人応募ページ ポップアップフッター======================================*/
.fixJobentry {
    position: fixed;
    width: 100%;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.3);
    z-index: 99;
    display: none;
}

.fixjobentrycontents {
    padding: 20px 0;
}

.link_box_maxwidth {
    max-width: 585px;
    margin: auto;
}