@charset "UTF-8";
/* CSS Document */

/*************************************************************************************************************************
* recruit > job
*************************************************************************************************************************/

.job{ padding: 38px 0 70px;}


@media print, screen and (min-width: 768px){
	.job{ padding: 65px 0 80px;}

}




/* menu
*************************************************************************************************************************/
.job-menu{ padding: 40px 30px 0;}

.job-select{ background: linear-gradient(to right, #32c8ff 0%,#aaf032 100%); width: 100%; max-width: 315px; height: 50px; margin: 0 auto; padding: 1px; border-radius: 25px; overflow: hidden;}
.job-select__wrap{ background: #fff; width: 100%; height: 100%; position: relative; border-radius: 24px; overflow: hidden;}
.job-select__wrap  select{ background: none; width: calc(100% - 60px); height: 100%; padding: 0 0 0 60px; border: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; font: 16px/1 YakuHanRP,'M PLUS Rounded 1c',"sans-serif"; text-align: center; color: #5ac8e6; -webkit-tap-highlight-color:rgba(0,0,0,0); cursor:pointer; outline: none;}
.job-select__wrap::before,
.job-select__wrap::after{ content: "";  position: absolute; top: 50%;}
.job-select__wrap::before{ width: 36px; height: 36px; left: 15px; transform: translateY(-50%);}
.job-select__wrap--designer::before{ background: url("../../common/img/ico_job-designer.svg") no-repeat 0 0/contain;}
.job-select__wrap--programmer::before{ background: url("../../common/img/ico_job-programmer.svg") no-repeat 0 0/contain;}
.job-select__wrap--planner::before{ background: url("../../common/img/ico_job-planner.svg") no-repeat 0 0/contain;}
.job-select__wrap--engineer::before{ background: url("../../common/img/ico_job-engineer.svg") no-repeat 0 0/contain;}
.job-select__wrap--marketing::before{ background: url("../../common/img/ico_job-marketing.svg") no-repeat 0 0/contain;}
.job-select__wrap--soumu::before{ background: url("../../common/img/ico_job-soumu.svg") no-repeat 0 0/contain;}
.job-select__wrap::after{ background: url("../../common/img/ico_arrow_l.svg") no-repeat 0 0/contain; width: 9px; height: 16px; right: 20px; transform: translateY(-50%) rotate(90deg);}

.job-btns{ display: none;}


@media print, screen and (min-width: 768px){
	.job-menu{ padding: 80px 30px 0;}

}


@media print, screen and (min-width: 1100px){
	.job-select{ display: none;}

	.job-btns{ display: flex; justify-content: space-between; width: 1000px; margin: 0 auto;}
	.job-btns__item{ width: calc(20% - 1px); position: relative;}

	.job-btns__link{ display: block; background: #f5fafa; height: 100px; padding: 65px 0 0; line-height: 1; color: #5ac8e6; text-align: center; transition: .3s ease-out;}
	.job-btns__link:hover{ background: #fff;}
	.job-btns__link::before{ content: ""; width: 36px; height: 36px; position: absolute; top: 19px; left: 50%; transform: translateX(-50%);}
	.job-btns__link--designer::before{ background: url("../../common/img/ico_job-designer.svg") no-repeat 0 0/contain;}
	.job-btns__link--programmer::before{ background: url("../../common/img/ico_job-programmer.svg") no-repeat 0 0/contain;}
	.job-btns__link--planner::before{ background: url("../../common/img/ico_job-planner.svg") no-repeat 0 0/contain;}
	.job-btns__link--engineer::before{ background: url("../../common/img/ico_job-engineer.svg") no-repeat 0 0/contain;}
	.job-btns__link--marketing::before{ background: url("../../common/img/ico_job-marketing.svg") no-repeat 0 0/contain;}
	.job-btns__link--soumu::before{ background: url("../../common/img/ico_job-soumu.svg") no-repeat 0 0/contain;}

	 .job-btns__item--now::before{ content: ""; background: linear-gradient(to right, #32c8ff 0%,#aaf032 100%); width: 100%; height: 3px; position: absolute; top: 0; left: 0;}
	 .job-btns__item--now .job-btns__link{ background: #fff;}

	.job-btns__item--off .job-btns__link{ background: rgba(255,255,255,.8); pointer-events: none; color: #eee;}
	.job-btns__item--off .job-btns__link--designer::before{ background-image: url("../../common/img/ico_job-designer_off.svg");}
	.job-btns__item--off .job-btns__link--programmer::before{ background-image: url("../../common/img/ico_job-programmer_off.svg");}
	.job-btns__item--off .job-btns__link--planner::before{ background-image: url("../../common/img/ico_job-planner_off.svg");}
	.job-btns__item--off .job-btns__link--engineer::before{ background-image: url("../../common/img/ico_job-engineer_off.svg");}
	.job-btns__item--off .job-btns__link--marketing::before{ background-image: url("../../common/img/ico_job-marketing_off.svg");}
	.job-btns__item--off .job-btns__link--soumu::before{ background-image: url("../../common/img/ico_job-soumu_off.svg");}

}



/* info
*************************************************************************************************************************/
.job-info{ margin: 25px 0 0; }
.job-info__ttl { margin-bottom: 30px; font-size: 1.5rem; font-weight: 700; line-height: 1; }

.job-type{ display: flex; width: calc(100% + 60px); height: 50px; margin: 0 -30px; border: 1px solid #dce6e6; overflow: hidden;}
.job-type__item{ width: calc(100% / 4);}
.job-type__item:not(:last-child) { border-right: 1px solid #dce6e6;}
.job-type__item a{ display: flex; justify-content: center; align-items: center; background: #fff; height: 100%; font-size: 13px; line-height: 1; color: #000;}
.job-type__item--off a{ color: #eee; pointer-events: none;}
.job-type__item .now{ background: #e6f0f0;}


[aria-selected="true"].example-tabs-tabs__link { background: #e6f0f0; pointer-events: none; cursor: inherit; }
.job-detail{ background: #fff; margin: 25px 0 0; padding: 30px 20px; border-radius: 20px;}
.occu-divider [aria-selected="true"].example-tabs-tabs__link { background: linear-gradient(to right, #32c8ff 0%,#aaf032 100%); color: #fff; }
/*

.job-panel { background: #fff; margin: 20px 0 0; padding: 30px 20px; border-radius: 20px;}
*/



#part-time,
#intern{ display: none;}


.on { background: #e6f0f0;}
/*
#designer2,
#designer3 { display: none; }
*/


.job-req__item{ margin: 30px 0 0;}
.job-req__item:first-child{ margin-top: 0;}

.job-req__dt{ padding: 0 0 10px; position: relative; font-weight: 800; font-size: 16px; line-height: 1; color: #000;}
.job-req__dt::before{ content: ""; background: linear-gradient(to right, #32c8ff 0%,#aaf032 100%); width: 100%; height: 3px; position: absolute; bottom: -3px; left: 0;}
.job-req__dd{ margin: 17px 0 0; line-height: 1.7;}
.job-req__dd ul li{ padding: 0 0 0 10px; position: relative;}
.job-req__dd ul li::before{ content: "・"; position: absolute; top: 0; left: 0;}
.job-req__dd ul li.kome::before{ content: "※";}
.job-req__dd dl:not(:first-child){ margin: 15px 0 0;}
.job-req__dd dl dt{ margin: 15px 0 0;}
.job-req__dd dl dt:first-of-type{ margin-top: 0;}

.job-table{ width: 100%; margin: 40px 0 0; border: 1px solid #dce6e6; border-top: none;}
.job-table__th,
.job-table__td{ display: block; border-top: 1px solid #dce6e6; line-height: 1.7;}
.job-table__th{ background: #e6f0f0; padding: 8px;}
.job-table__td{ padding: 15px 8px;}


/*	.example-tabs-tabs__content  display: block; */
[aria-hidden="true"].example-tabs-tabs__content { display: none; }

.xxx { opacity: 1; border: 1px dashed #c00; }

.js-tablist__link { cursor: pointer; }
.js-tablist__link--disable { color: #c8c8c8 !important; pointer-events: none; cursor: inherit; }

.occu-divider { display: flex; flex-wrap: wrap; margin-left: -30px; margin-right: -30px; padding: 25px 25px 10px; background-color: #fff; }
.occu-divider__item { background: linear-gradient(to right, #32c8ff 0%,#aaf032 100%); margin: 0 0 15px; padding: 1px; position: relative; border-radius: 15px; overflow: hidden; transition: .2s; }
.occu-divider__item .js-tablist__link {  }
.occu-divider__btn { display: flex; justify-content: center; align-items: center; background: #fff; height: 28px; padding-left: 25px; padding-right: 25px; position: relative; border-radius: 14px; font-size: 16px; line-height: 1; color: #5ac8e6; }
.occu-divider__item--disable { background: #e1e1e1; pointer-events: none; cursor: inherit; }
.occu-divider__item--disable .occu-divider__btn { color: #bbb; }

.job-info__inner { padding-top: 50px; }

@media print, screen and (min-width: 768px){
	.job-info{ max-width: 1000px; margin: 0 auto 0; border-radius: 20px;}
	.job-info__inner { background-color: #fff; padding: 50px; border-radius: 20px; }
	.js-tabs { max-width: 1000px; margin: 0 auto; border-radius: 0 0 20px 20px; }
	.occu-divider { max-width: 1000px; margin: 30px auto 30px; padding: 30px 30px 15px; background: #fff; }
	.occu-divider__item { margin-bottom: 15px; }
	.occu-divider__item:not(:last-child){ margin-right: 15px; }
	.job-info__ttl { margin-bottom: 50px; font-size: 1.7rem; }
	
	.job-type{ width: 100%; margin: 0 auto; border-radius: 25px; overflow: hidden; }
	.job-detail{ background: none; margin-top: 50px; padding: 0;}

	.job-req__item{ margin-top: 50px;}
	.job-req__dl{ display: flex; justify-content: space-between; position: relative;}
	.job-req__dl::before{ content: ""; background: linear-gradient(to bottom, #32c8ff 0%,#aaf032); width: 3px; height: 100%; position: absolute; top: 0; left: 100px; transition: height .3s ease-out;}
	.job-req__dt{ width: 100px; border-bottom: none; line-height: 1.7;}
	.job-req__dt::before{ display: none;}
	.job-req__dd{ width: calc(100% - 140px); margin-top: 0;}
	.job-req__dd dl:not(:first-child){ margin-top: 20px;}
	.job-req__dd dl dt{ margin-top: 20px;}

	.job-table{ margin-top: 50px;}
	.job-table__th,
	.job-table__td{ display: table-cell;}
	.job-table__th{ background: #e6f0f0; width: 150px; padding: 15px 18px; border-right: 1px solid #dce6e6;}
	.job-table__td{ padding: 15px 18px;}
}


@media print, screen and (min-width: 1100px){

	.job-info{ margin-top: 0; border-radius: 0 0 20px 20px/0 0 20px 20px;}

	.job-req__dl::before{ left: 160px;}
	.job-req__dt{ width: 160px;}
	.job-req__dd{ width: calc(100% - 200px);}

	.job-table__th{ width: 173px;}
	.occu-divider { margin: 0 auto 30px; }
}