.PC{display: block;}
.SP{display:none;}
/* .title_top{margin:50px 0 0 0;} */
.title{text-align:center;}
.title h1{margin: 15px 0 0 0;}
.title p{margin-top: 30px;}
.title strong{color: #0A3F67;font-size: 50px;letter-spacing: 0.05em;font-weight:500;}
.menu ul li a.menu_staff .menu_border { border-bottom:3px solid #FED631; }
@media screen and (max-width: 1120px) {
  .menu ul li a.menu_staff .menu_border { border-bottom:none; border-left:5px solid #FED631; }
}

@media screen and (max-width: 740px) {
.PC{display: none;}
.SP{display:block;}
.contents {margin: 0px auto;}
.title{padding: 0px 0 50px 0;}
.title_top{margin: 10px 0 20px 0;}
.title strong {font-size: 9vw;}
}
/* ここまで共通 */

.bg_grey{background: #f8f8f8;padding-bottom: 1px;}
.top_staff{margin: 0px auto;width: 1200px;}
.top_staff img{width: 100%;}
.wrap_grey{height: 10vw;}
.staff_wrap{display: flex;flex-wrap: wrap;gap:60px;}

a.staff{display: block;text-align: center;}
a.staff .staff_img{width:200px;height:200px;overflow:hidden;}
a.staff .staff_img img{width: 100%; border-radius:18px;}

a.staff p{font-size: 14px;width: 100%;margin-top: 10px;letter-spacing: 0.1em;}
a.staff span{font-size: 12px;color: #FED631;width: 100%;display: block;line-height: 12px;letter-spacing: 0.1em; }
a.staff strong{font-size: 16px;letter-spacing: 0.1em;width: 100%;}
@media screen and (max-width: 740px) {
.staff_wrap {width: 100%;gap: 40px 20px;margin-bottom: 80px;}
/*a.staff{width: calc(50% - 10px);}*/
a.staff .staff_img {width: 100%;aspect-ratio: 1 / 1;height: initial;}
.top_staff{width: 100%;margin: 0px auto;margin-top: -50px;}
.top_staff img {width: 100%;}
.title { margin-top:50px; }
.title img { width:100%; height:auto; }
/*.wrap_grey{height: 30vw;}*/
}


/* ここからテスト */
.staff_wrap_{display: flex;flex-wrap: wrap;gap:50px;margin-bottom: 80px;}
a.staff_{display: block;text-align: center;position: relative;width: 30%;height: 180px;margin: 40px 0;}
a.staff_ .staff_img { width:180px;height:180px; overflow:hidden; z-index:1; position: absolute;left:0;}
a.staff_ .staff_img img {    width: auto;
    /* border-radius: 50%; */
    height: 100%;
    position: absolute;
    right: 0;
    left: 50%;
    margin: 0 auto;
    transform: translateX(-50%);}
.name_abc{font-family: 'Nanum Pen Script', cursive;transform:rotate(-15deg);position: absolute;top: -10px;left: -20px;font-size: 20px;color: #000; z-index: 1;}
.staff_yellow{position: absolute;bottom:-10px;left: 140px;z-index: 2;}
.staff_name{position: absolute;bottom: 10px;right: 0;z-index: 3;left: 157px;text-align: left;}
.staff_name p{line-height: 1.4em;}
.staff_name .fa-arrow-right-long{color: #0A3F67;}
.linkMore_com{width: 310px;height: 50px;border-radius: 9px;line-height: 47px;margin:50px auto;}
a.linkMore_com:hover {background: #FED631;transition: 0.3s;}

.staff_tik { position: absolute; top: -70px; right: 20px; z-index: 5; width: 160px;}
.staff_tik img { width: 100%;}
.staff_tik :hover { transform: scale(1.05); transition: .2s;}

@media screen and (max-width: 740px) {
  a.staff_{width: 95%;margin: 0 auto;}
  .staff_tik { width: 35vw; top: -30px; right: 0px;}

}




/* スタッフ詳細のトップ */
.person_top{display: flex;justify-content: space-around;width: 1080px;margin: 0 auto 50px;}
.person_img{ position: relative; width:220px;height: 220px;overflow: hidden;border-radius: 50%;}
.person_img.no_img {justify-content: center; background: #eee; align-items: center; display: flex;}
.person_img img{ width: auto; height: 100%; position: absolute; left: 50%; transform: translateX(-50%);}
.person_r{width: 600px; position: relative;}
.person_r_name{width: 100%;height: 60px;line-height: 60px;font-size: 16px;font-weight: bold;letter-spacing: 0.2em;border-bottom: solid 0.1px #DDDDDD;}
.person_r_name span{font-size: 12px;color: #FED631;letter-spacing: 0.1em; margin-left:10px; }
.person_r_info{display: flex;width: 100%;}
.person_r_info tr{height: 40px;margin:0;line-height: 40px;}
.person_r_info th{width: 100px;margin:0;font-weight: 500;color: grey;}
.person_r_info td{width: 500px;margin:0;}
@media screen and (max-width: 740px) {
.person_top{flex-direction: column;width: 95%;margin-top: -60px;}
.person_img{width: 70%;height: 70%;margin: 0 auto;aspect-ratio: 1 / 1;}
.person_r {width: 100%;}
.person_img_r{width: 95%;}
.person_r_name{text-align: center;}
.person_r_info tbody { width:95%; margin:0 2.5%; }
.person_r_info th{width: 35%;}
.person_r_info td{width: 65%;}
.person_r_info tr{height: auto;margin: 0;place-items: left;line-height: 1.6em;display: flex;padding: 5px 0;}
/* .person_r_info th{margin: 0;width: calc(100% - 20px);padding: 0 10px;}
.person_r_info td{margin: 0;width: calc(100% - 20px);padding: 0 10px;background: #F0F0F0;}
.person_r_info tr{display: flex;flex-direction: column;height: auto;} */
.linkMore_com{width: 80%;height: auto;border-radius: 9px;line-height: 47px;margin:20px auto 50px auto;}
}

/* スタッフ詳細のインタビュー */
/* .bg{padding: 50px 0;} */
.bg_grey{background: #f8f8f8;}
.person_interview{width: 960px;margin:0 auto;text-align: left;display: flex;justify-content: space-around;border-bottom: dashed 1.5px grey;padding: 50px 0;}
.person_interview h2{font-size: 16px;font-weight: bold;letter-spacing: 0.2em;margin-top: 10px;}
.interview_left{width: 1080px;}
.person_interview_img .interview_left{width: 500px;}
.interview_title img{height: 30px;}
.interview_p{width: 100%;text-align: justify;margin-top: 20px;}
.interview_img{width: 330px;height: 330px;overflow: hidden;}
.interview_img img{max-width: 100%;max-height: 100%;}
.staff_button{display: block;background:#0A3F67;height: 60px;line-height: 60px;width: 320px;text-align: center;color: #fff;margin:50px auto;
  border-radius: 18px; position:relative; font-weight:bold; border:2px solid #0A3F67;}
.staff_button:hover{border:2px solid #0A3F67; background:#fff; color:#0A3F67; }

.staff_button:before{
  content: "";
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 20px;
  margin: auto;
  width: 20px;
  height: 2px;
  background: #fff;
  transition: .3s;
}
.staff_button::after{
  content: "";
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 20px;
  margin: auto;
  width: 8px;
  height: 8px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(-135deg);
  transition: .3s;
}

.staff_button:hover::before{
  content: "";
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 20px;
  margin: auto;
  width: 20px;
  height: 2px;
  background: #0A3F67;
  transition: .3s;
}
.staff_button:hover::after{
  content: "";
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 20px;
  margin: auto;
  width: 8px;
  height: 8px;
  border-left: 2px solid #0A3F67;
  border-bottom: 2px solid #0A3F67;
  transform: rotate(-135deg);
  transition: .3s;
}


.staff_button:hover::before{
  right: 10px;
  width: 30px;
}
.staff_button:hover::after{
  right: 10px;
}

h3 { width:100%; font-size:16px; text-align:center; display:inline-block; font-weight:bold; letter-spacing:0.2em; margin:50px 0 20px 0;}

/*マウスオーバーで写真をズーム*/
.zoom_box{
  width:180px;
  height: 180px;
  margin:0 auto;
  overflow:hidden;
  will-change: transform;
  border-radius:50%;
 }
 .zoom_box img{
  width:180px;
  transition: transform 0.3s;
  border-radius:18px;
    transform-origin: center center;
 }
 .zoom_box img:hover{
   transform:scale(1.2,1.2);
   transition:1s all;
 }
 .staff_tik_d { position: absolute; top: -40px;}

@media screen and (max-width: 740px) {
.bg {padding: 20px 0;}
.person_interview {width: 90%;flex-direction: column;}
.person_interview_img .interview_left{width: 100%;}
.interview_left{width: 100%;}
.interview_img{width: 100%;height: inherit;aspect-ratio: 1 / 1;margin-top: 20px;}
.staff_button{width: 80%; margin:0 auto;}
.person_interview { padding:0; }
.interview_p{width: 100%;text-align: justify;margin:20px 0;}
.staff_name p{font-size: 12px;}
/* a.staff_ .staff_img{width: 50%;height: 50%;} */
.zoom_box{width: 100%;}
.staff_yellow{left:43%;z-index: 3;}
.staff_name {left:47%;}

.staff_tik_d { position: absolute; top: -75vw; }

}

/* もっと見る 矢印左むき*/
.linkMore { width:250px; height:40px; display:block; margin:10px auto 50px auto; padding:0 10px 0 40px; text-align:center; background:#fff;
  border:2px solid #0A3F67; border-radius:5px; position:relative; box-sizing:border-box; color:#0A3F67; font-size:14px;font-weight:bold;
   line-height:37px;transition:0.3s; }

a:hover .linkMore { background:#FED631; transition:0.3s; }
.linkMore::before { content: ""; display: block; position: absolute; top: 0; bottom: 0; left: -140px; margin: auto; width: 20px; height: 2px; background: #0A3F67; transition: .3s; }
.linkMore::after{ content: ""; display: block; position: absolute; top: 0; bottom: 0; left: -150px; margin: auto; width: 8px; height: 8px; border-left: 2px solid #0A3F67; border-bottom: 2px solid #0A3F67; transform: rotate(45deg); transition:.3s; }

@media screen and (max-width: 740px) {
.linkMore { margin:10px auto 20px auto; }
.linkMore { margin:10px auto 20px auto; }
}


@media screen and (max-width: 740px){
  .footer_ill {margin: 0px auto 10px;}
}