@charset "utf-8";
/* CSS Document */


.staff_detail .staff_inner{
  --gap: clamp(42px,6vw,90px);
  align-items: flex-start;
  gap: var(--gap);
}

.staff_detail .imgbox{
  width: calc(38% - var(--gap) / 2);
}

.staff_detail .imgbox img{
  width: 100%;
  height: auto;
  display: block;
}

.staff_detail .txtbox{
  width: calc(62% - var(--gap) / 2);
}

.staff_detail .staff_head{
  align-items: center;
  justify-content: flex-start;
  gap: clamp(22px,3vw,38px);
  margin-bottom: clamp(26px,3vw,40px);
}

.staff_detail .num{
  position: relative;
  width: clamp(86px,9vw,130px);
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.staff_detail .num::before,
.staff_detail .num::after{
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid rgba(51,51,51,.45);
  transform: rotate(45deg);
}
.staff_detail .num::before{

  background: #EDEDED;
}
    
.staff_detail .num::after{
    background: #fff;
  inset: 10px;
}

.staff_detail .num p{
  position: relative;
  z-index: 1;
  color: #8cc63f;
  font-size: clamp(28px,3.5vw,46px);
  line-height: 1;
  letter-spacing: .08em;
}

.staff_detail .profile .position{
  color: #333;
  line-height: 1.6;
  letter-spacing: .08em;
  margin-bottom: 6px;
}

.staff_detail .profile h2{
  color: #333;
  line-height: 1.6;
  letter-spacing: .12em;
  font-weight: 400;
}

.staff_detail .profile h2 span{
  color: #c9a24b;
  font-size: .45em;
  letter-spacing: .12em;
  margin-left: .8em;
}

.staff_detail .profile_txt{
  margin-bottom: clamp(28px,4vw,48px);
}

.staff_detail .profile_txt p{
  color: #333;
  line-height: 2;
  letter-spacing: .08em;
}

.staff_detail .more_btn.small{
  margin-bottom: clamp(24px,3vw,38px);
}

.staff_detail .more_btn.small a{
  min-width: 0;
  padding: 8px 22px;
  height: auto;
  border-radius: 200px;
}


.staff_detail .staff_accordion_wrap{
  border: 1px solid rgba(51,51,51,.55);
  background: rgba(255,255,255,1);
}

.staff_detail .staff_accordion{
 
}

.staff_detail .staff_accordion + .staff_accordion{
  border-top: 1px solid rgba(51,51,51,.12);
}

.staff_detail .staff_accordion_head{
  position: relative;
  width: 100%;
  padding: clamp(18px,2vw,26px) clamp(54px,5vw,70px) clamp(18px,2vw,26px) clamp(28px,3vw,38px);
  text-align: left;
  cursor: pointer;
}

.staff_detail .staff_accordion_head > p{
  position: relative;
  display: inline-block;
  color: #333;
  line-height: 1.6;
  letter-spacing: .08em;
  padding-left: 18px;
}

.staff_detail .staff_accordion_head > p::before{
  content: "";
  position: absolute;
  left: 0;
  top: .72em;
  width: 6px;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: #333;
}

.staff_detail .toggle_icon{
  position: absolute;
  right: clamp(24px,3vw,38px);
  top: 50%;
  width: 14px;
  height: 14px;
  transform: translateY(-50%);
}

.staff_detail .toggle_icon::before,
.staff_detail .toggle_icon::after{
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 14px;
  height: 1px;
  background: #333;
  transform: translate(-50%,-50%);
  transition: .3s ease;
}

.staff_detail .toggle_icon::after{
  transform: translate(-50%,-50%) rotate(90deg);
}

.staff_detail .staff_accordion.open .toggle_icon::after{
  opacity: 0;
  transform: translate(-50%,-50%) rotate(0deg);
}

.staff_detail .staff_accordion_body{
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .45s ease;
      border-top: 1px solid rgba(51,51,51,.12);
}

.staff_detail .staff_accordion_body_inner{
  overflow: hidden;
}

.staff_detail .staff_accordion.open .staff_accordion_body{
  grid-template-rows: 1fr;
}

.staff_detail .staff_accordion_body p{
  padding: clamp(20px,2.5vw,30px) clamp(28px,3vw,38px) clamp(24px,3vw,34px) clamp(46px,5vw,70px);
  color: #333;
  line-height: 2;
  letter-spacing: .08em;
}

.staff_detail .book_img{
  justify-content: flex-start;
  padding: 0 clamp(28px,3vw,38px) clamp(28px,3vw,38px) clamp(46px,5vw,70px);
}

.staff_detail .book_img img{
  width: min(100%,460px);
  height: auto;
  display: block;
}

@media screen and (max-width: 768px){
  .staff_detail .staff_inner{
    flex-direction: column;
  }

  .staff_detail .imgbox,
  .staff_detail .txtbox{
    width: 100%;
  }

  .staff_detail .imgbox{
    max-width: 420px;
    margin: 0 auto;
  }
      .staff_detail.cate2 .imgbox{
    order: -1;
  }

  .staff_detail.cate2 .txtbox{
    order: 1;
  }
}

@media screen and (max-width: 576px){
  .staff_detail .staff_head{
    align-items: flex-start;
  }

  .staff_detail .profile h2 span{
    display: block;
    margin-left: 0;
    margin-top: 4px;
  }

  .staff_detail .staff_accordion_head{
    padding:
      16px
      50px
      16px
      20px;
  }

  .staff_detail .staff_accordion_body p{
    padding:
      18px
      20px
      24px;
  }

  .staff_detail .book_img{
    padding:
      0
      20px
      24px;
  }
}
@media screen and (max-width: 768px){
  .staff_detail .imgbox{
    order: -1;
  }

  .staff_detail .txtbox{
    order: 1;
  }
}

.staff_detail .btn_wrap{
  justify-content: center;
  align-items: center;
  gap: clamp(18px,3vw,34px);
  margin-top: clamp(48px,6vw,80px);
}

@media screen and (max-width: 576px){
  .staff_detail .btn_wrap{
    flex-direction: column;
  }
}
.staff_detail .profile h2{
  color: #333;
  line-height: 1.6;
  letter-spacing: .12em;
  font-weight: 400;
}

.staff_detail .profile h2 span{
  display: none;
}

.staff_detail .profile .name_box{
  display: flex;
  align-items: baseline;
  justify-content: flex-start;
  gap: .8em;
}

.staff_detail .profile .name_box .en_name{
  color: #c9a24b;
  font-size: clamp(14px,.8vw,16px);
  line-height: 1.6;
  letter-spacing: .12em;
}

@media screen and (max-width: 576px){
  .staff_detail .profile .name_box{
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
  }
}
/* ---------- IEのみ ---------- */
@media all and (-ms-high-contrast: none) {
}
/* ---------- 1280px ~ ---------- */
@media screen and (max-width: 1280px){
}
/* ---------- 1080px ~ ---------- */
@media screen and (max-width: 1080px){
}
/* ---------- 768px ~ ---------- */
@media screen and (max-width: 768px){
}
/* ---------- 576px ~ ---------- */
@media screen and (max-width: 576px){
}
/* ---------- 350px ~ ---------- */
@media screen and (max-width: 350px){
}