

.sec-instructors {
  
  padding-block: 23px 140px;

  --ins-photo-w: 386px; 
  --ins-photo-h: 233px;
  --ins-badge: 102px; 
}

.sec-instructors__head {
  margin-bottom: 62px;
}

.sec-instructors .sec-head__ja {
  line-height: 64px;
  letter-spacing: 0;
  color: var(--text-strong);
}

.sec-instructors .sec-head__lead {
  margin-top: 10px;
  font-weight: 500;
  line-height: 23px;
  color: var(--text);
}

.sec-instructors .sec-head__en {
  top: -15px;
  right: -7.7px; 
  bottom: auto;
  font-size: 84px;
  line-height: 1;
  letter-spacing: 4.7px;
}

.sec-instructors__body {
  display: flex;
  align-items: flex-start;
  gap: 70px;
}

.sec-instructors__figure {
  flex: none;
  width: var(--ins-photo-w);
}

.sec-instructors__frame {
  width: var(--ins-photo-w);
  height: var(--ins-photo-h);
  overflow: hidden;
}

.sec-instructors__photo {
  width: 476px;
  height: 279px;
  max-width: none;
  margin: -23px 0 0 -51px;
}

.sec-instructors__badges {
  display: flex;
  gap: 14px;
  margin-top: -67px; 
  margin-left: 23px;
}

.sec-instructors__badge {
  --badge-pt: 19px;
  --badge-lh: 20px;
  --badge-gap: 4px;
  --badge-dot: 0px;

  display: flex;
  flex-direction: column;
  align-items: center;
  width: var(--ins-badge);
  height: var(--ins-badge);
  padding-top: var(--badge-pt);
  padding-inline: 4px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.6);
  text-align: center;
}

.sec-instructors__badge--a {
  --badge-pt: 23px;
  --badge-lh: 20px;
  --badge-gap: 2.5px;
  --badge-dot: -1px;
}

.sec-instructors__badge--b {
  --badge-pt: 19px;
  --badge-lh: 20px;
  --badge-gap: 4px;
  --badge-dot: 0px;
}

.sec-instructors__badge--c {
  --badge-pt: 15px;
  --badge-lh: 14px;
  --badge-gap: 7px;
  --badge-dot: -1px;
}

.sec-instructors__badge-sub,
.sec-instructors__badge-key {
  flex: none;
  white-space: nowrap;
}

.sec-instructors__badge-sub {
  font-size: var(--fs-xs);
  font-weight: 500;
  line-height: var(--badge-lh);
  color: var(--text);
}

.sec-instructors__badge-sub--lg {
  line-height: 16px;
}

.sec-instructors__badge-num {
  
  position: relative;
  font-size: 24px;
  font-weight: 500;
  line-height: 0;
}

.sec-instructors__badge-num::before {
  content: "";
  position: absolute;
  top: 4px;
  left: 0;
  right: 0;
  height: 5px;
  background-image: radial-gradient(
    circle at 50% 50%,
    var(--aixeed-green) 0.9px,
    rgba(0, 0, 0, 0) 1.8px
  );
  background-size: 50% 5px;
  background-repeat: repeat-x;
}

.sec-instructors__badge-key {
  margin-top: var(--badge-gap);
  font-size: var(--fs-body);
  
  font-weight: 500;
  line-height: 20px;
  color: var(--text-strong);
}

.sec-instructors__badge-key span {
  position: relative;
}

.sec-instructors__badge-key span::before {
  content: "";
  position: absolute;
  top: calc(var(--badge-dot) - 1px);
  left: 50%;
  width: 5px;
  height: 5px;
  margin-left: -2.5px;
  
  background: radial-gradient(
    circle at 50% 50%,
    var(--aixeed-green) 0.9px,
    rgba(0, 0, 0, 0) 1.8px
  );
}

.sec-instructors__profile {
  flex: 1 1 auto;
  min-width: 0;
}

.sec-instructors__name {
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: 1.4;
  color: var(--text-strong);
}

.sec-instructors__role {
  margin-top: 2px;
  font-size: var(--fs-body);
  font-weight: 700;
  line-height: 1.4;
  color: var(--text-strong);
}

.sec-instructors__bio {
  margin-top: 21px;
  font-size: var(--fs-body);
  line-height: 23px;
  color: var(--text);
}

.sec-instructors__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 19px;
}

.sec-instructors__btn {
  display: inline-flex;
  align-items: center;
  width: 246px;
  height: 48px;
  padding-inline: 23px;
  border: 1px solid var(--aixeed-green);
  border-radius: 24px;
  background: var(--surface);
  font-size: var(--fs-xs);
  line-height: 1;
  color: var(--text);
  transition: background-color var(--dur) var(--ease),
    border-color var(--dur) var(--ease);
}

.sec-instructors__btn:hover {
  background: rgba(103, 190, 141, 0.12);
  border-color: var(--green-deep);
}

.sec-instructors__btn-icon {
  flex: none;
}

.sec-instructors__btn-icon--yt {
  margin: 2px 13px 0 2px;
}

.sec-instructors__btn-icon--arrow {
  margin-right: 16px;
}

@media (max-width: 1099px) {
  .sec-instructors {
    padding-block: 64px;
  }

  .sec-instructors .sec-head__en {
    font-size: 56px;
  }

  .sec-instructors__body {
    flex-direction: column;
    gap: 48px;
  }
}

@media (max-width: 767px) {
  .sec-instructors {
    --ins-bar-h: 46px;
    --ins-bar-r: 23px;
    --ins-box: #d9d9d9; 
  }

  .section.sec-instructors {
    padding-block: 56px;
  }

  
  .sec-instructors__head {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .sec-instructors__body {
    gap: 24px; 
  }

  

  .sec-instructors__figure {
    width: 100%;
    max-width: none;
  }

  .sec-instructors__frame {
    width: 100%;
    height: auto;
    aspect-ratio: 351 / 205;
  }

  .sec-instructors__photo {
    width: 100%;
    height: 100%;
    margin: 0;
    object-fit: cover;
  }

  

  .sec-instructors__badges {
    flex-direction: column;
    gap: 6px; 
    margin: 0;
    padding: 24px 12px; 
    border-radius: 0 0 4px 4px;
    background: var(--ins-box);
  }

  
  .sec-instructors__badge--a {
    order: 1;
  }

  .sec-instructors__badge--c {
    order: 2;
  }

  .sec-instructors__badge--b {
    order: 3;
  }

  .sec-instructors__badge {
    flex-direction: row;
    align-items: baseline;
    justify-content: center;
    width: 100%;
    height: auto;
    
    min-height: var(--ins-bar-h);
    padding: 14px 12px 12px;
    border-radius: var(--ins-bar-r);
    white-space: nowrap;
  }

  .sec-instructors__badge-sub {
    font-size: 15px;
    line-height: 1;
  }

  .sec-instructors__badge-sub--lg {
    line-height: 1;
  }

  
  .sec-instructors__badge--a
    .sec-instructors__badge-sub
    + .sec-instructors__badge-sub::before {
    content: "・";
  }

  .sec-instructors__badge--b
    .sec-instructors__badge-sub
    + .sec-instructors__badge-sub::before {
    content: "\a0";
  }

  .sec-instructors__badge-num {
    font-size: 24px;
  }

  .sec-instructors__badge-num::before {
    top: 6px;
  }

  .sec-instructors__badge-key {
    margin-top: 0;
    font-size: 20px;
    line-height: 1;
  }

  .sec-instructors__badge-key span::before {
    top: -1px;
  }

  
  @media (max-width: 374px) {
    .sec-instructors__badge {
      flex-wrap: wrap;
      padding-block: 10px;
      padding-inline: 14px;
      white-space: normal;
      row-gap: 2px;
    }

    .sec-instructors__badge-sub {
      font-size: 14px;
    }

    .sec-instructors__badge-num {
      font-size: 22px;
    }

    .sec-instructors__badge-key {
      font-size: 18px;
    }
  }

  

  .sec-instructors__name {
    font-size: var(--fs-h3); 
    line-height: 34.752px;
  }

  .sec-instructors__role {
    margin-top: 6px; 
    font-size: var(--sp-fs-body); 
    line-height: 20px;
  }

  .sec-instructors__bio {
    margin-top: 19px; 
    font-size: var(--sp-fs-body); 
    font-weight: 400;
    line-height: 20px;
  }

  

  .sec-instructors__actions {
    flex-direction: column;
    gap: 8px; 
    margin-top: 19px; 
  }

  .sec-instructors__btn {
    width: 100%;
    height: 50px;
    padding-inline: 24px;
    border-radius: 25px;
    font-size: var(--sp-fs-lead); 
    font-weight: 700;
  }
}
