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

/*************************************************************************************************************************
* recruit > home
*************************************************************************************************************************/

/* fv
*************************************************************************************************************************/
.fv{ width: 100%; height: calc(100% - 45px); margin: -60px 0 0; position: relative;}
.fv-catch{ width: 84%; max-width: 315px; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 4;}
.fv-gallery{ width: 100%; height: 100%; position: relative; overflow: hidden;}
.fv-gallery__item{ opacity: 0; width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 2; animation: fv-img-fade 25s 0s infinite;}
.fv-img01{ background: url("../img/bg_fv01_sp.jpg") no-repeat center/cover;}
.fv-img02{ background: url("../img/bg_fv02_sp.jpg") no-repeat center/cover; animation-delay: 5s;}
.fv-img03{ background: url("../img/bg_fv03_sp.jpg") no-repeat center/cover; animation-delay: 10s;}
.fv-img04{ background: url("../img/bg_fv04_sp.jpg") no-repeat center/cover; animation-delay: 15s;}
.fv-img05{ background: url("../img/bg_fv05_sp.jpg") no-repeat center/cover; animation-delay: 20s;}
.fv-video{ display: none;}
.fv-gallery::before,
.fv-video::before{ content: ""; background: url("../img/bg_fv_cover.png") repeat 0 0/2px 2px; width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 3;}

/* anime */
@keyframes fv-img-fade {
  0%{ opacity: 0;}
  10%{ opacity: 1;}
  20%{ opacity: 1;}
  30%{ opacity: 0; transform: scale(1.1); z-index: 2;}
  100% { opacity: 0}
}




@media print, screen and (min-width: 768px){
  .fv{ margin-top: -90px;}
  .fv-catch{ background: url("../img/txt_fv_pc.svg") no-repeat 0 0/contain; width: 700px; max-width: none; height: 88px;}
  .fv-catch img{ display: none;}
}


@media print, screen and (min-width: 1100px){
  .fv{ margin-top: -130px; height: 700px;}
  .fv-gallery{ display: none;}
  .fv-video{ display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; overflow: hidden;}
  .fv-video video{ width: auto; min-width: 100%; max-width: inherit; height: auto; min-height: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);}
}





.message { background: url("../../common/img/bg_article.png") repeat 0 0/2px 2px; padding: 38px 30px 50px; }
.message-lead__txt { margin-top: 30px; margin-bottom: 26px; font-size: 1rem; line-height: 2; }
.message-lead__name { font-size: 1.15rem; text-align: right; }

.btn-faq-wrap { padding-top: 50px; padding-bottom: 50px; }
.btn-faq__inner { width: calc(100% - 100px); margin-left: auto; margin-right: auto; }
.btn-faq { position: relative; display: flex; justify-content: center; align-items: center; height: 70px; background: linear-gradient(to right, #ff7850 0%,#ff96c8 100%); margin: 0 auto; font-size: 22px; font-weight: 400; line-height: 1; color: #fff; text-align: center; }
.btn-faq:before { position: relative; width: 30px; height: 23px; background: url("../common/img/ico_faq.svg") no-repeat 50% 50%/100% auto; margin-right: 20px; content: ""; z-index: 1; }
.btn-faq span { position: relative; z-index: 1; }
.btn-faq:after { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to right, #ff96c8 0%,#ff7850 100%); opacity: 0; transition: opacity .3s ease-out; content: ""; z-index: 0; }
.btn-faq:hover:after { opacity: 1; }

@media print, screen and (min-width: 1100px){
	.news__recruit--home { padding-top: 60px; }
	.news__recruit--home__inner { width: 740px; margin-left: auto; margin-right: auto; }
	.news__recruit--home .news__list { padding-top: 50px; }
	.news__recruit--home .btn-more-wrap { margin: 60px 0 0; }
	
	.message { padding: 65px 0 65px; }
	.message__inner { width: 740px; margin-left: auto; margin-right: auto; }
	
	.btn-faq-wrap { padding-top: 70px; padding-bottom: 70px; }
	.btn-faq__inner { width: 1000px; }
	.btn-faq { height: 110px; }
}

/* job
*************************************************************************************************************************/
.job{ background: url("../../common/img/bg_article.png") repeat 0 0/2px 2px; padding: 38px 30px 50px;}

.job-btns{ max-width: 1000px; margin: 0 auto;  padding: 15px 0 0;}
.job-btns__item{ background: linear-gradient(to right, #32c8ff 0%,#aaf032 100%); width: 100%; margin: 15px 0 0; padding: 1px; position: relative; border-radius: 25px; overflow: hidden; transition: .2s;}
.job-btns__item::before{ background: #32c8ff; content: ''; width: 0; height: 100%; position: absolute; top: 0; left: -15%; transform: skew(160deg); transition-duration: .4s; transform-origin: top left; transition: all .4s ease;}
.job-btns__item:not(.job-btns__item--off):hover::before{ width: 135%;}

.job-btns__item--off{ background: #eee;}
.job-btns__link{ display: flex; justify-content: center; align-items: center; background: #fff; height: 48px; position: relative; border-radius: 24px; font-size: 16px; line-height: 1; color: #5ac8e6;}

.job-btns__link::before,
.job-btns__link::after{ content: ""; position: absolute; top: 50%; transform: translateY(-50%);}

.job-btns__link::before{ width: 36px; height: 36px; left: 15px;}
.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__link::after{ background: url("../common/img/ico_arrow_l.svg") no-repeat 0 0/contain; width: 9px; height: 16px; right: 20px;}

.job-btns__item--off .job-btns__link{ color: #eee; pointer-events: none;}
.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");}
.job-btns__item--off .job-btns__link::after{ display: none;}


@media print, screen and (min-width: 768px){
  .job{ padding: 65px 30px 100px;}
  
  .job-btns{ display: flex; flex-wrap: wrap; justify-content: space-between; padding-top: 40px;}
  .job-btns__item{ width: calc(50% - 10px); margin-top: 20px;}
  .job-btns__link{ font-size: 20px;}
}




/* staff
*************************************************************************************************************************/
@media print, screen and (min-width: 1100px){
  .staff-wrap{ padding: 50px 0 0;}
}