@charset "UTF-8";
/* FV のアイコン（common.css の仮アイコン ico_fv.png を差し替える） */
.bl_fv_ttl::before {
  background-image: url(../../assets/img/icon-fv/staff-icon.svg);
}

.un_staff {
  display: flex;
  align-items: flex-start;
  gap: 56px;
}

.un_staff_box {
  flex: 1;
}

.un_staff_box > * + * {
  margin-top: 48px;
}

.un_staff_ttl {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  font-family: var(--font-gothic);
  font-size: 40px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.06em;
  --text-shadow-color: var(--color-brown-400);
}

.un_staff_ttl::before {
  content: attr(data-en);
  display: block;
  width: 100%;
  color: var(--color-white);
  font-family: var(--font-sans);
  font-size: 24px;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  text-shadow: 1.5px 0 var(--text-shadow-color), -1.5px 0 var(--text-shadow-color), 0 1.5px var(--text-shadow-color), 0 -1.5px var(--text-shadow-color), 1.5px 1.5px var(--text-shadow-color), -1.5px 1.5px var(--text-shadow-color), 1.5px -1.5px var(--text-shadow-color), -1.5px -1.5px var(--text-shadow-color);
}

.un_staff_ttl.un_staff_ttl__2::before {
  color: var(--color-navy-500);
}

.un_staff_ttl_s {
  font-size: 32px;
  font-weight: 500;
}

.un_staff_ttl_m {
  color: var(--color-brown-500);
}

.un_staff_img {
  width: max-content;
  max-width: calc(100% - 40px);
  outline: 4px solid;
  outline-offset: -4px;
  border-radius: 70px;
  overflow: hidden;
}

.un_staff_img img {
  display: block;
}

.un_panel {
  display: block;
}

.un_panel_list {
  display: flex;
  gap: 24px;
}

.un_panel_i {
  color: var(--text-color);
  width: calc(50% - 12px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  padding: 32px;
  border: 4px solid var(--color-blue-600);
  border-radius: 20px;
  background: var(--color-blue-200);
}

.un_panel_i:nth-child(2n) {
  background-color: var(--color-white);
}

.un_panel_i::before {
  content: "";
  display: block;
  width: 96px;
  height: 96px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

.un_panel_i[data-i="1"]::before {
  background-image: url(../../assets/img/staff/staff_ico01.svg);
}

.un_panel_i[data-i="2"]::before {
  background-image: url(../../assets/img/staff/staff_ico02.svg);
}

.un_panel_i[data-i="3"]::before {
  background-image: url(../../assets/img/staff/staff_ico03.svg);
}

.un_panel_i[data-i="4"]::before {
  background-image: url(../../assets/img/staff/staff_ico04.svg);
}

.un_panel_ttl {
  color: var(--color-blue-600);
  font-family: var(--font-gothic);
  font-size: 28px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.06em;
  text-align: center;
}

@media (max-width: 767px) {
  .un_staff {
    flex-direction: column;
    align-items: flex-start;
    gap: 32px;
  }
  .un_staff_box {
    width: 100%;
    flex: initial;
  }
  .un_staff_box > * + * {
    margin-top: 32px;
  }
  .un_staff_ttl {
    justify-content: center;
  }
  .un_staff_ttl::before {
    font-size: 20px;
    text-align: center;
  }
  .un_staff_img {
    width: 100%;
    max-width: none;
  }
  .un_staff_img img {
    width: 100%;
  }
  .un_panel_list {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  .un_panel_i {
    width: 100%;
    padding-inline: 20px;
  }
}