@charset "UTF-8";
/* CSS Document */

html {
  font-size: 14px;
}

.top_layout {
  display: block;
}

/* header */
header {
  width: 100%;
}

header img.top_logo {
  width: clamp(0px, calc(230px + (100vw - 390px) * 0.2963), 342px);
  margin-inline: auto;
  margin-block: 75px 83px;
}

/* main */
main.bg_uni_green {
  position: relative;
}

#top_content {
  padding-top: 39px;
  padding-bottom: 50px;
  width: 330px;
  margin-inline: auto;
}

#top_content h1 {
  font-size: 18px;
  line-height: 1.72;
  letter-spacing: 0.13em;
  font-weight: 500;
}

#top_content h2 {
  position: absolute;
  right: clamp(24px, calc(34.5px + (100vw - 390px) * 0.03545), 47.9px);

  top: clamp(-179px, calc(-84px + (100vw - 390px) * -0.251322751), -84px);
}

#top_content h2 img {
  width: clamp(20px, calc(21px + (100vw - 340px) * 0.01402), 27px);
}

ul.dep_list {
  display: grid;
  gap: 40px clamp(20px, calc(20px + (100vw - 900px) * 0.148148), 100px);
  grid-template-columns: repeat(auto-fit, minmax(155px, 1fr));
  width: 330px;
  margin-top: 50px;
}

ul.dep_list li.en {
  transition-delay: 0.05s;
}

ul.dep_list li.gl {
  transition-delay: 0.1s;
}

ul.dep_list li.hu {
  transition-delay: 0.15s;
}

ul.dep_list li.so {
  transition-delay: 0.2s;
}

ul.dep_list li.de01 {
  transition-delay: 0.25s;
}

ul.dep_list li.de02 {
  transition-delay: 0.25s;
}

ul.dep_list li img {
  width: 155px;
  height: auto;
  border-radius: 20px;
  margin-inline: auto;
}

ul.dep_list li p.dep_name {
  margin-top: 14px;
  margin-inline: auto;
  text-align: center;
  line-height: 1.58;
  color: #fff;
  font-weight: 500;
}

ul.dep_list li p.dep_name span.major {
  font-size: 11.5px;
  letter-spacing: 0.1em;
  display: block;
}

ul.dep_list li p.dep_name span.department {
  font-size: 14px;
  letter-spacing: 0.09em;
}

/* footer */
#top footer {
  padding-block: 35px 53px;
}

#top footer section.footer_banners {
  width: 330px;
  margin-inline: auto;
}

#top footer section.footer_banners div.flex_box {
  gap: 20px;
  width: 330px;
  margin-inline: auto;
  flex-direction: row;
}

#top footer section.footer_banners div.flex_box a {
  display: block;
}

#top footer section.footer_banners div.flex_box a img {
  width: 155px;
  height: auto;
}

#top a.exam_info {
  margin-top: 28.6px;
  width: 330px;
  height: 80.3px;
  line-height: 1.5;
  text-align: center;
  border-radius: 5px;
  border: 1px solid var(--uni_green);
  margin-bottom: 47.4px;
  flex-direction: column;
}

#top a.exam_info span.info {
  font-size: 16.5px;
  font-weight: 400;
  letter-spacing: 0.1em;
}

#top a.exam_info span.cs {
  font-size: 16px;
  letter-spacing: 0.1em;
}

#top a.exam_info span.cs.plan {
font-size: 12px;
margin-left: .3em;
}

#top section.footer_links,
#top .footer_links ul.links,
#top .footer_links ul.links li {
  width: 330px;
}

#top .footer_links a img.logo {
  margin-bottom: 30px;
}

@media (min-width: 505px) {
  #top_content,
  ul.dep_list {
  width: clamp(505px, calc(505px + (100vw - 900px) * 0.296296), 665px);
  }

  #top_content h1 {
    text-align: center;
  }

  #top_content h1 br {
    display: none;
  }
}
@media (min-width: 900px) {
  .top_layout {
    display: grid;
    grid-template-columns:
      minmax(clamp(330px, calc(330px + (100vw - 900px) * 0.315), 500px), 1fr)
      minmax(clamp(560px, calc(560px + (100vw - 900px) * 0.704), 940px), 1.8fr);

    grid-template-rows: auto auto 1fr;
    min-height: 100svh;
  }

  .top_layout > header {
    grid-column: 1;
    grid-row: 1;
  }

  .top_layout > footer {
    grid-column: 1;
    grid-row: 3;
  }

  .top_layout > main {
    grid-column: 2;
    grid-row: 1 / 4;
    min-height: 100svh;
    padding-inline: 26px;
  }

  /* left = header + footer */
  header img.top_logo {
    width: 260px;
    margin-block: 100px 97px;
  }

  #top footer {
    padding-block: 0px;
  }

  .footer_links {
    gap: 0;
  }

  .footer_links .sns_links {
    order: 1;
  }

  .footer_links > div.campus_info {
    order: 2;
    margin-top: 20px;
  }

  .footer_links .links {
    order: 3;
  }

  #top a.exam_info {
    margin-bottom: 30px;
    height: 73px;
  }

  #top .footer_links ul.sns_links {
    width: 330px;
    height: 50px;
    gap: 28px;
    margin-block: 0px;
    padding-inline: 0px;
  }

  #top .footer_links ul.sns_links li a img {
    width: 22.9px;
  }

  #top .footer_links a img.logo {
    width: 140px;
    margin-bottom: 38px;
  }

  #top .footer_links ul.links {
    flex-direction: row;
    gap: 0px;
    width: auto;
    margin-bottom: 25px;
    flex-wrap: nowrap;
  white-space: nowrap;
  overflow: hidden;
  }

  #top .footer_links ul.links li {
    height: auto;
    display: inline;
    font-size: 9px;
    line-height: 0.9;
    position: static;
    border-radius: 0px;
    border: 0px solid #a4a4a4;
    border-left: 0.5px solid var(--uni_black);
    padding: 0px;
    padding-inline: 0.6em 0.5em;
    padding-bottom: 0.2em;
    width: auto;
    letter-spacing: 0.07em;
  }

  #top .footer_links ul.links li a {
    display: inline;
  }

  #top .footer_links ul.links li.study_sup {
    border-right: 0.5px solid var(--uni_black);
  }

  #top .footer_links ul.links li::after {
    width: 0px;
    height: 0px;
  }

  .recruit_logo {
    width: 330px;
  }

  /* right = main */
  #top_content {
    padding-top: 30px;
  }

  #top_content h1 {
    text-align: right;
    font-size: 11px;
    line-height: 1.72;
    position: absolute;
    top: 27px;
    right: max(42px, calc(42px + (100vw - 900px) * 0.062963));
  }

  #top_content h2 {
    right: max(0px, calc((100vw - 900px) * 0.063426));
    top: 30px;
  }

  #top_content h2 img {
    width: 25.5px;
  }

  ul.dep_list {
    margin-top: 85px;
  }
}

@media (hover: hover) and (pointer: fine) {
  li.dep_card a {
    display: block;
    transition: transform 0.25s cubic-bezier(0.25, 1.5, 0.5, 1);
  }

  li.dep_card a:hover {
    opacity: 1;
    transform: translateY(-8px);
  }

  #top a.exam_info:hover {
    opacity: 1;
  }
}