@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Zen+Old+Mincho&display=swap");
body {
  margin: 0;
  line-height: 0;
}
body > svg {
  display: none;
}
body > header {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}
body > header > div {
  width: 100%;
}
body > header > div:nth-of-type(1) {
  order: 2;
  height: 29.3333333333vw;
  position: relative;
}
body > header > div:nth-of-type(1) > h1 {
  width: 29.6vw;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: 0;
  transform: translate(-50%, -50%);
}
body > header > div:nth-of-type(1) > h1 > svg {
  width: 29.6vw;
  height: 22.5333333333vw;
  fill: rgb(0, 77, 160);
}
body > header > div:nth-of-type(1) > ul {
  display: none;
}
body > header > div:nth-of-type(2) {
  order: 1;
  height: 106.6666666667vw;
  position: relative;
}
body > header > div:nth-of-type(2) > ul {
  width: 92vw;
  height: 106.6666666667vw;
  position: absolute;
  top: 0;
  right: 0;
  margin: 0;
  padding: 0;
}
body > header > div:nth-of-type(2) > ul li {
  width: 92vw;
  height: 106.6666666667vw;
  overflow: hidden;
  position: relative;
  background: rgb(255, 255, 255);
  border-radius: 0 0 0 16vw;
}
body > header > div:nth-of-type(2) > ul li > picture {
  width: 100%;
}
body > header > div:nth-of-type(2) > ul li > picture img {
  width: 100%;
  height: auto;
}
body > header > div:nth-of-type(2) > ul li > h2 {
  position: absolute;
  top: 5.0666666667vw;
  left: 7.8666666667vw;
  margin: 0;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 700;
  font-size: 5.3333333333vw;
  line-height: 1.5;
  letter-spacing: 0.2em;
  color: rgb(255, 255, 255);
}
body > header > div:nth-of-type(2) > ul li > p {
  position: absolute;
  top: 24.8vw;
  left: 6.6666666667vw;
  margin: 0;
  font-family: "Zen Old Mincho", serif;
  font-weight: 400;
  font-size: 5.3333333333vw;
  line-height: 1.5;
  color: rgb(255, 255, 255);
}
body > header > div:nth-of-type(2) > ul li > p span {
  letter-spacing: 0.2em;
}
body > main {
  width: 100%;
}
body > main #about {
  width: 100%;
  margin: -1px 0 0;
  padding: 24.9333333333vw 0 19.3333333333vw;
  background: url(../image/index/about_02_sp.svg) center top -1px/100% no-repeat, rgb(19, 19, 37) url(../image/index/about_01_sp.jpg) center top/100% no-repeat;
}
body > main #about > h2 {
  width: 100%;
  margin: 16.8vw 0 0;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 700;
  font-size: 7.2vw;
  line-height: 1.4814814815;
  letter-spacing: 0.2em;
  text-align: center;
  color: rgb(255, 255, 255);
}
body > main #about > h2:nth-of-type(1) {
  margin: 8.5333333333vw 0 0;
}
body > main #about > p {
  width: 84vw;
  margin: 6.9333333333vw auto 0;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 500;
  font-size: 3.7333333333vw;
  line-height: 1.9285714286;
  letter-spacing: 0.1em;
  color: rgb(255, 255, 255);
}
body > main #about > p:nth-of-type(1) br:nth-of-type(1) {
  display: none;
}
body > main #about > p:nth-of-type(3) {
  width: 75.4666666667vw;
  margin: 0 auto;
}
body > main #about > p:nth-of-type(4) br:nth-of-type(1) {
  display: none;
}
body > main #about > p:nth-of-type(4) br:nth-of-type(2) {
  display: none;
}
body > main #about > p:nth-of-type(5) br:nth-of-type(1) {
  display: none;
}
body > main #about > p:nth-of-type(6) br:nth-of-type(1) {
  display: none;
}
body > main #about > p:nth-of-type(7) {
  width: 75.4666666667vw;
  margin: 0 auto;
}
body > main #about > p:nth-of-type(8) br:nth-of-type(1) {
  display: none;
}
body > main #about > p:nth-of-type(8) br:nth-of-type(2) {
  display: none;
}
body > main #about > p:nth-of-type(8) br:nth-of-type(3) {
  display: none;
}
body > main #about > p:nth-of-type(9) {
  width: 86.6666666667vw;
  margin: 9.6vw auto 0;
  text-align: center;
}
body > main #about > p:nth-of-type(9) br:nth-of-type(1) {
  display: none;
}
body > main #about > div {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 2.6666666667vw 0;
  width: 100%;
  margin: 9.6vw 0 0;
}
body > main #about > div > a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 73.3333333333vw;
  height: 10.6666666667vw;
  border-radius: 5.3333333333vw;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 700;
  font-size: 3.7333333333vw;
  line-height: 1;
  letter-spacing: 0.2em;
  text-decoration: none;
  color: rgb(23, 78, 158);
  background: rgb(255, 255, 255);
}
body > main #about > ul {
  list-style: none;
  width: 75.4666666667vw;
  position: relative;
  margin: 0 auto;
  padding: 0;
}
body > main #about > ul > li {
  width: 100%;
  box-sizing: border-box;
  position: relative;
  padding: 0 0 0 4.2666666667vw;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 700;
  font-size: 3.7333333333vw;
  line-height: 1.9285714286;
  letter-spacing: 0.1em;
  color: rgb(255, 255, 255);
}
body > main #about > ul > li::before {
  content: "";
  width: 0.9333333333vw;
  height: 0.9333333333vw;
  border-radius: 50%;
  position: absolute;
  top: 3.0666666667vw;
  left: 1.2vw;
  background: rgb(255, 255, 255);
}
body > main #supervisor {
  width: 100%;
  padding: 16vw 0 18.8vw;
  background: rgb(20, 37, 74);
}
body > main #supervisor > h2 {
  width: 100%;
  margin: 8.5333333333vw 0 0;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 700;
  font-size: 7.2vw;
  line-height: 1.4814814815;
  letter-spacing: 0.1em;
  text-align: center;
  color: rgb(255, 255, 255);
}
body > main #supervisor > p {
  width: 84vw;
  margin: 6.9333333333vw auto 0;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 500;
  font-size: 3.7333333333vw;
  line-height: 1.4285714286;
  letter-spacing: 0.1em;
  color: rgb(255, 255, 255);
}
body > main #supervisor > p br:nth-of-type(2) {
  display: none;
}
body > main #supervisor > ul {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 5.8666666667vw 0;
  list-style: none;
  width: 100%;
  margin: 6.9333333333vw 0 0;
  padding: 0;
}
body > main #supervisor > ul > li {
  width: calc(73.3333333333vw - 2px);
  position: relative;
  margin: 0 0 5.3333333333vw;
  padding: 0 0 9.8666666667vw;
  border: solid 1px rgb(255, 255, 255);
}
body > main #supervisor > ul > li::before {
  content: "";
  display: block;
  width: 48vw;
  height: 48vw;
  border-radius: 50%;
  position: absolute;
  top: 5.2vw;
  left: 50%;
  transform-origin: center;
  transform: translate(-50%, 0);
}
body > main #supervisor > ul > li::after {
  content: "";
  display: block;
  width: 10.6666666667vw;
  height: 10.6666666667vw;
  position: absolute;
  bottom: -5.3333333333vw;
  left: 50%;
  background: url(../image/index/supervisor_02.svg) center/contain no-repeat;
  transform-origin: center;
  transform: translate(-50%, 0);
}
body > main #supervisor > ul > li > h3 {
  width: 100%;
  margin: 58.4vw 0 0;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 700;
  font-size: 7.2vw;
  line-height: 1;
  letter-spacing: 0.1em;
  text-align: center;
  color: rgb(255, 255, 255);
}
body > main #supervisor > ul > li > h3 > ruby rp, body > main #supervisor > ul > li > h3 > ruby rt {
  font-weight: 500;
  font-size: 3.2vw;
  line-height: 1;
}
body > main #supervisor > ul > li > p {
  width: 100%;
  margin: 3.8666666667vw 0 0;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 700;
  font-size: 3.7333333333vw;
  line-height: 1.4285714286;
  letter-spacing: 0.1em;
  text-align: center;
  color: rgb(255, 255, 255);
}
body > main #supervisor > ul > li:nth-of-type(1)::before {
  background: url(../image/index/supervisor_01_1.jpg) center/cover no-repeat;
}
body > main #supervisor > ul > li:nth-of-type(2)::before {
  background: url(../image/index/supervisor_01_2.jpg) center/cover no-repeat;
}
body > main #supervisor > ul > li:nth-of-type(3)::before {
  background: url(../image/index/supervisor_01_3.jpg) center/cover no-repeat;
}
body > main #supervisor > div {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 2.6666666667vw 0;
  width: 100%;
  margin: 16.2666666667vw 0 0;
}
body > main #supervisor > div > a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 73.3333333333vw;
  height: 10.6666666667vw;
  border-radius: 5.3333333333vw;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 700;
  font-size: 3.7333333333vw;
  line-height: 1;
  letter-spacing: 0.2em;
  text-decoration: none;
  color: rgb(23, 78, 158);
  background: rgb(255, 255, 255);
}
body > footer {
  width: 100%;
  padding: 3.4666666667vw 0 6vw;
  background: rgb(228, 228, 228);
}
body > footer > h2 {
  width: 20.2666666667vw;
  margin: 0 auto;
}
body > footer > h2 > svg {
  width: 20.2666666667vw;
  height: 15.4666666667vw;
  fill: rgb(0, 0, 0);
}
body > footer > p {
  width: 100%;
  margin: 2.5333333333vw 0 0;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 500;
  font-size: 2.6666666667vw;
  line-height: 1;
  text-align: center;
  color: rgb(0, 0, 0);
}
body > footer > div {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0 2.6666666667vw;
  width: 100%;
  margin: 6.4vw 0 0;
}
body > footer > div > a {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 500;
  font-size: 3.2vw;
  line-height: 1;
  text-decoration: none;
  color: rgb(23, 78, 158);
}
body > footer > small {
  display: block;
  width: 100%;
  margin: 6.4vw 0 0;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 500;
  font-size: 2.1333333333vw;
  line-height: 1;
  text-align: center;
  color: rgb(0, 0, 0);
}
body #pulldownmenu {
  display: flex;
  justify-content: center;
  width: 13.6vw;
  height: 13.6vw;
  position: fixed;
  top: 0;
  right: 1.2vw;
  z-index: 1;
}
body #pulldownmenu > img {
  width: 8.5333333333vw;
  height: auto;
}
body #popup {
  display: none;
  width: 100%;
  height: 100dvh;
  overflow-x: auto;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2;
  opacity: 0;
  transition: opacity 0.3s;
}
body #popup > aside {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.5);
}
body #popup > nav {
  display: none;
  width: calc(70.6666666667vw - 2px);
  position: relative;
  margin: 8vw auto 0;
  background: rgba(20, 37, 74, 0.5);
  border: solid 1px rgb(255, 255, 255);
  transform: translate(0, calc(-100% - 8vw));
  transition: transform 0.5s 0.3s;
}
body #popup > nav > ul {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12.2666666667vw 0;
  list-style: none;
  width: 100%;
  margin: 26.4vw 0 0;
  padding: 0 0 26.5333333333vw;
}
body #popup > nav > ul > li {
  width: 100%;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 700;
  font-size: 3.7333333333vw;
  line-height: 1;
  letter-spacing: 0.2em;
  text-align: center;
}
body #popup > nav > ul > li a {
  text-decoration: none;
  color: rgb(255, 255, 255);
}
body #popup > nav > nav {
  width: 10.6666666667vw;
  position: absolute;
  top: 0;
  right: 0;
  transform-origin: center;
  transform: translate(25%, -25%);
}
body #popup > nav > nav img {
  width: 100%;
  height: auto;
}
body #popup > nav.active {
  display: block;
  transform: translate(0, 0);
}
@starting-style {
  body #popup > nav.active {
    transform: translate(0, calc(-100% - 8vw));
  }
}
body #popup > div {
  display: none;
  width: calc(84vw - 2px);
  position: relative;
  margin: 8vw auto 0;
  padding: 0 0 10.2666666667vw;
  background: rgb(20, 37, 74);
  border: solid 1px rgb(255, 255, 255);
}
body #popup > div:nth-of-type(1)::before, body #popup > div:nth-of-type(2)::before, body #popup > div:nth-of-type(3)::before {
  content: "";
  display: block;
  width: 48vw;
  height: 48vw;
  border-radius: 50%;
  margin: 10.5333333333vw auto 0;
}
body #popup > div:nth-of-type(1) > h3, body #popup > div:nth-of-type(2) > h3, body #popup > div:nth-of-type(3) > h3 {
  width: 100%;
  margin: 5.3333333333vw 0 0;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 700;
  font-size: 7.2vw;
  line-height: 1;
  letter-spacing: 0.1em;
  text-align: center;
  color: rgb(255, 255, 255);
}
body #popup > div:nth-of-type(1) > h3 > ruby rp, body #popup > div:nth-of-type(1) > h3 > ruby rt, body #popup > div:nth-of-type(2) > h3 > ruby rp, body #popup > div:nth-of-type(2) > h3 > ruby rt, body #popup > div:nth-of-type(3) > h3 > ruby rp, body #popup > div:nth-of-type(3) > h3 > ruby rt {
  font-weight: 500;
  font-size: 3.2vw;
  line-height: 1;
}
body #popup > div:nth-of-type(1) > h4, body #popup > div:nth-of-type(2) > h4, body #popup > div:nth-of-type(3) > h4 {
  width: 74.6666666667vw;
  margin: 9.3333333333vw 0 0 8vw;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 500;
  font-size: 3.2vw;
  line-height: 1.3333333333;
  letter-spacing: 0.1em;
  color: rgb(255, 255, 255);
}
body #popup > div:nth-of-type(1) > p, body #popup > div:nth-of-type(2) > p, body #popup > div:nth-of-type(3) > p {
  width: 68vw;
  margin: 3.8666666667vw auto 0;
  font-family: "Noto Sans JP", sans-serif;
  letter-spacing: 0.1em;
  text-align: center;
  color: rgb(255, 255, 255);
}
body #popup > div:nth-of-type(1) > p:nth-of-type(1), body #popup > div:nth-of-type(2) > p:nth-of-type(1), body #popup > div:nth-of-type(3) > p:nth-of-type(1) {
  font-weight: 700;
  font-size: 3.7333333333vw;
  line-height: 1.4285714286;
}
body #popup > div:nth-of-type(1) > p:nth-of-type(2), body #popup > div:nth-of-type(2) > p:nth-of-type(2), body #popup > div:nth-of-type(3) > p:nth-of-type(2) {
  font-weight: 500;
  font-size: 3.2vw;
  line-height: 1.3333333333;
}
body #popup > div:nth-of-type(1) > ol, body #popup > div:nth-of-type(2) > ol, body #popup > div:nth-of-type(3) > ol {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  list-style: none;
  width: 68vw;
  margin: 0 auto;
  padding: 0;
}
body #popup > div:nth-of-type(1) > ol > li, body #popup > div:nth-of-type(2) > ol > li, body #popup > div:nth-of-type(3) > ol > li {
  width: 100%;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 500;
  font-size: 3.2vw;
  line-height: 1.3333333333;
  letter-spacing: 0.1em;
  color: rgb(255, 255, 255);
}
body #popup > div:nth-of-type(1).active, body #popup > div:nth-of-type(2).active, body #popup > div:nth-of-type(3).active {
  display: block;
}
body #popup > div:nth-of-type(1)::before {
  background: url(../image/index/supervisor_01_1.jpg) center/cover no-repeat;
}
body #popup > div:nth-of-type(2)::before {
  background: url(../image/index/supervisor_01_2.jpg) center/cover no-repeat;
}
body #popup > div:nth-of-type(3)::before {
  background: url(../image/index/supervisor_01_3.jpg) center/cover no-repeat;
}
body #popup > div > nav {
  width: 10.6666666667vw;
  position: absolute;
  top: 0;
  right: 0;
  transform-origin: center;
  transform: translate(25%, -25%);
}
body #popup > div > nav img {
  width: 100%;
  height: auto;
}
body #popup.active {
  display: block;
  opacity: 1;
}
@starting-style {
  body #popup.active {
    opacity: 0;
  }
}
@media (min-width: 768px), print {
  body > header {
    padding: 0 0 5.7291666667vw;
  }
  body > header > div:nth-of-type(1) {
    order: 1;
    flex: 1;
    width: auto;
    height: 46.875vw;
    height: 41.6666666667vw;
    background: rgb(255, 255, 255);
    transition: background 0.3s;
  }
  body > header > div:nth-of-type(1) > h1 {
    width: 13.28125vw;
    top: 4.1666666667vw;
    left: 50%;
    transform: translate(-50%, 0);
  }
  body > header > div:nth-of-type(1) > h1 > svg {
    width: 13.28125vw;
    height: 8.9583333333vw;
    transition: fill 0.3s;
  }
  body > header > div:nth-of-type(1) > ul {
    display: flex;
    flex-wrap: wrap;
    gap: 2.1875vw 0;
    list-style: none;
    position: absolute;
    bottom: 9.6354166667vw;
    left: 3.59375vw;
    margin: 0;
    padding: 0;
  }
  body > header > div:nth-of-type(1) > ul > li {
    width: 100%;
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 700;
    font-size: 0.9375vw;
    line-height: 1;
    letter-spacing: 0.2em;
  }
  body > header > div:nth-of-type(1) > ul > li a {
    text-decoration: none;
    color: rgb(23, 78, 158);
    border-bottom: solid 1px transparent;
    transition: border-bottom 0.3s;
    transition: color 0.3s;
  }
  body > header > div:nth-of-type(1) > ul > li a:hover {
    border-bottom: solid 1px rgb(23, 78, 158);
  }
  body > header > div:nth-of-type(1).active {
    background: rgb(23, 78, 158);
  }
  body > header > div:nth-of-type(1).active > h1 > svg {
    fill: rgb(255, 255, 255);
  }
  body > header > div:nth-of-type(1).active > ul > li a {
    color: rgb(255, 255, 255);
  }
  body > header > div:nth-of-type(1).active > ul > li a:hover {
    border-bottom: solid 1px rgb(255, 255, 255);
  }
  body > header > div:nth-of-type(2) {
    order: 2;
    width: 81.25vw;
    height: 41.6666666667vw;
    position: relative;
  }
  body > header > div:nth-of-type(2) > ul {
    width: 81.25vw;
    height: 41.6666666667vw;
  }
  body > header > div:nth-of-type(2) > ul li {
    width: 81.25vw;
    height: 41.6666666667vw;
    border-radius: 0 0 0 6.25vw;
  }
  body > header > div:nth-of-type(2) > ul li > h2 {
    top: 3.6979166667vw;
    left: 2.3958333333vw;
    font-size: 2.0833333333vw;
  }
  body > header > div:nth-of-type(2) > ul li > h2 br {
    display: none;
  }
  body > header > div:nth-of-type(2) > ul li > p {
    top: 8.2291666667vw;
    left: 51.4583333333vw;
    font-size: 2.0833333333vw;
  }
  body > main {
    width: 100%;
  }
  body > main #about {
    width: 100%;
    padding: 18.2291666667vw 0 5.3125vw;
    background: url(../image/index/about_02_pc.svg) center top -1px/100% no-repeat, rgb(19, 19, 37) url(../image/index/about_01_pc.jpg) center top/100% no-repeat;
  }
  body > main #about > h2 {
    width: 78.125vw;
    margin: 6.875vw auto 0;
    font-size: 3.125vw;
    line-height: 2;
    text-align: left;
  }
  body > main #about > h2 br {
    display: none;
  }
  body > main #about > h2:nth-of-type(1) {
    margin: 0 auto;
  }
  body > main #about > p {
    width: 78.125vw;
    margin: 2.8125vw auto 0;
    font-size: 1.40625vw;
    line-height: 2;
  }
  body > main #about > p:nth-of-type(1) br:nth-of-type(1) {
    display: inline;
  }
  body > main #about > p:nth-of-type(3) {
    display: none;
  }
  body > main #about > p:nth-of-type(4) br:nth-of-type(1) {
    display: inline;
  }
  body > main #about > p:nth-of-type(4) br:nth-of-type(2) {
    display: inline;
  }
  body > main #about > p:nth-of-type(5) br:nth-of-type(1) {
    display: inline;
  }
  body > main #about > p:nth-of-type(6) br:nth-of-type(1) {
    display: inline;
  }
  body > main #about > p:nth-of-type(7) {
    display: none;
  }
  body > main #about > p:nth-of-type(8) br:nth-of-type(1) {
    display: inline;
  }
  body > main #about > p:nth-of-type(8) br:nth-of-type(2) {
    display: inline;
  }
  body > main #about > p:nth-of-type(8) br:nth-of-type(3) {
    display: inline;
  }
  body > main #about > p:nth-of-type(9) {
    width: 78.125vw;
    margin: 5.625vw auto 0;
  }
  body > main #about > p:nth-of-type(9) br:nth-of-type(1) {
    display: inline;
  }
  body > main #about > div {
    width: 78.125vw;
    margin: 5.625vw auto 0;
  }
  body > main #about > div > a {
    width: 25vw;
    height: 3.75vw;
    border-radius: 1.875vw;
    font-size: 1.40625vw;
    border: solid 2px rgb(255, 255, 255);
    transition: color 0.3s, background 0.3s;
  }
  body > main #about > div > a:hover {
    color: rgb(255, 255, 255);
    background: rgb(23, 78, 158);
  }
  body > main #about > ul {
    width: 75.625vw;
  }
  body > main #about > ul > li {
    padding: 0 0 0 1.25vw;
    font-size: 1.40625vw;
    line-height: 2;
  }
  body > main #about > ul > li::before {
    width: 0.390625vw;
    height: 0.390625vw;
    top: 1.171875vw;
    left: 0.234375vw;
  }
  body > main #about > ul > li:nth-of-type(3)::after {
    content: "など…";
    display: inline-block;
    margin: 0 0 0 3.75vw;
  }
  body > main #supervisor {
    padding: 5.078125vw 0 11.015625vw;
  }
  body > main #supervisor > h2 {
    width: 73.4375vw;
    margin: 0 auto;
    font-size: 3.125vw;
    line-height: 2;
    text-align: justify;
  }
  body > main #supervisor > p {
    width: 73.4375vw;
    margin: 1.40625vw auto 0;
    font-size: 1.40625vw;
    line-height: 2;
  }
  body > main #supervisor > p br:nth-of-type(2) {
    display: none;
  }
  body > main #supervisor > ul {
    gap: 0 1.875vw;
    width: 93.75vw;
    margin: 5.703125vw auto 0;
  }
  body > main #supervisor > ul > li {
    width: calc(30vw - 2px);
    margin: 0;
    padding: 0 0 3.515625vw;
    cursor: pointer;
  }
  body > main #supervisor > ul > li::before {
    width: 21.875vw;
    height: 21.875vw;
    top: 3.828125vw;
    transition: transform 0.2s;
  }
  body > main #supervisor > ul > li::after {
    width: 3.125vw;
    height: 3.125vw;
    bottom: -1.5625vw;
    transition: transform 0.2s;
  }
  body > main #supervisor > ul > li > h3 {
    margin: 27.96875vw 0 0;
    font-size: 3.125vw;
  }
  body > main #supervisor > ul > li > h3 > ruby rp, body > main #supervisor > ul > li > h3 > ruby rt {
    font-size: 1.25vw;
  }
  body > main #supervisor > ul > li > p {
    margin: 0.9375vw 0 0;
    font-size: 1.25vw;
    line-height: 1.5;
  }
  body > main #supervisor > ul > li:nth-of-type(1) {
    order: 2;
  }
  body > main #supervisor > ul > li:nth-of-type(2) {
    order: 1;
  }
  body > main #supervisor > ul > li:nth-of-type(3) {
    order: 3;
  }
  body > main #supervisor > ul > li:hover::before {
    transform: translate(-50%, 0) scale(1.1);
  }
  body > main #supervisor > ul > li:hover::after {
    transform: translate(-50%, 0) scale(1.3);
  }
  body > main #supervisor > div {
    gap: 0 6.25vw;
    width: 74.21875vw;
    margin: 8.59375vw auto 0;
  }
  body > main #supervisor > div > a {
    width: 25vw;
    height: 3.75vw;
    border-radius: 1.875vw;
    font-size: 1.40625vw;
    border: solid 2px rgb(255, 255, 255);
    transition: color 0.3s, background 0.3s;
  }
  body > main #supervisor > div > a:hover {
    color: rgb(255, 255, 255);
    background: rgb(23, 78, 158);
  }
  body > footer {
    padding: 3.90625vw 0 1.71875vw;
  }
  body > footer > h2 {
    width: 17.5vw;
  }
  body > footer > h2 > svg {
    width: 17.5vw;
    height: 13.359375vw;
  }
  body > footer > p {
    margin: 1.25vw 0 0;
    font-size: 0.9375vw;
  }
  body > footer > div {
    gap: 0 1.5625vw;
    margin: 2.890625vw 0 0;
  }
  body > footer > div > a {
    font-size: 1.25vw;
    line-height: 1.25;
    border-bottom: solid 1px transparent;
    transition: border-bottom 0.3s;
  }
  body > footer > div > a:hover {
    border-bottom: solid 1px rgb(23, 78, 158);
  }
  body > footer > small {
    margin: 3.046875vw 0 0;
    font-size: 0.9375vw;
  }
  body #pulldownmenu {
    width: 7.96875vw;
    height: 7.96875vw;
    right: 0.703125vw;
    cursor: pointer;
  }
  body #pulldownmenu > img {
    width: 5vw;
  }
  body #popup > aside {
    cursor: pointer;
  }
  body #popup > nav {
    width: calc(41.40625vw - 2px);
    margin: 4.6875vw auto 0;
  }
  body #popup > nav > ul {
    gap: 7.1875vw 0;
    margin: 15.46875vw 0 0;
    padding: 0 0 15.546875vw;
  }
  body #popup > nav > ul > li {
    font-size: 2.1875vw;
  }
  body #popup > nav > ul > li a {
    border-bottom: solid 1px transparent;
  }
  body #popup > nav > ul > li a:hover {
    border-bottom: solid 1px rgb(255, 255, 255);
  }
  body #popup > nav > nav {
    width: 6.25vw;
    cursor: pointer;
  }
  body #popup > nav > nav:hover {
    transform: translate(25%, -25%) scale(1.3);
  }
  body #popup > div {
    width: calc(62.5vw - 2px);
    margin: 11.71875vw auto 0;
    padding: 0 0 5.625vw;
  }
  body #popup > div:nth-of-type(1)::before, body #popup > div:nth-of-type(2)::before, body #popup > div:nth-of-type(3)::before {
    width: 21.875vw;
    height: 21.875vw;
    position: absolute;
    top: 3.828125vw;
    left: 7.734375vw;
    margin: 0;
  }
  body #popup > div:nth-of-type(1) > h3, body #popup > div:nth-of-type(2) > h3, body #popup > div:nth-of-type(3) > h3 {
    width: 18.75vw;
    position: absolute;
    top: 10.15625vw;
    left: 42.1875vw;
    margin: 0;
    font-size: 3.125vw;
    transform: translate(-50%, 0);
  }
  body #popup > div:nth-of-type(1) > h3 > ruby rp, body #popup > div:nth-of-type(1) > h3 > ruby rt, body #popup > div:nth-of-type(2) > h3 > ruby rp, body #popup > div:nth-of-type(2) > h3 > ruby rt, body #popup > div:nth-of-type(3) > h3 > ruby rp, body #popup > div:nth-of-type(3) > h3 > ruby rt {
    font-size: 1.25vw;
  }
  body #popup > div:nth-of-type(1) > h4, body #popup > div:nth-of-type(2) > h4, body #popup > div:nth-of-type(3) > h4 {
    width: 50vw;
    margin: 5.15625vw auto 0;
    font-size: 1.25vw;
    line-height: 1.75;
  }
  body #popup > div:nth-of-type(1) > p:nth-of-type(1), body #popup > div:nth-of-type(2) > p:nth-of-type(1), body #popup > div:nth-of-type(3) > p:nth-of-type(1) {
    width: 18.75vw;
    position: absolute;
    top: 15.859375vw;
    left: 42.1875vw;
    margin: 0;
    font-size: 1.25vw;
    line-height: 1.5;
    transform: translate(-50%, 0);
  }
  body #popup > div:nth-of-type(1) > p:nth-of-type(2), body #popup > div:nth-of-type(2) > p:nth-of-type(2), body #popup > div:nth-of-type(3) > p:nth-of-type(2) {
    width: 50vw;
    margin: 27.5vw auto 0;
    font-size: 1.25vw;
    line-height: 1.75;
  }
  body #popup > div:nth-of-type(1) > ol, body #popup > div:nth-of-type(2) > ol, body #popup > div:nth-of-type(3) > ol {
    width: 50vw;
  }
  body #popup > div:nth-of-type(1) > ol > li, body #popup > div:nth-of-type(2) > ol > li, body #popup > div:nth-of-type(3) > ol > li {
    font-size: 1.25vw;
    line-height: 1.75;
  }
  body #popup > div > nav {
    width: 4.6875vw;
    top: -4.6875vw;
    right: -4.6875vw;
    cursor: pointer;
    transform: translate(0, 0);
  }
  body #popup > div > nav:hover {
    transform: scale(1.3);
  }
}
@media (min-width: 1280px) {
  body > header {
    padding: 0 0 110px;
  }
  body > main #about {
    padding: 350px 0 102px;
  }
  body > main #about > h2 {
    width: 1000px;
    margin: 88px auto 0;
    font-size: 40px;
  }
  body > main #about > p {
    width: 1000px;
    margin: 36px auto 0;
    font-size: 18px;
  }
  body > main #about > p:nth-of-type(9) {
    width: 1000px;
    margin: 72px auto 0;
  }
  body > main #about > div {
    width: 1000px;
    margin: 72px auto 0;
  }
  body > main #about > div > a {
    width: 320px;
    height: 48px;
    border-radius: 24px;
    font-size: 18px;
  }
  body > main #about > ul {
    width: 968px;
  }
  body > main #about > ul > li {
    padding: 0 0 0 16px;
    font-size: 18px;
  }
  body > main #about > ul > li::before {
    width: 5px;
    height: 5px;
    top: 15px;
    left: 3px;
  }
  body > main #about > ul > li:nth-of-type(3)::after {
    margin: 0 0 0 48px;
  }
  body > main #supervisor > h2 {
    width: 940px;
    font-size: 40px;
  }
  body > main #supervisor > p {
    width: 940px;
    margin: 18px auto 0;
    font-size: 18px;
  }
  body > main #supervisor > ul {
    gap: 0 24px;
    width: 1200px;
    margin: 73px auto 0;
  }
  body > main #supervisor > ul > li {
    width: 382px;
    padding: 0 0 45px;
  }
  body > main #supervisor > ul > li::before {
    width: 280px;
    height: 280px;
    top: 49px;
  }
  body > main #supervisor > ul > li::after {
    width: 40px;
    height: 40px;
    bottom: -20px;
  }
  body > main #supervisor > ul > li > h3 {
    margin: 358px 0 0;
    font-size: 40px;
  }
  body > main #supervisor > ul > li > h3 > ruby rp, body > main #supervisor > ul > li > h3 > ruby rt {
    font-size: 16px;
  }
  body > main #supervisor > ul > li > p {
    margin: 12px 0 0;
    font-size: 16px;
  }
  body > main #supervisor > div {
    gap: 0 80px;
    width: 950px;
    margin: 110px auto 0;
  }
  body > main #supervisor > div > a {
    width: 320px;
    height: 48px;
    border-radius: 24px;
    font-size: 18px;
  }
  body > footer {
    padding: 50px 0 22px;
  }
  body > footer > h2 {
    width: 224px;
  }
  body > footer > h2 > svg {
    width: 224px;
    height: 171px;
  }
  body > footer > p {
    margin: 16px 0 0;
    font-size: 12px;
  }
  body > footer > div {
    gap: 0 20px;
    margin: 37px 0 0;
  }
  body > footer > div > a {
    font-size: 16px;
  }
  body > footer > small {
    margin: 39px 0 0;
    font-size: 12px;
  }
  body #pulldownmenu {
    width: 102px;
    height: 102px;
    right: 9px;
  }
  body #pulldownmenu > img {
    width: 64px;
  }
  body #popup > nav {
    width: 528px;
    margin: 60px auto 0;
  }
  body #popup > nav > ul {
    gap: 92px 0;
    margin: 198px 0 0;
    padding: 0 0 199px;
  }
  body #popup > nav > ul > li {
    font-size: 28px;
  }
  body #popup > nav > nav {
    width: 80px;
  }
  body #popup > div {
    width: 798px;
    margin: 150px auto 0;
    padding: 0 0 72px;
  }
  body #popup > div:nth-of-type(1)::before, body #popup > div:nth-of-type(2)::before, body #popup > div:nth-of-type(3)::before {
    width: 280px;
    height: 280px;
    top: 49px;
    left: 99px;
  }
  body #popup > div:nth-of-type(1) > h3, body #popup > div:nth-of-type(2) > h3, body #popup > div:nth-of-type(3) > h3 {
    width: 240px;
    top: 130px;
    left: 540px;
    font-size: 40px;
  }
  body #popup > div:nth-of-type(1) > h3 > ruby rp, body #popup > div:nth-of-type(1) > h3 > ruby rt, body #popup > div:nth-of-type(2) > h3 > ruby rp, body #popup > div:nth-of-type(2) > h3 > ruby rt, body #popup > div:nth-of-type(3) > h3 > ruby rp, body #popup > div:nth-of-type(3) > h3 > ruby rt {
    font-size: 16px;
  }
  body #popup > div:nth-of-type(1) > h4, body #popup > div:nth-of-type(2) > h4, body #popup > div:nth-of-type(3) > h4 {
    width: 640px;
    margin: 66px auto 0;
    font-size: 16px;
  }
  body #popup > div:nth-of-type(1) > p:nth-of-type(1), body #popup > div:nth-of-type(2) > p:nth-of-type(1), body #popup > div:nth-of-type(3) > p:nth-of-type(1) {
    width: 240px;
    top: 203px;
    left: 540px;
    font-size: 16px;
  }
  body #popup > div:nth-of-type(1) > p:nth-of-type(2), body #popup > div:nth-of-type(2) > p:nth-of-type(2), body #popup > div:nth-of-type(3) > p:nth-of-type(2) {
    width: 640px;
    margin: 352px auto 0;
    font-size: 16px;
  }
  body #popup > div:nth-of-type(1) > ol, body #popup > div:nth-of-type(2) > ol, body #popup > div:nth-of-type(3) > ol {
    width: 640px;
  }
  body #popup > div:nth-of-type(1) > ol > li, body #popup > div:nth-of-type(2) > ol > li, body #popup > div:nth-of-type(3) > ol > li {
    font-size: 16px;
  }
  body #popup > div > nav {
    width: 60px;
    top: -60px;
    right: -60px;
  }
}