@charset "utf-8";
/* CSS Document */
/* ============== サイドの余白 ============== */
.top-title {
  width: min(90%, 1820px);
  margin-inline: auto;
}
/*  見出し  */
.top-title>h1 {
  font-size: clamp(2.8rem, 5vw, 4.0rem);
  display: block;
  margin: clamp(110px, 15vw, 180px) auto clamp(60px, 14vw, 160px);
}
.sectionTitle5 {
  position: relative;
  text-align: center;
}
.sectionTitle5::after {
  content: attr(data-en);
  font-size: clamp(8.0rem, 22vw, 26.0rem);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #c7cdfb;
  opacity: .6;
  z-index: -9;
  overflow: hidden;
  width: 100%;
}
/* ============== 内容 ここから ============== */
.contents {
  width: min(90%, 560px);
  margin: clamp(80px, 15vw, 140px) auto;
  justify-items: center;
}
.sec-staff {
  display: flex;
  flex-direction: column;
  row-gap: 2rem;
  margin-bottom: clamp(30px, 15vw, 60px);
}
.sec-staff img {
  width: min(70%, 300px);
  margin-inline: auto;
}
.staff-prof {
  display: flex;
  flex-direction: column;
  gap: 30px;
}
.staff-prof h2 {
  font-size: clamp(2.4rem, 10vw, 4.6rem);
  line-height: 1.5;
  color: #555;
}
.staff-prof h2 span.marker01 {
  background: linear-gradient(transparent 60%, #b1e0e5 60%);
  padding: 0 4px;
}
.staff-prof h2 span.marker01 .space::before {
  content:"\A";
  white-space:pre;
}
.staff-prof h2 span.marker02 {
  background: linear-gradient(transparent 60%, #c8fee6 60%);
  padding: 0 4px;
}
.staff-prof h2 span.marker03 {
  background: linear-gradient(transparent 60%, #c7cdfb 60%);
  padding: 0 4px;
}
.staff-prof h2 span.marker04 {
  background: linear-gradient(transparent 60%, #ffd2ad 60%);
  padding: 0 4px;
}
.staff-prof h2 span.marker05 {
  background: linear-gradient(transparent 60%, #ffb3ba 60%);
  padding: 0 4px;
}
.staff-prof h2 span.marker06 {
  background: linear-gradient(transparent 60%, #fff799 60%);
  padding: 0 4px;
}
.staff-prof h2 span.marker07 {
  background: linear-gradient(transparent 60%, #d4f2fc 60%);
  padding: 0 4px;
}
.staff-prof .detail div {
  font-family: 'Noto Serif JP', serif;
  display: flex;
  flex-flow: row nowrap;
  gap: 10px;
  margin-bottom: 10px;
}
.staff-prof .detail div span {
  flex: 1;
  border: solid 1px #333;
  max-width: 100px;
  padding: 0 6px;
  white-space: nowrap;
}
.staff-prof .detail div p {
  flex: 3;
  text-align: left;
  line-height: 1.5;
  word-break: keep-all;
}
.message {
  flex-grow: 1;
  font-family: 'Noto Serif JP', serif;
  font-size: clamp(1.8rem, 1.3vw, 2.0rem);
}
/* ============== TAB(600px)レスポンシブ ============== */
@media only screen and (min-width:760px) { 
  .top-bg {
    display: block;
    width: min(90%, 1820px);
    margin-inline: auto;
  }
  .contents {
    width: min(90%, 1440px);
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 6rem;
  }
}
  /* ============== PC(1025px)レスポンシブ ============== */
@media only screen and (min-width:1000px) {
  .sec-staff {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(2, 1fr);
    row-gap: clamp(20px, 3vw, 30px);
    max-width: 600px;
  }
  .sec-staff>img { 
    grid-area: 1 / 1 / 2 / 3;
    width: 100%;
  }
  .sec-staff .staff-prof { 
    grid-area: 1 / 3 / 2 / 6;
    justify-content: space-between;
    margin-left: 2rem;
  }
  .sec-staff .message { 
    grid-area: 2 / 1 / 3 / 6; 
  }
  .staff-prof h2 {
    text-align: left;
    font-size: clamp(2.6rem, 3vw, 3.6rem);
  }
}