@charset "UTF-8";
/*
index
-----------------------------------------------------*/
/*
i-functions
-----------------------------------------------------*/
/*
i-setting
-----------------------------------------------------*/
.-font-serif {
  font-family: "Noto Serif JP";
  font-style: normal;
  font-weight: 400;
}

.-font-set-j {
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-weight: 400;
}

.-font-set-e {
  font-family: "Marcellus", serif;
  font-weight: 400;
  font-style: normal;
}

/*
i-mixin
-----------------------------------------------------*/
/* ------------------------- 使い方 ----------------------------------------------------------

    @include sizing(width, wide, 365px, sp, 276px);
    ==> width: clamp(276px, 7.46vw + 248px, 365px);
    （ビューポートがwide(1568px)のとき365px, sp(375px)のとき276pxになる自動補完値を上限下限をつけて設定）

    @include sizing(width, wide, 365px, sp, 276px, noClamp);
    ==> width: calc(7.46vw + 248px);
    （ビューポートがwide(1568px)のとき365px, sp(375px)のとき276pxになる自動補完値を設定）

    @include sizingRem(font-size, wide, 14px, sp, 12px);
    ==> font-size: clamp(0.75rem, 0.17vw + 0.70625rem, 0.875rem;
    （ビューポートがwide(1568px)のとき14px, sp(375px)のとき12pxになる自動補完値をremに変換して設定）
　　
    ※使いたいsassファイル上で@useしてください。
    ※scssファイル上での読みやすさ重視のため、mixinの引数に単位[px]が必要な仕様にしてあります。

// ---------------------------------------------------------------------------------------- */
/*
teachingstaff
-----------------------------------------------------*/
.p-teachingstaff-title {
  font-size: clamp(22px, 0.76vw + 19.6px, 32px);
  margin-bottom: clamp(32px, 2.44vw + 24.2px, 64px);
  color: #fff;
  width: 452px;
  padding: 0.8em 1.2em 0.8em 1.2em;
  margin-left: -0.4em;
  padding: 0.6em 0.8em 0.6em 0.8em;
}
@media screen and (min-width: 768px) {
  .p-teachingstaff-title {
    margin-left: -1em;
    padding: 0.6em 1em 0.6em 1em;
  }
}
@media screen and (min-width: 1160px) {
  .p-teachingstaff-title {
    margin-left: -1.2em;
    padding: 0.8em 1.2em 0.8em 1.2em;
  }
}
.p-teachingstaff-title.-green {
  background: #114C25;
  background: -webkit-gradient(linear, left top, right top, from(rgb(17, 76, 37)), color-stop(180%, rgb(181, 233, 158)));
  background: linear-gradient(90deg, rgb(17, 76, 37) 0%, rgb(181, 233, 158) 180%);
}
.p-teachingstaff-title.-orenge {
  background: #592D00;
  background: -webkit-gradient(linear, left top, right top, from(rgb(158, 61, 0)), color-stop(120%, rgb(255, 184, 69)));
  background: linear-gradient(90deg, rgb(158, 61, 0) 0%, rgb(255, 184, 69) 120%);
  opacity: 0.9;
}
.p-teachingstaff-title.-purple {
  background: #180036;
  background: -webkit-gradient(linear, left top, right top, from(rgb(24, 0, 54)), color-stop(120%, rgb(244, 206, 255)));
  background: linear-gradient(90deg, rgb(24, 0, 54) 0%, rgb(244, 206, 255) 120%);
  opacity: 0.9;
}
.p-teachingstaff-head {
  position: relative;
  margin-bottom: 64px;
}
@media screen and (min-width: 768px) {
  .p-teachingstaff-head {
    margin-bottom: 80px;
  }
}
.p-teachingstaff-head .-btn-outer {
  padding: 0 6.4%;
  margin-top: 30px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 12px;
}
@media screen and (min-width: 768px) {
  .p-teachingstaff-head .-btn-outer {
    margin-top: 38;
    padding-left: clamp(94px, 5.57vw + 51.2px, 142px);
    padding-right: clamp(150px, 9.05vw + 80.5px, 228px);
  }
}
@media screen and (min-width: 1366px) {
  .p-teachingstaff-head .-btn-outer {
    margin-top: -38px;
    padding: 0;
    position: absolute;
    right: 0;
    right: clamp(150px, 14.18vw - 3.1px, 228px);
  }
}
.p-teachingstaff-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 32px;
}
.p-teachingstaff-list .-card {
  width: 100%;
  background: #fff;
  border-radius: 2px;
  position: relative;
  height: auto;
  border: 1px solid #C4D9C3;
  padding: 1.5em;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 1.5em;
}
@media screen and (min-width: 768px) {
  .p-teachingstaff-list .-card {
    width: calc((100% - 32px) / 2);
  }
}
@media screen and (min-width: 1160px) {
  .p-teachingstaff-list .-card {
    width: calc((100% - 64px) / 3);
  }
}
.p-teachingstaff-list .-card .-L {
  width: calc(100% - (1.5em + 31%));
}
.p-teachingstaff-list .-card .-L h2 {
  font-size: clamp(12px, 0.15vw + 11.6px, 14px);
  margin-bottom: clamp(10px, 0.15vw + 9.6px, 12px);
  line-height: 1.77;
  color: #145329;
  letter-spacing: -0.01em;
  font-weight: 500;
}
.p-teachingstaff-list .-card .-L h3 {
  font-size: clamp(18px, 0.46vw + 16.5px, 24px);
  line-height: 1.77;
  color: #145329;
  letter-spacing: -0.01em;
  font-weight: 500;
  position: relative;
  margin-bottom: clamp(8px, 0.15vw + 7.6px, 10px);
}
.p-teachingstaff-list .-card .-L h3::after {
  content: "";
  display: block;
  width: 90%;
  height: 1px;
  position: absolute;
  left: 0;
  bottom: 0;
  background: #2C6739;
  background: -webkit-gradient(linear, left top, right top, from(rgb(44, 103, 57)), to(rgb(255, 254, 235)));
  background: linear-gradient(90deg, rgb(44, 103, 57) 0%, rgb(255, 254, 235) 100%);
}
.p-teachingstaff-list .-card .-L h4 {
  font-size: clamp(8px, 0.15vw + 7.6px, 10px);
  font-family: "Marcellus", serif;
  font-weight: 400;
  letter-spacing: 0.01em;
  margin-bottom: clamp(10px, 0.15vw + 9.6px, 12px);
}
.p-teachingstaff-list .-card .-L p {
  font-size: clamp(10px, 0.15vw + 9.6px, 12px);
  margin: 0;
}
.p-teachingstaff-list .-card .-L h5 {
  font-size: clamp(10px, 0.15vw + 9.6px, 12px);
  margin-top: clamp(10px, 0.15vw + 9.6px, 12px);
  line-height: 1;
  letter-spacing: 0.01em;
  border: 1px solid #C4D9C3;
  padding: 0.28em 0.5em 0.4em;
  margin-top: clamp(8px, 0.31vw + 6.9px, 12px);
  display: inline-block;
}
.p-teachingstaff-list .-card .-R {
  width: 31%;
}
.p-teachingstaff-list .-card .-R img {
  width: 100%;
  height: auto;
  aspect-ratio: 180/270;
  -o-object-fit: cover;
     object-fit: cover;
}
.p-teachingstaff-list .-card a {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
.p-teachingstaff-post {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: 96px 0;
}
.p-teachingstaff-post .-L {
  width: 100%;
}
@media screen and (min-width: 768px) {
  .p-teachingstaff-post .-L {
    width: 47%;
  }
}
@media screen and (min-width: 768px) {
  .p-teachingstaff-post .-L .-sticky {
    position: sticky;
    top: 100px;
  }
}
.p-teachingstaff-post .-L h1 {
  font-size: clamp(36px, 1.22vw + 32.1px, 52px);
  position: relative;
  padding-bottom: clamp(3px, 0.08vw + 2.7px, 4px);
  margin-bottom: clamp(10px, 0.15vw + 9.6px, 12px);
}
.p-teachingstaff-post .-L h1 span {
  font-size: clamp(16px, 0.61vw + 14.1px, 24px);
  display: block;
  margin-bottom: 0.6em;
}
.p-teachingstaff-post .-L h1::after {
  content: "";
  display: block;
  width: 90%;
  height: 1px;
  position: absolute;
  left: 0;
  bottom: 0;
  background: #2C6739;
  background: -webkit-gradient(linear, left top, right top, from(rgb(44, 103, 57)), to(rgb(255, 254, 235)));
  background: linear-gradient(90deg, rgb(44, 103, 57) 0%, rgb(255, 254, 235) 100%);
}
.p-teachingstaff-post .-L h2 {
  font-size: clamp(14px, 0.15vw + 13.6px, 16px);
  font-family: "Marcellus", serif;
  font-weight: 400;
  letter-spacing: 0.01em;
}
.p-teachingstaff-post .-L h3 {
  font-size: clamp(14px, 0.15vw + 13.6px, 16px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.01em;
  border: 1px solid #C4D9C3;
  padding: 0.28em 0.5em 0.4em;
  margin-top: clamp(8px, 0.31vw + 6.9px, 12px);
  display: inline-block;
}
.p-teachingstaff-post .-L figure {
  margin: 50px auto 0;
  width: 80%;
  padding: 0 16px 16px;
  position: relative;
}
@media screen and (min-width: 768px) {
  .p-teachingstaff-post .-L figure {
    padding: 0 0 32px;
    padding: 0;
    margin-top: clamp(32px, 1.22vw + 28.1px, 48px);
    margin: 50px 0 0;
  }
}
.p-teachingstaff-post .-L figure img {
  border-radius: 2px;
  width: 100%;
  aspect-ratio: 180/270;
  height: auto;
  -o-object-fit: cover;
     object-fit: cover;
}
@media screen and (min-width: 768px) {
  .p-teachingstaff-post .-L figure img {
    width: 220px;
    margin-left: 32px;
  }
}
.p-teachingstaff-post .-L figure::before {
  content: "";
  display: block;
  position: absolute;
  border-radius: 2px;
  z-index: -1;
  width: calc(100% - 32px);
  margin-left: 0px;
  margin-top: 16px;
  aspect-ratio: 180/270;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #0C4420;
  background: -webkit-gradient(linear, left top, right top, from(rgb(12, 68, 32)), to(rgb(51, 155, 87)));
  background: linear-gradient(90deg, rgb(12, 68, 32) 0%, rgb(51, 155, 87) 100%);
}
@media screen and (min-width: 768px) {
  .p-teachingstaff-post .-L figure::before {
    width: calc(100% - 32px);
    width: 220px;
    margin-top: 32px;
  }
}
.p-teachingstaff-post .-R {
  width: 100%;
}
@media screen and (min-width: 768px) {
  .p-teachingstaff-post .-R {
    width: 47%;
  }
}
.p-teachingstaff-post .-R h2 {
  position: relative;
  background: #114C25;
  background: -webkit-gradient(linear, left top, right top, from(rgb(17, 76, 37)), color-stop(180%, rgb(181, 233, 158)));
  background: linear-gradient(90deg, rgb(17, 76, 37) 0%, rgb(181, 233, 158) 180%);
  font-size: clamp(20px, 0.31vw + 18.9px, 24px);
  padding: 0.6em 0.6em 0.6em 1em;
  color: #fff;
  margin-bottom: clamp(28px, 0.92vw + 25px, 40px);
}
.p-teachingstaff-post .-R h2::after {
  content: "";
  display: block;
  font-family: "Marcellus", serif;
  font-weight: 400;
  font-size: clamp(42px, 3.13vw + 32px, 83px);
  line-height: 1;
  opacity: 0.7;
  mix-blend-mode: multiply;
  color: #C4D9C3;
  position: absolute;
  left: clamp(-26px, -1.37vw - 3.7px, -8px);
  top: clamp(-45px, -2.37vw - 6.4px, -14px);
}
.p-teachingstaff-post .-R h2.-data::after {
  content: "Data";
}
.p-teachingstaff-post .-R h2.-profile::after {
  content: "Profile";
}
.p-teachingstaff-post .-R h2.-message::after {
  content: "Message";
}
.p-teachingstaff-post .-R h3 {
  font-size: clamp(20px, 0.31vw + 18.9px, 24px);
  font-weight: 600;
  position: relative;
  padding: 0.2em 0;
  padding-left: clamp(16px, 0.31vw + 14.9px, 20px);
  margin-bottom: clamp(8px, 0.31vw + 6.9px, 12px);
}
.p-teachingstaff-post .-R h3::before {
  content: "";
  display: block;
  width: clamp(8px, 0.15vw + 7.6px, 10px);
  background: #114C25;
  background: -webkit-gradient(linear, left bottom, left top, from(rgb(17, 76, 37)), to(rgb(113, 168, 108)));
  background: linear-gradient(0deg, rgb(17, 76, 37) 0%, rgb(113, 168, 108) 100%);
  position: absolute;
  left: 0;
  top: 55%;
  -webkit-transform: translate(0%, -50%);
          transform: translate(0%, -50%);
  height: 1em;
}
.p-teachingstaff-post .-R p {
  font-size: clamp(13px, 0.23vw + 12.3px, 16px);
  padding-left: clamp(16px, 0.31vw + 14.9px, 20px);
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 400;
}
.p-teachingstaff-post .-R p + p {
  margin-top: 0.6em;
}
.p-teachingstaff-post .-R .-blog + .-blog {
  margin-top: clamp(30px, 0.76vw + 27.6px, 40px);
}
.p-teachingstaff-post .-R .research-map {
  width: 138px;
  height: auto;
}
.p-teachingstaff-more {
  margin-top: clamp(64px, 1.22vw + 60.1px, 80px);
  padding: 74px 20px;
  background: #B4D3B7;
  background: -webkit-gradient(linear, left bottom, left top, from(rgba(180, 211, 183, 0.3)), to(rgba(241, 241, 241, 0.3)));
  background: linear-gradient(0deg, rgba(180, 211, 183, 0.3) 0%, rgba(241, 241, 241, 0.3) 100%);
}
@media screen and (min-width: 768px) {
  .p-teachingstaff-more {
    padding: clamp(48px, 1.86vw + 33.7px, 64px);
  }
}
.p-teachingstaff-more .-introduction {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  border-radius: 4px;
}
.p-teachingstaff-more .-introduction .-L {
  width: 100%;
  background: #ECF4EC;
  padding: 2em;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  position: relative;
}
@media screen and (min-width: 768px) {
  .p-teachingstaff-more .-introduction .-L {
    width: 20%;
  }
}
.p-teachingstaff-more .-introduction .-L::after {
  content: "";
  display: block;
  width: 1px;
  height: 100%;
  position: absolute;
  right: 0;
  top: 0;
  background: -webkit-gradient(linear, left bottom, left top, from(rgba(17, 76, 37, 0.9)), to(rgba(113, 168, 108, 0.7)));
  background: linear-gradient(0deg, rgba(17, 76, 37, 0.9) 0%, rgba(113, 168, 108, 0.7) 100%);
}
.p-teachingstaff-more .-introduction .-L h2 {
  text-align: center;
  font-size: clamp(20px, 0.15vw + 19.6px, 22px);
}
.p-teachingstaff-more .-introduction .-L h2 span {
  color: #C4D9C3;
  font-size: clamp(10px, 0.15vw + 9.6px, 12px);
  font-family: "Marcellus", serif;
  font-weight: 400;
  background: -webkit-gradient(linear, left top, right top, from(rgb(17, 76, 37)), to(rgb(181, 233, 158)));
  background: linear-gradient(90deg, rgb(17, 76, 37) 0%, rgb(181, 233, 158) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  position: relative;
  padding-bottom: 0.7em;
  display: block;
  margin-bottom: 0.3em;
}
.p-teachingstaff-more .-introduction .-L h2 span::after {
  content: "";
  display: block;
  width: 14px;
  height: 1px;
  background: -webkit-gradient(linear, left bottom, left top, from(rgb(17, 76, 37)), to(rgb(181, 233, 158)));
  background: linear-gradient(0deg, rgb(17, 76, 37) 0%, rgb(181, 233, 158) 100%);
  position: absolute;
  left: 50%;
  bottom: 0;
  -webkit-transform: translate(-50%, 0);
          transform: translate(-50%, 0);
}
.p-teachingstaff-more .-introduction .-R {
  width: 100%;
  background: #fff;
  padding: 2em;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  font-size: clamp(13px, 0.23vw + 12.3px, 16px);
  font-family: "Noto Sans JP", sans-serif;
  color: #145329;
  line-height: 1.7;
  font-weight: 400;
}
@media screen and (min-width: 768px) {
  .p-teachingstaff-more .-introduction .-R {
    width: 80%;
  }
}
.p-teachingstaff-more .-photo {
  margin-top: clamp(48px, 1.22vw + 44.1px, 64px);
}
.p-teachingstaff-more .-photo h2 {
  font-size: clamp(20px, 0.31vw + 18.9px, 24px);
  margin-bottom: clamp(28px, 0.92vw + 25px, 40px);
  font-weight: 500;
  position: relative;
  padding-bottom: clamp(6px, 0.15vw + 5.6px, 8px);
}
.p-teachingstaff-more .-photo h2::after {
  content: "";
  display: block;
  background: #114C25;
  background: -webkit-gradient(linear, left top, right top, from(rgb(17, 76, 37)), color-stop(180%, rgb(181, 233, 158)));
  background: linear-gradient(90deg, rgb(17, 76, 37) 0%, rgb(181, 233, 158) 180%);
  height: clamp(2px, 0.15vw + 1.6px, 4px);
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
}
.p-teachingstaff-more .-photo .-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 16px;
}
.p-teachingstaff-more .-photo .-list .-card {
  width: 100%;
}
@media screen and (min-width: 768px) {
  .p-teachingstaff-more .-photo .-list .-card {
    width: calc((100% - 32px) / 3);
  }
}
.p-teachingstaff-more .-photo .-list .-card figure img {
  width: 100%;
  height: auto;
  aspect-ratio: 1/1;
  -o-object-fit: cover;
     object-fit: cover;
}
.p-teachingstaff-more .-photo .-list .-card .-txt {
  margin-top: 1em;
  font-size: clamp(12px, 0.15vw + 11.6px, 14px);
  font-family: "Noto Sans JP", sans-serif;
  color: #145329;
  line-height: 1.7;
  font-weight: 400;
}
.p-teachingstaff-more .-photo .-list .-card .-txt p {
  line-height: 1.7;
}