#hero {
  width: calc(100% - 20px);
  margin: 94px auto 40px auto;
}
@media screen and (max-width: 1200px) {
  #hero {
    margin: 79px auto 40px auto;
  }
}
@media screen and (max-width: 500px) {
  #hero {
    margin: 46px auto 40px auto;
  }
}
#hero #slider {
  aspect-ratio: 12/5;
}
@media screen and (max-width: 500px) {
  #hero #slider {
    aspect-ratio: 10/12;
  }
}

main {
  width: calc(100% - 20px);
  display: grid;
  gap: 60px;
  margin: 0 auto 160px auto;
}
@media screen and (max-width: 500px) {
  main {
    gap: 40px;
    margin: 0 auto 80px auto;
  }
}

#copy {
  margin: 0 0 -25px 0;
}
#copy #tagline {
  font-family: "ShipporiMincho-Medium";
  font-size: var(--extra);
  color: var(--theme-color);
  text-align: center;
  line-height: 1;
  letter-spacing: 0.1em;
  max-inline-size: -moz-max-content;
  max-inline-size: max-content;
  margin: 0 auto 20px auto;
  transform: translate(13px, 0);
}
@media screen and (max-width: 500px) {
  #copy #tagline {
    font-size: 1.8em;
  }
}
#copy #tagline span {
  display: inline-block;
}
#copy #tagline span:nth-child(2) {
  transform: translate(-4px, 0);
}
#copy #tagline span:nth-child(3) {
  transform: translate(-6px, 0);
}
#copy #tagline span:nth-child(4) {
  transform: translate(-10px, 0);
}
#copy #tagline span:nth-child(5) {
  transform: translate(-12px, 0);
}
#copy #tagline span:nth-child(6) {
  transform: translate(-14px, 0);
}
#copy #tagline span:nth-child(7) {
  transform: translate(-16px, 0);
}
#copy #tagline span:nth-child(8) {
  transform: translate(-14px, 0);
}
#copy #tagline span:nth-child(9) {
  transform: translate(-16px, 0);
}
#copy #tagline span:nth-child(10) {
  transform: translate(-17px, 0);
}
#copy #tagline span:nth-child(11) {
  transform: translate(-18px, 0);
}
#copy #tagline span:nth-child(12) {
  transform: translate(-20px, 0);
}
#copy #tagline span:nth-child(13) {
  transform: translate(-22px, 0);
}
#copy #tagline span:nth-child(14) {
  transform: translate(-22px, 0);
}
#copy #tagline_2 {
  font-family: "ShipporiMincho-Medium";
  font-size: var(--extra);
  color: var(--theme-color);
  text-align: center;
  line-height: 1;
  letter-spacing: 0.07em;
  max-inline-size: -moz-max-content;
  max-inline-size: max-content;
  margin: 0 auto 20px auto;
  transform: translate(17px, 0);
}
@media screen and (max-width: 500px) {
  #copy #tagline_2 {
    font-size: 1.8em;
  }
}
#copy #tagline_2 span {
  display: inline-block;
}
#copy #tagline_2 span:nth-child(2) {
  transform: translate(-2px, 0);
}
#copy #tagline_2 span:nth-child(3) {
  transform: translate(-5px, 0);
}
#copy #tagline_2 span:nth-child(4) {
  transform: translate(-7px, 0);
}
#copy #tagline_2 span:nth-child(5) {
  transform: translate(-12px, 0);
}
#copy #tagline_2 span:nth-child(6) {
  transform: translate(-11px, 0);
}
#copy #tagline_2 span:nth-child(7) {
  transform: translate(-13px, 0);
}
#copy #tagline_2 span:nth-child(8) {
  transform: translate(-16px, 0);
}
#copy #tagline_2 span:nth-child(9) {
  transform: translate(-10px, 0);
}
#copy #tagline_2 span:nth-child(10) {
  transform: translate(-12px, 0);
}
#copy #tagline_2 span:nth-child(11) {
  transform: translate(-18px, 0);
}
#copy #tagline_2 span:nth-child(12) {
  transform: translate(-20px, 0);
}
#copy #tagline_2 span:nth-child(13) {
  transform: translate(-24px, 0);
}
#copy #tagline_2 span:nth-child(14) {
  transform: translate(-24px, 0);
}
#copy #tagline_2 span:nth-child(15) {
  transform: translate(-26px, 0);
}
#copy #tagline_2 span:nth-child(16) {
  transform: translate(-28px, 0);
}
#copy p {
  font-size: var(--medium);
  text-align: center;
  letter-spacing: 0.15em;
}
@media screen and (max-width: 500px) {
  #copy p {
    font-size: var(--regular);
    text-align: justify;
  }
}
@media screen and (max-width: 500px) {
  #copy p br {
    display: none;
  }
}

#department {
  width: min(1100px, 100%);
  margin: auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 5px;
}
@media screen and (max-width: 1200px) {
  #department {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media screen and (max-width: 500px) {
  #department {
    grid-template-columns: repeat(1, 1fr);
    gap: 10px;
  }
}
#department a {
  padding: 10px 20px;
  display: block;
  border: 1px solid #c8c8c8;
  border-radius: 20px;
  transition: var(--transition);
}
@media screen and (max-width: 500px) {
  #department a {
    padding: 10px;
    border-radius: 10px;
  }
}
#department a:hover {
  border: 1px solid var(--sub-color_1);
  background-color: var(--sub-color_1);
}
@media screen and (max-width: 500px) {
  #department a:hover {
    border: 1px solid #c8c8c8;
    background-color: var(--off-color);
  }
}
@media screen and (max-width: 1200px) {
  #department a figure {
    display: flex;
    gap: 10px;
  }
}
#department a figure div {
  width: 124px;
  margin: 0 auto 10px auto;
}
@media screen and (max-width: 1200px) {
  #department a figure div {
    width: 20%;
    margin: 0;
  }
}
#department a figure div img {
  border: 2px solid var(--off-color);
  border-radius: 50%;
}
@media screen and (max-width: 1200px) {
  #department a figure figcaption {
    width: 80%;
  }
}
#department a figure figcaption h2 {
  font-size: var(--medium);
  color: var(--theme-color);
  text-align: center;
  line-height: 1;
  margin: 0 0 5px 0;
}
@media screen and (max-width: 1200px) {
  #department a figure figcaption h2 {
    text-align: left;
  }
}
@media screen and (max-width: 500px) {
  #department a figure figcaption h2 {
    margin: 0 0 5px 0;
  }
}
#department a figure figcaption article {
  letter-spacing: 0.1em;
  line-height: 1.5;
}
@media screen and (max-width: 1200px) {
  #department a figure figcaption article {
    margin: 0 0 15px 0;
    letter-spacing: 0.15em;
    line-height: 1.7;
  }
}
@media screen and (max-width: 500px) {
  #department a figure figcaption article {
    margin: 0 0 5px 0;
  }
}
@media screen and (max-width: 500px) {
  #department a figure figcaption article {
    letter-spacing: 0;
  }
}
#department a figure figcaption p {
  display: none;
}
@media screen and (max-width: 1200px) {
  #department a figure figcaption p {
    display: grid;
    justify-content: end;
  }
  #department a figure figcaption p span {
    padding: 7px 10px 7px 25px;
    border-radius: 5px;
    font-family: "BIZUDPGothic-Bold";
    font-size: var(--small);
    color: var(--off-color);
    line-height: 1;
    background-color: var(--theme-color);
    background-image: url(../images/common/icon_arrow_1.png);
    background-size: 10px 4px;
    background-position: left 10px center;
    background-repeat: no-repeat;
    transition: var(--transition);
  }
}

#timetable {
  padding: 20px 10px;
  background-color: var(--sub-color_3);
}
@media screen and (max-width: 500px) {
  #timetable {
    padding: 0;
    background-color: var(--off-color);
  }
}
#timetable div {
  width: min(900px, 100%);
  margin: 0 auto;
}
#timetable div table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid #969696;
  text-align: center;
  line-height: 1;
}
@media screen and (max-width: 500px) {
  #timetable div table {
    font-size: var(--small);
  }
}
#timetable div table th {
  width: 10%;
  padding: 10px 0;
  font-weight: normal;
  border: 1px solid #969696;
  background-color: var(--sub-color_2);
}
@media screen and (max-width: 500px) {
  #timetable div table th {
    font-size: var(--small);
  }
}
#timetable div table td {
  width: 10%;
  padding: 10px 0;
  border: 1px solid #969696;
  background-color: var(--off-color);
}
#timetable div table .time {
  width: 30%;
  padding: 10px 20px;
  text-align: left;
}
@media screen and (max-width: 500px) {
  #timetable div table .time {
    width: 30%;
    padding: 10px 5px;
    font-size: var(--small);
  }
}

#location {
  width: min(1100px, 100%);
  margin: auto;
}
#location #detail {
  display: flex;
  gap: 20px;
}
@media screen and (max-width: 500px) {
  #location #detail {
    flex-direction: column;
    gap: 10px;
  }
}
#location #detail figure {
  width: min(450px, 100%);
  text-align: right;
}
#location #detail figure img {
  margin: 0 0 5px 0;
  border-radius: 20px;
}
@media screen and (max-width: 500px) {
  #location #detail figure img {
    border-radius: 10px;
  }
}
#location #detail figure figcaption {
  line-height: 1;
}
#location #detail div {
  width: min(630px, 100%);
  display: flex;
  flex-direction: column;
  gap: 20px;
}
@media screen and (max-width: 500px) {
  #location #detail div {
    gap: 10px;
  }
}
#location #detail div dl {
  display: flex;
}
@media screen and (max-width: 1200px) {
  #location #detail div dl {
    flex-direction: column;
  }
}
#location #detail div dl dt {
  width: 20%;
}
@media screen and (max-width: 1200px) {
  #location #detail div dl dt {
    width: 100%;
  }
}
#location #detail div dl dd {
  width: 80%;
  text-align: left;
}
@media screen and (max-width: 1200px) {
  #location #detail div dl dd {
    width: 100%;
    padding: 0 0 0 10px;
  }
}
#location #detail div dl dd small {
  font-size: var(--small);
  padding: 0 0 0 5px;
}
#location #detail div dl dd span {
  display: block;
  padding: 20px 0 0 0;
  line-height: 1.5;
}
@media screen and (max-width: 500px) {
  #location #detail div dl dd span {
    padding: 10px 0 0 0;
  }
}
@media screen and (max-width: 500px) {
  #location #detail div dl dd a {
    text-decoration: underline;
  }
}

#group {
  width: min(1100px, 100%);
  margin: auto;
}
#group h2 {
  font-size: var(--medium);
  line-height: 1;
  margin: 0 0 10px 0;
}
#group ul {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 5px;
}
@media screen and (max-width: 500px) {
  #group ul {
    grid-template-columns: repeat(3, 1fr);
  }
}
#group ul li {
  display: inherit;
}
#group ul li a {
  padding: 5px 10px;
  display: inline-block;
  border: 1px solid #969696;
  transition: 0.3s;
}
@media screen and (max-width: 500px) {
  #group ul li a {
    padding: 5px;
  }
}
#group ul li a:hover {
  transition: var(--transition);
  opacity: var(--opacity);
}

#news {
  width: min(1100px, 100%);
  margin: auto;
}
#news h2 {
  font-size: var(--medium);
  line-height: 1;
  margin: 0 auto 10px auto;
}
#news article {
  padding: 40px 60px;
  margin: auto;
  display: grid;
  gap: 25px;
  border-radius: 20px;
  background-color: var(--sub-color_3);
}
@media screen and (max-width: 500px) {
  #news article {
    padding: 20px 10px;
    border-radius: 10px;
  }
}
#news article dl {
  padding: 0 0 20px 0;
  display: flex;
  border-bottom: 2px dotted #c8c8c8;
}
@media screen and (max-width: 1200px) {
  #news article dl {
    flex-direction: column;
  }
}
#news article dl dt {
  width: 12%;
  font-family: "BIZUDPGothic-Bold";
  font-size: var(--small);
}
@media screen and (max-width: 500px) {
  #news article dl dt {
    width: 100%;
    margin: 0 0 5px 0;
  }
}
#news article dl dd {
  width: 88%;
  line-height: 1.5;
  letter-spacing: 0.1em;
}
@media screen and (max-width: 500px) {
  #news article dl dd {
    width: 100%;
  }
}
#news article dl:last-child {
  padding: 0;
  border: none;
}/*# sourceMappingURL=top.css.map */