/*==========================================
 commonレベル要素
===========================================*/
main {
  overflow: hidden;
}

@media (max-width: 767px) {
  article {
    overflow: hidden;
  }
}
.staff_inner {
  width: 96%;
  margin: 0 auto;
}

/*==========================================
 スタッフ紹介 一覧 (archive-staff)
===========================================*/
/* リスト要素共通 */
.staff_list a:hover {
  text-decoration: none;
  opacity: 1;
}

.staff_img {
  width: 55.55%;
}
.staff_img img {
  /*width: 600px;*/
  height: 490px;
  object-fit: cover;
  filter: grayscale(100%);
}
.staff_img img:hover {
  filter: grayscale(0%);
  opacity: 1;
}
.staff_img img.no_color:hover {
  opacity: 0.6;
}
@media (max-width: 767px) {
  .staff_img {
    width: 100%;
  }
  .staff_img img {
    height: 300px;
  }
}

.info_text {
  height: 490px;
  position: relative;
}
@media (max-width: 767px) {
  .info_text {
    height: 285px;
  }
}
.name_english p {
  line-height: 110px;
  font-family: 'Work Sans', sans-serif;
  font-weight: 100;
  /*font-size: 3.5vw;*/
   font-size: 80px;
  transform: scale(0.9, 1);
  letter-spacing: 10px;
}
@media (max-width: 991px) {
  .name_english p {
    font-size: 70px;
    line-height: 90px;
    letter-spacing: 12px;
  }
}
@media (max-width: 767px) {
  .name_english p {
    font-size: 38px;
    letter-spacing: 1px;
    height: 60px;
  }
}
.name_english p:nth-last-of-type(1) {
  position: relative;
}
.name_english p:nth-last-of-type(1)::after {
  content:"\f101";
  font-family: FontAwesome;
  color: #FAD200;
  font-size: 60px;
  transform: scale(1,0.8);
  margin-left: 10px;
  position: absolute;
  bottom: -13px;
}
@media (max-width: 991px) {
  .name_english p:nth-last-of-type(1)::after {
    bottom: -9px;
  }
}
@media (max-width: 767px) {
  .name_english p:nth-last-of-type(1)::after {
    bottom: -30px;
  }
}
.under_part {
  position: absolute;
  bottom: 30px;
}
.under_part>p {
  font-size: 22px;
}
.name_japanese {
  font-size: 38px;
  display: flex;
  flex-direction: row;
  width: max-content;
}
.name_japanese p:first-child {
  margin-right: 1rem;
}


/* 写真が左のレイアウト(奇数番目) */
.staff_list li a, .staff_main li{
  display: flex;
  flex-direction: row;
}
@media (max-width: 767px) {
  .staff_list li a {
    flex-direction: column;
  }
}
.staff_list li .staff_info {
  height: 490px;
  background-color: #fff;
  transform: skewX(10deg);
  margin-left: -45px
}
@media (max-width: 767px) {
  .staff_list li .staff_info {
    height: 300px;
  }
}
.staff_list li .info_text {
  transform: skewX(-10deg);
  padding: 30px 0 20px 50px;
}
@media (max-width: 991px) {
  .staff_list li .info_text {
    padding: 0px 0 0 25px;
  }
}
.staff_list li .under_part {
  padding-left: 20px;
}

/* 写真が右のレイアウト(偶数番目) */
@media (min-width: 768px) {
  .staff_list li:nth-child(even) a {
    flex-direction: row-reverse;
  }
  .staff_list li:nth-child(even) .staff_info {
    transform: skewX(-10deg);
    margin-right: -45px
  }
  .staff_list li:nth-child(even) .info_text {
    transform: skewX(10deg);
    padding: 30px 20px 20px 0;
  }
  .staff_list li:nth-child(even) .name_english {
    text-align: right;
    padding-right: 20px;
  }
  .staff_list li:nth-child(even) .under_part {
    text-align: right;
  }
}


/*==========================================
 スタッフ紹介 詳細 (single-staff)
===========================================*/
.staff_main .staff_img img:hover {
  filter: grayscale(100%);
  overflow: visible;
}
@media (max-width: 767px) {
  .staff_main .staff_img {
    width: 100%;
  }
  .staff_main .staff_img img {
    height: 300px;
  }
}
@media (max-width: 768px) {
  /*.staff_main .staff_info {
    width: 50%;
    font-size: ;
  }*/
}
@media (max-width: 767px) {
  .staff_list.staff_main li {
    flex-direction: column;
  }
}

.detail_text {
  width: 0%;
  margin-left: auto;
  border-top: 290px solid #FAD200;
  border-left: 80px solid transparent;
  position: relative;
  transition: 1s;
}
.detail_text.show_up {
  width: 68.5%;
}

.hide_show {
  position: absolute;
  top: -268px;
  left: 60px;
  width: 85%;
  height: 250px;
  background-color: #FAD200;
}

@media (max-width: 767px) {
  .hide_show {
    left: unset;
    width: 100%;
  }
}

.hide_show.show {
  opacity: 1;
  transform: translate(100%, 0%) matrix(1, 0, 0, 1, 0, 0);
  transition-delay: 1s;
  transition-duration: 1s;
}
.detail_text tbody tr th {
  opacity: 0;
}
.detail_text tbody tr th.show {
  opacity: unset;
  transition-delay: 1s;
}
.detail_text tbody tr td {
  opacity: 0;
}
.detail_text tbody tr td.show {
  opacity: unset;
  transition-delay: 1s;
}

.detail_text tbody {
  position: absolute;
  top:-230px;
  left:60px;
}

@media (max-width: 767px) {
  .detail_text tbody {
    left:5%;
    top: -265px;
  }
}

.detail_text {
  font-size: 16px;
}
.detail_text th {
  width: 135px;
  height: 40px;
  font-weight: 500;
}
@media (max-width: 767px) {
  .detail_text th {
    width: 100px;
  }
}
@media (max-width: 575px) {
  .detail_text.show_up {
    width: 95%;
  }
  .detail_text tbody {
    left:-3%;
  }
}
/*一言メッセージ*/
.message_block {
  position: absolute;
  top: -100px;
  left: 60px;
  font-weight: bold;
  width: 85%;
  opacity: 0;
}
.message_block.show {
  opacity: unset;
  transition-delay: 1s;
}

@media (max-width: 767px) {
  .message_block {
    left: 5%;
    top: -135px;
  }
}

@media (max-width: 599px) {
  .detail_text th,
  .detail_text td,
  .message_block {
    font-size: 14px;
  }
}

/*周りからのコメント*/
.comments_around {
  width: 80%;
  margin: 0 auto 90px;
}
.comments_around li {
  margin-bottom: 40px;
}
.comment {
  height: 135px;
  font-size: 25px;
  position: relative;
}
.comment p {
  width: 100%;
  border-bottom: 1px solid #000;
  padding: 0 0  20px 0;
  position: absolute;
  bottom: 10px;
}
@media (max-width: 599px) {
  .comments_around {
    margin: 0 auto 40px;
  }
  .comments_around li {
    margin-bottom: 20px;
  }
}

/* 質問 */
.question_answer {
  width: 80%;
  margin: 0 auto 90px;
}
.question_answer li {
  margin-bottom: 60px;
}

.question_answer li:last-child {
  margin-bottom: 100px;
}

.question_answer div:first-child {
  margin-bottom: 50px;
}
.question {
  height: 135px;
  font-size: 25px;
  position: relative;
}
.question p {
  width: 100%;
  border-bottom: 1px solid #000;
  padding: 0 0  20px 60px;
  position: absolute;
  bottom: 10px;
  left: 10px;
}
.question::before {
  content :"Q";
  font-family: 'Work Sans', sans-serif;
  font-weight: 100;
  font-size: 80px;
  padding-right: 10px;
}
.answer {
  width: 98%;
  margin: 0 auto;
  padding-left: 20px;
}
@media(max-width: 767px) {
  .question p {
    left: 0;
  }
  .answer {
    width: 100%;
    padding-left: 10px;
  }
  .answer p {
    font-size: 16px;
  }
  .question_answer {
    width: 95%;
    margin: 0 auto 50px;
  }
  .comments_around {
    width: 95%;
  }
  .comments_around li {
    font-size: 16px;
  }
  .question_answer div:first-child {
    margin-bottom: 30px;
  }
}

/* 最近書いた投稿 */
.new_posts {
  background-color: #FFF4E1;
  width: 100%;
  padding: 50px 0;
}
@media (max-width: 767px) {
  .new_posts {
    height: 100%;
  }
}
.new_posts .inner {
  width: 1070px;
  position: relative;
}
@media (max-width: 1070px) {
  .new_posts .inner {
    width: 99%;
  }
}
@media (max-width: 767px) {
  .new_posts .inner {
    width: 98%;
  }
}
.new_posts .new_post_title {
  border-left: 8px solid #000;
  padding: 12px 0 12px 30px;
  font-size: 19px;
  margin-bottom: 50px;
}
.more_btn {
  height: 70px;
  width: 70px;
  line-height: 70px;
  text-align: center;
  border-radius: 35px;
  background-color: #333333;
  padding-left: 5px;
  position: absolute;
  right: 0;
  top:0;
}
@media (max-width: 1000px) {
  .more_btn {
    padding-left: 3px;
  }
}
.more_btn p {
  color:#fff;
  transform: scale(1, 0.9)
}
.new_posts li {
  width: 320px;
}
@media (max-width: 767px) {
  .new_posts li {
    margin: 0 auto 40px;
    padding: 0;
  }
}
.new_posts .post_img {
  width: 320px;
  height: 200px;
  margin: 0 auto 15px;
}
.post_img img {
  height: 200px;
  object-fit: cover;
  text-align: center;
}

@media (max-width: 991px) {
  .new_posts .post_img {
    width: 100%;
  }
}
.new_posts .label-new_red {
  float: left;
}
.new_posts .post_date {
  font-size: 16px;
  float: right;
  margin-right: 15px;
}
.new_posts .label_area {
  margin-bottom: 10px;
}
@media (max-width: 991px) {
  .new_posts .new_posts_list{
    width: 300px;
    margin: 0 auto;
  }
}


.to_staff_archive {
  width: 275px;
  height: 200px;
  padding-top: 80px;
}
@media (max-width: 767px) {
  .to_staff_archive {
    margin: 0 auto;
  }
}

.notice_list_pagenation{
  margin-top: 50px;
}