@charset "Shift_JIS";


/*ページの説明*/
.annai p{
    margin: 0 0 5px 0;
    font-size: 1.3em;
}

.annai_text{
    padding-bottom: 5px;
}

p.bigsize_red{
    font-weight: bold;
    text-align: left;
    color: red;
    margin:15px 0;
    font-size: 18px;

}

/* ---- 資料請求ネット応募ボタン2 ---- */

.button003 {
    width: 250px;  /* PC用の標準幅 */
  }
  
  .button003 a {
    background: rgb(241, 138, 21);
    border-radius: 15px;
    position: relative;
    display: flex;                 /* flexで縦中央を実現 */
    justify-content: center;       /* 横中央 */
    align-items: center;           /* 縦中央 */
    text-align: center;
    margin: 0 auto;
    padding: 20px;
    color: #FFF;
    transition: 0.3s ease-in-out;
    font-size: 1.5em;
    border-bottom: 8px solid #b02a37;
    min-height: 40px;              /* 高さを一定にする */
  }
  
  .button003 a:hover {
    background: #313131;
    color: #FFF;
  }
  
  /* 矢印デザイン（くの字） */
  .button003 a:after {
    content: '';
    width: 7px;
    height: 7px;
    border-top: 1px solid #FFF;
    border-right: 1px solid #FFF;
    transform: rotate(45deg) translateY(-50%);
    position: absolute;
    top: 50%;
    right: 12px;
    border-radius: 1px;
    transition: 0.3s ease-in-out;
  }
  .button003 a:hover:after {
    border-color: #FFF;
  }
  
  /* ボタンを横並びにするコンテナ */
  .btn-container {
    display: flex;
    gap: 20px;
    margin: 15px 0 20px;
    /*flex-wrap: wrap;
  /*  justify-content: center;
*/  }
  
  /* ---- スマホ用調整 ---- */
  @media screen and (max-width: 568px) {
    .button003 {
       width: 170px;    /*スマホでは少し小さめ */
      justify-content: center;
    }
  
    .button003 a {
      /*font-size: 1.2em;*/
      padding: 10px;
      min-height: 50px;   /* 高さを固定して1行/2行どちらも揃える */
    }

    .btn-container{
        justify-content: center;
    }

      /*表の変形*/
      .recruit_table th,
      .recruit_table td{
          display: block;
      }

  }

/*---------tableの場合---------*/

table td,table th{
  padding-top: 15px;
}

.recruit_phote img{
    max-height: 65px;
    width: auto;
    margin-top: 5px;

}

p.recruit_course{
   
    font-weight: bold;
    margin-bottom: 15px;
}

/*--------自衛官リストの大枠--------*/
.recruit_content{
    /*background-color: rgb(232, 237, 240);
    border-radius: 10px;*/
    justify-content: center;
    display: flex;
    flex-wrap: wrap;
}

/*-------自衛官リスト-------------*/

.recruit_table h5{
  font-size: 1.7em;
}

/*リスト枠*/
.recurit_list{
   margin-bottom:20px;
    width: 100%;
    border: 1px solid #000066;       
}

/*リスト枠　影ありわく*/
.recurit_list2{
    margin-bottom:20px;
     width: 100%;
 }


/*採用タイトル*/
.recurit_name{
    background-color:rgb(29, 104, 14);
    padding: 6px;
    color: white;
    margin: 0;
   
}

/*年齢条件*/
.recurit_terms{
    margin-bottom: 10px;    
    padding: 0 5px;
    }
    
.recurit_terms p{
    margin: 0 0 5px 0;
}
    
/*条件項目内区別タイトル*/
span.bigsize{
    font-weight: bold;
    text-align: left;
    display: block;
    color: #1F939F;
    font-size: 1.4em;
}

span.bigsize2{
    font-size: 0.6em;
}
/*3タイプ目水色タイトルbox*/
.recurit_list3{
    margin-bottom:20px;
     width: 100%;
      
 }

/*-----バナー矯正＆小さくしてみた---------*/

.recurit_banner{
    display: flex;
    justify-content:space-around;
    margin: 30px 0;
   }
.recurit_banner img{
    max-width: 80%;
    width: 100%;
    height: auto;
}


/* ------カード内もっとみるボタン-----*/

.btn a {
    position: relative;
    min-width: 150px;
    padding:10px 30px;
    background-color: #21be78;
  /*border-radius: 8px;*/
    color: #fff;
    text-decoration: none;
    border-radius: 25px;
    display: inline-block;
    padding-right: 10px;
    margin-top: 5px;
    font-size: 14px;
}
.btn-circle-right{
    margin: 15px 0;
}
.btn-circle-right a::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  right: 25px;
  width: 20px;
  height: 20px;
  margin: auto;
  border-radius: 25px;
  background-color: #fff;
}
.btn-circle-right a::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  right: 30px;
  width: 0;
  height: 0;
  margin: auto;
  border-top: 6px solid transparent;
  border-right: 0 solid transparent;
  border-left: 9px solid #c21313;
  border-bottom: 6px solid transparent;
  box-sizing: border-box;
}

    /*PC設定を調整*/
  @media screen and (min-width: 568px){
  /*採用コース名幅*/
  table th {
        width: 30%;
        vertical-align: top;
  }

  /*-------自衛官リスト-------------*/

.recruit_table h5{
  font-size: 1.5em;
}

    }