@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Hina+Mincho&display=swap');

/*================================================
 *  派遣：研修システムページ
================================================*/

/******** 共通 ********/
h2{
   font-weight: 600;
   font-size: 28px;
   text-align: center;
   font-family: "Hina Mincho", serif;
   margin: 2em 0 1em 0;
   padding-bottom: 0.3em;
   border-bottom: #181818 dotted 3px;
}
h3{
   background-color: #6AB187;
   font-size: 20px;
   color:#f0f0f0;
   padding: 0.3em 0.5em;
   margin-bottom: 0.5em;
}
.add_text{
   margin-top: 0.5em;
}

.caption{
   font-weight: 600;
   margin-bottom:1em;
}
#service_list p{
   margin-bottom: 1em;
}
#service_list .split_2{
   vertical-align: middle;
}
#service_list img{
   object-fit: scale-down;
   vertical-align: top;
   margin-left:0.5em;
}
.service_list_text{
   padding-bottom:5em;
}

/*** 人事部支援サービス ***/
#support dl{
   padding-left:1em;
}
#support dt{
   background-color: #F4CC70;
   padding: 0.2em 1em;
   margin-bottom: 0.5em;
   border-radius: 5px;
}
#support dd{
   margin-bottom: 1.5em;
}
#support a, #outsourcing a{
   color:#0E214D;
   font-weight: 600;
   text-decoration: underline;
   text-decoration-color: #DE7A22;
}
#support i, #outsourcing i{
   color:#DE7A22;
   font-weight: bold;
}



/*** 左右BOXに隙間を開ける ***/
.split_1-3{ padding-left: 2em; }

/*** 募集業種ごと隙間を開ける ***/
.split_4{ padding: 0 0.5em; }

#topbnr img{ width: 100%; }

/******** 派遣ページ右メニュー section ********/
.staff_menu{ margin-bottom: 2em; }
.staff_menu img{ width: 100%; margin-bottom: 1em; }
.staff_menu ul{
   margin: 1em;
}
.staff_menu li::before{
   font-family: 'Font Awesome 5 Free';
   content: "\f054";
   margin-right: 0.5em;
   font-weight: 600;
   color:#DE7A22;
}
.staff_menu button{
   width: 100%;
   margin: 1em 0;
}
.staff_menu a:hover{ font-weight: 600; }

/******** 人材サービス一覧アイコン section ********/
#service{
   margin-bottom: 5em;
   text-align: center;
   width: 100%;
}
#service figcaption{
   background-color: #d3a243;
   color:#f0f0f0;
   border-radius: 10px;
   margin-bottom: 1em;
   font-weight: 600;
}
#service figcaption:hover{ background-color:#6AB187; }


/*================================================
 *  タブレット向けデザイン
================================================*/
/* スクロールバーを考慮して20px大きいサイズで切り替え */
@media screen and (max-width:979px) {


}



/*================================================
 *  スマートフォン向けデザイン
================================================*/
@media screen and (max-width:767px) {

   h2{ font-size: 20px; }

   /*** 募集業種ごと隙間を開ける ***/
   #service .split_4{
      line-height: 1em;
      padding: 0 0.2em;
   }

   #service_list section{
      padding: 0 0.5em;
   }
   #service_list .caption{
      border:#d3a243 2px dotted;
      border-radius: 10px;
      padding: 0.5em 0.8em;
   }

   #service_list img{
      margin-left:0;
   }

   .service_list_text{
      padding-bottom:2em;
   }

   /*** 人事部支援サービス ***/
   #support dl{
      padding-left:0;
   }
   #support i{
      padding-left: 1em;
   }

   /*** 左右BOX reset ***/
   .split_1-3{ padding-left: 0; margin-bottom: 5em; }
   .staff_menu img{ padding: 0 2em; }

   /******** 人材サービス一覧アイコン section ********/
   #service figcaption{
      font-size: 12px;
      padding-top: 0.5em;
      padding-bottom: 0.5em;
   }
   #service .split{
      display: grid;
      gap: 10px;
      grid-template-columns: 1fr 1fr 1fr 1fr;
      padding: 0.5em 0;
   }

}