@charset "UTF-8";
/* ====================================================================================

    ---  注意！！  コメントの中にコメントはダメ  動きがおかしくなる  ----

   setting

==================================================================================== */
* {
   box-sizing: border-box;
}

.slidePanelRecruitH {
    background-image: url('../Images/Recruitheader.png');
    background-repeat: no-repeat; 
    background-position: center center; 
    background-size: contain; 
    min-width: 100px; 
    height: 150px; 
    display: flex; 
    margin: auto; 

}

.slidePanelRecruit {
    position: relative;
    z-index: 2;
}

.slidePanelRecruit1 {
    position: relative;
}

/* table01 */
table {
    margin: auto;
    /*
    background-color:  #87cefa;
    color: #000000;
    opacity: 0.5;
    */
}

.table01 {
    background: rgba(255, 255, 255, 0.8);
    border-spacing: 0;

/*  opacityを設定していたことでポップアップが透明になっていた。
    opacity: 0.8;
*/
}

.table-H1 {
    font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
    font-size: calc(0.2vw + 1.5rem);
    max-width: 750px;
    width: auto;
    height: auto; 
    margin: auto; 

}

.table-H2 {
    font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
    font-size: calc(0.2vw + 1.5rem);
    max-width: 750px;
    width: auto;
    height: auto; 
    margin: auto; 
    padding-top: 100px;

}

.table-K {
    text-align: center;
    font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
    font-size: calc(0.2vw + 1.0rem);
    font-weight:  bold;
}

.text-S {
    text-align: left;
    /*
    font-size: clamp(0.5rem, calc(0.5rem + 0.625vw), 1rem);
    */

}

.text-B {
    text-align: left;
    font-size: clamp(0.5rem, calc(0.5rem + 0.625vw), 1rem);

}

.text-E-H {
  display: flex;
  justify-content: center;
  align-items: center;
    white-space: prep;
  margin : 0 auto;
}

.text-E {
    text-align: left;
    letter-spacing: 0px;

}

tr {
   
   /*
    border-bottom: 1px solid #b5b1b1;
    background-color: blue;
    background-color: pink;
    */
    font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
    font-size: calc(0.2vw + 1.0rem);


}

th {
    width: 30%;
    border-bottom: 1px solid  #00bfff;
    padding: 10px;
    
}

td {
    padding: 15px 0;
    border: none;
    width: 500px;
    font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
    font-size: calc(0.2vw + 0.8rem);
    
    border-bottom: 1px solid  #00bfff;
    padding: 10px;
    

}



.slidePanelRecruit2 {
    max-width: 750px;
    width: auto;
    height: auto;
    margin: auto;
    padding-top: 150px;

}

.ul-H {
    font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
    font-size: calc(0.2vw + 1.5rem);
    color: #ffffff;
    max-width: 750px;
    margin-bottom: 10px;
    height: auto; 
    text-align: center;
    background-color: blue;
    padding-top: 10px;
    padding-bottom: 10px;

}

.sample1{
    font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
    font-size: calc(0.2vw + 0.8rem);
    list-style: none;
    display: block;
    padding: 0;
    
}

.sample1 li{
    position: relative;
    margin-bottom: 20px;
    padding: 0 10px 15px 10px;
    line-height: 25px;
    font-weight: bold;
    color: #000000;
    border: solid 3px #5ab0f9;
    overflow: hidden;
    background-color: #e0ffff;

}

.sample1 li:before{
    position: absolute;
    left: 0.5em;
    font-size: 1.2em;
    font-weight: normal;
}

.sample1 li:after{
    content:"";
    position: absolute;
    height:0;
    width: 100%;
}

.sample1 li:hover{
    color: #fff;
    cursor: pointer;
/*
    background : #00bfff;
*/

}

.sample1 li:hover:after{
    height: 840%;
    opacity: 1;
    cursor: pointer;
}

.sample1 li:active:after{
    height: 1000%;
    opacity: 1;
}

span.marker {
    font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
    font-size: calc(0.2vw + 1.0rem);
    white-space: pre-wrap;
    color: #FF9933;
}


/* ---------- クリックマーク設定 ---------- */

.animation{
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-duration: 1.5s;
  width: 150px;
}

.slidein {
  animation-name: slidein;
  animation-direction: normal;
 }

 
@keyframes slidein {
  0%, 40%, 60%, 80% {
    transform: scale(1.0);
  }
  50%, 70% {
    transform: scale(0.95);
  }
}


/* ---------- ポップアップ設定 ---------- */

.modal_content {
  text-align: center;
  border-radius: 6px;
}

.popup-content-p1,
.popup-content-p2,
.popup-content-p3,
.popup-content-p4,
.popup-content-p5 {
  color: #3cb371;
  text-decoration: underline;
  content: "";
  display: block;

}

.popup-content-p1:hover,
.popup-content-p2:hover,
.popup-content-p3:hover,
.popup-content-p4:hover,
.popup-content-p5:hover{
  color : #ff7043;
}

.layer-img {
  max-width: 450px;
  width: auto;
}

.popup-textH {
    font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
    font-size: calc(0.2vw + 1.0rem);
    list-style: none;
    display: block;
    padding: 0;
}

.popup-textH1 {
    font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
    font-size: calc(0.2vw + 0.8rem);
    list-style: none;
    display: block;
    padding-left: 10px;
    padding-bottom: 10px;
    text-align: left;
}

.popup-textS {
    font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
    font-size: calc(0.2vw + 0.8rem);
    list-style: none;
    display: block;
    padding-left: 10px;
    text-align: left;
}



*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.content{
    margin: 0 auto;
}

.modal{
    display: none;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
}

.modal_bg{
    height: 100vh;
    position: absolute;
    width: 100%;
    background: rgba(0,0,0,0.7);
    /*
    background: rgba(0,0,0,0.8);
    */
}

/* ポップアップ画面　位置調整 */
.modal_content{
    background: #ffffff;
    padding: 20px;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    max-width: 600px;
    width: auto;
    position: absolute;
    z-index: 9999;
    
    /*
    display:block
    background: #ffffff;
    z-index: 9999;
    opacity: 1 !important;
    background: rgba(255,255,255,1) !important;
    */
    
}
.popup-close-p {
    text-align: right;
    text-decoration:underline;
    color: #ffa500;
  }



/* sp */
@media screen and (max-width:1100px) {
    .modal_content {
         max-width: 85%;
    }

    .layer-img {
       max-width: 320px;
       width: auto;
    }

    .popup-textH1 {
       font-size: 12px; /* 必要に応じてサイズを調整 */
       white-space: nowrap; /* テキストを1行に収める */
    } 

}

@media screen and (max-width:640px) {

    .layer-img {
       max-width: 300px;
       width: auto;
    }

  th {
      width: 100%;
      display: block;
      padding: 10px;
      padding-top: 0;
      border: none !important;
  }

  td {
      width: 100%;
      display: block;
      padding: 10px;
      padding-top: 0;
  }

  .table-K {
      text-align: left;

  }

  span.marker {
      font-size: 12px;
/*      
      white-space: nowrap;
*/
  }

   .animation{
     width: 120px;
   }

  .slidePanelRecruitH {
      background-image: url('../Images/Recruitheader1.png');
  }

}

@media screen and (max-width: 500px) {

  .table01 {
      padding: 20px;
  
  }

  .ul-H {
    font-size: calc(0.1vw + 1.5rem);
  }

/*  
  span.marker {
    font-size: calc(0.1vw + 1.0rem);
  }
*/
  .td-M1 {
     font-size: 12.5px;
/*
     font-size: calc(0.1vw + 0.6rem);
     font-size: calc(0.5em + 1vw);
     font-size: 12.5px;
*/
  }

  .layer-img {
     max-width: 270px;
     width: auto;
  }

  .popup-textH1 {
     font-size: 10px; /* 必要に応じてサイズを調整 */
     white-space: nowrap; /* テキストを1行に収める */
  } 

}