@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Noto+Serif+JP:wght@200..900&display=swap');
:root {
  --ft_gothic:"Noto Sans JP", sans-serif;
  --ft_min:"Noto Serif JP", serif;
}

.clearfix:after {
  content: " ";
  display: block;
  clear: both;
}
*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
#professor {
  font-size: 18px;
  line-height: 1.6;
  color: #000;
  background-color: #fff;
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  letter-spacing: 0.055rem;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-font-feature-settings: 'palt';
  font-feature-settings: 'palt';
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin-top: 0;
}

#professor img {
  max-width: 100% !important;
  height: auto;
  vertical-align: bottom;
}
#professor .pc {
  display: block;
}
#professor .sp {
  display: none;
}
#professor .sm_font {
  font-size: 75%;
}
@media screen and (max-width: 599px) {
  #professor .pc {
    display: none;
  }
  #professor .sp {
    display: block;
  }
  #professor .sm_font {
  text-align: left;
}
}
#professor .note {
  font-size: 72%;
  max-width: 1260px;
  width: 87.5%;
  text-align: right;
  margin-inline: auto;
  margin-bottom: 12px;
}
@media screen and (max-width: 599px) {
  #professor .note {
    font-size: 10px;
    width: 95%;
  }
}
a:hover {
  opacity: 0.7;
}
/* =====================

  header / footer

=======================*/
#professor header {
  padding: 12px 4vw;
}
@media only screen and (max-width: 599px) {
  #professor header {
    padding: 6px 4vw;
  }
  #professor header .logo {
    width: 47%;
    text-align: center;
    margin-inline: auto;
  }
}
#professor footer {
  padding: 12px 4vw;
  border-top: solid 1px #e6e6e6;
}
  #professor .footer__logo {
    margin-inline: auto;
    text-align: center;
  }
#professor .footer__logo > img {
  display: block;
  width: min(260px ,56%);
  margin-inline: auto;
}
@media only screen and (max-width: 599px) {
  #professor .footer__logo {
    width: 50%;
  }
}
/* =====================

  lead

=======================*/
#professor .lead__wrap {
  display: flex;
  justify-content: center;
  gap: min(5%, 80px);
  margin-top: min(80px, 6%);
}
#professor .lead__wrap--txt {
  margin-top : 62px;
}
@media only screen and (max-width: 599px) {
  #professor .lead {
    margin-inline: auto;
    width: 85%;
  }
  #professor .lead__wrap {
    flex-direction: column-reverse;
  }
  #professor .lead__wrap--logo-mark {
    width: 29%;
    margin-top: 7% ;
}
}
/* =====================

  teacher

=======================*/
#professor .teacher {
  max-width: 1260px;
  width: 87.5%;
  margin-inline: auto;
  margin-top: min(110px, 11%);
  margin-bottom: min(110px, 11%);
}
#professor .teacher__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
#professor .teacher__list--item {
  width: 49.5%;
}
@media only screen and (max-width: 599px) {
  #professor .teacher__list {
    flex-direction: column;
    gap: 2%;
  }
  #professor .teacher__list--item {
    width: 100%;
    margin-bottom: 3%;
  }
}

/* =====================

  main__content

=======================*/
#professor .main__content {
  background-color: #f2f2f2;
}

#professor .bg__img  {
  position: relative;
}
#professor .bg__sub_copy  {
  position: absolute;
  top: 5.5%;
  width: 30%;
  margin-right: 0;
  margin-left: calc(100% - 88%);
}
#professor .professor__bg {
    background-color: #fff;
    width: 88%;
    margin-right: 0;
    margin-left: auto;
    position: relative;
    z-index: 1;
    margin-top: -28%;
}
@media only screen and (max-width: 768px) {
  #professor .professor__bg {
    width: 100%;
    margin-top: 0;
  }
  #professor .bg__sub_copy  { 
    top: 16%;
    width: 60%;
    margin-left: calc(100% - 95%);
  }
}
#professor .professor__mv {
    width: 86%;
    position: relative;
}
@media only screen and (max-width: 768px) {
  #professor .professor__mv {
    width: 95%;
    position: relative;
    margin-right: 0;
    margin-left: auto;
    position: relative;
    top: -60px;
  }
}
#professor .acc_star_mv {
  position: absolute;
  left: -6%;
  bottom: -33px;
  width: 15%;
}
@media only screen and (max-width: 768px) {
  #professor .acc_star_mv {
    right: 4%;
    left: auto;
    width: 31%;
  }
}
#professor .of_hidden {
  overflow: hidden;
}
@media only screen and (max-width: 768px) {
  #professor .of_hidden {
    margin-top: -60px;
  }
}
#professor .professor__inner {
    margin-left: 6.69%;
    margin-right: 14.2%;
    padding-bottom: min(24px, 5%);
}
@media only screen and (max-width: 768px) {
  #professor .professor__inner {
    margin-inline: auto;
    width: 90%;
  }
}
#professor .professor__info {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: min(8%, 62px);
    margin-top: min(4%, 24px);
}
#professor .professor__info--ttl {
    font-size: clamp(1.938rem, 1.509rem + 2.14vw, 3.438rem);
    font-family: var(--ft_min);
    transform: scale(1, 0.85);
    letter-spacing: -4.2px;
    font-weight: 700;
    line-height: 1.1;
}
#professor .professor__info--kw {
  display: flex;
  gap: 6px;
  margin-top: 12px;
}
#professor .professor__info--kw > li {
    background-color: #f2f2f2;
    font-size: clamp(0.813rem, 0.743rem + 0.29vw, 1rem);
    line-height: 1;
    color: rgba(0, 0, 0, .7);
    border-radius: 100vw;
    padding: 5px 8px;
    font-weight: 500;
}
#professor .professor__info--gakubu {
  font-size: clamp(0.813rem, 0.652rem + 0.8vw, 1.375rem);
  font-weight: 600;
  text-align: right;
}
#professor .professor__info--name {
  font-size: clamp(1.5rem, 1.071rem + 2.14vw, 3rem);
  font-family: var(--ft_min);
  text-align: right;
  font-weight: 600;
  transform: scale(1, 0.85);
  line-height: 1;
  letter-spacing: -2px;
}
@media only screen and (max-width: 768px) {
  #professor .professor__info {
    flex-direction: column;
    align-items: flex-start;
  }
  #professor .professor__info--kw { 
    margin-top: 4px;
  }
  #professor .professor__info--gakubu {
    margin-top: 24px;
    margin-left: 4px;
    text-align: left;
  }
  #professor .professor__info--name { 
    text-align: left;
    margin-left: 4px;
    margin-top: 4px;
  }
}
#professor .professor__article {
  margin-bottom: min(18%,120px);
  position: relative;
}
#professor .professor__article h3 {
  font-size: clamp(1.375rem, 1.259rem + 0.48vw, 1.688rem);
  line-height: 1.4;
  margin: min(5%,24px) 0;
  font-weight: 600;
  transform: scale(1, 0.95);
}
#professor  .article__article--box {
  display: grid;
  justify-content: space-between;
  gap: 4%;
  text-align: justify;
  position: relative;
  grid-template-columns: 1fr 1fr;
}
#professor  .article__article--box > p{
  position: relative;
  z-index: 1;
  font-size:clamp(0.938rem, 0.884rem + 0.27vw, 1.125rem);
  line-height: 1.8;
}
@media only screen and (max-width: 768px) { 
  #professor  .article__article--box {
    gap: 0%;
    grid-template-columns: 1fr;
  }
}
#professor .professor__link {
  border-top: solid 3px #ffe900;
  border-bottom: solid 3px #ffe900;
  padding: 32px 4%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 24px;
  margin-top: min(18%,120px);
}
#professor .professor__link p > a {
  text-decoration: underline;
  font-size: clamp(0.875rem, 0.804rem + 0.36vw, 1.125rem);
  transition: all .3s;
}
#professor .professor__link p > a:hover {
    text-decoration: none;
    opacity: 1;
}
#professor .professor__link p > a:after {
  content: "";
  display: inline-block;
  background-image: url(../images/eternal_link.svg);
  width: 14px;
  height: 14px;
  margin-left: 6px;
}
#professor .professor__link--name {
  font-size:clamp(1.063rem, 0.9rem + 0.67vw, 1.5rem);
  font-weight: 600;
  width: 100%;
}
#professor .professor__link--name {
  text-align: center;
  font-size:clamp(1.063rem, 0.9rem + 0.67vw, 1.5rem);
  font-weight: 600;
}


#professor .footer__bnr h5 {
  text-align: center;
  font-size: clamp(1.188rem, 1.071rem + 0.48vw, 1.5rem);
  font-weight: 600;
  transform: scale(1, 0.95);
  padding-top: 40px;
  margin-bottom: 16px;
}
#professor .footer__bnr--list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
#professor .to_top {
  text-align: center;
  margin-top: min(12%,40px);
} 
#professor .to_top > a {
  font-size: clamp(0.875rem, 0.804rem + 0.36vw, 1.125rem);
  border: solid 1px #000;
  transition: all .3s;
  display: inline-block;
  padding: 12px 4%;
  border-radius: 2px;
} 
#professor .to_top > a:hover{
  background-color: #000;
  color: #fff;
  opacity: 1;
}
#professor .footer__bnr--oc {
  border-top: solid 2px #f2f2f2;
  margin-top: min(12%,40px);
    padding-top: min(12%,40px);
}
#professor .footer__bnr--oc-item {
  max-width: 660px;
  margin-inline: auto;
  margin-bottom: min(110px, 11%);
}
@media only screen and (max-width: 768px) {
  #professor .footer__bnr--list {
    grid-template-columns: 1fr;
    gap: 8px;
  }
}
/* 装飾 */
#professor .acc__star {
  position: absolute;
  z-index: 0;
}
#professor .article-01 .acc__star {
  right: 0;
}
#professor .article-02 .acc__star {
  left: 0;
  bottom: -30px;
}
#professor .article-03 .acc__star {
  right: 0;
  top: 20px;
}
#professor .article-04 .acc__star {
  left: 0;
  bottom: -60px;
}
#professor .box {
  content: "";
  position: absolute;
  inset: -70px 0 auto;
  height: 600px;
  background: #f9bc12;
  clip-path: polygon(0 25%, 100% 0, 100% 75%, 0 100%);
  z-index: 0;
  width: 100vw;
  margin: 0 calc(50% - 50vw);
  z-index: -1;
}
@media only screen and (max-width: 768px) { 
  #professor .box {
    height: 240px;
    inset: -50px 0 auto;
  }
}
#professor .article-03 .box {
  transform: scale(-1, 1);
}
/* 在間 敬子 学長 */
#professor .zaima .article-02 .box,
#professor .zaima .article-04 .box {
  background: #ff870a;
}
#professor .zaima .article-03 .box {
  background: #ffbe83;
}

/* 落合 恵美子 教授 */
#professor .ochiai .article-02 .box,
#professor .ochiai .article-04 .box {
  background: #eb6646;
}
#professor .ochiai .article-03 .box {
  background: #fc9581;
}
.professor__article .sm_font {
  text-align: right;
}
@media only screen and (max-width: 599px) { 
.professor__article .sm_font {
  font-size: 60%;
}
}
/* 棟方 渚 教授 */
#professor .munekata .article-02 .box,
#professor .munekata .article-04 .box {
  background: #1f6ab3;
}
#professor .munekata .article-03 .box {
  background: #94caf7;
}
/* 久禮 旦雄 教授 */
#professor .kure .article-02 .box,
#professor .kure .article-04 .box {
  background: #9741ad;
}
#professor .kure .article-03 .box {
  background: #d3aae0;
}

/* 武田 洋幸 教授 */
#professor .takeda .article-03 .box {
  background: #ffdc85;
}

/* ラボレット・エリザベス 教授 */
#professor .elizabeth .article-02 .box,
#professor .elizabeth .article-04 .box {
  background: #d9307c;
}
#professor .elizabeth .article-03 .box {
  background: #ffa4d6;
}

/* ==================================== */
#mv{
    position:relative;
    overflow:hidden;
}
#mv .mv__txt {
    position: absolute;
    width: 61%;
    top: 4%;
    left: 5%;
}
.human{
    position:absolute;
    left:50%;
    bottom:0;
    opacity:0;
    transition:
        transform 1.5s cubic-bezier(.22,1,.36,1),
        opacity .45s;
    will-change:transform,opacity;
}
.human.show{
    opacity:1;
}
.human img{
    width:100%;
    display:block;
}
/* ---------- human01 ---------- */
.human01{
    width:20vw;
    z-index:10;
    transform:
        translate(-50%,0)
        scale(.92);
}
.human01.show{
    transform:
        translate(-50%,0)
        scale(1);
}
@media only screen and (max-width: 599px) {
  .human01{
      width:27vw;
  }
}
/* ---------- human02 ---------- */
.human02{
    width:21vw;
    z-index:9;
    transform:
        translate(-50%,0)
        scale(.92);
}
.human02.show{
    transform:
        translate(calc(-50% - 13vw),0)
        scale(1);
}
@media only screen and (max-width: 599px) {
  .human02{
      width:31vw;
      bottom: 6px;
  }
  .human02.show{
      transform:
          translate(calc(-50% - 15vw),0)
          scale(1);
  }
}
/* ---------- human03 ---------- */
.human03{
    width:23vw;
    z-index:9;

    transform:
        translate(-50%,0)
        scale(.92);
}

.human03.show{
    transform:
        translate(calc(-50% + 13vw),0)
        scale(1);
}
@media only screen and (max-width: 599px) {
  .human03{
      width:32vw;
      bottom:10px;
  }
  .human03.show{
      transform:
          translate(calc(-50% + 18vw),0)
          scale(1);
  }
}
/* ---------- human04 ---------- */
.human04{
    width:21vw;
    z-index:8;

    transform:
        translate(-50%,0)
        scale(.92);
}
.human04.show{
    transform:
        translate(calc(-50% - 27vw),0)
        scale(1);
}
@media only screen and (max-width: 599px) {
  .human04.show{
      transform:
          translate(calc(-50% - 32vw),0)
          scale(1);
  }
}
/* ---------- human05 ---------- */
.human05{
    width:20vw;
    z-index:8;
    transform:
        translate(-50%,0)
        scale(.92);
}

.human05.show{
    transform:
        translate(calc(-50% + 24vw),0)
        scale(1);
}
@media only screen and (max-width: 599px) {
  .human05{
      width: 32vw;
      bottom: -20px;
  }
  .human05.show{
      transform:
          translate(calc(-50% + 29vw),0)
          scale(1);
  }
}
/* ---------- human06 ---------- */
.human06{
    width:20vw;
    z-index:7;

    transform:
        translate(-50%,0)
        scale(.92);
}

.human06.show{
    transform:
        translate(calc(-50% - 36vw),0)
        scale(1);
}
@media only screen and (max-width: 599px) {
  .human06{
      width:23vw;
  }
  .human06.show{
      transform:
          translate(calc(-50% - 42vw),0)
          scale(1);
  }
}
/* ---------- .human07 ---------- */
.human07{
    width:21vw;
    z-index:7;
    transform:
        translate(-50%,0)
        scale(.92);
}
.human07.show{
    transform:
        translate(calc(-50% + 36vw),0)
        scale(1);
}
@media only screen and (max-width: 599px) {
  .human07{
      width:26vw;
  }
  .human07.show{
      transform:
          translate(calc(-50% + 37vw),0)
          scale(1);
  }
}