@charset "UTF-8";
/* 共有 */
.contents {
  width: 1000px;
  margin: 0 auto;
  position: relative;
}
.container {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 80px;
}
.main{
  padding-bottom: 30px;
  background-color: #FFEBEE;
  font-size:14px;
  letter-spacing: 0.1em;
  line-height: 1.6em;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 500;
}

/*scroll_up ｜下から上へ出現*/
.scroll_up {
  transition: 0.8s ease-in-out;
  transform: translateY(30px);
  opacity: 0;
}
.scroll_up.on {
  transform: translateY(0);
  opacity: 1.0;
}
/*scroll_up ｜下から上へ出現 */


.yaji{
  width: 20px;
  margin: 4px 0 0 5px;
  width: 16px;
}

/*新着インタビューから探す*/
/*職業名が1行なら消す*/
.new_img{
  margin-top: 20px;
}
.new_img2{
  margin-top: 20px;
}
.new_icon{
  top:24px;
}
.new_icon2{
  width: 40px;
  position: absolute;
  z-index: 3;
  left: 16px;
  top:5px;
}
/*職業名が1行なら消す*/
.flex1_all{
  border: 3px solid #3D56A7;
  border-radius: 5px;
  padding: 60px 10px 30px 10px;
  background-color: #fff;
  width: 90%;
  margin: 80px auto;
}
.flex1{
  justify-content: space-around;
  align-items: flex-start;
  display: flex;
}
.f_icon{
  width: 250px;
  margin: 0 auto;
  display: block;
  position: absolute;
  top: -85px;
  left: 0;
  right: 0;
}
.f_icon_all{
  position: relative;
}
.new_dtl{
  width: 100%;
  text-align: center;
  margin: 0 10px;
  font-weight: bold;
  font-size: 120%;
    color: #E86174;
}
.new_ttl{
  height: 30px;
}
.ab_new{
  position: relative;
}
.new_icon{
  width: 40px;
  position: absolute;
  z-index: 3;
  left: 48px; /*新着の数によって変更*/
}
.k_look a{
  border: 3px solid #3D56A7;
  border-radius: 50px;
  padding: 10px 60px;
  font-size: 17px;
  text-decoration: none;
  color: #3D56A7;
  background-color: #FFEBEE;
}
.k_look{
 margin-top: 60px;
}
.k_look:hover{
  opacity: 0.5;
  transition: 0.3s;
}
/*新着インタビューから探す*/

/*職種分野から探す*/
.radioflex{
  display: flex;
}
.pick{
  text-align: center;
  margin: 0 auto 20px auto;
  font-size: 120%;
  color: #E86174;
  font-weight: 700;
  border-bottom: 5px dotted #3D56A7;
  width: 400px;
  padding: 0 0 5px 0;
}
.flex2_all{
  border: 3px solid #000;
  border-radius: 5px;
  padding: 60px 10px;
  background-color: #fff;
  width: 92%;
  margin: 80px auto;
  height: 900px;
}
.flex2{
  display: flex;
  width: 60%;
}
.flex2_dtl{
  text-align: center;
  border: 2px solid #000;
  border-radius: 50px;
  width: 260px;
  margin: 10px;
  letter-spacing: 0em;
}
.line{
  width: 14.8px;
  position: absolute;
  right: 234px;
  top: 10px;
}
.line_all{
  position: relative;
}
.ttl_cat1{
  font-size: 110%;
  font-family: "Zen Maru Gothic", serif;
  font-weight: 700;
}

.bunya_p{
  margin: 0;
}
.bunya_j_ttl{
  margin: 10px 0 5px 0;
}
.k_look2{
  margin: 15px 0 30px 0;
}
.k_look2:hover{
  opacity: 0.5;
  transition: 0.3s;
}
/*タブ*/
.tab-wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.tab-label {
    font-size: 110%;
    margin: 10px 0px;
    width: 230px;
   /* height: 16px;*/
    padding: 8px 12px 12px 10px;
    line-height: 1.1em;
}
.tab-label:hover{
  opacity: 0.5;
  transition: 0.3s;
  cursor: pointer;  
}
.tab-label2 {
    font-size: 110%;
    margin: 10px 0px;
    width: 230px;
    height: 16px;
    padding: 2px 12px 14px 10px;
    line-height: 1.1em;
}
.tab-label2:hover{
  opacity: 0.5;
  transition: 0.3s;
  cursor: pointer;  
}
.tab-content {
    padding: 0 0 60px 20px;
    border-left: 2px solid #E86174;
    text-align: center;
    width: 240px;
    display: none;
    position: absolute;
    top: 670px;
    right: 80px;
}
.tab_all{
  position: relative;
}
/* アクティブなタブ */
.tab-switch:checked+.tab-label {
  color: #fff;
  background-color: #3D56A7;
  border-radius: 50px;
}
.tab-switch:checked+.tab-label+.tab-content {
   display: block;
}
/* ラジオボタン非表示 */
.tab-switch {
  display: none;
}
/*タブ*/

/*職種分野から探す*/

/*職種名から探す*/

.flex3_all{
  border: 3px solid #3D56A7;
  border-radius: 5px;
  padding: 60px 10px 70px 10px;
  background-color: #fff;
  width: 90%;
  margin: 50px auto;
}
.flex4{
  display: flex;
  justify-content: center;
}
.cat2{
  justify-content: center;
  align-items: center;
}
.txt_r{
  text-align: justify;
}
.txt_a{
  font-weight: bold;
  color: #E86174;
  margin: 0;
  font-size: 150%;
  line-height: normal;
}
.new_p:hover{
  opacity: 0.5;
  transition: 0.3s;
}
.new_p{
width: 170px;
}
.tab{
  display: flex;
  height: 30px;
  width: 260px;
  align-items: center;
}
.tab p{
  text-align: left;
}
.typeb{
  width: 30px;
  margin: 0 5px 0 10px;
}
.tabflex{
  display: flex;
}

/* ▼タブ(共通装飾＋非選択状態の装飾) */
.tabbox{
  margin: 0 auto;
  text-align: center;
}
.tab {
 /* border: 2px solid #000;*/
  display: inline-flex;
  border-radius: 50px;
  padding: 1em;
  /*margin: 10px;*/
}
/* ▼タブにマウスポインタが載った際の装飾 */
.tab:hover {
  opacity: 0.5;
  cursor: pointer;             /* マウスポインタの形状を「指(指し示す形)」にする */
}

/* ▼選択状態のタブ(＝チェックが入っているラジオボタンの隣にあるタブの装飾) */
input:checked + .tab {
  color: #fff;
  background-color: #3D56A7;
}

/* ▼タブ機能を制御するラジオボタン(非表示にする) */
.tabbox input { display: none; }

 /* ▼タブの中身(共通装飾＋非選択状態の装飾) */
 .tabcontent {
  display: none;             /* 標準では非表示にする */
  padding: 1em;              /* 内側の余白量 */
}

/* ▼チェックが入っているラジオボタンに対応するタブの中身を表示する */
#tabcheck1:checked ~ #tabcontent1 { display: block; }
#tabcheck2:checked ~ #tabcontent2 { display: block; }
#tabcheck3:checked ~ #tabcontent3 { display: block; }
#tabcheck4:checked ~ #tabcontent4 { display: block; }
#tabcheck5:checked ~ #tabcontent5 { display: block; }
#tabcheck6:checked ~ #tabcontent6 { display: block; }
#tabcheck7:checked ~ #tabcontent7 { display: block; }
#tabcheck8:checked ~ #tabcontent8 { display: block; }
#tabcheck9:checked ~ #tabcontent9 { display: block; }
#tabcheck10:checked ~ #tabcontent10 { display: block; }
#tabcheck11:checked ~ #tabcontent11 { display: block; }
#tabcheck12:checked ~ #tabcontent12 { display: block; }
#tabcheck13:checked ~ #tabcontent13 { display: block; }
#tabcheck14:checked ~ #tabcontent14 { display: block; }
#tabcheck15:checked ~ #tabcontent15 { display: block; }
#tabcheck16:checked ~ #tabcontent16 { display: block; }
#tabcheck17:checked ~ #tabcontent17 { display: block; }
#tabcheck18:checked ~ #tabcontent18 { display: block; }
#tabcheck19:checked ~ #tabcontent19 { display: block; }
#tabcheck20:checked ~ #tabcontent20 { display: block; }
#tabcheck21:checked ~ #tabcontent21 { display: block; }
#tabcheck22:checked ~ #tabcontent22 { display: block; }

.tab1_f{
  opacity: 0.3;
}
.a3,.a10,.a15,.a21{
  opacity: 0.3;
}