/*!*************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[0].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[0].use[3]!../assets/scss/styles.scss ***!
  \*************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/*! destyle.css v3.0.2 | MIT License | https://github.com/nicolas-cusan/destyle.css */
/* Reset box-model and set borders */
/* ============================================ */
*,
::before,
::after {
  box-sizing: border-box;
  border-style: solid;
  border-width: 0;
}

/* Document */
/* ============================================ */
/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 * 3. Remove gray overlay on links for iOS.
 */
html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
  -webkit-tap-highlight-color: transparent; /* 3*/
}

/* Sections */
/* ============================================ */
/**
 * Remove the margin in all browsers.
 */
body {
  margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */
main {
  display: block;
}

/* Vertical rhythm */
/* ============================================ */
p,
table,
blockquote,
address,
pre,
iframe,
form,
figure,
dl {
  margin: 0;
}

/* Headings */
/* ============================================ */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
  margin: 0;
}

/* Lists (enumeration) */
/* ============================================ */
ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Lists (definition) */
/* ============================================ */
dt {
  font-weight: bold;
}

dd {
  margin-left: 0;
}

/* Grouping content */
/* ============================================ */
/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr {
  box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  overflow: visible; /* 2 */
  border-top-width: 1px;
  margin: 0;
  clear: both;
  color: inherit;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
pre {
  font-family: monospace, monospace; /* 1 */
  font-size: inherit; /* 2 */
}

address {
  font-style: inherit;
}

/* Text-level semantics */
/* ============================================ */
/**
 * Remove the gray background on active links in IE 10.
 */
a {
  background-color: transparent;
  text-decoration: none;
  color: inherit;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted; /* 2 */
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code,
kbd,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: inherit; /* 2 */
}

/**
 * Add the correct font size in all browsers.
 */
small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Replaced content */
/* ============================================ */
/**
 * Prevent vertical alignment issues.
 */
svg,
img,
embed,
object,
iframe {
  vertical-align: bottom;
}

/* Forms */
/* ============================================ */
/**
 * Reset form fields to make them styleable.
 * 1. Make form elements stylable across systems iOS especially.
 * 2. Inherit text-transform from parent.
 */
button,
input,
optgroup,
select,
textarea {
  -webkit-appearance: none; /* 1 */
  -moz-appearance: none;
       appearance: none;
  vertical-align: middle;
  color: inherit;
  font: inherit;
  background: transparent;
  padding: 0;
  margin: 0;
  border-radius: 0;
  text-align: inherit;
  text-transform: inherit; /* 2 */
}

/**
 * Reset radio and checkbox appearance to preserve their look in iOS.
 */
[type=checkbox] {
  -webkit-appearance: checkbox;
  -moz-appearance: checkbox;
       appearance: checkbox;
}

[type=radio] {
  -webkit-appearance: radio;
  -moz-appearance: radio;
       appearance: radio;
}

/**
 * Correct cursors for clickable elements.
 */
button,
[type=button],
[type=reset],
[type=submit] {
  cursor: pointer;
}

button:disabled,
[type=button]:disabled,
[type=reset]:disabled,
[type=submit]:disabled {
  cursor: default;
}

/**
 * Improve outlines for Firefox and unify style with input elements & buttons.
 */
:-moz-focusring {
  outline: auto;
}

select:disabled {
  opacity: inherit;
}

/**
 * Remove padding
 */
option {
  padding: 0;
}

/**
 * Reset to invisible
 */
fieldset {
  margin: 0;
  padding: 0;
  min-width: 0;
}

legend {
  padding: 0;
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
  vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */
textarea {
  overflow: auto;
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the outline style in Safari.
 */
[type=search] {
  outline-offset: -2px; /* 1 */
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */
[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Fix font inheritance.
 */
::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/**
 * Clickable labels
 */
label[for] {
  cursor: pointer;
}

/* Interactive */
/* ============================================ */
/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */
details {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */
summary {
  display: list-item;
}

/*
 * Remove outline for editable content.
 */
[contenteditable]:focus {
  outline: auto;
}

/* Tables */
/* ============================================ */
/**
1. Correct table border color inheritance in all Chrome and Safari.
*/
table {
  border-color: inherit; /* 1 */
  border-collapse: collapse;
}

caption {
  text-align: left;
}

td,
th {
  vertical-align: top;
  padding: 0;
}

th {
  text-align: left;
  font-weight: bold;
}

:root {
  --color-base: #f6f6f1;
  --color-main: #1d499e;
  --color-font: #555;
  --color-line: #d9d9d9;
  --color-attention: #c60000;
  --font-biz-mincho: "BIZ UDPMincho", "Shippori Mincho", serif;
  --font-shippori-mincho: "Shippori Mincho", "BIZ UDPMincho", serif;
  --font-lora: "Lora", "BIZ UDPMincho", serif;
  --font-noto-sans: "Noto Sans JP", "メイリオ", Meiryo, sans-serif;
  --font-size-base: 1.4rem;
  --font-size-md: 1.8rem;
  --font-size-lg: 2.4rem;
  --font-size-xl: 2.8rem;
  --font-size-2xl: 3.6rem;
  --header-hight: 15rem;
  --content-padding-base: calc(50% - 56.4rem);
  --border-radius: 0.5rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  :root {
    --font-size-base: 1.4rem;
    --font-size-md: 1.6rem;
    --font-size-lg: 2rem;
    --font-size-2xl: 2.4rem;
    --content-padding-base: 2rem;
    --header-hight: 6rem;
  }
}

html {
  font-size: 62.5%;
}
@media (max-width: 768px) {
  html {
    font-size: calc(1000vw / 390);
  }
}
@media (min-width: 769px) and (max-width: 1440px) {
  html {
    font-size: calc(1000vw / 1440);
  }
}
@media (min-width: 1441px) {
  html {
    font-size: 62.5%;
  }
}
html {
  scroll-behavior: smooth;
}

body {
  -webkit-text-size-adjust: 100%;
  background-color: #fff;
  color: var(--color-font);
  text-wrap: pretty;
  font-family: var(--font-biz-mincho);
  font-size: var(--font-size-base);
  font-weight: 400;
  animation: fadeIn 0.6s ease-in-out;
}
body.fixed {
  overflow: hidden;
}
body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
  z-index: 99;
  pointer-events: none;
  animation: fadeOut 1.2s ease forwards;
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
main {
  overflow: hidden;
}

picture {
  display: block;
}

img,
video,
iframe {
  width: 100%;
  height: auto;
}

figure.default {
  border: 1px solid var(--color-line);
}

iframe {
  aspect-ratio: 16/9;
}

table {
  border-collapse: collapse;
}
table th {
  font-weight: 400;
}

a,
button {
  transition: 0.2s ease;
}

mark {
  display: contents;
  color: var(--color-main);
  font-weight: 700;
}

@media screen and (min-width: 0px) {
  :focus-visible {
    outline: 2px solid var(--color-main);
    outline-offset: 4px;
  }
}

:target {
  scroll-margin-top: var(--header-hight);
}

:where(.pc) {
  display: block;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  :where(.pc) {
    display: none;
  }
}

:where(.sp) {
  display: none;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  :where(.sp) {
    display: block;
  }
}

.js-animation {
  transition: opacity 1.5s ease, transform 0.9s ease;
}
.js-animation.up {
  opacity: 0;
  transform: translateY(3rem);
}
.js-animation.left {
  opacity: 0;
  transform: translateX(-3rem);
}
.js-animation.right {
  opacity: 0;
  transform: translateX(3rem);
}
.js-animation.is-active {
  opacity: 1;
  transform: translateY(0);
}

.js-animation-stagger [data-animation-delay] {
  z-index: 2;
  opacity: 0;
  transition: opacity 1.6s ease, transform 1s ease;
}
.js-animation-stagger [data-animation-delay].up {
  transform: translateY(3rem);
}
.js-animation-stagger [data-animation-delay].left {
  transform: translateX(-3rem);
}
.js-animation-stagger [data-animation-delay].right {
  transform: translateX(3rem);
}
.js-animation-stagger [data-animation-delay].is-active {
  opacity: 1;
  transform: translateY(0);
}

.common-link:not(#opencampus .common-link) {
  display: grid;
  grid-template-columns: auto 1rem;
  align-items: center;
  -moz-column-gap: 11rem;
       column-gap: 11rem;
  width: -moz-fit-content;
  width: fit-content;
  max-width: 100%;
  height: 7rem;
  border-radius: calc(infinity * 1px);
  border: 1px solid var(--color-main);
  padding-inline: 4.7rem 3.5rem;
  text-align: initial;
  font-family: var(--font-biz-mincho);
  font-size: 1.6rem;
  letter-spacing: 0.1em;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  .common-link:not(#opencampus .common-link) {
    -moz-column-gap: 1rem;
         column-gap: 1rem;
    width: 100%;
    height: 5.2rem;
    padding-inline: 3.5rem 2.6rem;
    font-size: 1.4rem;
    line-height: 1.4;
  }
}
.common-link:not(#opencampus .common-link)::after {
  content: "";
  aspect-ratio: 1;
  border-radius: 50%;
  transition: 0.3s ease;
}
.common-link:not(#opencampus .common-link).blue {
  background-color: var(--color-main);
  color: #fff;
}
.common-link:not(#opencampus .common-link).blue::after {
  background-color: #fff;
}
.common-link:not(#opencampus .common-link).white {
  background-color: #fff;
  color: var(--color-main);
}
.common-link:not(#opencampus .common-link).white::after {
  background-color: var(--color-main);
}
@media (any-hover: hover) {
  .common-link:not(#opencampus .common-link):hover::after {
    transform: scale(1.5);
  }
  .common-link:not(#opencampus .common-link):hover.blue {
    background-color: #fff;
    color: var(--color-main);
  }
  .common-link:not(#opencampus .common-link):hover.blue::after {
    background-color: var(--color-main);
  }
  .common-link:not(#opencampus .common-link):hover.white {
    background-color: var(--color-main);
    color: #fff;
  }
  .common-link:not(#opencampus .common-link):hover.white::after {
    background-color: #fff;
  }
}

.common-arrow-link {
  display: grid;
  grid-template-columns: auto 4.4rem;
  align-items: center;
  -moz-column-gap: 0.8rem;
       column-gap: 0.8rem;
  width: -moz-fit-content;
  width: fit-content;
  margin-left: auto;
  font-size: 1.6rem;
  letter-spacing: 0.1em;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  .common-arrow-link {
    grid-template-columns: auto 4.2rem;
    margin-top: 2.4rem;
    font-size: 1.4rem;
  }
}
.common-arrow-link .arrow {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--color-main);
  overflow: hidden;
}
.common-arrow-link .arrow img {
  width: 1.4rem;
  position: absolute;
  transition: transform 0.3s ease;
}
.common-arrow-link .arrow img:first-child {
  transform: translateX(0);
}
.common-arrow-link .arrow img:last-child {
  transform: translateX(-300%);
}
@media (any-hover: hover) {
  .common-arrow-link:hover {
    color: var(--color-main);
  }
  .common-arrow-link:hover .arrow img:first-child {
    transform: translateX(300%);
  }
  .common-arrow-link:hover .arrow img:last-child {
    transform: translateX(0);
  }
}

.related-links a {
  padding-left: 1.8rem;
  text-indent: -1.8rem;
}
.related-links a::before {
  content: "";
  display: inline-block;
  width: 1.4rem;
  aspect-ratio: 13.5/9;
  margin-right: 0.8rem;
  background: url(/assets/images/common/icon-arrow03.svg) no-repeat center/contain;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  .related-links a::before {
    margin-right: 0.4rem;
  }
}
.related-links a + a {
  margin-top: 0.8rem;
}

:where(.common-category-list) {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.6rem 4rem;
  font-family: var(--font-biz-mincho);
  font-size: 1.5rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  :where(.common-category-list) {
    grid-template-columns: auto;
  }
}
:where(.common-category-list) dt {
  padding-top: 1rem;
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 1;
}
:where(.common-category-list) dd ul {
  display: flex;
  flex-wrap: wrap;
  gap: 1.8rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  :where(.common-category-list) dd ul {
    gap: 0.8rem 1rem;
  }
}
:where(.common-category-list) dd ul li button {
  display: block;
  width: -moz-fit-content;
  width: fit-content;
  border: 1px solid var(--color-base);
  border-radius: calc(infinity * 1px);
  padding: 1rem 1.5rem;
  background-color: var(--color-base);
  font-size: 1.6rem;
  line-height: 1;
  letter-spacing: -0.04em;
  transition: border-color 0.2s ease;
}
@media (any-hover: hover) {
  :where(.common-category-list) dd ul li button:hover {
    border-color: var(--color-main);
  }
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  :where(.common-category-list) dd ul li button {
    padding-inline: 1.5rem;
    font-size: 1.5rem;
  }
}
:where(.common-category-list) dd ul li button[aria-selected=true] {
  border-color: var(--color-main);
  background-color: var(--color-main);
  color: #fff;
}
:where(.common-category-list) dd + dd {
  margin-left: 2rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  :where(.common-category-list) dd + dd {
    margin-left: initial;
  }
}
:where(.common-category-list) dd.selected {
  background-color: var(--color-main);
  color: #fff;
}

.common-tab [role=tabpanel] {
  display: none;
  opacity: 0;
}
.common-tab [role=tabpanel].is-active {
  display: block;
  animation: fadeInUp 0.5s ease forwards;
}
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(2rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.lower main {
  font-family: var(--font-noto-sans);
  font-size: var(--font-size-base);
  line-height: 1.75;
  letter-spacing: 0.04em;
}
.lower main .breadcrumb {
  padding: 3.2rem 6rem 0;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  .lower main .breadcrumb {
    padding: 1.6rem 2rem 0;
  }
}
.lower main .breadcrumb ol {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem 1.4rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  .lower main .breadcrumb ol {
    gap: 0.4rem 0.8rem;
  }
}
.lower main .breadcrumb ol li {
  font-size: 1.3rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  .lower main .breadcrumb ol li {
    font-size: 1.2rem;
  }
}
.lower main .breadcrumb ol li a {
  color: #aaa;
}
@media (any-hover: hover) {
  .lower main .breadcrumb ol li a:hover {
    text-decoration: underline;
  }
}
.lower main .breadcrumb ol li:not(:first-of-type) {
  display: grid;
  grid-template-columns: 0.4rem auto;
  align-items: center;
  -moz-column-gap: 1.4rem;
       column-gap: 1.4rem;
}
.lower main .breadcrumb ol li:not(:first-of-type)::before {
  content: "";
  aspect-ratio: 4/8;
  background: url(/assets/images/common/icon-arrow04.svg) no-repeat center/contain;
}
.lower main .fv {
  display: grid;
  align-items: center;
  height: 35.5rem;
  background-repeat: no-repeat;
  background-position: top center;
  background-size: cover;
  padding-left: 6rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  .lower main .fv {
    height: 13rem;
    padding-left: 2rem;
  }
}
.lower main .fv .title {
  color: #fff;
  font-family: var(--font-biz-mincho);
  font-size: 3.6rem;
  line-height: 1.6;
  letter-spacing: 0.12em;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  .lower main .fv .title {
    word-break: auto-phrase;
    font-size: 2.4rem;
    line-height: 1.4;
  }
}
.lower main .common-inner {
  padding: 10.9rem calc(50% - 46.7rem) 0;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  .lower main .common-inner {
    padding: 6rem 2rem 0;
  }
}
.lower main .common-intro {
  display: grid;
  grid-template-columns: 1fr 25.2rem;
  gap: 3.2rem 4rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  .lower main .common-intro {
    grid-template-columns: 1fr;
  }
}
.lower main .common-intro h2 {
  margin-bottom: 3.2rem;
  font-family: var(--font-biz-mincho);
  font-size: 3.6rem;
  line-height: 1.6;
  letter-spacing: 0.12em;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  .lower main .common-intro h2 {
    margin-bottom: 2.4rem;
    font-size: 2.4rem;
  }
}
.lower main .common-intro p + p {
  margin-top: 2.2rem;
}
.lower main .common-intro p strong {
  font-weight: 500;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  .lower main .common-intro figure {
    grid-row: 1;
    width: 24rem;
    margin-inline: auto;
  }
}
.lower main .common-intro figure img {
  border-radius: 0.5rem;
}
.lower main .common-page-nav ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2.7rem 2.2rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  .lower main .common-page-nav ul {
    display: grid;
    gap: 2.4rem 1.2rem;
    grid-template-columns: repeat(2, 1fr);
    margin-inline: auto;
  }
}
.lower main .common-page-nav ul li {
  display: flex;
}
.lower main .common-page-nav ul li:not(:last-of-type)::after {
  content: "";
  width: 1px;
  height: 2.7rem;
  background-color: var(--color-line);
  margin-left: 2.2rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  .lower main .common-page-nav ul li:not(:last-of-type)::after {
    display: none;
  }
}
.lower main .common-page-nav ul li a {
  position: relative;
  display: grid;
  grid-template-columns: 2.4rem auto;
  align-items: center;
  -moz-column-gap: 1rem;
       column-gap: 1rem;
  font-size: 1.4rem;
  line-height: 1.2;
}
@media (any-hover: hover) {
  .lower main .common-page-nav ul li a:hover {
    color: var(--color-main);
    text-decoration: underline;
  }
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  .lower main .common-page-nav ul li a {
    grid-template-columns: 2rem auto;
    -moz-column-gap: 0.8rem;
         column-gap: 0.8rem;
    line-height: 1.4;
  }
}
.lower main .common-page-nav ul li a::before {
  content: "";
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--color-main) url(/assets/images/common/icon-arrow02.svg) no-repeat center/1.2rem auto;
  transform: rotate(90deg);
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  .lower main .common-page-nav ul li a::before {
    grid-row: 1/span 2;
  }
}
.lower main .common-page-nav ul li a span {
  display: contents;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  .lower main .common-page-nav ul li a span {
    display: block;
    grid-column: 2;
    font-size: 1.1rem;
  }
}
.lower main .common-heading-h2 {
  margin-bottom: 4rem;
  border-bottom: 2px solid transparent;
  -o-border-image: linear-gradient(to right, var(--color-main) 0 21%, rgba(29, 73, 158, 0.2) 21% 100%) 1;
     border-image: linear-gradient(to right, var(--color-main) 0 21%, rgba(29, 73, 158, 0.2) 21% 100%) 1;
  padding-bottom: 1.6rem;
  color: var(--color-main);
  font-family: var(--font-biz-mincho);
  font-size: 3.6rem;
  line-height: 1.6;
  letter-spacing: 0.12em;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  .lower main .common-heading-h2 {
    margin-bottom: 2.4rem;
    padding-bottom: 1rem;
    font-size: 2.4rem;
    line-height: 1.4;
  }
}
.lower main .common-heading-h3 {
  color: var(--color-main);
  font-size: var(--font-size-md);
  font-weight: 400;
}
.lower main .common-heading-h3-border {
  margin-bottom: 3rem;
  padding-bottom: 1.2rem;
  border-bottom: 2px solid var(--color-main);
  color: var(--color-main);
  font-size: 2.8rem;
  line-height: 1.3;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  .lower main .common-heading-h3-border {
    margin-bottom: 2rem;
    padding-bottom: 0.8rem;
    font-size: 2rem;
  }
}
.lower main .common-list > :where(li, dd) {
  display: grid;
  grid-template-columns: 0.8rem auto;
  align-items: baseline;
  -moz-column-gap: 0.8rem;
       column-gap: 0.8rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  .lower main .common-list > :where(li, dd) {
    grid-template-columns: 0.5rem 1fr;
    -moz-column-gap: 0.5rem;
         column-gap: 0.5rem;
  }
}
.lower main .common-list > :where(li, dd)::before {
  content: "";
  aspect-ratio: 1;
  border-radius: 50%;
  background-color: var(--color-main);
  translate: 0 -0.2rem;
}
.lower main .common-table thead th + th {
  margin-left: -1px;
}
.lower main .common-table tr {
  display: grid;
  grid-template-columns: 24rem 1fr;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  .lower main .common-table tr {
    grid-template-columns: 12rem 1fr;
  }
}
.lower main .common-table tr:not(:first-of-type) {
  margin-top: -1px;
}
.lower main .common-table th,
.lower main .common-table td {
  display: grid;
  align-items: center;
  border: 1px solid var(--color-line);
}
.lower main .common-table th {
  padding: 1.9rem 3rem;
  background-color: #f0f5ff;
  font-family: var(--font-biz-mincho);
  font-size: var(--font-size-md);
  font-weight: 400;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  .lower main .common-table th {
    padding: 1rem 1.6rem;
  }
}
.lower main .common-table td {
  margin-left: -1px;
  padding: 1rem 2rem 1rem 3rem;
  background-color: #fff;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  .lower main .common-table td {
    padding: 1rem 1.6rem;
  }
}
.lower main .common-movie {
  width: min(73.8rem, 100%);
  margin: 7.2rem auto 0;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  .lower main .common-movie {
    margin-top: 6.4rem;
  }
}
.lower main .common-movie h3 {
  position: relative;
  width: -moz-fit-content;
  width: fit-content;
  margin-inline: auto;
  border-bottom: 0.3rem solid var(--color-main);
  text-align: center;
  font-family: var(--font-biz-mincho);
  font-size: 2.2rem;
  line-height: 1.6;
  letter-spacing: 0.12em;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  .lower main .common-movie h3 {
    border-bottom-width: 0.2rem;
    font-size: 1.8rem;
  }
}
.lower main .common-movie h3::before {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  translate: -50% 0;
  width: 1.8rem;
  aspect-ratio: 18/11;
  clip-path: polygon(50% 100%, 0 0, 100% 0);
  background-color: var(--color-main);
}
.lower main .common-movie figure {
  border-radius: 0.5rem;
  overflow: hidden;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  .lower main .common-movie figure {
    border-radius: 0.3rem;
  }
}
.lower main .common-movie figure {
  margin: 3.4rem auto 0;
  width: 100%;
}
.lower main .common-movie figure iframe {
  aspect-ratio: 738/415;
}
.lower main .common-movie .common-link {
  margin: 5.6rem auto 0;
}
.lower main .common-text-link {
  display: inline-block;
  text-decoration: underline;
  color: var(--color-main);
}
@media (any-hover: hover) {
  .lower main .common-text-link:hover {
    text-decoration: initial;
  }
}
.lower main .common-notes p,
.lower main .common-notes li {
  text-indent: -1em;
  padding-left: 1em;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  .lower main .common-notes p,
  .lower main .common-notes li {
    font-size: 1.2rem;
  }
}
.lower main .common-notes p::before,
.lower main .common-notes li::before {
  content: "※";
}
.lower main :where(.common-contact) {
  border-radius: 0.5rem;
  padding: 4.4rem 5.8rem;
  background-color: #f4f4f4;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  .lower main :where(.common-contact) {
    padding: 4rem 3.2rem;
  }
}
.lower main :where(.common-contact) :where(h2, h3) {
  margin-bottom: 2.4rem;
  color: var(--color-main);
  font-size: 2.8rem;
  line-height: 1.3;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  .lower main :where(.common-contact) :where(h2, h3) {
    font-size: 2rem;
  }
}
@media (any-hover: hover) {
  .lower main :where(.common-contact) a:hover {
    text-decoration: underline;
  }
}
.lower main .common-archive-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.4rem 1.6rem;
  margin-top: 3.6rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  .lower main .common-archive-list {
    grid-template-columns: 1fr;
    margin-top: 4rem;
  }
}
@media (any-hover: hover) {
  .lower main .common-archive-list li a:hover figure img {
    transform: scale(1.05);
  }
}
.lower main .common-archive-list li a figure {
  border-radius: 0.5rem;
  overflow: hidden;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  .lower main .common-archive-list li a figure {
    border-radius: 0.3rem;
  }
}
.lower main .common-archive-list li a figure {
  aspect-ratio: 300/200;
  width: 100%;
}
.lower main .common-archive-list li a figure img {
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transition: transform 0.4s ease-out;
}
.lower main .common-archive-list li a h3 {
  margin-block: 1.6rem;
  font-family: var(--font-biz-mincho);
  font-size: var(--font-size-md);
  line-height: 1.3;
}
.lower main .common-archive-list li a .desc {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 1.2rem;
}
.lower main .common-archive-list li .labels {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-top: 0.8rem;
}
.lower main .common-archive-list li .labels span {
  border-radius: calc(infinity * 1px);
  border: 1px solid var(--color-main);
  padding: 0.5rem 1.2rem;
  background-color: #fff;
  font-family: var(--font-biz-mincho);
  color: var(--color-main);
  font-size: 1.3rem;
  line-height: 1;
}
.lower main .common-article {
  --font-size-h2: 2.8rem;
  --font-size-h3: 3rem;
  --font-size-h4: 2.4rem;
  --font-size-h5: 2rem;
  --font-size-h6: 1.8rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  .lower main .common-article {
    --font-size-h2: 2.4rem;
    --font-size-h3: 2.2rem;
    --font-size-h4: 2rem;
    --font-size-h5: 1.8rem;
    --font-size-h6: 1.6rem;
  }
}
.lower main .common-article {
  display: grid;
  row-gap: 3.4rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  .lower main .common-article {
    row-gap: 2.4rem;
  }
}
.lower main .common-article :where(h1, h2, h3, h4, h5, h6) {
  line-height: 1.3;
}
.lower main .common-article h2 {
  padding-bottom: 1.6rem;
  border-bottom: 2px solid var(--color-main);
  color: var(--color-main);
  font-size: var(--font-size-h2);
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  .lower main .common-article h2 {
    padding-bottom: 0.8rem;
  }
}
.lower main .common-article h3 {
  padding: 0.8rem 2rem;
  background-color: #fff;
  font-family: var(--font-biz-mincho);
  font-size: var(--font-size-h3);
  letter-spacing: initial;
}
.lower main .common-article h4 {
  color: var(--color-main);
  font-family: var(--font-biz-mincho);
  font-size: var(--font-size-h4);
}
.lower main .common-article h5 {
  border-bottom: 2px solid transparent;
  -o-border-image: linear-gradient(to right, var(--color-main) 0 15%, rgba(29, 73, 158, 0.2) 15% 100%) 1;
     border-image: linear-gradient(to right, var(--color-main) 0 15%, rgba(29, 73, 158, 0.2) 15% 100%) 1;
  padding-bottom: 0.5rem;
  font-family: var(--font-biz-mincho);
  font-size: var(--font-size-h5);
  letter-spacing: initial;
}
.lower main .common-article h6 {
  font-family: var(--font-biz-mincho);
  font-size: var(--font-size-h6);
}
.lower main .common-article hr {
  border-radius: 2px;
  height: 0.2rem;
  background-color: var(--color-main);
}
.lower main .common-article :where(ul, ol) > li :where(ul, ol) {
  width: 100%;
  padding-left: 2.5rem;
  margin-block: 0.4rem;
}
.lower main .common-article ul li {
  -moz-column-gap: 1.1rem;
       column-gap: 1.1rem;
}
.lower main .common-article ul li + li {
  margin-top: 0.4rem;
}
.lower main .common-article ul li::before {
  content: "ー";
  display: inline-block;
  width: 2.5rem;
  margin-right: 0.4rem;
  text-align: center;
  color: var(--color-main);
}
.lower main .common-article ol {
  counter-reset: item;
}
.lower main .common-article ol li + li {
  margin-top: 0.7rem;
}
.lower main .common-article ol li::before {
  content: counter(item) ".";
  counter-increment: item;
}
.lower main .common-article figure {
  margin-top: 3.4rem;
}
.lower main .common-article .common-table {
  width: 100%;
}
.lower main .common-article .common-table th {
  text-align: center;
  font-family: var(--font-noto-sans);
  background-color: #f4f4f4;
}
.lower main .common-article blockquote {
  padding: 2rem 4rem;
  background-color: #fff;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  .lower main .common-article blockquote {
    padding: 2rem;
  }
}
.lower main .common-article blockquote p {
  margin: initial;
}
.lower main .common-pagination {
  width: -moz-fit-content;
  width: fit-content;
  margin: 6rem auto 0;
}
.lower main .common-pagination ol {
  display: flex;
  align-items: center;
  -moz-column-gap: 0.8rem;
       column-gap: 0.8rem;
}
.lower main .common-pagination ol li a,
.lower main .common-pagination ol li [aria-current=page] {
  display: grid;
  place-content: center;
  width: 4.4rem;
  aspect-ratio: 1;
  border-radius: 0.5rem;
  border: 1px solid var(--color-line);
  background-color: #fff;
}
.lower main .common-pagination ol li a:where(.prev, .next),
.lower main .common-pagination ol li [aria-current=page]:where(.prev, .next) {
  position: relative;
}
.lower main .common-pagination ol li a:where(.prev, .next)::before,
.lower main .common-pagination ol li [aria-current=page]:where(.prev, .next)::before {
  content: "";
  display: grid;
  place-content: center;
  width: 0.6rem;
  aspect-ratio: 6/11;
  -webkit-mask: url(/assets/images/common/icon-arrow04.svg) no-repeat center/contain;
          mask: url(/assets/images/common/icon-arrow04.svg) no-repeat center/contain;
  background-color: var(--color-font);
  transition: background-color 0.2s ease;
}
.lower main .common-pagination ol li a:where(.prev, .next).prev::before,
.lower main .common-pagination ol li [aria-current=page]:where(.prev, .next).prev::before {
  transform: scaleX(-1);
}
@media (any-hover: hover) {
  .lower main .common-pagination ol li a:hover,
  .lower main .common-pagination ol li [aria-current=page]:hover {
    border-color: var(--color-main);
    background-color: var(--color-main);
    color: #fff;
  }
  .lower main .common-pagination ol li a:hover:where(.prev, .next)::before,
  .lower main .common-pagination ol li [aria-current=page]:hover:where(.prev, .next)::before {
    background-color: #fff;
  }
}
.lower main .common-pagination ol li [aria-current=page] {
  border-color: var(--color-main);
  background-color: var(--color-main);
  color: #fff;
}
.lower main a:where(.blank, .pdf, .word) {
  display: block;
  width: -moz-fit-content;
  width: fit-content;
  text-decoration: underline;
  text-underline-offset: 0.4rem;
  color: var(--color-main);
}
@media (any-hover: hover) {
  .lower main a:where(.blank, .pdf, .word):hover {
    text-decoration: initial;
  }
}
.lower main a:where(.blank, .pdf, .word)::after {
  content: "";
  display: inline-block;
  aspect-ratio: 1;
  margin-left: 0.8rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  .lower main a:where(.blank, .pdf, .word)::after {
    margin-left: 0.4rem;
  }
}
.lower main a:where(.blank, .pdf, .word).blank::after {
  width: 1.8rem;
  background: url(/assets/images/common/icon-tab.svg) no-repeat center/contain;
  translate: 0 0.3rem;
}
.lower main a:where(.blank, .pdf, .word).pdf::after {
  width: 2.6rem;
  background: url(/assets/images/common/icon-pdf.svg) no-repeat center/contain;
  vertical-align: middle;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  .lower main a:where(.blank, .pdf, .word).pdf::after {
    width: 2rem;
  }
}
.lower main a:where(.blank, .pdf, .word).word::after {
  width: 2.6rem;
  background: url(/assets/images/common/icon-document.svg) no-repeat center/contain;
  vertical-align: middle;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  .lower main a:where(.blank, .pdf, .word).word::after {
    width: 2.4rem;
  }
}
.lower main a:where(.blank, .pdf, .word).arrow {
  padding-left: 1.8rem;
  text-indent: -1.8rem;
}
.lower main a:where(.blank, .pdf, .word).arrow::before {
  content: "";
  display: inline-block;
  width: 1.4rem;
  aspect-ratio: 13.5/9;
  margin-right: 0.8rem;
  background: url(/assets/images/common/icon-arrow03.svg) no-repeat center/contain;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  .lower main a:where(.blank, .pdf, .word).arrow::before {
    margin-right: 0.4rem;
  }
}
.lower main p strong {
  color: var(--color-main);
  font-weight: 700;
}

.site-header:not(#opencampus .site-header) {
  position: sticky;
  top: 0;
  left: 0;
  z-index: 10;
  width: 100%;
  font-family: var(--font-biz-mincho);
  display: grid;
  grid-template-columns: 1fr 11rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  .site-header:not(#opencampus .site-header) {
    grid-template-columns: 1fr 6rem;
  }
}
.site-header:not(#opencampus .site-header) > .inner {
  display: grid;
  grid-template-columns: 18.6rem 1fr auto;
  background-color: #fff;
  padding-inline: 4rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  .site-header:not(#opencampus .site-header) > .inner {
    grid-template-columns: 12rem 1fr;
    grid-template-rows: 1fr;
    align-items: center;
    height: var(--header-hight);
    padding-inline: 2rem 0.8rem;
  }
}
.site-header:not(#opencampus .site-header) .logo {
  grid-column: 1;
  grid-row: 1;
  align-self: center;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  .site-header:not(#opencampus .site-header) .logo {
    position: relative;
    z-index: 2;
  }
}
.site-header:not(#opencampus .site-header) .menu-top {
  grid-column: 2;
  grid-row: 1;
  display: grid;
  justify-content: flex-end;
  gap: 1rem;
  padding-block: 1.2rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  .site-header:not(#opencampus .site-header) .menu-top {
    height: 100%;
    justify-content: center;
    padding-block: initial;
  }
}
.site-header:not(#opencampus .site-header) .menu-top .menu-list.sub {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 2rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  .site-header:not(#opencampus .site-header) .menu-top .menu-list.sub {
    gap: initial;
    height: 100%;
  }
}
.site-header:not(#opencampus .site-header) .menu-top .menu-list.sub li {
  height: 100%;
}
.site-header:not(#opencampus .site-header) .menu-top .menu-list.sub a {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.site-header:not(#opencampus .site-header) .menu-top .menu-list.sub a:focus {
  color: var(--color-main);
}
@media (hover: hover) and (pointer: fine) {
  .site-header:not(#opencampus .site-header) .menu-top .menu-list.sub a:where(:-moz-any-link, :enabled, summary):hover {
    color: var(--color-main);
  }
  .site-header:not(#opencampus .site-header) .menu-top .menu-list.sub a:where(:any-link, :enabled, summary):hover {
    color: var(--color-main);
  }
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  .site-header:not(#opencampus .site-header) .menu-top .menu-list.sub a {
    width: 6rem;
    height: 100%;
    flex-direction: column;
    justify-content: center;
    font-family: var(--font-noto-sans);
    font-size: 0.9rem;
    font-weight: 700;
  }
}
.site-header:not(#opencampus .site-header) .menu-top .menu-list.sub a::before {
  content: "";
  flex-shrink: 0;
  width: 1.4rem;
  aspect-ratio: 1;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  .site-header:not(#opencampus .site-header) .menu-top .menu-list.sub a::before {
    width: 2.5rem;
  }
}
.site-header:not(#opencampus .site-header) .menu-top .menu-list.sub .search a::before {
  background: url(/assets/images/common/icon-search.svg) no-repeat center/contain;
}
.site-header:not(#opencampus .site-header) .menu-top .menu-list.sub .access a::before {
  background: url(/assets/images/common/icon-map.png) no-repeat center/contain;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  .site-header:not(#opencampus .site-header) .menu-top .menu-list.sub .request a {
    position: fixed;
    bottom: 1.6rem;
    left: 50%;
    translate: -50% 0;
    flex-direction: initial;
    gap: initial;
    width: 24rem;
    height: 5rem;
    background-color: var(--color-main);
    border-radius: calc(infinity * 1px);
    color: #fff;
    font-family: var(--font-biz-mincho);
    font-size: 1.4rem;
    font-weight: 400;
    letter-spacing: 0.1em;
  }
  .site-header:not(#opencampus .site-header) .menu-top .menu-list.sub .request a::after {
    content: "はこちら";
  }
}
.site-header:not(#opencampus .site-header) .menu-top .menu-list.sub .request a::before {
  -webkit-mask: url(/assets/images/common/icon-data.svg) no-repeat center/contain;
          mask: url(/assets/images/common/icon-data.svg) no-repeat center/contain;
  background-color: var(--color-main);
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  .site-header:not(#opencampus .site-header) .menu-top .menu-list.sub .request a::before {
    margin-right: 0.8rem;
    background-color: #fff;
  }
}
.site-header:not(#opencampus .site-header) .menu-top .menu-list.sub .contact a::before {
  background: url(/assets/images/common/icon-contact.svg) no-repeat center/contain;
}
.site-header:not(#opencampus .site-header) .menu-top .menu-list.target {
  display: flex;
  align-items: center;
  gap: 1.6rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  .site-header:not(#opencampus .site-header) .menu-top .menu-list.target {
    display: none;
  }
}
.site-header:not(#opencampus .site-header) .menu-top .menu-list.target button {
  border-radius: calc(infinity * 1px);
  border: 1px solid var(--color-main);
  padding: 0.6rem 1.4rem;
  color: var(--color-main);
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
  white-space: nowrap;
}
.site-header:not(#opencampus .site-header) .menu-top .menu-list.target button[aria-expanded=true] {
  background-color: var(--color-main);
  color: #fff;
}
.site-header:not(#opencampus .site-header) .menu-top .menu-list.target button:focus {
  background-color: var(--color-main);
  color: #fff;
}
@media (hover: hover) and (pointer: fine) {
  .site-header:not(#opencampus .site-header) .menu-top .menu-list.target button:where(:-moz-any-link, :enabled, summary):hover {
    background-color: var(--color-main);
    color: #fff;
  }
  .site-header:not(#opencampus .site-header) .menu-top .menu-list.target button:where(:any-link, :enabled, summary):hover {
    background-color: var(--color-main);
    color: #fff;
  }
}
.site-header:not(#opencampus .site-header) .main-nav {
  grid-column: 1/span 2;
  grid-row: 3;
  width: 100%;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  .site-header:not(#opencampus .site-header) .main-nav {
    display: none;
  }
}
.site-header:not(#opencampus .site-header) .menu-list.main {
  display: flex;
  align-items: stretch;
  justify-content: center;
  width: 100%;
  gap: 0;
  border-top: 1px solid var(--color-line);
}
.site-header:not(#opencampus .site-header) .menu-list.main li {
  display: flex;
}
.site-header:not(#opencampus .site-header) .menu-list.main a,
.site-header:not(#opencampus .site-header) .menu-list.main button {
  display: flex;
  align-items: center;
  border-bottom: 2px solid transparent;
  padding: 2.4rem 1.8rem 2.3rem;
  font-size: var(--font-size-md);
}
.site-header:not(#opencampus .site-header) .menu-list.main a[aria-expanded=true],
.site-header:not(#opencampus .site-header) .menu-list.main button[aria-expanded=true] {
  color: var(--color-main);
}
.site-header:not(#opencampus .site-header) .menu-list.main a:focus {
  color: var(--color-main);
  border-bottom-color: var(--color-main);
}
@media (hover: hover) and (pointer: fine) {
  .site-header:not(#opencampus .site-header) .menu-list.main a:where(:-moz-any-link, :enabled, summary):hover {
    color: var(--color-main);
    border-bottom-color: var(--color-main);
  }
  .site-header:not(#opencampus .site-header) .menu-list.main a:where(:any-link, :enabled, summary):hover {
    color: var(--color-main);
    border-bottom-color: var(--color-main);
  }
}
.site-header:not(#opencampus .site-header) .mega-panels {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  z-index: 2;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  .site-header:not(#opencampus .site-header) .mega-panels {
    display: none;
  }
}
.site-header:not(#opencampus .site-header) .mega-panels .mega-panel {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: min(132rem, 100%);
  margin-inline: auto;
  background-color: var(--color-base);
  opacity: 0;
  visibility: hidden;
  translate: 0 -6px;
  pointer-events: none;
  transition: opacity 0.2s ease, translate 0.2s ease, visibility 0s 0.2s;
}
.site-header:not(#opencampus .site-header) .mega-panels .mega-panel.is-active {
  opacity: 1;
  visibility: visible;
  translate: 0 0;
  pointer-events: auto;
  transition: opacity 0.2s ease, translate 0.2s ease;
}
.site-header:not(#opencampus .site-header) .mega-panels .mega-panel.target {
  top: -7.1rem;
}
.site-header:not(#opencampus .site-header) .mega-panels .mega-panel .inner {
  display: grid;
  grid-template-columns: 30rem 1fr;
  align-items: center;
  gap: 4rem;
  padding: 5.6rem 9.6rem;
}
.site-header:not(#opencampus .site-header) .mega-panels .mega-panel .inner.recruit {
  grid-template-columns: 24rem 1fr auto;
  margin-right: 5rem;
}
.site-header:not(#opencampus .site-header) .mega-panels .mega-panel .inner.recruit .links {
  grid-template-columns: 1fr;
}
.site-header:not(#opencampus .site-header) .mega-panels .mega-panel .inner.recruit .common-link {
  height: 6rem;
  font-size: 1.6rem;
}
.site-header:not(#opencampus .site-header) .mega-panels .mega-panel .label {
  font-size: 3.2rem;
  line-height: 1.2;
  font-weight: 400;
}
.site-header:not(#opencampus .site-header) .mega-panels .mega-panel ul {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem 5rem;
  border-left: 1px solid var(--color-line);
  padding: 1.4rem 0 1.4rem 6.4rem;
}
.site-header:not(#opencampus .site-header) .mega-panels .mega-panel ul a {
  display: grid;
  grid-template-columns: 2.4rem 1fr;
  align-items: center;
  gap: 1rem;
  font-size: 1.5rem;
}
.site-header:not(#opencampus .site-header) .mega-panels .mega-panel ul a::before {
  content: "";
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--color-main) url("/assets/images/common/icon-arrow02.svg") no-repeat center/0.9rem auto;
  flex-shrink: 0;
  transition: translate 0.2s ease;
}
.site-header:not(#opencampus .site-header) .mega-panels .mega-panel ul a:focus {
  color: var(--color-main);
  text-decoration: underline;
  text-underline-offset: 0.4rem;
}
.site-header:not(#opencampus .site-header) .mega-panels .mega-panel ul a:focus::before {
  translate: 0.2rem;
}
@media (hover: hover) and (pointer: fine) {
  .site-header:not(#opencampus .site-header) .mega-panels .mega-panel ul a:where(:-moz-any-link, :enabled, summary):hover {
    color: var(--color-main);
    text-decoration: underline;
    text-underline-offset: 0.4rem;
  }
  .site-header:not(#opencampus .site-header) .mega-panels .mega-panel ul a:where(:any-link, :enabled, summary):hover {
    color: var(--color-main);
    text-decoration: underline;
    text-underline-offset: 0.4rem;
  }
  .site-header:not(#opencampus .site-header) .mega-panels .mega-panel ul a:where(:-moz-any-link, :enabled, summary):hover::before {
    translate: 0.2rem;
  }
  .site-header:not(#opencampus .site-header) .mega-panels .mega-panel ul a:where(:any-link, :enabled, summary):hover::before {
    translate: 0.2rem;
  }
}
.site-header:not(#opencampus .site-header) .drawer-button {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  .site-header:not(#opencampus .site-header) .drawer-button {
    height: var(--header-hight);
  }
}
.site-header:not(#opencampus .site-header) .drawer-button button {
  position: relative;
  display: grid;
  place-content: center;
  width: 100%;
  height: 100%;
  background-color: var(--color-main);
}
.site-header:not(#opencampus .site-header) .drawer-button button .line {
  position: relative;
  left: -0.4rem;
  display: block;
  width: 3.2rem;
  height: 0.1rem;
  background-color: #fff;
  transition: 0.4s ease;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  .site-header:not(#opencampus .site-header) .drawer-button button .line {
    left: -0.2rem;
    width: 1.7rem;
  }
}
.site-header:not(#opencampus .site-header) .drawer-button button .line::before, .site-header:not(#opencampus .site-header) .drawer-button button .line::after {
  content: "";
  position: absolute;
  height: 0.1rem;
  background-color: #fff;
  transition: 0.4s ease;
}
.site-header:not(#opencampus .site-header) .drawer-button button .line::before {
  width: 4rem;
  top: -1rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  .site-header:not(#opencampus .site-header) .drawer-button button .line::before {
    width: 2.2rem;
    top: -0.6rem;
  }
}
.site-header:not(#opencampus .site-header) .drawer-button button .line::after {
  width: 100%;
  top: 1rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  .site-header:not(#opencampus .site-header) .drawer-button button .line::after {
    top: 0.6rem;
  }
}
.site-header:not(#opencampus .site-header) .drawer-button button[aria-expanded=true] .line {
  background-color: transparent;
}
.site-header:not(#opencampus .site-header) .drawer-button button[aria-expanded=true] .line::before, .site-header:not(#opencampus .site-header) .drawer-button button[aria-expanded=true] .line::after {
  top: 0;
}
.site-header:not(#opencampus .site-header) .drawer-button button[aria-expanded=true] .line::before {
  transform: rotate(45deg);
}
.site-header:not(#opencampus .site-header) .drawer-button button[aria-expanded=true] .line::after {
  width: 4rem;
  transform: rotate(-45deg);
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  .site-header:not(#opencampus .site-header) .drawer-button button[aria-expanded=true] .line::after {
    width: 2.2rem;
  }
}
.site-header:not(#opencampus .site-header) .drawer-menu {
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  height: 100lvh;
  overflow-y: auto;
  background-color: var(--color-base);
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.3s ease, visibility 0.3s;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  .site-header:not(#opencampus .site-header) .drawer-menu {
    top: 0;
    height: 100lvh;
  }
}
.site-header:not(#opencampus .site-header) .drawer-menu > .inner {
  padding: 0 6rem 4rem;
  opacity: 0;
  translate: 0 1rem;
  transition: opacity 0.4s 0.1s ease, translate 0.4s 0.1s ease;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  .site-header:not(#opencampus .site-header) .drawer-menu > .inner {
    padding: var(--header-hight) 2rem 8rem;
  }
}
.site-header:not(#opencampus .site-header) .drawer-menu[data-expanded=true] {
  opacity: 1;
  visibility: visible;
}
.site-header:not(#opencampus .site-header) .drawer-menu[data-expanded=true] > .inner {
  opacity: 1;
  translate: 0 0;
}
.site-header:not(#opencampus .site-header) .drawer-menu .logo {
  display: block;
  width: 20rem;
  padding-block: 2.8rem 3.2rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  .site-header:not(#opencampus .site-header) .drawer-menu .logo {
    display: none;
  }
}
.site-header:not(#opencampus .site-header) .drawer-menu .utils {
  display: grid;
  grid-template-columns: auto 39rem;
  align-items: center;
  gap: 3.2rem;
  width: -moz-fit-content;
  width: fit-content;
  padding-block: 2rem 4.8rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  .site-header:not(#opencampus .site-header) .drawer-menu .utils {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 2rem;
    padding-block: 2.4rem;
  }
  .site-header:not(#opencampus .site-header) .drawer-menu .utils .search-form {
    order: -1;
  }
}
.site-header:not(#opencampus .site-header) .drawer-menu .utils .search-form {
  display: grid;
  grid-template-columns: 1fr 5.6rem;
  align-items: center;
  height: 5.6rem;
  border-radius: 0.9rem 0 0 0.9rem;
  overflow: hidden;
  background-color: #fff;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  .site-header:not(#opencampus .site-header) .drawer-menu .utils .search-form {
    grid-template-columns: 1fr 5rem;
    width: 100%;
    height: 5rem;
    border-radius: 0.8rem 0 0 0.8rem;
  }
}
.site-header:not(#opencampus .site-header) .drawer-menu .utils .search-form input {
  flex: 1;
  height: 100%;
  padding-inline: 2.7rem 1.6rem;
  font-size: 1.5rem;
  font-family: inherit;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  .site-header:not(#opencampus .site-header) .drawer-menu .utils .search-form input {
    font-size: 1.4rem;
  }
}
.site-header:not(#opencampus .site-header) .drawer-menu .utils .search-form button {
  display: grid;
  place-content: center;
  height: 100%;
  background-color: var(--color-main);
  cursor: pointer;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  .site-header:not(#opencampus .site-header) .drawer-menu .utils .search-form button {
    background-color: #fff;
  }
}
.site-header:not(#opencampus .site-header) .drawer-menu .utils .search-form button::before {
  content: "";
  width: 2.7rem;
  aspect-ratio: 1;
  -webkit-mask: url(/assets/images/common/icon-search.svg) no-repeat center/contain;
          mask: url(/assets/images/common/icon-search.svg) no-repeat center/contain;
  background-color: #fff;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  .site-header:not(#opencampus .site-header) .drawer-menu .utils .search-form button::before {
    background-color: var(--color-main);
  }
}
.site-header:not(#opencampus .site-header) .drawer-menu .utils .sub-links {
  display: flex;
  align-items: center;
  gap: 3.2rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  .site-header:not(#opencampus .site-header) .drawer-menu .utils .sub-links {
    justify-content: space-around;
    gap: 0;
  }
  .site-header:not(#opencampus .site-header) .drawer-menu .utils .sub-links li:nth-of-type(2n) {
    border: 1px solid var(--color-line);
    border-width: 0 1px 0 1px;
    margin-inline: 3rem;
    padding-inline: 3rem;
  }
}
.site-header:not(#opencampus .site-header) .drawer-menu .utils .sub-links a {
  display: grid;
  grid-template-columns: 2.1rem auto;
  align-items: center;
  gap: 0.4rem;
  padding-inline: 0.3rem;
  font-size: 1.7rem;
}
.site-header:not(#opencampus .site-header) .drawer-menu .utils .sub-links a:focus {
  text-decoration: underline;
  color: var(--color-main);
}
@media (hover: hover) and (pointer: fine) {
  .site-header:not(#opencampus .site-header) .drawer-menu .utils .sub-links a:where(:-moz-any-link, :enabled, summary):hover {
    text-decoration: underline;
    color: var(--color-main);
  }
  .site-header:not(#opencampus .site-header) .drawer-menu .utils .sub-links a:where(:any-link, :enabled, summary):hover {
    text-decoration: underline;
    color: var(--color-main);
  }
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  .site-header:not(#opencampus .site-header) .drawer-menu .utils .sub-links a {
    grid-template-columns: 1fr;
    font-family: var(--font-noto-sans);
    font-size: 0.9rem;
    font-weight: 700;
  }
}
.site-header:not(#opencampus .site-header) .drawer-menu .utils .sub-links a::before {
  content: "";
  aspect-ratio: 1;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  .site-header:not(#opencampus .site-header) .drawer-menu .utils .sub-links a::before {
    width: 2.5rem;
    margin-inline: auto;
  }
}
.site-header:not(#opencampus .site-header) .drawer-menu .utils .sub-links .access a::before {
  background: url(/assets/images/common/icon-map.png) no-repeat center/contain;
}
.site-header:not(#opencampus .site-header) .drawer-menu .utils .sub-links .request a::before {
  background: url(/assets/images/common/icon-data.svg) no-repeat center/contain;
}
.site-header:not(#opencampus .site-header) .drawer-menu .utils .sub-links .contact a::before {
  background: url(/assets/images/common/icon-contact.svg) no-repeat center/contain;
}
.site-header:not(#opencampus .site-header) .drawer-menu .drawer-nav > ul {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: start;
  gap: 4rem 5.6rem;
  margin-top: 4rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  .site-header:not(#opencampus .site-header) .drawer-menu .drawer-nav > ul {
    display: block;
    margin-top: 0;
  }
}
.site-header:not(#opencampus .site-header) .drawer-menu .drawer-nav > ul > li .head {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  border-bottom: 1px solid var(--color-main);
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  .site-header:not(#opencampus .site-header) .drawer-menu .drawer-nav > ul > li .head {
    border-bottom-color: var(--color-line);
    padding-block: 1.4rem;
  }
}
.site-header:not(#opencampus .site-header) .drawer-menu .drawer-nav > ul > li .head.no-sub {
  grid-template-columns: 1fr;
}
.site-header:not(#opencampus .site-header) .drawer-menu .drawer-nav > ul > li .head > :is(a, button).js-accordion-trigger {
  display: grid;
  grid-template-columns: 1fr 1.5rem;
  align-items: center;
  gap: 1rem;
  padding: 0 1rem 1.6rem 0;
  color: var(--color-main);
  font-size: 1.7rem;
  text-align: left;
}
@media screen and (min-width: 769px) {
  .site-header:not(#opencampus .site-header) .drawer-menu .drawer-nav > ul > li .head > :is(a, button).js-accordion-trigger:focus {
    translate: 0.9rem;
  }
}
@media screen and (min-width: 769px) and (hover: hover) and (pointer: fine) {
  .site-header:not(#opencampus .site-header) .drawer-menu .drawer-nav > ul > li .head > :is(a, button).js-accordion-trigger:where(:-moz-any-link, :enabled, summary):hover {
    translate: 0.9rem;
  }
  .site-header:not(#opencampus .site-header) .drawer-menu .drawer-nav > ul > li .head > :is(a, button).js-accordion-trigger:where(:any-link, :enabled, summary):hover {
    translate: 0.9rem;
  }
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  .site-header:not(#opencampus .site-header) .drawer-menu .drawer-nav > ul > li .head > :is(a, button).js-accordion-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    grid-template-columns: unset;
    padding: 0;
    color: var(--color-font);
  }
}
.site-header:not(#opencampus .site-header) .drawer-menu .drawer-nav > ul > li .head > :is(a, button).js-accordion-trigger::after {
  content: "";
  width: 1.8rem;
  aspect-ratio: 18/12;
  -webkit-mask: url(/assets/images/common/icon-arrow02.svg) no-repeat center/contain;
          mask: url(/assets/images/common/icon-arrow02.svg) no-repeat center/contain;
  background-color: var(--color-main);
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  .site-header:not(#opencampus .site-header) .drawer-menu .drawer-nav > ul > li .head > :is(a, button).js-accordion-trigger::after {
    display: block;
    flex-shrink: 0;
    width: 1.4rem;
    height: 1.4rem;
    -webkit-mask: none;
            mask: none;
    aspect-ratio: unset;
    background-image: linear-gradient(var(--color-main), var(--color-main)), linear-gradient(var(--color-main), var(--color-main));
    background-size: 1px 1.1rem, 1.1rem 1px;
    background-position: center;
    background-repeat: no-repeat;
    background-color: transparent;
    transition: background-size 0.2s ease;
  }
}
.site-header:not(#opencampus .site-header) .drawer-menu .drawer-nav > ul > li .head > a:not(.js-accordion-trigger) {
  display: grid;
  grid-template-columns: 1fr 1.5rem;
  align-items: center;
  gap: 1rem;
  padding: 0 1rem 1.6rem 0;
  color: var(--color-main);
  font-size: 1.7rem;
}
@media screen and (min-width: 769px) {
  .site-header:not(#opencampus .site-header) .drawer-menu .drawer-nav > ul > li .head > a:not(.js-accordion-trigger):focus {
    translate: 0.9rem;
  }
}
@media screen and (min-width: 769px) and (hover: hover) and (pointer: fine) {
  .site-header:not(#opencampus .site-header) .drawer-menu .drawer-nav > ul > li .head > a:not(.js-accordion-trigger):where(:-moz-any-link, :enabled, summary):hover {
    translate: 0.9rem;
  }
  .site-header:not(#opencampus .site-header) .drawer-menu .drawer-nav > ul > li .head > a:not(.js-accordion-trigger):where(:any-link, :enabled, summary):hover {
    translate: 0.9rem;
  }
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  .site-header:not(#opencampus .site-header) .drawer-menu .drawer-nav > ul > li .head > a:not(.js-accordion-trigger) {
    grid-template-columns: 1fr;
    padding: 0;
    color: var(--color-font);
  }
}
.site-header:not(#opencampus .site-header) .drawer-menu .drawer-nav > ul > li .head > a:not(.js-accordion-trigger)::after {
  content: "";
  width: 1.8rem;
  aspect-ratio: 18/12;
  -webkit-mask: url(/assets/images/common/icon-arrow02.svg) no-repeat center/contain;
          mask: url(/assets/images/common/icon-arrow02.svg) no-repeat center/contain;
  background-color: var(--color-main);
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  .site-header:not(#opencampus .site-header) .drawer-menu .drawer-nav > ul > li .head > a:not(.js-accordion-trigger)::after {
    display: none;
  }
}
.site-header:not(#opencampus .site-header) .drawer-menu .drawer-nav > ul > li .wrapper {
  display: block;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  .site-header:not(#opencampus .site-header) .drawer-menu .drawer-nav > ul > li .wrapper {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.3s ease;
  }
}
.site-header:not(#opencampus .site-header) .drawer-menu .drawer-nav > ul > li .body {
  overflow: visible;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  .site-header:not(#opencampus .site-header) .drawer-menu .drawer-nav > ul > li .body {
    overflow: hidden;
  }
}
.site-header:not(#opencampus .site-header) .drawer-menu .drawer-nav > ul > li ul {
  padding: 1.2rem 0 0 1.6rem;
}
.site-header:not(#opencampus .site-header) .drawer-menu .drawer-nav > ul > li ul li + li {
  margin-top: 0.8rem;
}
.site-header:not(#opencampus .site-header) .drawer-menu .drawer-nav > ul > li ul a {
  display: block;
  width: -moz-fit-content;
  width: fit-content;
  padding-block: 0.8rem;
  font-size: 1.6rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  .site-header:not(#opencampus .site-header) .drawer-menu .drawer-nav > ul > li ul a {
    font-size: 1.4rem;
  }
}
.site-header:not(#opencampus .site-header) .drawer-menu .drawer-nav > ul > li ul a:focus {
  color: var(--color-main);
  text-decoration: underline;
}
@media (hover: hover) and (pointer: fine) {
  .site-header:not(#opencampus .site-header) .drawer-menu .drawer-nav > ul > li ul a:where(:-moz-any-link, :enabled, summary):hover {
    color: var(--color-main);
    text-decoration: underline;
  }
  .site-header:not(#opencampus .site-header) .drawer-menu .drawer-nav > ul > li ul a:where(:any-link, :enabled, summary):hover {
    color: var(--color-main);
    text-decoration: underline;
  }
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  .site-header:not(#opencampus .site-header) .drawer-menu .drawer-nav > ul > li.is-open .wrapper {
    grid-template-rows: 1fr;
  }
  .site-header:not(#opencampus .site-header) .drawer-menu .drawer-nav > ul > li.is-open .head > .js-accordion-trigger::after {
    background-size: 0 0, 1.1rem 1px;
  }
}
.site-header:not(#opencampus .site-header) .drawer-menu .drawer-nav > ul > li:nth-of-type(1) {
  grid-row: 1/span 2;
  grid-column: 1;
}
.site-header:not(#opencampus .site-header) .drawer-menu .drawer-nav > ul > li:nth-of-type(2) {
  grid-column: 2;
}
.site-header:not(#opencampus .site-header) .drawer-menu .drawer-nav > ul > li:nth-of-type(3) {
  grid-row: 2/span 4;
  grid-column: 2;
}
.site-header:not(#opencampus .site-header) .drawer-menu .drawer-nav > ul > li:nth-of-type(4) {
  grid-row: 1/span 2;
  grid-column: 3;
}
.site-header:not(#opencampus .site-header) .drawer-menu .drawer-nav > ul > li:nth-of-type(5) {
  grid-column: 3;
}
.site-header:not(#opencampus .site-header) .drawer-menu .drawer-nav > ul > li:nth-of-type(6) {
  grid-column: 3;
}
.site-header:not(#opencampus .site-header) .drawer-menu .target {
  display: none;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  .site-header:not(#opencampus .site-header) .drawer-menu .target {
    display: block;
    margin-top: 4rem;
  }
  .site-header:not(#opencampus .site-header) .drawer-menu .target .label {
    display: grid;
    grid-template-columns: 2.1rem auto;
    align-items: center;
    -moz-column-gap: 0.3rem;
         column-gap: 0.3rem;
    margin-bottom: 1.3rem;
    border-bottom: 1px solid var(--color-line);
    padding-bottom: 0.5rem;
    font-size: 1.5rem;
  }
  .site-header:not(#opencampus .site-header) .drawer-menu .target .label::before {
    content: "";
    aspect-ratio: 1;
    background: url(/assets/images/common/icon-target.png) no-repeat center/contain;
  }
  .site-header:not(#opencampus .site-header) .drawer-menu .target > ul {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.8rem;
  }
  .site-header:not(#opencampus .site-header) .drawer-menu .target > ul > li:first-of-type {
    grid-column: 1/-1;
  }
  .site-header:not(#opencampus .site-header) .drawer-menu .target > ul > li > button,
  .site-header:not(#opencampus .site-header) .drawer-menu .target > ul > li > a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 1.2rem 3rem;
    border-radius: calc(infinity * 1px);
    border: 1px solid var(--color-main);
    color: var(--color-main);
    font-size: 1.5rem;
    text-align: center;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
  }
  .site-header:not(#opencampus .site-header) .drawer-menu .target > ul > li > button[aria-expanded=true],
  .site-header:not(#opencampus .site-header) .drawer-menu .target > ul > li > a[aria-expanded=true] {
    background-color: var(--color-main);
    color: #fff;
  }
  .site-header:not(#opencampus .site-header) .drawer-menu .target .has-sub button {
    justify-content: space-between;
    padding-right: 1.6rem;
    background-color: var(--color-main);
    color: #fff;
  }
  .site-header:not(#opencampus .site-header) .drawer-menu .target .has-sub button::after {
    content: "";
    flex-shrink: 0;
    width: 1.4rem;
    aspect-ratio: 1;
    background: linear-gradient(currentColor, currentColor) no-repeat center/1px 1.1rem, linear-gradient(currentColor, currentColor) no-repeat center/1.1rem 1px;
    background-color: transparent;
    transition: background-size 0.2s ease;
  }
  .site-header:not(#opencampus .site-header) .drawer-menu .target .has-sub .wrapper {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.3s ease;
  }
  .site-header:not(#opencampus .site-header) .drawer-menu .target .has-sub .wrapper .body {
    overflow: hidden;
  }
  .site-header:not(#opencampus .site-header) .drawer-menu .target .has-sub.is-open button {
    background-color: var(--color-main);
    color: #fff;
  }
  .site-header:not(#opencampus .site-header) .drawer-menu .target .has-sub.is-open button::after {
    background-size: 0 0, 1.1rem 1px;
  }
  .site-header:not(#opencampus .site-header) .drawer-menu .target .has-sub.is-open .wrapper {
    grid-template-rows: 1fr;
  }
  .site-header:not(#opencampus .site-header) .drawer-menu .target .has-sub .sub-links {
    display: block;
    padding: 1.2rem 0 1.2rem 3rem;
  }
  .site-header:not(#opencampus .site-header) .drawer-menu .target .has-sub .sub-links a {
    display: inline-block;
    padding-block: 0.8rem;
    color: var(--color-font);
  }
}
.site-header:not(#opencampus .site-header) .drawer-menu .footer {
  display: flex;
  align-items: center;
  -moz-column-gap: 3.2rem;
       column-gap: 3.2rem;
  margin-top: 4.5rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  .site-header:not(#opencampus .site-header) .drawer-menu .footer {
    margin-top: 3.2rem;
  }
}
.site-header:not(#opencampus .site-header) .drawer-menu .footer .links {
  display: flex;
  align-items: center;
  gap: 3.2rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  .site-header:not(#opencampus .site-header) .drawer-menu .footer .links {
    display: none;
  }
}
.site-header:not(#opencampus .site-header) .drawer-menu .footer .links a {
  font-size: 1.5rem;
}
.site-header:not(#opencampus .site-header) .drawer-menu .footer .links a:focus {
  color: var(--color-main);
  text-decoration: underline;
}
@media (hover: hover) and (pointer: fine) {
  .site-header:not(#opencampus .site-header) .drawer-menu .footer .links a:where(:-moz-any-link, :enabled, summary):hover {
    color: var(--color-main);
    text-decoration: underline;
  }
  .site-header:not(#opencampus .site-header) .drawer-menu .footer .links a:where(:any-link, :enabled, summary):hover {
    color: var(--color-main);
    text-decoration: underline;
  }
}
.site-header:not(#opencampus .site-header) .drawer-menu .footer .links a[target=_blank] {
  display: grid;
  grid-template-columns: auto 2.4rem;
  align-items: center;
  -moz-column-gap: 0.8rem;
       column-gap: 0.8rem;
}
.site-header:not(#opencampus .site-header) .drawer-menu .footer .links a[target=_blank]::after {
  content: "";
  aspect-ratio: 1;
  background: url(/assets/images/common/icon-tab.svg) no-repeat center/contain;
}
.site-header:not(#opencampus .site-header) .drawer-menu .footer .sns {
  display: grid;
  grid-template-columns: repeat(3, 4rem);
  align-items: center;
  -moz-column-gap: 1.2rem;
       column-gap: 1.2rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  .site-header:not(#opencampus .site-header) .drawer-menu .footer .sns {
    -moz-column-gap: 0.6rem;
         column-gap: 0.6rem;
  }
}
.site-header:not(#opencampus .site-header) .drawer-menu .footer .sns a {
  display: block;
  aspect-ratio: 1;
  border-radius: 50%;
  padding: 0.5rem;
  background-color: var(--color-main);
}
.site-header:not(#opencampus .site-header) .drawer-menu .footer .sns a:focus {
  opacity: 0.8;
}
@media (hover: hover) and (pointer: fine) {
  .site-header:not(#opencampus .site-header) .drawer-menu .footer .sns a:where(:-moz-any-link, :enabled, summary):hover {
    opacity: 0.8;
  }
  .site-header:not(#opencampus .site-header) .drawer-menu .footer .sns a:where(:any-link, :enabled, summary):hover {
    opacity: 0.8;
  }
}
.site-header:not(#opencampus .site-header) .drawer-menu .footer .sns a img {
  width: 100%;
  height: auto;
}

#opencampus .site-header {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 5;
  width: 100%;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #opencampus .site-header {
    position: sticky;
  }
}
#opencampus .site-header .inner {
  display: flex;
  align-items: center;
  padding: 2.4rem 1.4rem 2.4rem 2rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #opencampus .site-header .inner {
    position: relative;
    justify-content: space-between;
    height: 7rem;
    padding-inline: 2rem;
    background-color: #fff;
  }
}
#opencampus .site-header .inner .logo {
  display: flex;
  align-items: center;
  -moz-column-gap: 2.3rem;
       column-gap: 2.3rem;
  font-size: 1.3rem;
  font-weight: 500;
  letter-spacing: 0.12em;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #opencampus .site-header .inner .logo {
    -moz-column-gap: 0.6rem;
         column-gap: 0.6rem;
    font-size: 0.7rem;
  }
}
#opencampus .site-header .inner .logo img {
  width: 18.6rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #opencampus .site-header .inner .logo img {
    width: 15.4rem;
  }
}
#opencampus .site-header .inner .links {
  display: flex;
  -moz-column-gap: 0.8rem;
       column-gap: 0.8rem;
  margin-left: auto;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #opencampus .site-header .inner .links {
    display: none;
  }
}
#opencampus .site-header .inner .links a {
  display: grid;
  place-content: center;
  width: 16.7rem;
  height: 4rem;
  box-shadow: 0.2rem 0.2rem 0 var(--color-font);
  border-radius: calc(infinity * 1px);
  border: 1px solid var(--color-font);
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}
#opencampus .site-header .inner .links a:nth-of-type(1) {
  background-color: var(--color-main);
}
#opencampus .site-header .inner .links a:nth-of-type(2) {
  background-color: #fff;
}
#opencampus .site-header .inner .links a:focus {
  box-shadow: initial;
  translate: 0.2rem 0.2rem;
}
@media (hover: hover) and (pointer: fine) {
  #opencampus .site-header .inner .links a:where(:-moz-any-link, :enabled, summary):hover {
    box-shadow: initial;
    translate: 0.2rem 0.2rem;
  }
  #opencampus .site-header .inner .links a:where(:any-link, :enabled, summary):hover {
    box-shadow: initial;
    translate: 0.2rem 0.2rem;
  }
}
#opencampus .site-header .drawer-button {
  position: relative;
  z-index: 2;
  margin-left: 1.2rem;
}
#opencampus .site-header .drawer-button button {
  position: relative;
  display: grid;
  place-content: center;
  aspect-ratio: 1;
  border-radius: 50%;
  padding: 0.8rem 1.2rem;
  background-color: var(--color-font);
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #opencampus .site-header .drawer-button button {
    padding: 0.8rem 1rem;
  }
}
@media (any-hover: hover) {
  #opencampus .site-header .drawer-button button:hover {
    transform: scale(1.1);
  }
}
#opencampus .site-header .drawer-button button .line {
  position: relative;
  display: block;
  width: 3.2rem;
  height: 2px;
  transition: 0.3s ease;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #opencampus .site-header .drawer-button button .line {
    width: 1.7rem;
  }
}
#opencampus .site-header .drawer-button button .line::before, #opencampus .site-header .drawer-button button .line::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  background-color: #fff;
  transition: 0.3s ease;
}
#opencampus .site-header .drawer-button button .line::before {
  top: -0.5rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #opencampus .site-header .drawer-button button .line::before {
    top: -0.4rem;
  }
}
#opencampus .site-header .drawer-button button .line::after {
  top: 0.5rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #opencampus .site-header .drawer-button button .line::after {
    top: 0.4rem;
  }
}
#opencampus .site-header .drawer-button button[aria-expanded=true] .line::before, #opencampus .site-header .drawer-button button[aria-expanded=true] .line::after {
  top: 0;
}
#opencampus .site-header .drawer-button button[aria-expanded=true] .line::before {
  transform: rotate(45deg);
}
#opencampus .site-header .drawer-button button[aria-expanded=true] .line::after {
  transform: rotate(-45deg);
}
#opencampus .site-header .drawer-menu {
  position: fixed;
  top: 0;
  right: 0;
  width: min(45rem, 100%);
  height: 100lvh;
  overflow-y: auto;
  background-color: var(--color-base);
  visibility: hidden;
  translate: 100% 0;
  transition: 0.36s ease;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #opencampus .site-header .drawer-menu {
    top: 7rem;
  }
}
#opencampus .site-header .drawer-menu[data-expanded=true] {
  visibility: visible;
  translate: 0;
}
#opencampus .site-header .drawer-menu[data-expanded=true] nav {
  opacity: 1;
  translate: 0 0;
}
#opencampus .site-header .drawer-menu nav {
  padding: 15.3rem 2.4rem 6.4rem;
  opacity: 0;
  translate: 2rem 0;
  transition: 0.5s 0.2s ease;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #opencampus .site-header .drawer-menu nav {
    padding: 6rem 2rem 20rem;
  }
}
#opencampus .site-header .drawer-menu nav ul li a {
  position: relative;
  display: block;
  border-bottom: 1px solid #fff;
  padding: 2.8rem 2.4rem 2.8rem 0;
  font-size: 2.2rem;
  letter-spacing: 0.07em;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #opencampus .site-header .drawer-menu nav ul li a {
    padding-block: 2.6rem;
    font-size: 1.9rem;
  }
}
#opencampus .site-header .drawer-menu nav ul li a::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 1.8rem;
  width: 1rem;
  aspect-ratio: 1;
  border-top: 1px solid var(--color-main);
  border-right: 1px solid var(--color-main);
  transform: rotate(45deg) translateY(-50%);
  transition: translate 0.2s ease;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #opencampus .site-header .drawer-menu nav ul li a::before {
    right: 1.6rem;
    width: 0.9rem;
  }
}
#opencampus .site-header .drawer-menu nav ul li a:focus {
  background-color: rgba(51, 51, 51, 0.1);
}
#opencampus .site-header .drawer-menu nav ul li a:focus::before {
  translate: 0.6rem;
}
@media (hover: hover) and (pointer: fine) {
  #opencampus .site-header .drawer-menu nav ul li a:where(:-moz-any-link, :enabled, summary):hover {
    background-color: rgba(51, 51, 51, 0.1);
  }
  #opencampus .site-header .drawer-menu nav ul li a:where(:any-link, :enabled, summary):hover {
    background-color: rgba(51, 51, 51, 0.1);
  }
  #opencampus .site-header .drawer-menu nav ul li a:where(:-moz-any-link, :enabled, summary):hover::before {
    translate: 0.6rem;
  }
  #opencampus .site-header .drawer-menu nav ul li a:where(:any-link, :enabled, summary):hover::before {
    translate: 0.6rem;
  }
}
#opencampus .site-header .drawer-menu nav .access {
  display: grid;
  align-items: center;
  justify-content: center;
  grid-template-columns: 1.8rem auto;
  -moz-column-gap: 1.3rem;
       column-gap: 1.3rem;
  height: 6.6rem;
  margin-top: 5.6rem;
  border: 2px solid var(--color-main);
  border-radius: calc(infinity * 1px);
  background-color: var(--color-main);
  color: #fff;
  font-size: 2.1rem;
  letter-spacing: 0.07em;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #opencampus .site-header .drawer-menu nav .access {
    grid-template-columns: 1.5rem auto;
    height: 5.8rem;
    margin-top: 4.8rem;
    font-size: 1.9rem;
  }
}
#opencampus .site-header .drawer-menu nav .access::before {
  content: "";
  aspect-ratio: 18/21;
  -webkit-mask: url(/assets/images/opencampus/common/icon-map.svg) no-repeat center/contain;
          mask: url(/assets/images/opencampus/common/icon-map.svg) no-repeat center/contain;
  background-color: #fff;
  transition: background-color 0.2s ease;
}
#opencampus .site-header .drawer-menu nav .access:focus {
  background-color: #fff;
  color: var(--color-main);
}
#opencampus .site-header .drawer-menu nav .access:focus::before {
  -webkit-mask: url(/assets/images/opencampus/common/icon-map.svg) no-repeat center/contain;
          mask: url(/assets/images/opencampus/common/icon-map.svg) no-repeat center/contain;
  background-color: var(--color-main);
}
@media (hover: hover) and (pointer: fine) {
  #opencampus .site-header .drawer-menu nav .access:where(:-moz-any-link, :enabled, summary):hover {
    background-color: #fff;
    color: var(--color-main);
  }
  #opencampus .site-header .drawer-menu nav .access:where(:any-link, :enabled, summary):hover {
    background-color: #fff;
    color: var(--color-main);
  }
  #opencampus .site-header .drawer-menu nav .access:where(:-moz-any-link, :enabled, summary):hover::before {
    mask: url(/assets/images/opencampus/common/icon-map.svg) no-repeat center/contain;
    background-color: var(--color-main);
  }
  #opencampus .site-header .drawer-menu nav .access:where(:any-link, :enabled, summary):hover::before {
    -webkit-mask: url(/assets/images/opencampus/common/icon-map.svg) no-repeat center/contain;
            mask: url(/assets/images/opencampus/common/icon-map.svg) no-repeat center/contain;
    background-color: var(--color-main);
  }
}
#opencampus .site-header .drawer-menu nav .official {
  display: inline-grid;
  grid-template-columns: auto 1.8rem;
  align-items: center;
  -moz-column-gap: 0.8rem;
       column-gap: 0.8rem;
  margin-top: 1.8rem;
  color: #364246;
  font-size: 1.8rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #opencampus .site-header .drawer-menu nav .official {
    -moz-column-gap: 0.7rem;
         column-gap: 0.7rem;
    grid-template-columns: auto 1.6rem;
    margin-top: 1.6rem;
    font-size: 1.6rem;
  }
}
#opencampus .site-header .drawer-menu nav .official::after {
  content: "";
  aspect-ratio: 18/16;
  background: url(/assets/images/opencampus/common/icon-tab-gray.svg) no-repeat center/contain;
}
#opencampus .site-header .drawer-menu nav .official:focus {
  text-decoration: underline;
}
@media (hover: hover) and (pointer: fine) {
  #opencampus .site-header .drawer-menu nav .official:where(:-moz-any-link, :enabled, summary):hover {
    text-decoration: underline;
  }
  #opencampus .site-header .drawer-menu nav .official:where(:any-link, :enabled, summary):hover {
    text-decoration: underline;
  }
}
#opencampus .site-header .drawer-menu nav .sns {
  display: flex;
  align-items: center;
  margin-top: 1.8rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #opencampus .site-header .drawer-menu nav .sns {
    margin-top: 1.6rem;
  }
}
#opencampus .site-header .drawer-menu nav .sns span {
  padding-right: 2.2rem;
  font-size: 1.8rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #opencampus .site-header .drawer-menu nav .sns span {
    padding-right: 2rem;
    font-size: 1.6rem;
  }
}
#opencampus .site-header .drawer-menu nav .sns a {
  display: inline-block;
  width: 4.6rem;
}
#opencampus .site-header .drawer-menu nav .sns a:focus {
  opacity: 0.8;
}
@media (hover: hover) and (pointer: fine) {
  #opencampus .site-header .drawer-menu nav .sns a:where(:-moz-any-link, :enabled, summary):hover {
    opacity: 0.8;
  }
  #opencampus .site-header .drawer-menu nav .sns a:where(:any-link, :enabled, summary):hover {
    opacity: 0.8;
  }
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #opencampus .site-header .drawer-menu nav .sns a {
    width: 4rem;
  }
}
#opencampus .site-header .drawer-menu nav .sns a + a {
  margin-left: 0.9rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #opencampus .site-header .drawer-menu nav .sns a + a {
    margin-left: 0.8rem;
  }
}
#opencampus .site-header .drawer-menu nav .banner {
  margin-top: 3.2rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #opencampus .site-header .drawer-menu nav .banner {
    margin-top: 2.8rem;
  }
}
#opencampus .site-header .drawer-menu nav .banner a {
  position: relative;
  display: block;
  overflow: hidden;
  height: 14.3rem;
  border-radius: 0.6rem;
  padding: 2.5rem 1.8rem 0;
  color: #fff;
  font-size: 1.3rem;
  line-height: 1.4;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #opencampus .site-header .drawer-menu nav .banner a {
    height: 12.5rem;
    border-radius: 0.5rem;
    padding: 2.2rem 1.6rem 0;
    font-size: 1.2rem;
  }
}
#opencampus .site-header .drawer-menu nav .banner a::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: 0.5s ease;
}
#opencampus .site-header .drawer-menu nav .banner a + a {
  margin-top: 1.8rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #opencampus .site-header .drawer-menu nav .banner a + a {
    margin-top: 1.6rem;
  }
}
#opencampus .site-header .drawer-menu nav .banner a b {
  margin-top: 0.4rem;
  font-size: 2.5rem;
  font-weight: 500;
  letter-spacing: 0.07em;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #opencampus .site-header .drawer-menu nav .banner a b {
    margin-top: 0.3rem;
    font-size: 2.2rem;
  }
}
#opencampus .site-header .drawer-menu nav .banner a span {
  position: relative;
  display: inline-block;
  width: 2.8rem;
  aspect-ratio: 1;
  border-radius: 50%;
  margin-left: 0.8rem;
  background-color: #fff;
  translate: 0 0.5rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #opencampus .site-header .drawer-menu nav .banner a span {
    width: 2.5rem;
    margin-left: 0.7rem;
  }
}
#opencampus .site-header .drawer-menu nav .banner a span::after {
  content: "";
  position: absolute;
  top: 1rem;
  left: 0.9rem;
  width: 0.8rem;
  aspect-ratio: 1;
  border-top: 1px solid var(--color-main);
  border-right: 1px solid var(--color-main);
  transform: rotate(45deg);
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #opencampus .site-header .drawer-menu nav .banner a span::after {
    top: 0.8rem;
    left: 0.7rem;
    width: 0.7rem;
  }
}
#opencampus .site-header .drawer-menu nav .banner a:nth-of-type(1)::before {
  background: url(/assets/images/opencampus/top/links-img01.jpg) no-repeat center/cover;
}
#opencampus .site-header .drawer-menu nav .banner a:nth-of-type(2)::before {
  background: url(/assets/images/opencampus/top/links-img02.jpg) no-repeat center/cover;
}
#opencampus .site-header .drawer-menu nav .banner a:focus::before {
  transform: scale(1.04);
  opacity: 0.8;
}
@media (hover: hover) and (pointer: fine) {
  #opencampus .site-header .drawer-menu nav .banner a:where(:-moz-any-link, :enabled, summary):hover::before {
    transform: scale(1.04);
    opacity: 0.8;
  }
  #opencampus .site-header .drawer-menu nav .banner a:where(:any-link, :enabled, summary):hover::before {
    transform: scale(1.04);
    opacity: 0.8;
  }
}

@media (any-hover: hover) {
  .site-footer:not(#opencampus .site-footer) a:not(.logo):hover {
    color: var(--color-main);
  }
}
.site-footer:not(#opencampus .site-footer) .closing {
  position: relative;
  display: flex;
  align-items: center;
  aspect-ratio: 1440/520;
  min-height: 52rem;
  padding-right: 11.6rem;
  overflow: hidden;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  .site-footer:not(#opencampus .site-footer) .closing {
    height: 20rem;
    min-height: initial;
    aspect-ratio: initial;
    padding: 0 1.6rem 1rem;
  }
}
.site-footer:not(#opencampus .site-footer) .closing .closing-bg {
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  opacity: 0;
  animation: closing-fade 12s infinite;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  .site-footer:not(#opencampus .site-footer) .closing .closing-bg {
    background-position: center right -6rem;
  }
}
.site-footer:not(#opencampus .site-footer) .closing .closing-bg--1 {
  background-image: url(/assets/images/common/footer-slide01.jpg);
  animation-delay: 0s;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  .site-footer:not(#opencampus .site-footer) .closing .closing-bg--1 {
    background-position: center left;
  }
}
.site-footer:not(#opencampus .site-footer) .closing .closing-bg--2 {
  background-image: url(/assets/images/common/footer-slide02.jpg);
  animation-delay: 4s;
}
.site-footer:not(#opencampus .site-footer) .closing .closing-bg--3 {
  background-image: url(/assets/images/common/footer-slide03.jpg);
  animation-delay: 8s;
}
.site-footer:not(#opencampus .site-footer) .closing p {
  position: relative;
  z-index: 1;
  width: -moz-fit-content;
  width: fit-content;
  margin-left: auto;
  color: #fff;
  font-size: 4.8rem;
  line-height: 1.3;
  letter-spacing: 0.04em;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  .site-footer:not(#opencampus .site-footer) .closing p {
    margin: auto 0 0 auto;
    text-shadow: 0 0 0.4rem rgba(0, 0, 0, 0.2);
    font-size: 1.8rem;
  }
}
.site-footer:not(#opencampus .site-footer) .closing p span {
  display: block;
  margin-top: 1rem;
  font-size: 2.6rem;
  line-height: 2;
  letter-spacing: 0.04em;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  .site-footer:not(#opencampus .site-footer) .closing p span {
    font-size: 1rem;
  }
}
@keyframes closing-fade {
  0% {
    opacity: 0;
  }
  8.33% {
    opacity: 1;
  }
  33.33% {
    opacity: 1;
  }
  41.66% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
.site-footer:not(#opencampus .site-footer) .inner {
  position: relative;
  display: grid;
  grid-template-columns: 20rem auto auto auto;
  justify-content: space-between;
  padding: 10rem calc(50% - 65.6rem) 5rem;
  background-color: #fff;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  .site-footer:not(#opencampus .site-footer) .inner {
    display: block;
    padding: 6.4rem 2rem 10rem;
  }
}
.site-footer:not(#opencampus .site-footer) .inner .logo:focus {
  opacity: 0.7;
}
@media (hover: hover) and (pointer: fine) {
  .site-footer:not(#opencampus .site-footer) .inner .logo:where(:-moz-any-link, :enabled, summary):hover {
    opacity: 0.7;
  }
  .site-footer:not(#opencampus .site-footer) .inner .logo:where(:any-link, :enabled, summary):hover {
    opacity: 0.7;
  }
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  .site-footer:not(#opencampus .site-footer) .inner .logo {
    display: block;
    width: 18.6rem;
  }
}
.site-footer:not(#opencampus .site-footer) .inner :where(.menu-list, .submenu-list) li a[target=_blank] {
  display: grid;
  grid-template-columns: auto 1.8rem;
  -moz-column-gap: 1rem;
       column-gap: 1rem;
  width: -moz-fit-content;
  width: fit-content;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  .site-footer:not(#opencampus .site-footer) .inner :where(.menu-list, .submenu-list) li a[target=_blank] {
    grid-column: 1;
  }
}
.site-footer:not(#opencampus .site-footer) .inner :where(.menu-list, .submenu-list) li a[target=_blank]::after {
  content: "";
  aspect-ratio: 1;
  background: url(/assets/images/common/icon-tab.svg) no-repeat center/contain;
}
.site-footer:not(#opencampus .site-footer) .inner .menu-list {
  grid-column: 2;
  grid-row: 1/span 4;
  width: -moz-fit-content;
  width: fit-content;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  .site-footer:not(#opencampus .site-footer) .inner .menu-list {
    margin: 4rem 0 0 0;
  }
}
.site-footer:not(#opencampus .site-footer) .inner .menu-list li + li {
  margin-top: 2rem;
}
.site-footer:not(#opencampus .site-footer) .inner .menu-list li a {
  font-size: 1.6rem;
}
.site-footer:not(#opencampus .site-footer) .inner .menu-list li a[target=_blank] {
  display: grid;
  grid-template-columns: auto 1.8rem;
  -moz-column-gap: 1rem;
       column-gap: 1rem;
  width: -moz-fit-content;
  width: fit-content;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  .site-footer:not(#opencampus .site-footer) .inner .menu-list li a[target=_blank] {
    grid-column: 1;
  }
}
.site-footer:not(#opencampus .site-footer) .inner .menu-list li a[target=_blank]::after {
  content: "";
  aspect-ratio: 1;
  background: url(/assets/images/common/icon-tab.svg) no-repeat center/contain;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  .site-footer:not(#opencampus .site-footer) .inner .submenu-list {
    margin-top: 4rem;
  }
}
.site-footer:not(#opencampus .site-footer) .inner .submenu-list li + li {
  margin-top: 1.4rem;
}
.site-footer:not(#opencampus .site-footer) .inner .submenu-list li a {
  line-height: 1.4;
}
.site-footer:not(#opencampus .site-footer) .inner .sns {
  display: grid;
  justify-self: flex-end;
  grid-template-columns: repeat(3, 4rem);
  -moz-column-gap: 0.9rem;
       column-gap: 0.9rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  .site-footer:not(#opencampus .site-footer) .inner .sns {
    justify-self: initial;
    -moz-column-gap: 0.6rem;
         column-gap: 0.6rem;
    margin-top: 4rem;
  }
}
.site-footer:not(#opencampus .site-footer) .inner .sns a {
  display: block;
  aspect-ratio: 1;
  border-radius: 50%;
  padding: 0.5rem;
  background-color: var(--color-main);
}
.site-footer:not(#opencampus .site-footer) .inner .sns a:focus {
  opacity: 0.8;
}
@media (hover: hover) and (pointer: fine) {
  .site-footer:not(#opencampus .site-footer) .inner .sns a:where(:-moz-any-link, :enabled, summary):hover {
    opacity: 0.8;
  }
  .site-footer:not(#opencampus .site-footer) .inner .sns a:where(:any-link, :enabled, summary):hover {
    opacity: 0.8;
  }
}
.site-footer:not(#opencampus .site-footer) .inner .sns a img {
  width: 100%;
  height: auto;
}
.site-footer:not(#opencampus .site-footer) .inner .bottom {
  grid-column: 1/-1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 7.2rem;
  border-top: 1px solid var(--color-line);
  padding-top: 5.6rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  .site-footer:not(#opencampus .site-footer) .inner .bottom {
    flex-direction: column;
    justify-content: center;
    gap: 2.4rem;
    margin-top: 4rem;
    padding-top: 4rem;
  }
}
.site-footer:not(#opencampus .site-footer) .inner .bottom .copy {
  grid-column: 2/-1;
  grid-row: 5;
  text-align: end;
  font-size: 1.2rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  .site-footer:not(#opencampus .site-footer) .inner .bottom .copy {
    order: 2;
    text-align: center;
    font-size: 0.8rem;
  }
}
.site-footer:not(#opencampus .site-footer) .inner .bottom .page-top {
  position: relative;
  display: grid;
  grid-template-columns: auto 4.4rem;
  align-items: center;
  -moz-column-gap: 0.8rem;
       column-gap: 0.8rem;
  font-family: var(--font-lora);
  color: var(--color-main);
  font-size: var(--font-size-md);
}
.site-footer:not(#opencampus .site-footer) .inner .bottom .page-top:focus::before {
  background-color: #fff;
}
.site-footer:not(#opencampus .site-footer) .inner .bottom .page-top:focus::after {
  background-color: var(--color-main);
}
@media (hover: hover) and (pointer: fine) {
  .site-footer:not(#opencampus .site-footer) .inner .bottom .page-top:where(:-moz-any-link, :enabled, summary):hover::before {
    background-color: #fff;
  }
  .site-footer:not(#opencampus .site-footer) .inner .bottom .page-top:where(:any-link, :enabled, summary):hover::before {
    background-color: #fff;
  }
  .site-footer:not(#opencampus .site-footer) .inner .bottom .page-top:where(:-moz-any-link, :enabled, summary):hover::after {
    background-color: var(--color-main);
  }
  .site-footer:not(#opencampus .site-footer) .inner .bottom .page-top:where(:any-link, :enabled, summary):hover::after {
    background-color: var(--color-main);
  }
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  .site-footer:not(#opencampus .site-footer) .inner .bottom .page-top {
    order: 1;
  }
}
.site-footer:not(#opencampus .site-footer) .inner .bottom .page-top::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 1.8rem;
  z-index: 2;
  translate: 0 -50%;
  width: 0.8rem;
  aspect-ratio: 4/9;
  -webkit-mask: url(/assets/images/common/icon-arrow05.svg) no-repeat center/contain;
          mask: url(/assets/images/common/icon-arrow05.svg) no-repeat center/contain;
  background-color: var(--color-main);
  transform: rotate(180deg);
  transition: background-color 0.2s ease;
}
.site-footer:not(#opencampus .site-footer) .inner .bottom .page-top::after {
  content: "";
  display: grid;
  place-content: center;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid var(--color-main);
  background-color: #fff;
  transition: background-color 0.2s ease;
}

#opencampus .site-footer {
  position: relative;
  display: grid;
  grid-template-columns: auto auto;
  align-items: flex-end;
  justify-content: space-between;
  padding: 6.5rem calc(50% - 55rem) 8rem;
  background-color: var(--color-font);
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #opencampus .site-footer {
    grid-template-columns: auto;
    align-items: initial;
    padding: 8.6rem 2rem 5.8rem;
  }
}
#opencampus .site-footer :where(p, a, .copy) {
  color: #fff;
}
#opencampus .site-footer .logo {
  display: flex;
  align-items: center;
  gap: 2.1rem 1.8rem;
  font-size: 1.3rem;
  letter-spacing: 0.12em;
}
#opencampus .site-footer .logo:focus {
  opacity: 0.75;
}
@media (hover: hover) and (pointer: fine) {
  #opencampus .site-footer .logo:where(:-moz-any-link, :enabled, summary):hover {
    opacity: 0.75;
  }
  #opencampus .site-footer .logo:where(:any-link, :enabled, summary):hover {
    opacity: 0.75;
  }
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #opencampus .site-footer .logo {
    flex-direction: column;
    align-items: initial;
  }
}
#opencampus .site-footer .logo img {
  width: 21rem;
}
#opencampus .site-footer .contact {
  grid-row: 2;
  margin-top: 4rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #opencampus .site-footer .contact {
    margin-top: 5.3rem;
  }
}
#opencampus .site-footer .contact p {
  font-size: 1.6rem;
  line-height: 1.5;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #opencampus .site-footer .contact p {
    font-size: 1.4rem;
  }
}
#opencampus .site-footer .contact p + p {
  margin-top: 1.7rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #opencampus .site-footer .contact p + p {
    margin-top: 2.4rem;
  }
}
#opencampus .site-footer .contact p a:focus {
  text-decoration: underline;
}
@media (hover: hover) and (pointer: fine) {
  #opencampus .site-footer .contact p a:where(:-moz-any-link, :enabled, summary):hover {
    text-decoration: underline;
  }
  #opencampus .site-footer .contact p a:where(:any-link, :enabled, summary):hover {
    text-decoration: underline;
  }
}
#opencampus .site-footer .other {
  grid-column: 2;
  grid-row: 1/span 3;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #opencampus .site-footer .other {
    grid-column: 1;
    grid-row: initial;
  }
}
#opencampus .site-footer .other .official {
  display: grid;
  grid-template-columns: auto 1.6rem;
  align-items: center;
  justify-content: flex-end;
  -moz-column-gap: 0.5rem;
       column-gap: 0.5rem;
  font-size: 1.6rem;
  line-height: 1.5;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #opencampus .site-footer .other .official {
    justify-content: flex-start;
    margin-top: 14.3rem;
  }
}
#opencampus .site-footer .other .official:focus {
  text-decoration: underline;
}
@media (hover: hover) and (pointer: fine) {
  #opencampus .site-footer .other .official:where(:-moz-any-link, :enabled, summary):hover {
    text-decoration: underline;
  }
  #opencampus .site-footer .other .official:where(:any-link, :enabled, summary):hover {
    text-decoration: underline;
  }
}
#opencampus .site-footer .other .official::after {
  content: "";
  aspect-ratio: 16/14;
  background: url(../../assets/images/common/icon-tab.svg) no-repeat center/contain;
}
#opencampus .site-footer .other .copy {
  display: inline-block;
  grid-row: 3;
  margin-top: 3.2rem;
  font-family: var(--font-poppins);
  font-size: 1rem;
  font-weight: 400;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #opencampus .site-footer .other .copy {
    margin-top: 2.7rem;
  }
}
#opencampus .site-footer .page-top {
  position: absolute;
  top: 15.7rem;
  right: 4rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #opencampus .site-footer .page-top {
    top: 38.9rem;
    right: 1.3rem;
  }
}
#opencampus .site-footer .page-top a {
  display: block;
  width: 5.8rem;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid #d9d9d9;
  background-color: #fff;
}
#opencampus .site-footer .page-top a:focus {
  transform: scale(1.2);
}
@media (hover: hover) and (pointer: fine) {
  #opencampus .site-footer .page-top a:where(:-moz-any-link, :enabled, summary):hover {
    transform: scale(1.2);
  }
  #opencampus .site-footer .page-top a:where(:any-link, :enabled, summary):hover {
    transform: scale(1.2);
  }
}
#opencampus .site-footer .page-top a::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 0.8rem;
  aspect-ratio: 1;
  border-top: 2px solid var(--color-font);
  border-right: 2px solid var(--color-font);
  transform: rotate(-45deg);
}

#top main figure {
  border-radius: 0.5rem;
  overflow: hidden;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #top main figure {
    border-radius: 0.3rem;
  }
}
#top main > .fv {
  position: relative;
  z-index: 1;
  display: grid;
  align-items: flex-end;
  height: calc(100lvh - var(--header-hight));
  padding: 0 0 9rem 6.4rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #top main > .fv {
    grid-template-rows: 1fr auto;
    height: 62rem;
    padding: 4.5rem 2rem 20rem;
    place-content: initial;
  }
}
#top main > .fv video {
  position: absolute;
  z-index: -2;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  -o-object-fit: cover;
     object-fit: cover;
}
#top main > .fv hgroup {
  text-shadow: 0 0 0.6rem rgba(83, 91, 94, 0.3);
  color: #fff;
}
#top main > .fv hgroup h1 {
  font-size: 5.6rem;
  line-height: 1.2;
  letter-spacing: 0.12em;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #top main > .fv hgroup h1 {
    white-space: nowrap;
    font-size: 2.6rem;
    line-height: 1.3;
  }
}
#top main > .fv hgroup p {
  margin-top: 1.7rem;
  font-size: 2.8rem;
  line-height: 1.4;
  letter-spacing: 0.12em;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #top main > .fv hgroup p {
    margin-top: 0.9rem;
    font-size: 1.4rem;
    line-height: 1.1;
  }
}
#top main > .fv .splide {
  position: absolute;
  bottom: 8rem;
  right: 3.3rem;
  width: 28rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #top main > .fv .splide {
    bottom: 2.4rem;
    right: initial;
    left: 50%;
    translate: -50% 0;
    margin: 2.8rem auto 0;
  }
}
#top main > .fv .splide .splide__arrows {
  height: 100%;
}
#top main > .fv .splide .splide__arrows .splide__arrow {
  top: 4.4rem;
  transform: initial;
  width: 3.6rem;
  height: 3.6rem;
  opacity: 1;
  border: 1px solid var(--color-font);
  background-color: var(--color-main);
  transition: background-color 0.2s ease;
}
@media (any-hover: hover) {
  #top main > .fv .splide .splide__arrows .splide__arrow:hover {
    opacity: 0.5;
  }
}
#top main > .fv .splide .splide__arrows .splide__arrow::before {
  content: "";
  position: absolute;
  z-index: 2;
  width: 1.2rem;
  aspect-ratio: 12/6;
  background: url(/assets/images/common/icon-arrow02.svg) no-repeat center/contain;
}
#top main > .fv .splide .splide__arrows .splide__arrow--prev {
  left: -1.8rem;
}
#top main > .fv .splide .splide__arrows .splide__arrow--prev::before {
  transform: rotate(-180deg);
}
#top main > .fv .splide .splide__arrows .splide__arrow--next {
  right: -1.8rem;
}
#top main > .fv .splide .splide__arrows .splide__arrow svg {
  display: none;
}
#top main > .fv .splide .splide__pagination {
  position: initial;
  margin-top: 1rem;
}
#top main > .fv .splide .splide__pagination__page {
  background-color: #fff;
  opacity: initial;
  width: 0.8rem;
  height: 0.8rem;
  margin: 0 0.4rem;
}
#top main > .fv .splide .splide__pagination__page.is-active {
  transform: initial;
  background-color: #ffdd00;
}
#top main > .about {
  padding: 16.9rem var(--content-padding-base) 5rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #top main > .about {
    padding-block: 10.4rem 0;
  }
}
#top main > .about figure {
  border-radius: 0.5rem;
  overflow: hidden;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #top main > .about figure {
    border-radius: 0.3rem;
  }
}
#top main > .about figure img {
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
#top main > .about hgroup {
  display: grid;
  grid-template-columns: 1fr 35rem;
  gap: 4rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #top main > .about hgroup {
    grid-template-columns: 1fr;
  }
}
#top main > .about hgroup h2 {
  font-size: 4.2rem;
  line-height: 1.4;
  letter-spacing: 0.04em;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #top main > .about hgroup h2 {
    font-size: 2.4rem;
  }
}
#top main > .about hgroup h2 span {
  display: block;
}
#top main > .about hgroup h2 span.sub {
  margin-bottom: 2rem;
  color: var(--color-main);
  font-size: 1.3rem;
}
#top main > .about hgroup h2 span.main:last-of-type {
  padding-left: 12.4rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #top main > .about hgroup h2 span.main:last-of-type {
    padding-left: initial;
  }
}
#top main > .about .inner {
  display: grid;
  grid-template-columns: 44.7rem 1fr;
  -moz-column-gap: 4.8rem;
       column-gap: 4.8rem;
  margin-top: 9rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #top main > .about .inner {
    grid-template-columns: 1fr;
    margin-top: 4rem;
  }
}
#top main > .about figure {
  position: relative;
  z-index: 2;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #top main > .about figure {
    grid-row: 2;
    margin-top: 4rem;
  }
}
#top main > .about .body {
  position: relative;
}
#top main > .about .body::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: 0;
  left: -200%;
  width: 300%;
  height: 100%;
  background: linear-gradient(135deg, transparent 0, transparent 25%, #fff 50%, #fff 75%, #fff 100%);
  transition: translate 4.5s 0.15s ease;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #top main > .about .body::before {
    background: linear-gradient(125deg, transparent 0, transparent 25%, #fff 50%, #fff 75%, #fff 100%);
  }
}
#top main > .about .body p {
  font-size: 1.8rem;
  line-height: 2.5;
  letter-spacing: 0.04em;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #top main > .about .body p {
    font-size: 1.4rem;
  }
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #top main > .about .body p + p {
    margin-top: 2.4rem;
  }
}
#top main > .about .body p strong {
  padding: 0.4rem;
  background-color: var(--color-main);
  color: #fff;
  font-weight: 400;
}
#top main > .about .body.is-active::before {
  translate: 120% 0;
}
#top main > .pickup {
  padding: 15rem 0 0 8rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #top main > .pickup {
    padding: 18.6rem 2rem 0;
  }
}
#top main > .pickup h2 {
  font-family: var(--font-lora);
  color: var(--color-main);
  font-size: 4rem;
}
#top main > .pickup .content {
  margin-top: 4rem;
  overflow: hidden;
}
#top main > .pickup .content ul {
  display: flex;
  -moz-column-gap: 3.2rem;
       column-gap: 3.2rem;
  padding: 0 4rem 4.3rem 0;
  overflow-x: auto;
}
#top main > .pickup .content ul li {
  flex-shrink: 0;
  width: 34.7rem;
}
#top main > .pickup .content ul li a {
  color: var(--color-main);
}
@media (any-hover: hover) {
  #top main > .pickup .content ul li a:hover figure img {
    transform: scale(1.05);
  }
}
#top main > .pickup .content ul li figure {
  border-radius: 0.5rem;
  overflow: hidden;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #top main > .pickup .content ul li figure {
    border-radius: 0.3rem;
  }
}
#top main > .pickup .content ul li figure {
  aspect-ratio: 300/200;
}
#top main > .pickup .content ul li figure img {
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transition: transform 0.4s ease-out;
}
#top main > .pickup .content ul li h3 {
  margin-block: 2rem 1.6rem;
  font-size: 1.8rem;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.06em;
}
#top main > .pickup .content ul li p {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 1.6rem;
  line-height: 1.7;
  letter-spacing: 0.06em;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #top main > .pickup .content ul li p {
    font-size: 1.4rem;
  }
}
#top main > .pickup .content ul li .labels {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-top: 1.8rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #top main > .pickup .content ul li .labels {
    margin-top: 0.8rem;
  }
}
#top main > .pickup .content ul li .labels span {
  border-radius: calc(infinity * 1px);
  border: 1px solid var(--color-main);
  padding: 0.4rem 1rem;
  background-color: #fff;
  color: var(--color-main);
  font-size: 1.4rem;
}
#top main .number {
  position: relative;
  z-index: 2;
  margin-top: 10rem;
  padding-block: 6rem 8rem;
  padding-inline: var(--content-padding-base);
}
#top main .number::before {
  content: "";
  position: absolute;
  top: 0;
  left: 15.6rem;
  z-index: -1;
  width: calc(100% - 15.6rem);
  height: 100%;
  background-color: var(--color-base);
  border-radius: 0.5rem;
  overflow: hidden;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #top main .number::before {
    border-radius: 0.3rem;
  }
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #top main .number::before {
    left: 2rem;
    width: calc(100% - 2rem);
    border-radius: 1.8rem 0 0 1.8rem;
  }
}
#top main .number .inner {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 78rem;
  align-items: flex-start;
  gap: 10.4rem 13.3rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #top main .number .inner {
    display: block;
    padding-left: 2.8rem;
  }
}
#top main .number h2 {
  writing-mode: vertical-rl;
  font-size: 5.2rem;
  line-height: 1.1;
  letter-spacing: 0.12em;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #top main .number h2 {
    writing-mode: initial;
    font-size: 3.4rem;
    line-height: 1.5;
  }
}
#top main .number h2 span {
  position: relative;
  padding: 0.3rem;
  color: #fff;
}
#top main .number h2 span::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  background-color: var(--color-main);
  transition: height 0.5s ease;
}
#top main .number ul {
  grid-column: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 3rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #top main .number ul {
    flex-direction: column;
    margin-top: 3.2rem;
    gap: 2.5rem;
  }
}
#top main .number ul li {
  height: 30.6rem;
  box-shadow: 0rem 0rem 4rem rgba(0, 0, 0, 0.06);
  text-align: center;
  line-height: 1.6;
  letter-spacing: 0.15em;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #top main .number ul li {
    width: 29rem;
    height: initial;
  }
}
#top main .number ul li em {
  display: inline-block;
  font-style: initial;
  font-family: var(--font-lora);
  font-size: 8.9rem;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: initial;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #top main .number ul li em {
    font-size: 6rem;
  }
}
#top main .number ul li em span.slash {
  font-size: 6.8rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #top main .number ul li em span.slash {
    font-size: 4.6rem;
  }
}
#top main .number ul li:nth-of-type(1) {
  width: 54.7%;
  padding-top: 3.3rem;
  background: #fff url(/assets/images/top/number-icon01.svg) no-repeat top 13.9rem left 6.6rem/8.2rem auto;
  font-size: 2.5rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #top main .number ul li:nth-of-type(1) {
    width: 29rem;
    padding-block: 2.2rem 3.3rem;
    background-position: top 9.4rem left 5.6rem;
    background-size: 5.5rem auto;
    font-size: 1.7rem;
  }
}
#top main .number ul li:nth-of-type(1) em {
  display: block;
  padding: 3.2rem 0 0 10rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #top main .number ul li:nth-of-type(1) em {
    padding: 2rem 0 0 8.5rem;
  }
}
#top main .number ul li:nth-of-type(1) em span {
  font-size: 3.7rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #top main .number ul li:nth-of-type(1) em span {
    font-size: 2.5rem;
  }
}
#top main .number ul li:nth-of-type(2) {
  flex: 1;
  padding-block: 14.4rem 1.6rem;
  background: #fff url(/assets/images/top/number-icon02.svg) no-repeat center top 2.2rem/6.9rem auto;
  font-size: 2.5rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #top main .number ul li:nth-of-type(2) {
    background-size: 5.8rem auto;
  }
}
#top main .number ul li:nth-of-type(2) em {
  display: block;
  line-height: 1.1;
}
#top main .number ul li:nth-of-type(2) em span {
  padding-left: 1rem;
  font-size: 3.7rem;
}
#top main .number ul li:nth-of-type(2) > span {
  display: block;
  text-align: center;
  font-size: 1.2rem;
  line-height: 1;
  letter-spacing: 0.04em;
}
#top main .number ul li:nth-of-type(3) {
  flex: 1;
  padding-top: 15.3rem;
  background: #fff url(/assets/images/top/number-icon03.svg) no-repeat center top 2.8rem/6.9rem auto;
  font-size: 1.7rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #top main .number ul li:nth-of-type(3) {
    padding-bottom: 3rem;
    background-size: 6.2rem auto;
  }
}
#top main .number ul li:nth-of-type(3) em {
  padding-left: 1.5rem;
}
#top main .number ul li:nth-of-type(3) em span {
  padding-left: 1.2rem;
  font-size: 3.7rem;
}
#top main .number ul li:nth-of-type(4) {
  width: 54.7%;
  padding: 10.6rem 3.8rem 3.5rem;
  background: #fff url(/assets/images/top/number-icon04.svg) no-repeat top 6.4rem right 1.8rem/13.2rem auto;
  text-align: initial;
  font-size: 1.5rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #top main .number ul li:nth-of-type(4) {
    padding: 7.1rem 2.6rem 2.3rem;
    background-position: top 4.3rem right 1.2rem;
    background-size: 8.9rem auto;
    font-size: 1.1rem;
    width: 29rem;
  }
}
#top main .number ul li:nth-of-type(4) em {
  display: inline-flex;
  align-items: center;
  font-size: 9.7rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #top main .number ul li:nth-of-type(4) em {
    font-size: 6.5rem;
  }
}
#top main .number ul li:nth-of-type(4) > span {
  font-size: 2.6rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #top main .number ul li:nth-of-type(4) > span {
    font-size: 1.8rem;
  }
}
#top main .number .common-link {
  grid-column: 2;
  grid-row: 2;
  margin-left: 10.8rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #top main .number .common-link {
    width: 29rem;
    margin: 4rem 0;
  }
}
#top main > .links {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6.4rem 2rem;
  padding-inline: var(--content-padding-base);
  padding-top: 10.2rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #top main > .links {
    grid-template-columns: 1fr;
    padding-top: 12rem;
  }
}
@media (any-hover: hover) {
  #top main > .links article a:hover {
    color: var(--color-main);
  }
  #top main > .links article a:hover figure img {
    transform: scale(1.05);
  }
}
#top main > .links article a figure {
  border-radius: 0.5rem;
  overflow: hidden;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #top main > .links article a figure {
    border-radius: 0.3rem;
  }
}
#top main > .links article a figure {
  overflow: hidden;
  width: min(36.2rem, 100%);
  aspect-ratio: 362/240;
  margin-bottom: 1.9rem;
}
#top main > .links article a figure img {
  transition: transform 0.4s ease-out;
}
#top main > .links article a h2 {
  margin-bottom: 0.7rem;
  font-family: var(--font-shippori-mincho);
  font-size: 2rem;
  font-weight: 500;
  line-height: 1.7;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #top main > .links article a h2 {
    font-size: 1.9rem;
  }
}
#top main > .links article a p {
  font-family: var(--font-noto-sans);
  font-size: 1.4rem;
  line-height: 1.7;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #top main > .links article a p {
    font-size: 1.3rem;
  }
}
#top main > .links article a > span {
  display: grid;
  grid-template-columns: auto 4.4rem;
  align-items: center;
  -moz-column-gap: 0.7rem;
       column-gap: 0.7rem;
  width: -moz-fit-content;
  width: fit-content;
  margin: 4.4rem 0 0 auto;
  font-family: var(--font-lora);
  font-size: 1.8rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #top main > .links article a > span {
    grid-template-columns: auto 4.2rem;
    margin-top: 2.4rem;
    font-size: 1.7rem;
  }
}
#top main > .links article a > span .arrow {
  position: relative;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--color-main);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
#top main > .links article a > span .arrow img {
  width: 1.4rem;
  position: absolute;
  transition: transform 0.3s ease;
}
#top main > .links article a > span .arrow img:first-child {
  transform: translateX(0);
}
#top main > .links article a > span .arrow img:last-child {
  transform: translateX(-300%);
}
@media (any-hover: hover) {
  #top main > .links article a:hover > span .arrow img:first-child {
    transform: translateX(300%);
  }
  #top main > .links article a:hover > span .arrow img:last-child {
    transform: translateX(0);
  }
}
#top main > .links article:nth-of-type(1) a::before {
  background-image: url(/assets/images/top/pickup-img02.jpg);
}
#top main > .links article:nth-of-type(2) a::before {
  background-image: url(/assets/images/top/pickup-img01.jpg);
}
#top main > .links article:nth-of-type(3) a::before {
  background-image: url(/assets/images/top/pickup-img03.jpg);
}
#top main > .news {
  padding: 21rem var(--content-padding-base) 17.6rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #top main > .news {
    padding-block: 12rem;
  }
}
#top main > .news h2 {
  color: var(--color-main);
  font-family: var(--font-lora);
  font-size: 4rem;
}
#top main > .news .common-category-list {
  margin-top: 4rem;
}
#top main > .news .contents {
  margin-top: 4rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #top main > .news .contents {
    margin-top: 7.2rem;
  }
}
#top main > .news article {
  border-top: 1px solid #ddd;
}
#top main > .news article:last-of-type {
  border-bottom: 1px solid #ddd;
}
#top main > .news article a {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  row-gap: 1.6rem;
  padding-block: 2.4rem 3.2rem;
}
#top main > .news article a time {
  display: flex;
  align-items: center;
  color: #555;
  font-family: var(--font-lora);
  font-size: 1.3rem;
  letter-spacing: 0.14em;
}
#top main > .news article a time::after {
  content: "";
  grid-column: 2;
  grid-row: 1;
  width: 2rem;
  height: 1px;
  background-color: var(--color-font);
  margin-inline: 2rem 1.5rem;
}
#top main > .news article a .label {
  grid-column: 2;
  grid-row: 1;
  width: -moz-fit-content;
  width: fit-content;
  border-radius: calc(infinity * 1px);
  padding: 1rem 1.5rem;
  background-color: var(--color-main);
  color: #fff;
  font-size: 1.5rem;
  letter-spacing: -0.03em;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #top main > .news article a .label {
    padding: 0.8rem 1.3rem;
    font-size: 1.2rem;
  }
}
#top main > .news article a h3 {
  grid-column: 1/span 3;
  grid-row: 2;
  display: grid;
  grid-template-columns: 1.6rem 1fr;
  -moz-column-gap: 0.8rem;
       column-gap: 0.8rem;
  font-size: 1.6rem;
  line-height: 1.65;
  letter-spacing: 0.08em;
  transition: translate 0.3s ease;
}
#top main > .news article a h3::before {
  content: "";
  aspect-ratio: 1;
  background: url(/assets/images/common/icon-arrow03.svg) no-repeat center/contain;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #top main > .news article a h3::before {
    translate: 0 0.4rem;
  }
}
@media (any-hover: hover) {
  #top main > .news article a:hover h3 {
    translate: 0.5rem 0;
  }
}
#top main > .news .common-link {
  margin: 5.6rem auto 0;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #top main > .news .common-link {
    margin-top: 7.2rem;
  }
}
#top main > .cta-wrapper {
  padding: 12rem var(--content-padding-base);
  background-color: var(--color-base);
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #top main > .cta-wrapper {
    padding-block: 10rem;
  }
}
#top main > .cta-wrapper .inner {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 3rem 5rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #top main > .cta-wrapper .inner {
    grid-template-columns: 1fr;
  }
}
#top main > .cta-wrapper section {
  padding-block: 4rem;
}
#top main > .cta-wrapper section h2 {
  color: var(--color-main);
  font-size: 3.5rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #top main > .cta-wrapper section h2 {
    font-size: 2.1rem;
  }
}
#top main > .cta-wrapper section.contact {
  border-radius: 0.5rem;
  overflow: hidden;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #top main > .cta-wrapper section.contact {
    border-radius: 0.3rem;
  }
}
#top main > .cta-wrapper section.contact {
  border: 1px solid var(--color-main);
  background-color: #fff;
  padding-inline: 7.6rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #top main > .cta-wrapper section.contact {
    padding-inline: 3.2rem;
  }
}
#top main > .cta-wrapper section.contact .links {
  margin-top: 4rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #top main > .cta-wrapper section.contact .links {
    margin-top: 2rem;
  }
}
#top main > .cta-wrapper section.contact .links a {
  position: relative;
  display: block;
  border-radius: calc(infinity * 1px);
  border: 1px solid var(--color-main);
  background-color: var(--color-main);
  padding-block: 2.6rem;
  text-align: center;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #top main > .cta-wrapper section.contact .links a {
    padding-block: 1.6rem;
  }
}
#top main > .cta-wrapper section.contact .links a::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 3rem;
  translate: 0 -50%;
  width: 4rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background-color: #fff;
  transition: 0.2s ease;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #top main > .cta-wrapper section.contact .links a::before {
    left: 1.6rem;
    width: 2.8rem;
  }
}
#top main > .cta-wrapper section.contact .links a::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 4.1rem;
  translate: 0 -50%;
  width: 1.8rem;
  aspect-ratio: 1;
  background-color: var(--color-main);
  transition: 0.2s ease;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #top main > .cta-wrapper section.contact .links a::after {
    left: 2.4rem;
    width: 1.1rem;
  }
}
#top main > .cta-wrapper section.contact .links a + a {
  margin-top: 2rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #top main > .cta-wrapper section.contact .links a + a {
    margin-top: 1rem;
  }
}
#top main > .cta-wrapper section.contact .links a span {
  font-family: var(--font-noto-sans);
  color: #fff;
  font-size: 1.8rem;
  font-weight: 600;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #top main > .cta-wrapper section.contact .links a span {
    font-size: 1.3rem;
  }
}
#top main > .cta-wrapper section.contact .links a span::after {
  content: "→";
  display: inline-block;
  margin-left: 1rem;
}
#top main > .cta-wrapper section.contact .links a:nth-of-type(1)::after {
  -webkit-mask: url(/assets/images/common/icon-contact.svg) no-repeat center/contain;
          mask: url(/assets/images/common/icon-contact.svg) no-repeat center/contain;
}
#top main > .cta-wrapper section.contact .links a:nth-of-type(2)::after {
  -webkit-mask: url(/assets/images/common/icon-data.svg) no-repeat center/contain;
          mask: url(/assets/images/common/icon-data.svg) no-repeat center/contain;
}
@media (any-hover: hover) {
  #top main > .cta-wrapper section.contact .links a:hover {
    background-color: #fff;
  }
  #top main > .cta-wrapper section.contact .links a:hover::before {
    background-color: var(--color-main);
    transform: scale(1.5);
  }
  #top main > .cta-wrapper section.contact .links a:hover::after {
    background-color: #fff;
    transform: scale(1.5);
  }
  #top main > .cta-wrapper section.contact .links a:hover span {
    color: var(--color-main);
  }
}
#top main > .cta-wrapper section.access {
  padding-inline: 5rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #top main > .cta-wrapper section.access {
    padding: 4rem 2rem 0;
  }
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #top main > .cta-wrapper section.access h2 {
    font-size: 3.5rem;
  }
}
#top main > .cta-wrapper section.access p {
  margin-top: 6rem;
  font-family: var(--font-noto-sans);
  font-size: 1.6rem;
  line-height: 1.8;
  letter-spacing: 0.03em;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #top main > .cta-wrapper section.access p {
    margin-top: 5.2rem;
  }
}
#top main > .cta-wrapper section.access p a {
  margin-left: 0.6rem;
  color: var(--color-main);
  text-decoration: underline;
}
@media (any-hover: hover) {
  #top main > .cta-wrapper section.access p a:hover {
    text-decoration: initial;
  }
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #top main > .cta-wrapper section.access p a {
    margin-left: initial;
  }
}
#top main > .cta-wrapper section.access p + p {
  margin-top: 3rem;
}

#about main .fv {
  background-image: url(/assets/images/about/fv.jpg);
}
#about main .common-intro {
  padding-block: 11rem 9rem;
}
#about main .common-intro .body h2 {
  margin-bottom: 2.8rem;
}
#about main .common-intro .body h3 {
  font-family: var(--font-biz-mincho);
  font-size: 2.8rem;
  letter-spacing: 0.12em;
  line-height: 1.6;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #about main .common-intro .body h3 {
    font-size: 2rem;
  }
}
#about main .common-intro .body h3 span {
  display: block;
  font-size: var(--font-size-md);
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #about main .common-intro .body h3 span {
    font-size: 1.4rem;
  }
}
#about main .common-intro .body p {
  margin-top: 2.4rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #about main .common-intro figure {
    width: 24rem;
    margin-inline: auto;
  }
}
#about main :where(.common-inner) > section:not(.common-intro):nth-of-type(2n - 1) {
  padding-block: 13rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #about main :where(.common-inner) > section:not(.common-intro):nth-of-type(2n - 1) {
    padding-block: 8rem;
  }
}
#about main :where(.common-inner) > section:nth-of-type(2n) {
  -o-border-image: linear-gradient(var(--color-base) 0 0) 0/0/0 100vw;
     border-image: linear-gradient(var(--color-base) 0 0) fill 0/0/0 100vw;
  padding-block: 10rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #about main :where(.common-inner) > section:nth-of-type(2n) {
    padding-block: 8rem;
  }
}
#about main :where(.common-inner) > section ul:not(.sub-list) > li {
  font-family: var(--font-biz-mincho);
  font-size: var(--font-size-md);
}
#about main :where(.common-inner) > section ul:not(.sub-list) > li h3 {
  grid-column: 2;
  color: var(--color-main);
  font-family: var(--font-biz-mincho);
  font-size: var(--font-size-md);
}
#about main :where(.common-inner) > section ul:not(.sub-list) > li p {
  grid-column: 2;
  font-size: var(--font-size-base);
}
#about main :where(.common-inner) > section .inner > ul li + li {
  margin-top: 2.4rem;
}
#about main :where(.common-inner) > section .accordion .wrapper {
  display: grid;
  transition: max-height 0.5s ease-in-out;
  overflow: hidden;
}
#about main :where(.common-inner) > section .accordion button {
  grid-template-columns: 1fr 1rem;
  width: 28.5rem;
  height: 4.8rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #about main :where(.common-inner) > section .accordion button {
    width: 24rem;
  }
}
#about main :where(.common-inner) > section .accordion button::before {
  content: "続きを見る";
  font-family: var(--font-biz-mincho);
  font-size: 1.6rem;
  letter-spacing: 0.1em;
}
#about main :where(.common-inner) > section .accordion button::after {
  display: none;
}
#about main :where(.common-inner) > section .accordion button span {
  position: relative;
  width: 1.2rem;
  height: 1px;
  border-radius: 1px;
  background-color: var(--color-main);
  transition: color 0.2s ease;
}
#about main :where(.common-inner) > section .accordion button span::before {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 100%;
  height: 100%;
  background-color: var(--color-main);
  transform: rotate(90deg);
  transition: opacity 0.2s ease, color 0.2s ease;
}
@media (any-hover: hover) {
  #about main :where(.common-inner) > section .accordion button:hover span,
  #about main :where(.common-inner) > section .accordion button:hover span::before {
    background-color: #fff;
  }
}
#about main :where(.common-inner) > section .accordion.is-open button::before {
  content: "閉じる";
}
#about main :where(.common-inner) > section .accordion.is-open span::before {
  opacity: 0;
}
#about main .greeting h2 {
  margin-bottom: 8rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #about main .greeting h2 {
    margin-bottom: 4rem;
  }
}
#about main .greeting section {
  display: grid;
  -moz-column-gap: 5.7rem;
       column-gap: 5.7rem;
}
#about main .greeting section + section {
  margin-top: 7rem;
}
#about main .greeting section h3 {
  grid-column: 1/span 2;
  grid-row: 1;
  margin-bottom: 4rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #about main .greeting section h3 {
    grid-column: 1;
  }
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #about main .greeting section figure {
    grid-row: 2;
    width: 24rem;
    margin-inline: auto;
  }
}
#about main .greeting section figure img {
  border-radius: 0.5rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #about main .greeting section .body {
    margin-top: 2.4rem;
  }
}
#about main .greeting section .body h4 {
  margin-bottom: 2.4rem;
  color: var(--color-main);
  font-size: 2.4rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #about main .greeting section .body h4 {
    font-size: 1.8rem;
    letter-spacing: 0.02em;
  }
}
#about main .greeting section .body p + p {
  margin-top: 1.5em;
}
#about main .greeting section .body p.name {
  margin-top: 2.4rem;
  text-align: end;
}
#about main .greeting section:nth-of-type(1) {
  grid-template-columns: 1fr 29.2rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #about main .greeting section:nth-of-type(1) {
    grid-template-columns: 1fr;
  }
}
#about main .greeting section:nth-of-type(1) .body {
  grid-column: 1;
  grid-row: 2;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #about main .greeting section:nth-of-type(1) .body {
    grid-row: 3;
  }
}
#about main .greeting section:nth-of-type(1) figure {
  grid-column: 2;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #about main .greeting section:nth-of-type(1) figure {
    grid-column: 1;
  }
}
#about main .greeting section:nth-of-type(2) {
  grid-template-columns: 29.2rem 1fr;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #about main .greeting section:nth-of-type(2) {
    grid-template-columns: 1fr;
  }
}
#about main .enrollment .common-table {
  margin-top: 2.4rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #about main .enrollment .common-table {
    width: 100%;
  }
}
#about main .enrollment .common-table thead tr,
#about main .enrollment .common-table tbody tr {
  grid-template-columns: repeat(4, 14rem);
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #about main .enrollment .common-table thead tr,
  #about main .enrollment .common-table tbody tr {
    grid-template-columns: repeat(4, 1fr);
  }
}
#about main .enrollment .common-table thead th {
  color: var(--color-main);
}
#about main .enrollment .common-table tbody {
  translate: 0 -1px;
}
#about main .enrollment .common-table tbody tr:last-of-type :where(th, td) {
  color: var(--color-main);
}
#about main .enrollment .common-table th,
#about main .enrollment .common-table td {
  padding-inline: 2rem;
  text-align: center;
  font-size: 1.6rem;
}
#about main .enrollment .common-table th {
  background-color: var(--color-base);
}
#about main .history .accordion .wrapper {
  position: relative;
  max-height: 31.7rem;
}
#about main .history .accordion .wrapper::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 4.8rem;
  background-image: linear-gradient(to top, rgba(255, 255, 255, 0.8), transparent);
  pointer-events: none;
}
#about main .history .accordion button {
  margin: 2.8rem auto 0;
}
#about main .history .accordion.is-open .wrapper {
  max-height: 300rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #about main .history .accordion.is-open .wrapper {
    max-height: 350rem;
  }
}
#about main .history .accordion.is-open .wrapper::after {
  background-image: initial;
}
#about main .history .common-table tbody {
  display: grid;
  grid-template-columns: auto 1fr;
}
#about main .history .common-table tbody tr {
  display: grid;
  grid-template-columns: subgrid;
  grid-column: span 2;
}
#about main .history .common-table tbody tr th {
  padding: 1.2rem 3rem;
  text-align: end;
  font-size: var(--font-size-base);
  line-height: 1.7;
  letter-spacing: initial;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #about main .history .common-table tbody tr th {
    padding: 0.8rem 1rem;
  }
}
#about main .history .common-table tbody tr td {
  padding: 1.2rem 2.4rem;
  line-height: 1.7;
  letter-spacing: initial;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #about main .history .common-table tbody tr td {
    padding: 0.8rem 1rem;
  }
}
#about main .information dl + dl {
  margin-top: 4.8rem;
}
#about main .information dl dt {
  margin-bottom: 1.2rem;
  font-family: var(--font-biz-mincho);
  font-size: var(--font-size-md);
  font-weight: 400;
  line-height: 1.3;
}
#about main .information dl dd.wrapper {
  max-height: 3.2rem;
}
#about main .information dl dd a {
  width: -moz-fit-content;
  width: fit-content;
  text-decoration: underline;
  text-underline-offset: 0.4rem;
  color: var(--color-main);
}
@media (any-hover: hover) {
  #about main .information dl dd a:hover {
    text-decoration: initial;
  }
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #about main .information dl dd a {
    letter-spacing: 0.02em;
  }
}
#about main .information dl dd > ul > li {
  font-family: var(--font-noto-sans);
  font-size: var(--font-size-base);
}
#about main .information dl dd > ul > li + li {
  margin-top: 1.6rem;
}
#about main .information dl dd > ul > li::before {
  translate: 0 -0.1rem;
}
#about main .information dl dd > ul > li .sub-list {
  grid-column: 2;
  margin-top: 0.8rem;
}
#about main .information dl dd > ul > li .sub-list li {
  display: grid;
  grid-template-columns: 1.8rem 1fr;
  -moz-column-gap: 1rem;
       column-gap: 1rem;
  margin-left: -1.3rem;
}
#about main .information dl dd > ul > li .sub-list li + li {
  margin-top: 0.8rem;
}
#about main .information dl dd > ul > li .sub-list li::before {
  content: "";
  height: 0.1rem;
  background-color: var(--color-font);
  translate: 0 1.2rem;
}
#about main .information dl button {
  margin-top: 1.6rem;
}
#about main .information dl.is-open .wrapper {
  max-height: 90rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #about main .information dl.is-open .wrapper {
    max-height: 100rem;
  }
}

#access main .fv {
  height: 18.7rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #access main .fv {
    height: 13rem;
  }
}
#access main .fv h1 {
  color: var(--color-main);
}
#access main .access {
  padding-block: 10.1rem 16.5rem;
  -o-border-image: linear-gradient(var(--color-base) 0 0) 0/0/0 100vw;
     border-image: linear-gradient(var(--color-base) 0 0) fill 0/0/0 100vw;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #access main .access {
    padding-block: 8rem 10rem;
  }
}
#access main .access figure {
  margin-top: 2.9rem;
}
#access main .access .location {
  padding-top: 10.4rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #access main .access .location {
    padding-top: 8rem;
  }
}
#access main .access .location h3 {
  margin-bottom: 1.1rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #access main .access .location h3 {
    margin-bottom: 0.4rem;
  }
}
#access main .access .location .inner {
  display: grid;
  grid-template-columns: auto 1fr 20.3rem;
  align-items: center;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #access main .access .location .inner {
    grid-template-columns: 1fr;
  }
}
#access main .access .location .inner dl {
  display: grid;
  grid-template-columns: subgrid;
  grid-column: span 3;
  border-bottom: 1px solid var(--color-line);
  padding-block: 3.5rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #access main .access .location .inner dl {
    grid-template-columns: 1fr 12rem;
    grid-column: initial;
    align-items: center;
    -moz-column-gap: 1.6rem;
         column-gap: 1.6rem;
    padding-block: 2.4rem;
  }
}
#access main .access .location .inner dl dt {
  padding-inline: 4rem 8.4rem;
  color: var(--color-main);
  font-size: 1.6rem;
  font-weight: 400;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #access main .access .location .inner dl dt {
    padding-inline: initial;
  }
}
#access main .access .location .inner dl dd {
  width: 100%;
  padding-right: 5.6rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #access main .access .location .inner dl dd {
    padding-right: initial;
  }
}
#access main .access .location .inner dl dd:not(.link) {
  font-size: 1.6rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #access main .access .location .inner dl dd:not(.link) {
    grid-column: 1;
    grid-row: 2;
    font-size: 1.4rem;
  }
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #access main .access .location .inner dl dd.link {
    grid-column: 2;
    grid-row: 1/span 3;
  }
}
#access main .access .location .inner dl dd.link a {
  display: grid;
  grid-template-columns: auto 1rem;
  justify-content: center;
  align-items: center;
  -moz-column-gap: 1.4rem;
       column-gap: 1.4rem;
  height: 4.6rem;
  border-radius: calc(infinity * 1px);
  border: 1px solid var(--color-font);
  font-size: 1.5rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #access main .access .location .inner dl dd.link a {
    -moz-column-gap: 1rem;
         column-gap: 1rem;
    height: 4rem;
    font-size: 1.4rem;
  }
}
#access main .access .location .inner dl dd.link a::after {
  content: "";
  width: 1rem;
  aspect-ratio: 1;
  -webkit-mask: url(/assets/images/common/icon-arrow-diagonal.svg) no-repeat center/contain;
          mask: url(/assets/images/common/icon-arrow-diagonal.svg) no-repeat center/contain;
  background-color: var(--color-font);
  transition: background-color 0.2s ease;
}
@media (any-hover: hover) {
  #access main .access .location .inner dl dd.link a:hover {
    border-color: var(--color-main);
    background-color: var(--color-main);
    color: #fff;
  }
  #access main .access .location .inner dl dd.link a:hover::after {
    background-color: #fff;
  }
}
#access main .campus {
  padding-block: 16rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #access main .campus {
    padding-block: 8rem;
  }
}
#access main .campus > section + section {
  padding-top: 10.4rem;
}
#access main .campus > section header p {
  margin-bottom: 3.6rem;
}
#access main .campus > section .images {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.4rem 1.2rem;
  margin-top: 2.4rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #access main .campus > section .images {
    grid-template-columns: 1fr;
    margin-top: 3.2rem;
  }
}
#access main .campus > section .images section h3 {
  margin-top: 0.8rem;
  color: var(--color-main);
  font-size: 2rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #access main .campus > section .images section h3 {
    margin-top: 0.4rem;
    font-size: 1.6rem;
  }
}
#access main .campus > section .images section p {
  font-size: 1.3rem;
}
#access main .campus > section.building01 {
  padding-top: 5.6rem;
}
#access main .campus > section.building02 figure {
  width: min(46.2rem, 100%);
}
#campuslife main .fv {
  background-image: url(/assets/images/campuslife/fv.jpg);
}
#campuslife main > :where(.common-inner) > :where(section) {
  padding-block: 12rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #campuslife main > :where(.common-inner) > :where(section) {
    padding-block: 8rem;
  }
}
#campuslife main > :where(.common-inner) > :where(section):nth-of-type(2n) {
  -o-border-image: linear-gradient(var(--color-base) 0 0) 0/0/0 100vw;
     border-image: linear-gradient(var(--color-base) 0 0) fill 0/0/0 100vw;
}
#campuslife main .intro {
  font-family: var(--font-biz-mincho);
  font-size: 1.5rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #campuslife main .intro {
    font-size: 1.4rem;
  }
}
#campuslife main .common-page-nav {
  margin-top: 8.8rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #campuslife main .common-page-nav {
    margin-top: 8rem;
  }
}
#campuslife main .events .photos figure button {
  display: block;
  width: 100%;
  cursor: zoom-in;
}
@media (any-hover: hover) {
  #campuslife main .events .photos figure button:hover img {
    transform: scale(1.05);
  }
}
#campuslife main .events .photos figure button img {
  transition: transform 0.4s ease-out;
}
#campuslife main .events .schedule {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: 5.4rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #campuslife main .events .schedule {
    grid-template-columns: repeat(2, 1fr);
    gap: 4rem 1rem;
    margin-top: 4rem;
  }
}
#campuslife main .events .schedule .quarter h3 {
  padding-block: 0.4rem;
  background-color: var(--color-main);
  color: #fff;
  text-align: center;
  font-size: 2rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #campuslife main .events .schedule .quarter h3 {
    padding: 0.8rem;
    font-size: 1.8rem;
    line-height: 1.2;
  }
}
#campuslife main .events .schedule .quarter ul {
  padding: 1.1rem 2.4rem 0;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #campuslife main .events .schedule .quarter ul {
    padding: 1rem 0 0;
  }
}
#campuslife main .events .schedule .quarter ul li {
  position: relative;
  text-indent: -1em;
  padding-left: 1em;
  white-space: nowrap;
  font-size: 1.3rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #campuslife main .events .schedule .quarter ul li {
    white-space: initial;
  }
}
#campuslife main .events .schedule .quarter ul li::before {
  content: "・";
}
#campuslife main .events .photos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.6rem;
  margin-top: 3.6rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #campuslife main .events .photos {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }
}
#campuslife main .events .photos figure {
  aspect-ratio: 3/2;
  overflow: hidden;
}
#campuslife main .events .photos figure button {
  height: 100%;
}
#campuslife main .events .photos figure button img {
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
#campuslife main .data ol {
  display: grid;
  grid-template-columns: 40rem auto;
  gap: 5.6rem 1.6rem;
  border: 1px solid var(--color-line);
  padding: 4rem 3rem 5rem;
  background-color: #fff;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #campuslife main .data ol {
    grid-template-columns: 1fr;
    padding: 4rem 2rem;
  }
}
#campuslife main .data ol dl dt:not(:nth-of-type(4)) {
  width: min(36.3rem, 100%);
}
#campuslife main .data ol li:nth-of-type(1) {
  grid-column: 1/span 2;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #campuslife main .data ol li:nth-of-type(1) {
    grid-column: 1;
  }
}
#campuslife main .data ol li:nth-of-type(1) dl {
  display: flex;
  gap: 2.4rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #campuslife main .data ol li:nth-of-type(1) dl {
    flex-direction: column;
  }
}
#campuslife main .data ol li:nth-of-type(1) dl dd {
  width: min(48.8rem, 100%);
}
#campuslife main .data ol li:nth-of-type(2) dl {
  display: grid;
  height: 100%;
}
#campuslife main .data ol li:nth-of-type(2) dl dt {
  margin-bottom: 4rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #campuslife main .data ol li:nth-of-type(2) dl dt {
    margin-bottom: 2.4rem;
  }
}
#campuslife main .data ol li:nth-of-type(2) dl dd {
  width: 39.8rem;
  margin-top: auto;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #campuslife main .data ol li:nth-of-type(2) dl dd {
    width: 80%;
    margin: 0 auto;
  }
}
#campuslife main .data ol li:nth-of-type(3) dl dt {
  margin-bottom: 4rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #campuslife main .data ol li:nth-of-type(3) dl dt {
    margin-bottom: 2.4rem;
  }
}
#campuslife main .data ol li:nth-of-type(3) dl dd {
  width: 46.8rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #campuslife main .data ol li:nth-of-type(3) dl dd {
    width: 86%;
  }
}
#campuslife main .data ol li:nth-of-type(4) {
  grid-column: 1/span 2;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #campuslife main .data ol li:nth-of-type(4) {
    grid-column: 1;
  }
}
#campuslife main .data ol li:nth-of-type(4) dl dt {
  width: min(38rem, 100%);
  margin-bottom: 3.2rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #campuslife main .data ol li:nth-of-type(4) dl dt {
    margin-bottom: 2.4rem;
  }
}
#campuslife main .voices .lead {
  margin-top: 3.2rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #campuslife main .voices .lead {
    margin-top: 2.4rem;
  }
}
#campuslife main .voices .common-archive-list {
  gap: 6rem 3.2rem;
  margin-top: 5.6rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #campuslife main .voices .common-archive-list {
    grid-template-columns: 1fr;
    margin-top: 4rem;
  }
}
#campuslife main .voices .common-archive-list li {
  list-style: none;
}
#campuslife main .voices .common-archive-list li article {
  position: relative;
  display: grid;
  grid-template-rows: 19.3rem auto 1fr;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #campuslife main .voices .common-archive-list li article {
    grid-template-rows: auto auto 1fr;
  }
}
#campuslife main .voices .common-archive-list li article::before {
  content: attr(data-label);
  position: absolute;
  top: 0.4rem;
  left: 0.4rem;
  z-index: 2;
  display: grid;
  place-content: center;
  height: 2.6rem;
  border-radius: calc(infinity * 1px);
  padding-inline: 1.2rem;
  pointer-events: none;
  color: #fff;
  font-family: var(--font-biz-mincho);
  font-size: 1.3rem;
  line-height: 1;
}
#campuslife main .voices .common-archive-list li article[data-label=在学生]::before {
  background-color: #3dc0fe;
}
#campuslife main .voices .common-archive-list li article a {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 3;
}
#campuslife main .voices .common-archive-list li article a figure {
  aspect-ratio: 290/193;
  border-radius: 0.5rem;
  overflow: hidden;
}
#campuslife main .voices .common-archive-list li article a figure img {
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transition: transform 0.4s ease-out;
}
#campuslife main .voices .common-archive-list li article a h3 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  min-height: 4.7rem;
  margin-block: 1.6rem;
  color: var(--color-main);
  font-family: var(--font-biz-mincho);
  font-size: var(--font-size-md);
  line-height: 1.3;
  transition: color 0.2s ease;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #campuslife main .voices .common-archive-list li article a h3 {
    min-height: initial;
  }
}
#campuslife main .voices .common-archive-list li article a .profile {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.8rem 0.6rem;
  height: -moz-fit-content;
  height: fit-content;
}
#campuslife main .voices .common-archive-list li article a .profile .name {
  align-self: center;
  font-family: var(--font-biz-mincho);
  font-size: 2rem;
  line-height: 1.3;
}
#campuslife main .voices .common-archive-list li article a .profile .label {
  display: grid;
  place-content: center;
  align-self: center;
  border-radius: calc(infinity * 1px);
  border: 1px solid var(--color-main);
  height: 2.6rem;
  padding-inline: 1.2rem;
  font-family: var(--font-biz-mincho);
  color: var(--color-main);
  font-size: 1.3rem;
  letter-spacing: -0.03em;
  line-height: 1;
}
@media (any-hover: hover) {
  #campuslife main .voices .common-archive-list li article a:hover figure img {
    transform: scale(1.05);
  }
  #campuslife main .voices .common-archive-list li article a:hover h3 {
    text-decoration: underline;
  }
}
#campuslife main .voices .common-link {
  margin: 4.8rem auto 0;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #campuslife main .voices .common-link {
    margin-top: 4rem;
  }
}
#campuslife main .experience .items {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: auto auto auto;
  -moz-column-gap: 2rem;
       column-gap: 2rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #campuslife main .experience .items {
    grid-template-columns: 1fr;
    grid-template-rows: initial;
    gap: 4rem;
  }
}
#campuslife main .experience .items .item {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: 1/span 3;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #campuslife main .experience .items .item {
    display: block;
    grid-row: initial;
  }
}
#campuslife main .experience .items .item h3 {
  color: var(--color-main);
  font-size: 2.4rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #campuslife main .experience .items .item h3 {
    font-size: 2rem;
  }
}
#campuslife main .experience .items .item p {
  margin-top: 1.6rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #campuslife main .experience .items .item p {
    margin-top: 0.8rem;
  }
}
#campuslife main .experience .items .item figure {
  margin-top: 2.4rem;
}
#campuslife main .counseling {
  padding-bottom: initial;
}
#campuslife main .counseling .inner {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4.8rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #campuslife main .counseling .inner {
    grid-template-columns: 1fr;
    gap: 4rem;
  }
}
#campuslife main .counseling .detail {
  border-radius: 0.5rem;
  overflow: hidden;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #campuslife main .counseling .detail {
    border-radius: 0.3rem;
  }
}
#campuslife main .counseling .detail {
  padding: 3.2rem 4rem;
  background-color: #f4f4f4;
}
#campuslife main .counseling .detail h3 {
  color: var(--color-main);
  font-family: var(--font-biz-mincho);
  font-size: 2.4rem;
  line-height: 1.6;
  letter-spacing: 0.12em;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #campuslife main .counseling .detail h3 {
    font-size: 1.6rem;
  }
}
#campuslife main .counseling .detail ul {
  margin-top: 1.2rem;
}
#campuslife main .counseling .detail ul li {
  padding-left: 1em;
  text-indent: -1em;
}
#campuslife main .counseling .detail ul li::before {
  content: "・";
}
#campuslife main .counseling .detail p {
  text-align: end;
}
#campuslife main .club {
  -o-border-image: initial;
     border-image: initial;
}
#campuslife main .club .lead {
  margin-top: 3.2rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #campuslife main .club .lead {
    margin-top: 2.4rem;
  }
}
#campuslife main .club .contents {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4rem 2rem;
  margin-top: 5.6rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #campuslife main .club .contents {
    grid-template-columns: 1fr;
    row-gap: 4rem;
    margin-top: 4rem;
  }
}
#campuslife main .club article .splide .splide__slide figure {
  border-radius: 0.5rem;
  overflow: hidden;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #campuslife main .club article .splide .splide__slide figure {
    border-radius: 0.3rem;
  }
}
#campuslife main .club article .splide .splide__pagination {
  position: relative;
  display: flex;
  align-items: flex-start;
  -moz-column-gap: 0.5rem;
       column-gap: 0.5rem;
  margin-top: 1.2rem;
  padding: initial;
}
#campuslife main .club article .splide .splide__pagination__page {
  width: 0.5rem;
  height: initial;
  aspect-ratio: 1;
  margin: 0;
  background-color: var(--color-line);
  opacity: initial;
}
#campuslife main .club article .splide .splide__pagination__page.is-active {
  transform: initial;
  background-color: #999;
}
#campuslife main .club article h3 {
  margin-top: 0.3rem;
}
#campuslife main .club article h3 button {
  display: grid;
  grid-template-columns: 1fr 2.4rem;
  align-items: center;
  -moz-column-gap: 1.6rem;
       column-gap: 1.6rem;
  width: 100%;
  border: 1px solid var(--color-base);
  padding: 1.2rem 2.4rem;
  background-color: var(--color-base);
  cursor: pointer;
  color: var(--color-main);
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 1.3;
}
@media (any-hover: hover) {
  #campuslife main .club article h3 button:hover {
    border-color: var(--color-main);
  }
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #campuslife main .club article h3 button {
    padding: 1.2rem 2.4rem;
  }
}
#campuslife main .club article h3 button::after {
  content: "";
  display: grid;
  place-content: center;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--color-main) url(/assets/images/common/icon-arrow05.svg) no-repeat center/0.4rem auto;
  transition: transform 0.3s ease;
}
#campuslife main .club article .wrapper {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s ease-in-out;
}
#campuslife main .club article .wrapper .body {
  overflow: hidden;
}
#campuslife main .club article.is-open h3 button::after {
  transform: rotate(180deg);
}
#campuslife main .club article.is-open .wrapper {
  grid-template-rows: 1fr;
}
#campuslife main .club article table {
  margin-top: 2rem;
}
#campuslife main .club article table th,
#campuslife main .club article table td {
  padding: 0.3rem 0.8rem;
}
#campuslife main .club article table th {
  background-color: #f5f5f5;
  font-weight: 500;
}
#campuslife main .club .message {
  margin-top: 1.5rem;
}
#campuslife main .club .message dt {
  font-weight: 500;
  line-height: 1.5;
}
#campuslife main .club .message dd {
  margin-top: 0.8rem;
  line-height: 1.5;
}

.photo-modal {
  width: 100%;
  padding: 0;
  background: transparent;
  border: none;
  overflow: visible;
}
.photo-modal::backdrop {
  background-color: rgba(0, 0, 0, 0.6);
  animation: photo-modal-backdrop-in 0.3s ease forwards;
}
.photo-modal[open] {
  animation: photo-modal-in 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
.photo-modal.is-closing {
  animation: photo-modal-out 0.25s ease forwards;
}
.photo-modal.is-closing::backdrop {
  animation: photo-modal-backdrop-out 0.25s ease forwards;
}
.photo-modal .inner {
  position: relative;
  max-width: min(72rem, 80%);
  border-radius: 0.5rem;
  overflow: hidden;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  .photo-modal .inner {
    border-radius: 0.3rem;
  }
}
.photo-modal .inner {
  margin-inline: auto;
  padding: 3.2rem 2.4rem 4rem;
  background-color: #fff;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  .photo-modal .inner {
    padding: 1.6rem 1.6rem 2.4rem;
    max-width: 100%;
  }
}
.photo-modal .close {
  position: relative;
  display: block;
  width: 3.6rem;
  aspect-ratio: 1;
  margin-left: auto;
  cursor: pointer;
  transition: opacity 0.2s ease;
}
@media (any-hover: hover) {
  .photo-modal .close:hover {
    opacity: 0.7;
  }
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  .photo-modal .close {
    width: 2.4rem;
  }
}
.photo-modal .close::before, .photo-modal .close::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background-color: var(--color-font);
}
.photo-modal .close::before {
  transform: translate(-50%, -50%) rotate(45deg);
}
.photo-modal .close::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}
.photo-modal figure {
  border-radius: 0.5rem;
  overflow: hidden;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  .photo-modal figure {
    border-radius: 0.3rem;
  }
}
.photo-modal figure {
  margin-top: 3.5rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  .photo-modal figure {
    margin-top: 1rem;
  }
}
.photo-modal figure img {
  display: block;
}

@keyframes photo-modal-in {
  from {
    opacity: 0;
    transform: scale(0.88);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes photo-modal-out {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(0.88);
  }
}
@keyframes photo-modal-backdrop-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes photo-modal-backdrop-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
#financial main .fv {
  background-image: url(/assets/images/financial/fv.jpg);
}
#financial main .fee {
  padding-block: 9.6rem 7rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #financial main .fee {
    padding-top: 8rem;
  }
}
#financial main .fee .common-table {
  margin-block: 2rem;
  width: min(56rem, 100%);
}
#financial main .fee .common-table th {
  background-color: var(--color-base);
}
#financial main .fee .common-list {
  margin-top: 4rem;
}
#financial main .fee .common-list dt {
  margin-bottom: 2rem;
}
#financial main .fee .common-list dd {
  -moz-column-gap: 1.6rem;
       column-gap: 1.6rem;
}
#financial main .fee .common-list dd + dd {
  margin-top: 0.6rem;
}
#financial main .scholarship {
  padding-block: 8rem;
  -o-border-image: linear-gradient(var(--color-base) 0 0) 0/0/0 100vw;
     border-image: linear-gradient(var(--color-base) 0 0) fill 0/0/0 100vw;
}
#financial main .scholarship ol {
  width: min(81.5rem, 100%);
  counter-reset: item;
}
#financial main .scholarship ol > li {
  margin-top: 3.2rem;
}
#financial main .scholarship ol > li h3 {
  display: grid;
  grid-template-columns: auto 1fr;
}
#financial main .scholarship ol > li h3::before {
  content: counter(item) ".";
  counter-increment: item;
  margin-right: 0.6rem;
}
#financial main .scholarship ol .common-table {
  margin-top: 0.4rem;
}
#financial main .scholarship ol .common-list {
  margin-top: 0.6rem;
}
#financial main .scholarship ol .common-list li {
  -moz-column-gap: 1.6rem;
       column-gap: 1.6rem;
}
#financial main .subsidy {
  padding-top: 8rem;
}
#financial main .subsidy p strong {
  font-weight: 400;
}
#financial main .subsidy section {
  margin-top: 4rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #financial main .subsidy section {
    margin-top: 3.2rem;
  }
}
#financial main .subsidy section .common-heading-h3 {
  margin-bottom: 2rem;
}
#financial main .subsidy section .common-text-link {
  margin-top: 0.8rem;
}
#financial main .aid {
  padding-block: 8rem 10.4rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #financial main .aid {
    padding-block: 8rem 10rem;
  }
}

#freecampus main .fv {
  background-image: url(/assets/images/freecampus/fv.jpg);
}
#freecampus main .common-inner > section:not(.common-intro) {
  padding-block: 10rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #freecampus main .common-inner > section:not(.common-intro) {
    padding-block: 8rem;
  }
}
#freecampus main .common-inner > section:not(.common-intro):nth-of-type(2n) {
  -o-border-image: linear-gradient(var(--color-base) 0 0) 0/0/0 100vw;
     border-image: linear-gradient(var(--color-base) 0 0) fill 0/0/0 100vw;
}
#freecampus main .common-intro {
  padding-bottom: 11rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #freecampus main .common-intro {
    padding-bottom: 8rem;
  }
}
#freecampus main .common-intro .recommend {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-row: 2;
  grid-column: 1/span 3;
  align-items: center;
  width: min(73.8rem, 100%);
  margin: 5.8rem auto 0;
  border: 1px solid var(--color-line);
  padding: 2.4rem 5.8rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #freecampus main .common-intro .recommend {
    grid-template-columns: 1fr;
    grid-column: 1;
    margin: initial;
    padding: 2.4rem 1.6rem;
  }
}
#freecampus main .common-intro .recommend h3 {
  color: var(--color-main);
  font-family: var(--font-biz-mincho);
  font-size: var(--font-size-md);
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #freecampus main .common-intro .recommend h3 {
    margin-bottom: 1.2rem;
  }
}
#freecampus main .common-intro .recommend .common-list li {
  grid-template-columns: 0.6rem 1fr;
}
#freecampus main .features ul li {
  display: grid;
  grid-template-columns: 32.1rem 1fr;
  -moz-column-gap: 6.8rem;
       column-gap: 6.8rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #freecampus main .features ul li {
    grid-template-columns: 1fr;
  }
}
#freecampus main .features ul li + li {
  margin-top: 3.2rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #freecampus main .features ul li + li {
    margin-top: 6rem;
  }
}
#freecampus main .features ul li figure {
  grid-column: 1;
  grid-row: 1/span 3;
  border-radius: 0.5rem;
  overflow: hidden;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #freecampus main .features ul li figure {
    grid-row: 1;
  }
}
#freecampus main .features ul li h3 {
  margin-bottom: 2.4rem;
  color: var(--color-main);
  font-size: 2.4rem;
  line-height: 1.3;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #freecampus main .features ul li h3 {
    grid-row: 2;
    margin-block: 1.6rem 1.2rem;
    font-size: 1.8rem;
    letter-spacing: 0.02em;
  }
}
#freecampus main .features ul li p {
  grid-column: 2;
  grid-row: 2;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #freecampus main .features ul li p {
    grid-column: 1;
    grid-row: 3;
  }
}
#freecampus main .program .common-list {
  margin-bottom: 0.8rem;
}
#freecampus main .program .common-list li + li {
  margin-top: 0.8rem;
}
#freecampus main .overview .common-table {
  width: 100%;
}
#freecampus main .application .web {
  margin-top: 3.2rem;
}
#freecampus main .application .web h3 {
  margin-bottom: 2rem;
  color: var(--color-main);
  font-family: var(--font-biz-mincho);
  font-size: var(--font-size-md);
  line-height: 2;
}
#freecampus main .application .tel {
  margin-top: 4rem;
}
#freecampus main .application .tel > p {
  font-family: var(--font-biz-mincho);
  font-size: var(--font-size-md);
  line-height: 2;
}
#freecampus main .application .tel .common-contact {
  margin-top: 1.6rem;
}

#opencampus {
  background-color: var(--color-base);
  font-family: var(--font-noto-sans);
  color: var(--color-font);
  --font-josefin: "Josefin Sans", sans-serif;
  --font-commissioner: "Commissioner", sans-serif;
  --font-poppins: "Poppins", sans-serif;
  --color-base: #faecee;
  --color-main: #f293a0;
  --color-accent: #fddc18;
  --color-font: #333;
}
#opencampus .loading {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100svh;
  z-index: 10;
  background-color: #fff;
}
#opencampus .loading p {
  position: absolute;
  top: 45svh;
  left: 8rem;
  z-index: 3;
  color: var(--color-accent02);
  font-size: 4rem;
  line-height: 1.8;
  letter-spacing: 0.06em;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #opencampus .loading p {
    top: 50svh;
    left: 3rem;
    font-size: 3.6rem;
    line-height: 2;
  }
}
#opencampus .loading p span {
  font-size: 6rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #opencampus .loading p span {
    font-size: 4.8rem;
  }
}
#opencampus .common-heading .en {
  font-family: var(--font-josefin);
  -webkit-text-stroke: 3px var(--color-font);
  paint-order: stroke;
  color: var(--color-main);
  font-size: 6.4rem;
  line-height: 1.1;
  letter-spacing: -0.03em;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #opencampus .common-heading .en {
    font-size: 4.8rem;
  }
}
#opencampus .common-heading .en span {
  color: var(--color-accent);
}
#opencampus .common-heading .ja {
  display: block;
  font-size: 1.5rem;
  line-height: 1.3;
  letter-spacing: 0.05em;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #opencampus .common-heading .ja {
    font-size: 1.2rem;
  }
}
#opencampus .common-link {
  display: grid;
  grid-template-columns: 1fr 9.6rem;
  align-items: center;
  box-shadow: 0.2rem 0.2rem 0 var(--color-font);
  border: 1px solid var(--color-font);
  border-radius: calc(infinity * 1px);
  background-color: #fff;
  padding: 1.2rem 2.2rem;
  font-size: 2.4rem;
  font-weight: 700;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #opencampus .common-link {
    grid-template-columns: 1fr 4.8rem;
    padding: 0.6rem 0.9rem;
    font-size: 1.6rem;
  }
}
#opencampus .common-link::after {
  content: "";
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid var(--color-font);
  background-color: #fff8a6;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 2.2rem auto;
  transition: background-color 0.2s ease, background-size 0.2s ease;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #opencampus .common-link::after {
    border-width: 0.2rem;
    background-size: 1.8rem auto;
  }
}
@media (any-hover: hover) {
  #opencampus .common-link:hover {
    box-shadow: initial;
    background-color: #fff8a6;
    translate: 0.2rem 0.2rem;
  }
  #opencampus .common-link:hover::after {
    background-color: #fff;
    background-size: 2.8rem auto;
  }
}
#opencampus .common-link.pdf {
  text-align: center;
}
#opencampus .common-link.pdf::after {
  background-image: url(/assets/images/opencampus/common/icon-pdf.svg);
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #opencampus .common-link.pdf::after {
    background-size: 1.4rem auto;
  }
}
@media (any-hover: hover) {
  #opencampus .common-link.pdf:hover::after {
    background-color: #fff;
  }
}
#opencampus .sns-links {
  display: flex;
  align-items: center;
  justify-content: center;
  -moz-column-gap: 12.6rem;
       column-gap: 12.6rem;
  height: 32rem;
  background-color: #fff;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #opencampus .sns-links {
    flex-direction: column;
    height: 38rem;
  }
}
#opencampus .sns-links p {
  position: relative;
  font-size: 1.8rem;
  line-height: 1.5;
  letter-spacing: 0.08em;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #opencampus .sns-links p {
    text-align: center;
    font-size: 2.2rem;
    letter-spacing: 0.05em;
  }
}
#opencampus .sns-links p::before, #opencampus .sns-links p::after {
  content: "";
  position: absolute;
  left: -2.4rem;
  background-color: var(--color-accent);
  width: 26.7rem;
  height: 2px;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #opencampus .sns-links p::before, #opencampus .sns-links p::after {
    width: 6rem;
  }
}
#opencampus .sns-links p::before {
  top: -1rem;
  transform: rotate(3.9deg);
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #opencampus .sns-links p::before {
    top: 3.9rem;
    left: -5rem;
    transform: rotate(72deg);
  }
}
#opencampus .sns-links p::after {
  bottom: -1.8rem;
  transform: rotate(-3.9deg);
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #opencampus .sns-links p::after {
    top: 3.9rem;
    bottom: initial;
    right: -5rem;
    left: initial;
    transform: rotate(-72deg);
  }
}
#opencampus .sns-links ul {
  display: flex;
  -moz-column-gap: 7rem;
       column-gap: 7rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #opencampus .sns-links ul {
    margin-top: 5rem;
  }
}
#opencampus .sns-links ul li {
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.08em;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #opencampus .sns-links ul li {
    font-weight: 500;
  }
}
#opencampus .sns-links ul li a {
  display: block;
  width: 8rem;
  margin: 2.6rem auto 0;
}
#opencampus .sns-links ul li a:focus {
  opacity: 0.75;
}
@media (hover: hover) and (pointer: fine) {
  #opencampus .sns-links ul li a:where(:-moz-any-link, :enabled, summary):hover {
    opacity: 0.75;
  }
  #opencampus .sns-links ul li a:where(:any-link, :enabled, summary):hover {
    opacity: 0.75;
  }
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #opencampus .sns-links ul li a {
    margin-top: 1.6rem;
  }
}
#opencampus .modal :where(dialog) {
  position: fixed;
  top: 0;
  z-index: 10;
  display: grid;
  place-content: center;
  width: 100%;
  height: 100lvh;
  background-color: rgba(0, 0, 0, 0.6);
  opacity: 0;
  visibility: hidden;
  overflow: hidden;
  margin: 0;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #opencampus .modal :where(dialog) {
    border-width: 1px;
    padding: 5rem 2rem;
  }
}
#opencampus .modal :where(dialog)::backdrop {
  background-color: transparent;
}
#opencampus .modal :where(dialog) .inner {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(90rem, 100%);
  max-height: calc(100lvh - 10rem);
  margin-inline: auto;
  border-radius: 2.4rem;
  padding: 8rem;
  box-shadow: 1rem 1rem 0 var(--color-main);
  background-color: #fff;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #opencampus .modal :where(dialog) .inner {
    box-shadow: 0.5rem 0.5rem 0 var(--color-main);
    padding: 6rem 2rem;
  }
}
#opencampus .modal :where(dialog).list .content {
  flex: 1;
  min-height: 0;
  height: 100%;
  overflow: auto;
  overscroll-behavior: contain;
  margin-top: 3.2rem;
}
#opencampus .modal :where(dialog).list .content dl {
  position: relative;
  border-top: 1px solid #b8b8b8;
  margin-right: 1rem;
}
#opencampus .modal :where(dialog).list .content dl::before {
  content: "";
  position: absolute;
  top: 4.2rem;
  left: 0;
  width: max(0.3rem, 2px);
  height: 2.6rem;
  background-color: var(--color-main);
  border-radius: calc(infinity * 1px);
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #opencampus .modal :where(dialog).list .content dl::before {
    top: 1.6rem;
    height: 2.4rem;
  }
}
#opencampus .modal :where(dialog).list .content dl:last-of-type {
  border-bottom: 1px solid #b8b8b8;
}
#opencampus .modal :where(dialog).list .content dl dt {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 2rem;
  cursor: pointer;
  padding: 4rem 0 4rem 1.6rem;
  font-size: 2.4rem;
  font-weight: 500;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #opencampus .modal :where(dialog).list .content dl dt {
    padding: 1.8rem 0 1.8rem 1rem;
    font-size: 1.6rem;
  }
}
#opencampus .modal :where(dialog).list .content dl dt::before, #opencampus .modal :where(dialog).list .content dl dt::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  translate: 0 -50%;
  width: 2rem;
  height: 2px;
  border-radius: calc(infinity * 1px);
  background-color: var(--color-main);
  transition: transform 0.2s ease;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #opencampus .modal :where(dialog).list .content dl dt::before, #opencampus .modal :where(dialog).list .content dl dt::after {
    width: 1.6rem;
  }
}
#opencampus .modal :where(dialog).list .content dl dt::after {
  transform: rotate(-90deg);
}
#opencampus .modal :where(dialog).list .content dl dd {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s ease-in-out;
}
#opencampus .modal :where(dialog).list .content dl dd .wrapper {
  overflow: hidden;
}
#opencampus .modal :where(dialog).list .content dl dd .wrapper ul {
  -moz-column-count: 3;
       column-count: 3;
  padding-bottom: 5.4rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #opencampus .modal :where(dialog).list .content dl dd .wrapper ul {
    -moz-column-count: 2;
         column-count: 2;
    padding-bottom: 3rem;
  }
}
#opencampus .modal :where(dialog).list .content dl dd .wrapper ul li {
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1.5;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #opencampus .modal :where(dialog).list .content dl dd .wrapper ul li {
    font-size: 1.3rem;
  }
}
#opencampus .modal :where(dialog).list .content dl dd .wrapper ul li.adjust {
  margin-bottom: 1rem;
}
#opencampus .modal :where(dialog).list .content dl.is-open dt::after {
  transform: rotate(0deg);
}
#opencampus .modal :where(dialog).list .content dl.is-open dd {
  grid-template-rows: 1fr;
}
#opencampus .modal :where(dialog).movie .inner {
  width: 90rem;
  height: auto;
  padding: 8rem 4rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #opencampus .modal :where(dialog).movie .inner {
    width: 100%;
    padding: 7rem 2rem 6rem;
  }
}
#opencampus .modal :where(dialog) h3 {
  flex-shrink: 0;
  border-radius: 0.5rem;
  padding: 2.4rem 1rem 2.4rem 2.5rem;
  background-color: #f2aab0;
  background-image: linear-gradient(rgba(255, 255, 255, 0.35) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.35) 1px, transparent 1px);
  background-size: 3.2rem 3.2rem;
  font-size: 2.8rem;
  font-weight: 700;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #opencampus .modal :where(dialog) h3 {
    padding: 1.6rem 0.8rem;
    text-align: center;
    font-feature-settings: "palt";
    font-size: 1.8rem;
    line-height: 1.3;
  }
}
#opencampus .modal :where(dialog) .close-button {
  position: absolute;
  top: 0.1rem;
  right: 2.4rem;
  display: block;
  cursor: pointer;
  padding: 2rem;
  font-size: 1.6rem;
}
#opencampus .modal :where(dialog) .close-button::before, #opencampus .modal :where(dialog) .close-button::after {
  content: "";
  position: absolute;
  width: 1.7rem;
  top: 2.9rem;
  right: -0.4rem;
  height: 1px;
  background-color: var(--color-font);
  transition: 0.3s ease;
}
#opencampus .modal :where(dialog) .close-button::before {
  transform: rotate(45deg);
}
#opencampus .modal :where(dialog) .close-button::after {
  transform: rotate(-45deg);
}
#opencampus .modal :where(dialog)#modal01 h3::after {
  content: attr(data-en);
  color: rgba(51, 51, 51, 0.5);
  font-size: 1.4rem;
  font-weight: 500;
  letter-spacing: -0.05em;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #opencampus .modal :where(dialog)#modal01 h3::after {
    display: none;
  }
}
#opencampus .drawer-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100lvh;
  background-color: rgba(2, 0, 0, 0.7);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0.4s ease;
  z-index: 4;
}
#opencampus .drawer-bg.active {
  opacity: 1;
  visibility: visible;
}
#opencampus .fixed-links {
  display: none;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #opencampus .fixed-links {
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 4;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    width: 100%;
  }
}
#opencampus .fixed-links li a {
  display: grid;
  place-content: center;
  height: 4rem;
  font-size: 1.3rem;
  letter-spacing: 0.12em;
}
#opencampus .fixed-links li:nth-of-type(1) a {
  background-color: var(--color-main);
  color: var(--color-base);
}
#opencampus .fixed-links li:nth-of-type(2) a {
  background-color: var(--color-base);
  color: var(--color-main);
}
#opencampus main .mv {
  position: relative;
  z-index: 2;
  height: 75rem;
  width: 100%;
  margin-inline: auto;
}
@media (min-width: 1441px) and (max-width: 1920px) {
  #opencampus main .mv {
    height: 52.0833333333vw;
  }
}
@media (min-width: 1921px) {
  #opencampus main .mv {
    width: 192rem;
    height: 100rem;
  }
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #opencampus main .mv {
    height: 54.6rem;
  }
}
#opencampus main .mv::before {
  content: "";
  position: absolute;
  width: min(144rem, 100%);
  aspect-ratio: 1440/750;
  background: url(/assets/images/opencampus/top/mv-img.png) no-repeat center top/contain;
  pointer-events: none;
}
@media (min-width: 1921px) {
  #opencampus main .mv::before {
    width: 192rem;
  }
}
@media (min-width: 1441px) and (max-width: 1920px) {
  #opencampus main .mv::before {
    width: 100vw;
  }
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #opencampus main .mv::before {
    right: 0;
    bottom: 0;
    aspect-ratio: 390/312;
    background-image: url(/assets/images/opencampus/top/mv-img-sp.png);
  }
}
#opencampus main .mv hgroup {
  padding: 16.8rem 0 0 8.1rem;
}
@media (min-width: 1441px) and (max-width: 1920px) {
  #opencampus main .mv hgroup {
    padding: 11.6666666667vw 0 0 5.625vw;
  }
}
@media (min-width: 1921px) {
  #opencampus main .mv hgroup {
    padding: 22.4rem 0 0 10.8rem;
  }
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #opencampus main .mv hgroup {
    padding: 2.6rem 0 0 2rem;
  }
}
#opencampus main .mv hgroup h1 {
  display: grid;
  grid-template-columns: auto 1fr;
  -moz-column-gap: 1.6rem;
       column-gap: 1.6rem;
  position: relative;
  margin-bottom: 2rem;
}
@media (min-width: 1441px) and (max-width: 1920px) {
  #opencampus main .mv hgroup h1 {
    -moz-column-gap: 1.1111111111vw;
         column-gap: 1.1111111111vw;
    margin-bottom: 1.3888888889vw;
  }
}
@media (min-width: 1921px) {
  #opencampus main .mv hgroup h1 {
    -moz-column-gap: 2.1333333333rem;
         column-gap: 2.1333333333rem;
    margin-bottom: 2.6666666667rem;
  }
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #opencampus main .mv hgroup h1 {
    -moz-column-gap: 0.8rem;
         column-gap: 0.8rem;
    margin-bottom: 1.5rem;
  }
}
#opencampus main .mv hgroup h1 span {
  font-family: var(--font-commissioner);
}
#opencampus main .mv hgroup h1 span.title {
  grid-column: 1/span 3;
  grid-row: 1;
  white-space: nowrap;
  font-size: 12rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.05em;
}
@media (min-width: 1441px) and (max-width: 1920px) {
  #opencampus main .mv hgroup h1 span.title {
    font-size: 8.3333333333vw;
  }
}
@media (min-width: 1921px) {
  #opencampus main .mv hgroup h1 span.title {
    font-size: 16rem;
  }
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #opencampus main .mv hgroup h1 span.title {
    font-size: 5.4rem;
  }
}
#opencampus main .mv hgroup h1 span.year {
  position: relative;
  grid-column: 1;
  grid-row: 2;
  -webkit-text-stroke: 0.6rem var(--color-font);
  paint-order: stroke;
  color: #fff;
  font-size: 12rem;
  line-height: 1;
}
@media (min-width: 1441px) and (max-width: 1920px) {
  #opencampus main .mv hgroup h1 span.year {
    -webkit-text-stroke: 0.4166666667vw var(--color-font);
    font-size: 8.3333333333vw;
  }
}
@media (min-width: 1921px) {
  #opencampus main .mv hgroup h1 span.year {
    -webkit-text-stroke: 0.8rem var(--color-font);
    font-size: 16rem;
  }
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #opencampus main .mv hgroup h1 span.year {
    -webkit-text-stroke: 0.3rem var(--color-font);
    font-size: 5.4rem;
  }
}
#opencampus main .mv hgroup h1 span.year::after {
  content: attr(data-year);
  position: absolute;
  z-index: -1;
  top: 0.4rem;
  left: 0.4rem;
  -webkit-text-stroke: 0.6rem var(--color-font);
  paint-order: stroke;
  color: var(--color-main);
  font-size: 12rem;
  line-height: 1;
}
@media (min-width: 1441px) and (max-width: 1920px) {
  #opencampus main .mv hgroup h1 span.year::after {
    top: 0.2777777778vw;
    left: 0.2777777778vw;
    -webkit-text-stroke: 0.4166666667vw var(--color-font);
    font-size: 8.3333333333vw;
  }
}
@media (min-width: 1921px) {
  #opencampus main .mv hgroup h1 span.year::after {
    top: 0.5333333333rem;
    left: 0.5333333333rem;
    -webkit-text-stroke: 0.8rem var(--color-font);
    font-size: 16rem;
  }
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #opencampus main .mv hgroup h1 span.year::after {
    top: 0.3rem;
    left: 0.3rem;
    -webkit-text-stroke: 0.3rem var(--color-font);
    font-size: 5.4rem;
  }
}
#opencampus main .mv hgroup h1 span.place {
  grid-column: 2;
  grid-row: 2;
  align-self: center;
  font-size: 3.6rem;
  font-weight: 700;
  line-height: 1.27;
  translate: 0 0.5rem;
}
@media (min-width: 1441px) and (max-width: 1920px) {
  #opencampus main .mv hgroup h1 span.place {
    font-size: 2.5vw;
    translate: 0 0.3472222222vw;
  }
}
@media (min-width: 1921px) {
  #opencampus main .mv hgroup h1 span.place {
    font-size: 4.8rem;
    translate: 0 0.6666666667rem;
  }
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #opencampus main .mv hgroup h1 span.place {
    font-size: 1.6rem;
  }
}
#opencampus main .mv hgroup p {
  display: flex;
  font-size: 2rem;
  line-height: 1.8;
}
@media (min-width: 1441px) and (max-width: 1920px) {
  #opencampus main .mv hgroup p {
    font-size: 1.3888888889vw;
  }
}
@media (min-width: 1921px) {
  #opencampus main .mv hgroup p {
    font-size: 2.6666666667rem;
  }
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #opencampus main .mv hgroup p {
    font-size: 1.6rem;
  }
}
#opencampus main .mv hgroup p:not(:first-of-type) {
  font-size: 1.5rem;
}
@media (min-width: 1441px) and (max-width: 1920px) {
  #opencampus main .mv hgroup p:not(:first-of-type) {
    font-size: 1.0416666667vw;
  }
}
@media (min-width: 1921px) {
  #opencampus main .mv hgroup p:not(:first-of-type) {
    font-size: 2rem;
  }
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #opencampus main .mv hgroup p:not(:first-of-type) {
    display: block;
    padding-left: 1rem;
    font-size: 1.2rem;
    line-height: 1.5;
  }
}
#opencampus main .mv hgroup p span {
  margin-left: 1rem;
}
@media (min-width: 1441px) and (max-width: 1920px) {
  #opencampus main .mv hgroup p span {
    margin-left: 0.6944444444vw;
  }
}
@media (min-width: 1921px) {
  #opencampus main .mv hgroup p span {
    margin-left: 1.3333333333rem;
  }
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #opencampus main .mv hgroup p span {
    display: block;
    margin-left: 10rem;
  }
}
#opencampus main .mv .schedule {
  position: absolute;
  bottom: 0;
  left: 4rem;
  width: -moz-fit-content;
  width: fit-content;
  border-radius: 1rem;
  border: 1px solid var(--color-font);
  padding: 2.8rem 1.2rem 1.9rem 2.1rem;
  background-color: #fff;
}
@media (min-width: 1441px) and (max-width: 1920px) {
  #opencampus main .mv .schedule {
    left: 2.7777777778vw;
    border-radius: 0.6944444444vw;
    padding: 1.9444444444vw 0.8333333333vw 1.3194444444vw 1.4583333333vw;
  }
}
@media (min-width: 1921px) {
  #opencampus main .mv .schedule {
    left: 5.3333333333rem;
    border-radius: 1.3333333333rem;
    padding: 3.7333333333rem 1.6rem 2.5333333333rem 2.8rem;
  }
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #opencampus main .mv .schedule {
    left: 0.5rem;
    bottom: -5.5rem;
    width: calc(100% - 1rem);
    padding: 2.3rem 1.5rem 1.5rem 1.5rem;
  }
}
#opencampus main .mv .schedule dl {
  display: grid;
  grid-template-columns: auto 23.7rem;
  gap: 1rem 1rem;
}
@media (min-width: 1441px) and (max-width: 1920px) {
  #opencampus main .mv .schedule dl {
    grid-template-columns: auto 16.4583333333vw;
    gap: 0.6944444444vw;
  }
}
@media (min-width: 1921px) {
  #opencampus main .mv .schedule dl {
    grid-template-columns: auto 31.6rem;
    gap: 1.3333333333rem;
  }
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #opencampus main .mv .schedule dl {
    grid-template-columns: auto 1fr;
    gap: 0.7rem 0rem;
  }
}
#opencampus main .mv .schedule dl dt {
  position: absolute;
  top: -1.5rem;
  width: -moz-fit-content;
  width: fit-content;
  border-radius: calc(infinity * 1px);
  border: 1px solid var(--color-font);
  padding: 0.6rem 2.3rem;
  background-color: var(--color-accent);
  font-family: var(--font-commissioner);
  font-size: 1.5rem;
}
@media (min-width: 1441px) and (max-width: 1920px) {
  #opencampus main .mv .schedule dl dt {
    top: -1.0416666667vw;
    padding: 0.4166666667vw 1.5972222222vw;
    font-size: 1.0416666667vw;
  }
}
@media (min-width: 1921px) {
  #opencampus main .mv .schedule dl dt {
    top: -2rem;
    padding: 0.8rem 3.0666666667rem;
    font-size: 2rem;
  }
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #opencampus main .mv .schedule dl dt {
    font-size: 1.2rem;
  }
}
#opencampus main .mv .schedule dl dd.date {
  grid-column: 1;
  grid-row: 1/span 2;
  align-self: baseline;
  font-family: var(--font-josefin);
  font-size: 6.5rem;
  font-weight: 500;
  line-height: 1;
  translate: 0 0.5rem;
}
@media (min-width: 1441px) and (max-width: 1920px) {
  #opencampus main .mv .schedule dl dd.date {
    font-size: 4.5138888889vw;
    translate: 0 0.3472222222vw;
  }
}
@media (min-width: 1921px) {
  #opencampus main .mv .schedule dl dd.date {
    font-size: 8.6666666667rem;
    translate: 0 0.6666666667rem;
  }
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #opencampus main .mv .schedule dl dd.date {
    white-space: nowrap;
    font-size: 5.3rem;
  }
}
#opencampus main .mv .schedule dl dd.date span {
  font-size: 2.4rem;
  font-weight: 700;
}
@media (min-width: 1441px) and (max-width: 1920px) {
  #opencampus main .mv .schedule dl dd.date span {
    font-size: 1.6666666667vw;
  }
}
@media (min-width: 1921px) {
  #opencampus main .mv .schedule dl dd.date span {
    font-size: 3.2rem;
  }
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #opencampus main .mv .schedule dl dd.date span {
    font-size: 2rem;
  }
}
#opencampus main .mv .schedule dl dd.place {
  display: flex;
  align-items: center;
  -moz-column-gap: 0.1rem;
       column-gap: 0.1rem;
  font-size: 1.5rem;
  letter-spacing: 0.04em;
}
@media (min-width: 1441px) and (max-width: 1920px) {
  #opencampus main .mv .schedule dl dd.place {
    -moz-column-gap: 0.0694444444vw;
         column-gap: 0.0694444444vw;
    font-size: 1.0416666667vw;
  }
}
@media (min-width: 1921px) {
  #opencampus main .mv .schedule dl dd.place {
    -moz-column-gap: 0.1333333333rem;
         column-gap: 0.1333333333rem;
    font-size: 2rem;
  }
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #opencampus main .mv .schedule dl dd.place {
    font-size: 1.3rem;
  }
}
#opencampus main .mv .schedule dl dd.place::before, #opencampus main .mv .schedule dl dd.place::after {
  content: "";
  width: 0.7rem;
  height: 1.7rem;
  border: 1px solid var(--color-font);
  display: inline-block;
}
@media (min-width: 1441px) and (max-width: 1920px) {
  #opencampus main .mv .schedule dl dd.place::before, #opencampus main .mv .schedule dl dd.place::after {
    width: 0.4861111111vw;
    height: 1.1805555556vw;
  }
}
@media (min-width: 1921px) {
  #opencampus main .mv .schedule dl dd.place::before, #opencampus main .mv .schedule dl dd.place::after {
    width: 0.9333333333rem;
    height: 2.2666666667rem;
  }
}
#opencampus main .mv .schedule dl dd.place::before {
  border-right-color: transparent;
}
#opencampus main .mv .schedule dl dd.place::after {
  border-left-color: transparent;
}
#opencampus main .mv .schedule dl dd.link {
  grid-column: 2;
  grid-row: 2;
}
#opencampus main .mv .schedule dl dd.link .common-link {
  position: relative;
  grid-template-columns: initial;
  place-content: center;
  position: relative;
  padding: 0.7rem 2.2rem;
  font-size: 1.5rem;
  overflow: hidden;
}
@media (min-width: 1441px) and (max-width: 1920px) {
  #opencampus main .mv .schedule dl dd.link .common-link {
    padding: 0.4861111111vw 1.5277777778vw;
    font-size: 1.0416666667vw;
  }
}
@media (min-width: 1921px) {
  #opencampus main .mv .schedule dl dd.link .common-link {
    padding: 0.9333333333rem 2.9333333333rem;
    font-size: 2rem;
  }
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #opencampus main .mv .schedule dl dd.link .common-link {
    padding: 0.5rem 2.2rem;
    font-size: 1.3rem;
  }
}
#opencampus main .mv .schedule dl dd.link .common-link::after {
  position: absolute;
  top: 50%;
  right: 2rem;
  translate: 0 -50%;
  width: 1.8rem;
  background: #fff8a6 url(/assets/images/opencampus/common/icon-arrow.svg) no-repeat center/0.5rem auto;
}
@media (min-width: 1441px) and (max-width: 1920px) {
  #opencampus main .mv .schedule dl dd.link .common-link::after {
    right: 1.3888888889vw;
    width: 1.25vw;
    background-size: 0.3472222222vw auto;
  }
}
@media (min-width: 1921px) {
  #opencampus main .mv .schedule dl dd.link .common-link::after {
    right: 2.6666666667rem;
    width: 2.4rem;
    background-size: 0.6666666667rem auto;
  }
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #opencampus main .mv .schedule dl dd.link .common-link::after {
    width: 1.4rem;
  }
}
#opencampus main .mv .schedule dl dd.link .common-link:focus {
  background-color: #fff8a6;
}
#opencampus main .mv .schedule dl dd.link .common-link:focus::after {
  background-color: #fff;
}
@media (hover: hover) and (pointer: fine) {
  #opencampus main .mv .schedule dl dd.link .common-link:where(:-moz-any-link, :enabled, summary):hover {
    background-color: #fff8a6;
  }
  #opencampus main .mv .schedule dl dd.link .common-link:where(:any-link, :enabled, summary):hover {
    background-color: #fff8a6;
  }
  #opencampus main .mv .schedule dl dd.link .common-link:where(:-moz-any-link, :enabled, summary):hover::after {
    background-color: #fff;
  }
  #opencampus main .mv .schedule dl dd.link .common-link:where(:any-link, :enabled, summary):hover::after {
    background-color: #fff;
  }
}
#opencampus main .mv .schedule dl dd.link .common-link[data-label=coming] {
  pointer-events: none;
}
#opencampus main .mv .schedule dl dd.link .common-link[data-label=coming]::before {
  content: "Coming soon";
  position: absolute;
  display: grid;
  place-content: center;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  letter-spacing: 0.03em;
}
#opencampus main .mv .schedule dl dd.link .common-link[data-label=coming]::after {
  display: none;
}
#opencampus main .mv .icons img {
  position: absolute;
  z-index: -1;
  opacity: 0;
}
#opencampus main .mv .icons img:nth-of-type(1) {
  top: 10rem;
  left: 19.1rem;
  width: 6rem;
}
@media (min-width: 1441px) and (max-width: 1920px) {
  #opencampus main .mv .icons img:nth-of-type(1) {
    top: 6.9444444444vw;
    left: 13.2638888889vw;
    width: 4.1666666667vw;
  }
}
@media (min-width: 1921px) {
  #opencampus main .mv .icons img:nth-of-type(1) {
    top: 13.3333333333rem;
    left: 25.4666666667rem;
    width: 8rem;
  }
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #opencampus main .mv .icons img:nth-of-type(1) {
    top: 0rem;
    left: 4.4rem;
    width: 4.2rem;
  }
}
#opencampus main .mv .icons img:nth-of-type(2) {
  top: 10rem;
  left: 60rem;
  width: 3.3rem;
}
@media (min-width: 1441px) and (max-width: 1920px) {
  #opencampus main .mv .icons img:nth-of-type(2) {
    top: 6.9444444444vw;
    left: 41.6666666667vw;
    width: 2.2916666667vw;
  }
}
@media (min-width: 1921px) {
  #opencampus main .mv .icons img:nth-of-type(2) {
    top: 13.3333333333rem;
    left: 80rem;
    width: 4.4rem;
  }
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #opencampus main .mv .icons img:nth-of-type(2) {
    top: 9.8rem;
    left: 28.7rem;
    width: 2.2rem;
  }
}
#opencampus main .mv .icons img:nth-of-type(3) {
  top: 20rem;
  left: 84.3rem;
  width: 7.5rem;
}
@media (min-width: 1441px) and (max-width: 1920px) {
  #opencampus main .mv .icons img:nth-of-type(3) {
    top: 13.8888888889vw;
    left: 58.5416666667vw;
    width: 5.2083333333vw;
  }
}
@media (min-width: 1921px) {
  #opencampus main .mv .icons img:nth-of-type(3) {
    top: 26.6666666667rem;
    left: 112.4rem;
    width: 10rem;
  }
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #opencampus main .mv .icons img:nth-of-type(3) {
    top: 9.7rem;
    left: 31.2rem;
    width: 5.1rem;
  }
}
#opencampus main .mv .icons img:nth-of-type(4) {
  top: 48.5rem;
  left: 0rem;
  width: 7.5rem;
  transform-origin: center left;
  transform: rotate(-90deg);
}
@media (min-width: 1441px) and (max-width: 1920px) {
  #opencampus main .mv .icons img:nth-of-type(4) {
    top: 33.6805555556vw;
    width: 5.2083333333vw;
  }
}
@media (min-width: 1921px) {
  #opencampus main .mv .icons img:nth-of-type(4) {
    top: 64.6666666667rem;
    width: 10rem;
  }
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #opencampus main .mv .icons img:nth-of-type(4) {
    top: 21.8rem;
    left: -3rem;
    width: 5.1rem;
  }
}
#opencampus main .mv .icons img:nth-of-type(5) {
  top: 53.6rem;
  left: 37.1rem;
  width: 3.3rem;
}
@media (min-width: 1441px) and (max-width: 1920px) {
  #opencampus main .mv .icons img:nth-of-type(5) {
    top: 37.2222222222vw;
    left: 25.7638888889vw;
    width: 2.2916666667vw;
  }
}
@media (min-width: 1921px) {
  #opencampus main .mv .icons img:nth-of-type(5) {
    top: 71.4666666667rem;
    left: 49.4666666667rem;
    width: 4.4rem;
  }
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #opencampus main .mv .icons img:nth-of-type(5) {
    top: 29.2rem;
    left: 8rem;
    width: 2.2rem;
  }
}
#opencampus main .mv .icons img:nth-of-type(6) {
  top: 43rem;
  left: 68.3rem;
  width: 6rem;
  transform: rotate(90deg);
}
@media (min-width: 1441px) and (max-width: 1920px) {
  #opencampus main .mv .icons img:nth-of-type(6) {
    top: 29.8611111111vw;
    left: 47.4305555556vw;
    width: 4.1666666667vw;
  }
}
@media (min-width: 1921px) {
  #opencampus main .mv .icons img:nth-of-type(6) {
    top: 57.3333333333rem;
    left: 91.0666666667rem;
    width: 8rem;
  }
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #opencampus main .mv .icons img:nth-of-type(6) {
    top: 21.4rem;
    left: 25.6rem;
    width: 4.2rem;
    z-index: 2;
  }
}
#opencampus main > .about {
  padding: 12rem calc(50% - 55rem) 0.3rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #opencampus main > .about {
    padding: 8rem 2rem 0.3rem;
  }
}
#opencampus main > .about .inner {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.6rem 4rem;
  border-radius: 1rem;
  padding: 3rem 2.4rem;
  border: 1px solid var(--color-font);
  background-color: #f2aab0;
  background-image: linear-gradient(rgba(255, 255, 255, 0.35) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.35) 1px, transparent 1px);
  background-size: 3.2rem 3.2rem;
  letter-spacing: 0.03em;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #opencampus main > .about .inner {
    display: block;
    padding: 3.1rem 2rem 2.4rem;
  }
}
#opencampus main > .about hgroup {
  grid-row: 1/span 2;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #opencampus main > .about hgroup {
    padding-block: 0 2.5rem;
  }
}
#opencampus main > .about hgroup h2 {
  display: grid;
  grid-template-columns: 20rem auto;
  -moz-column-gap: 2rem;
       column-gap: 2rem;
  font-size: 3rem;
  font-weight: 400;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #opencampus main > .about hgroup h2 {
    grid-template-columns: 12.4rem auto;
    -moz-column-gap: 1.2rem;
         column-gap: 1.2rem;
    font-size: 1.6rem;
  }
}
#opencampus main > .about hgroup h2 .new {
  display: grid;
  place-content: center;
  grid-column: 1;
  grid-row: 1/span 4;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid var(--color-font);
  padding-bottom: 1rem;
  background-color: #fff;
  font-size: 14rem;
  line-height: 1;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #opencampus main > .about hgroup h2 .new {
    font-size: 9.2rem;
  }
}
#opencampus main > .about hgroup h2 .year {
  grid-column: 2;
  grid-row: 1;
  padding-block: 2rem 1rem;
  font-size: 2rem;
  letter-spacing: 0.03em;
  font-weight: 500;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #opencampus main > .about hgroup h2 .year {
    padding-block: 1.6rem 0.8rem;
    font-size: 1.2rem;
  }
}
#opencampus main > .about hgroup h2 strong {
  grid-column: 2;
  grid-row: 2;
  padding-bottom: 2rem;
  font-size: 7rem;
  letter-spacing: 0.03em;
  font-weight: 500;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #opencampus main > .about hgroup h2 strong {
    padding-bottom: 1rem;
    white-space: nowrap;
    text-shadow: 2px 1px #fff;
    font-size: 4rem;
  }
}
#opencampus main > .about hgroup p {
  padding: 3.8rem 0 0 4rem;
  font-size: 1.4rem;
  line-height: 1.5;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #opencampus main > .about hgroup p {
    padding: 1.9rem 0 0 0;
    font-size: 1.2rem;
  }
}
#opencampus main > .about section {
  grid-column: 2;
  border-radius: 1rem;
  border: 1px solid var(--color-font);
  padding: 2rem 1.6rem;
  background-color: #fff;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #opencampus main > .about section {
    padding: 2rem;
  }
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #opencampus main > .about section + section {
    margin-top: 2rem;
  }
}
#opencampus main > .about section h3 {
  color: #ff0000;
  font-size: 1.8rem;
  line-height: 1.5;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #opencampus main > .about section h3 {
    font-size: 1.6rem;
    line-height: 1.3;
  }
}
#opencampus main > .about section p {
  margin-top: 1.5rem;
  font-size: 1.4rem;
  line-height: 1.3;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #opencampus main > .about section p {
    margin-top: 1rem;
  }
}
#opencampus main > .about .common-link {
  position: relative;
  width: min(70.7rem, 100%);
  margin: 3rem auto 0;
  pointer-events: none;
  overflow: hidden;
}
#opencampus main > .about .common-link::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
}
#opencampus main > .schedule {
  padding: 11.4rem calc(50% - 55rem) 39.5rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #opencampus main > .schedule {
    padding: 9.2rem 2rem 43.1rem;
  }
}
#opencampus main > .schedule .inner {
  position: relative;
}
#opencampus main > .schedule .inner::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -7.6rem;
  left: -11.4rem;
  width: 44.5rem;
  aspect-ratio: 445/583;
  background: url(/assets/images/opencampus/top/schedule-comment.png) no-repeat center/contain;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #opencampus main > .schedule .inner::before {
    top: initial;
    bottom: -33rem;
    left: 9rem;
    width: 15.8rem;
    aspect-ratio: 158/289;
    background-image: url(/assets/images/opencampus/top/schedule-comment-sp.png);
  }
}
#opencampus main > .schedule .inner {
  display: grid;
  grid-template-columns: 1fr 73rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #opencampus main > .schedule .inner {
    display: block;
  }
}
#opencampus main > .schedule .common-heading {
  padding-top: 3.6rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #opencampus main > .schedule .common-heading {
    padding-top: initial;
    text-align: center;
  }
}
#opencampus main > .schedule ul {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.2rem 1.1rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #opencampus main > .schedule ul {
    grid-template-columns: repeat(2, 1fr);
    margin-top: 4.7rem;
  }
}
#opencampus main > .schedule ul li a {
  display: block;
  border-radius: 0.5rem;
  border: 1px solid var(--color-font);
  padding-block: 1.5rem 2rem;
  background-color: #fff;
  text-align: center;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #opencampus main > .schedule ul li a {
    padding-block: 1.5rem 1.6rem;
  }
}
#opencampus main > .schedule ul li .label {
  display: grid;
  align-items: center;
  -moz-column-gap: 0.3rem;
       column-gap: 0.3rem;
  min-width: 11.3rem;
  width: -moz-fit-content;
  width: fit-content;
  height: 2.8rem;
  margin-inline: auto;
  border-radius: calc(infinity * 1px);
  padding-inline: 1.2rem;
  color: #fff;
  text-align: center;
  font-size: 1.2rem;
  letter-spacing: 0.06em;
}
#opencampus main > .schedule ul li time {
  display: block;
  margin-top: 2.2rem;
  font-family: var(--font-josefin);
  font-size: 5rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #opencampus main > .schedule ul li time {
    margin-top: 2rem;
    font-size: 4.8rem;
    font-weight: 400;
  }
}
#opencampus main > .schedule ul li time span {
  font-size: 2rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #opencampus main > .schedule ul li time span {
    font-size: 1.9rem;
  }
}
#opencampus main > .schedule ul li:not([data-label=closed]) a {
  position: relative;
  box-shadow: 0.4rem 0.4rem 0 0 #bbebfb, 0.4rem 0.4rem 0 1px #333;
}
#opencampus main > .schedule ul li:not([data-label=closed]) a .label {
  position: relative;
  grid-template-columns: auto 1.8rem;
}
#opencampus main > .schedule ul li:not([data-label=closed]) a .label::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 1.7rem;
  translate: 0 -50%;
  width: 0.6rem;
  aspect-ratio: 3.6/4.2;
  -webkit-mask: url(/assets/images/opencampus/common/icon-arrow.svg) no-repeat center/contain;
          mask: url(/assets/images/opencampus/common/icon-arrow.svg) no-repeat center/contain;
}
#opencampus main > .schedule ul li:not([data-label=closed]) a .label::after {
  content: "";
  aspect-ratio: 1;
  border-radius: 50%;
  background-color: #fff;
}
#opencampus main > .schedule ul li:not([data-label=closed]) a:focus {
  translate: 0.4rem 0.4rem;
  box-shadow: initial;
}
@media (hover: hover) and (pointer: fine) {
  #opencampus main > .schedule ul li:not([data-label=closed]) a:where(:-moz-any-link, :enabled, summary):hover {
    translate: 0.4rem 0.4rem;
    box-shadow: initial;
  }
  #opencampus main > .schedule ul li:not([data-label=closed]) a:where(:any-link, :enabled, summary):hover {
    translate: 0.4rem 0.4rem;
    box-shadow: initial;
  }
}
#opencampus main > .schedule ul li[data-label=closed] {
  pointer-events: none;
  opacity: 0.5;
}
#opencampus main > .schedule ul li[data-label=closed] .label {
  text-align: center;
  background-color: #999999;
}
#opencampus main > .schedule ul li[data-label=open] .label {
  background-color: var(--color-accent);
}
#opencampus main > .schedule ul li[data-label=open] .label::before {
  background-color: var(--color-accent);
}
#opencampus main > .schedule ul li[data-label=coming] {
  pointer-events: none;
}
#opencampus main > .schedule ul li[data-label=coming] .label {
  background-color: var(--color-main);
  font-family: var(--font-josefin);
  letter-spacing: -0.05em;
  line-height: 1.2;
}
#opencampus main > .schedule ul li[data-label=coming] .label::before {
  background-color: var(--color-main);
}
#opencampus main > .schedule .notes {
  grid-column: 2;
  grid-row: 2;
  margin: 5.5rem 0 0 2.6rem;
  font-weight: 400;
  line-height: 1.2;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #opencampus main > .schedule .notes {
    margin: 2.8rem 0 0 0;
    line-height: 1.5;
  }
}
#opencampus main > .schedule .notes p {
  font-size: 1.6rem;
}
#opencampus main > .schedule .notes p + p {
  margin-top: 1.8rem;
}
#opencampus main > .schedule .notes p a {
  font-weight: 700;
  text-decoration: underline;
}
#opencampus main > .schedule .notes p a:focus {
  text-decoration: initial;
}
@media (hover: hover) and (pointer: fine) {
  #opencampus main > .schedule .notes p a:where(:-moz-any-link, :enabled, summary):hover {
    text-decoration: initial;
  }
  #opencampus main > .schedule .notes p a:where(:any-link, :enabled, summary):hover {
    text-decoration: initial;
  }
}
#opencampus main > :where(.point, .pickup, .strength, .voice, .access) {
  margin-top: -27.5rem;
  border-radius: 8.2rem 8.2rem 0 0;
  border: 1px solid var(--color-font);
  border-bottom-color: transparent;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #opencampus main > :where(.point, .pickup, .strength, .voice, .access) {
    margin-top: -6rem;
    border-radius: 6rem 6rem 0 0;
  }
}
#opencampus main > :where(.flow, .curriculum, .results, .event, .movie, .movie ~ .about, .faq, .application) {
  border-left: 1px solid var(--color-font);
  border-right: 1px solid var(--color-font);
}
#opencampus main > .point {
  padding: 17rem calc(50% - 55rem) 0;
  background-color: #fff;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #opencampus main > .point {
    padding: 10.9rem 2rem 0;
  }
}
#opencampus main > .point hgroup {
  display: flex;
  gap: 2rem 5.1rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #opencampus main > .point hgroup {
    flex-direction: column;
    text-align: center;
  }
}
#opencampus main > .point hgroup p {
  padding-top: 0.6rem;
  font-size: 3.2rem;
  line-height: 1.3;
  letter-spacing: 0.03em;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #opencampus main > .point hgroup p {
    font-size: 2.4rem;
    font-weight: 400;
  }
}
#opencampus main > .point ol {
  display: grid;
  grid-template-columns: 58.4rem 39.5rem;
  justify-content: space-between;
  row-gap: 10rem;
  counter-reset: item;
  list-style-type: none;
  margin-top: 2.7rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #opencampus main > .point ol {
    display: block;
    margin-top: 3.9rem;
  }
}
#opencampus main > .point ol li + li {
  margin-top: 6rem;
}
#opencampus main > .point ol li figure {
  border-radius: 0.5rem;
  border: 1px solid var(--color-font);
  overflow: hidden;
}
#opencampus main > .point ol li h3 {
  position: relative;
  z-index: 2;
  margin-top: 3rem;
  color: var(--color-main);
  font-size: 2rem;
  font-weight: 700;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #opencampus main > .point ol li h3 {
    margin-top: 4.6rem;
    text-align: center;
    font-weight: 500;
  }
}
#opencampus main > .point ol li h3::before {
  content: "0" counter(item);
  counter-increment: item;
  position: absolute;
  z-index: -1;
  top: -3.5rem;
  left: -3.5rem;
  color: #fef4f5;
  font-family: var(--font-josefin);
  font-size: 13.2rem;
  font-weight: 400;
  letter-spacing: 0.03em;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #opencampus main > .point ol li h3::before {
    left: 0.3rem;
    font-size: 9.2rem;
  }
}
#opencampus main > .point ol li p {
  position: relative;
  z-index: 2;
  margin-top: 1.6rem;
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 2;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #opencampus main > .point ol li p {
    margin-top: 2rem;
  }
}
#opencampus main > .point ol li:nth-of-type(1) {
  grid-column: 1;
  grid-row: 1/span 2;
  margin-top: 14rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #opencampus main > .point ol li:nth-of-type(1) {
    margin-top: initial;
  }
}
#opencampus main > .point ol li:nth-of-type(2) {
  grid-column: 2;
}
#opencampus main > .point ol li:nth-of-type(3) {
  grid-column: 2;
}
#opencampus main .flow {
  position: relative;
  z-index: 1;
  padding: 11.8rem calc(50% - 63.2rem) 38.3rem;
  background-color: #fff;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #opencampus main .flow {
    padding: 12.5rem 2rem 14rem;
  }
}
#opencampus main .flow .inner {
  position: relative;
  border-radius: 1rem;
  border: 1px solid var(--color-font);
  padding: 9rem 10.6rem;
  background-color: var(--color-base);
  background-image: linear-gradient(rgba(255, 255, 255, 0.35) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.35) 1px, transparent 1px);
  background-size: 3.2rem 3.2rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #opencampus main .flow .inner {
    padding: 5.5rem 1.5rem;
  }
}
#opencampus main .flow .inner::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -16.9rem;
  left: 6.8rem;
  width: 39.6rem;
  aspect-ratio: 396/169;
  background: url(/assets/images/opencampus/top/flow-decoration.png) no-repeat center/contain;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #opencampus main .flow .inner::before {
    top: -7.6rem;
    left: initial;
    right: 1.4rem;
    width: 18rem;
  }
}
#opencampus main .flow .common-heading {
  display: flex;
  align-items: baseline;
  -moz-column-gap: 1.1rem;
       column-gap: 1.1rem;
}
#opencampus main .flow .content {
  position: relative;
  display: grid;
  grid-template-columns: 22rem 32rem 38rem;
  gap: 6.7rem 4.8rem;
  padding: 4rem 0 0 2.8rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #opencampus main .flow .content {
    grid-template-columns: 1fr;
    padding: 3.8rem 0 0 0;
  }
}
#opencampus main .flow .content::before {
  content: "";
  position: absolute;
  top: 8rem;
  right: 0;
  width: calc(100% - 2.8rem);
  height: 1px;
  background-color: var(--color-font);
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #opencampus main .flow .content::before {
    top: 4.7rem;
    right: initial;
    left: 7rem;
    width: 1px;
    height: calc(100% - 4.5rem);
  }
}
#opencampus main .flow .content dl {
  position: relative;
  display: grid;
  grid-template-columns: auto 11.7rem;
  justify-content: space-between;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #opencampus main .flow .content dl {
    grid-template-columns: auto 21.5rem;
    row-gap: 1.8rem;
  }
}
#opencampus main .flow .content dl::before {
  content: "";
  position: absolute;
  top: 3.6rem;
  left: -0.5rem;
  width: 1rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background-color: var(--color-main);
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #opencampus main .flow .content dl::before {
    top: 0.8rem;
    left: 6.5rem;
  }
}
#opencampus main .flow .content dl dt {
  grid-column: 1;
  margin-bottom: 3.5rem;
  color: var(--color-main);
  font-family: var(--font-josefin);
  font-size: 1.6rem;
  font-weight: 500;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #opencampus main .flow .content dl dt {
    grid-row: 1/span 2;
    margin-top: 0.8rem;
    font-size: 1.4rem;
  }
}
#opencampus main .flow .content dl dd {
  font-size: 1.6rem;
  line-height: 1.5;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #opencampus main .flow .content dl dd {
    grid-row: 1;
  }
}
#opencampus main .flow .content dl dd:not(.image) {
  grid-column: 1;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #opencampus main .flow .content dl dd:not(.image) {
    grid-column: 2;
  }
}
#opencampus main .flow .content dl dd.image {
  grid-column: 2;
  grid-row: 1/span 7;
  align-self: flex-end;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #opencampus main .flow .content dl dd.image {
    grid-row: 2;
    align-self: initial;
  }
}
#opencampus main .flow .content dl dd.image figure {
  border-radius: 0.5rem;
  border: 1px solid var(--color-font);
  translate: 0 1rem;
  overflow: hidden;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #opencampus main .flow .content dl dd.image figure {
    translate: initial;
  }
}
#opencampus main .flow .content dl dd ul li::before {
  content: "・";
}
#opencampus main .flow .common-link {
  grid-template-columns: 1fr 9.6rem;
  width: min(40rem, 100%);
  margin: 5rem auto 0;
  text-align: center;
  font-weight: 500;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #opencampus main .flow .common-link {
    grid-template-columns: 1fr 7.2rem;
    width: min(31rem, 100%);
    margin-top: 7rem;
    padding-block: 0.9rem;
  }
}
#opencampus main .flow .common-link::after {
  background-image: url(/assets/images/opencampus/common/icon-contact.svg);
}
#opencampus main .flow .common-link span {
  grid-column: 1;
  display: block;
  font-size: 2rem;
  line-height: 1.3;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #opencampus main .flow .common-link span {
    font-size: 1.5rem;
    line-height: 1.2;
  }
}
#opencampus main .flow .common-link span span {
  font-size: 3rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #opencampus main .flow .common-link span span {
    font-size: 2.2rem;
  }
}
#opencampus main .pickup {
  position: relative;
  z-index: 2;
  border: initial;
  padding: 16.2rem calc(50% - 55rem) 40rem;
  background-color: #f2aab0;
  background-image: linear-gradient(rgba(255, 255, 255, 0.35) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.35) 1px, transparent 1px);
  background-size: 3.2rem 3.2rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #opencampus main .pickup {
    padding: 7.6rem 2rem 26.1rem;
  }
}
#opencampus main .pickup hgroup {
  display: grid;
  grid-template-columns: auto 1fr;
  -moz-column-gap: 3rem;
       column-gap: 3rem;
  padding-left: 10rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #opencampus main .pickup hgroup {
    display: block;
    padding-left: initial;
  }
}
#opencampus main .pickup hgroup .common-heading {
  grid-row: 1/span 2;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #opencampus main .pickup hgroup .common-heading {
    text-align: center;
  }
}
#opencampus main .pickup hgroup .common-heading .en {
  color: #fff;
}
#opencampus main .pickup hgroup h3 {
  grid-column: 2;
  font-size: 3.2rem;
  line-height: 1;
  font-weight: 400;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #opencampus main .pickup hgroup h3 {
    margin-top: 0.9rem;
    text-align: center;
    color: #fff;
    font-size: 2.4rem;
    line-height: 1.3;
  }
}
#opencampus main .pickup hgroup p {
  grid-column: 2;
  grid-row: 2;
  margin-top: 1.3rem;
  font-size: 1.6rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #opencampus main .pickup hgroup p {
    margin-top: 2.8rem;
    color: #fff;
    font-size: 1.4rem;
    font-weight: 400;
    line-height: 1.5;
  }
}
#opencampus main .pickup ol {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.4rem 1.1rem;
  counter-reset: item;
  list-style-type: none;
  margin-top: 6.2rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #opencampus main .pickup ol {
    grid-template-columns: 1fr;
    margin-top: 5rem;
  }
}
#opencampus main .pickup ol li {
  counter-increment: item;
  position: relative;
  border-radius: 1rem;
  border: 1px solid var(--color-font);
  padding: 7.8rem 1.5rem 2.6rem;
  background-color: #fff;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #opencampus main .pickup ol li {
    padding: 6.6rem 2rem 2.5rem;
  }
}
#opencampus main .pickup ol li::before {
  content: "0" counter(item);
  position: absolute;
  top: 2.8rem;
  left: 2.8rem;
  -webkit-text-stroke: 3px var(--color-font);
  paint-order: stroke;
  color: var(--color-accent);
  font-family: var(--font-josefin);
  font-size: 9.6rem;
  line-height: 1;
  letter-spacing: -0.05em;
}
#opencampus main .pickup ol li::after {
  content: "0" counter(item);
  position: absolute;
  top: 2.5rem;
  left: 2.5rem;
  -webkit-text-stroke: 3px var(--color-font);
  paint-order: stroke;
  color: #fff;
  font-family: var(--font-josefin);
  font-size: 9.6rem;
  line-height: 1;
  letter-spacing: -0.05em;
}
#opencampus main .pickup ol li figure {
  width: 21.8rem;
  margin-inline: auto;
  overflow: hidden;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #opencampus main .pickup ol li figure {
    width: 23rem;
  }
}
#opencampus main .pickup ol li h4 {
  margin-top: 1.8rem;
  font-size: 2rem;
  font-weight: 700;
}
#opencampus main .pickup ol li p {
  margin-top: 0.5rem;
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1.5;
}
#opencampus main .pickup .movie {
  position: relative;
  margin: 8.7rem 0 0 8.5rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #opencampus main .pickup .movie {
    margin: 15.5rem 0 0 0;
  }
}
#opencampus main .pickup .movie::before {
  content: "";
  position: absolute;
  top: 8rem;
  left: 67rem;
  z-index: 2;
  width: 39.2rem;
  aspect-ratio: 392/388;
  background: url(/assets/images/opencampus/top/pickup-comment.png) no-repeat center/contain;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #opencampus main .pickup .movie::before {
    top: initial;
    bottom: -16rem;
    left: 2.6rem;
    width: 30rem;
    aspect-ratio: 300/149;
    background-image: url(/assets/images/opencampus/top/pickup-comment-sp.png);
  }
}
#opencampus main .pickup .movie button {
  position: relative;
  width: min(63.7rem, 100%);
}
#opencampus main .pickup .movie button::before, #opencampus main .pickup .movie button::after {
  content: "Check";
  position: absolute;
  z-index: 2;
  top: -4.3rem;
  left: -8.4rem;
  -webkit-text-stroke: 3px var(--color-font);
  paint-order: stroke;
  pointer-events: none;
  font-family: var(--font-josefin);
  font-size: 6.4rem;
  letter-spacing: -0.05em;
  transform: rotate(-5deg);
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #opencampus main .pickup .movie button::before, #opencampus main .pickup .movie button::after {
    top: -4.3rem;
    left: 0rem;
    font-size: 3.4rem;
  }
}
#opencampus main .pickup .movie button::before {
  color: #bbebfb;
  translate: 0.4rem 0.4rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #opencampus main .pickup .movie button::before {
    translate: 0.3rem 0.3rem;
  }
}
#opencampus main .pickup .movie button::after {
  color: #fff;
}
@media (any-hover: hover) {
  #opencampus main .pickup .movie button:hover {
    filter: brightness(1.1);
  }
}
#opencampus main .pickup .movie img {
  border: 1px solid var(--color-font);
  background: var(--color-font);
  border-radius: 1rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #opencampus main .pickup .movie img {
    border-radius: 0.5rem;
  }
}
#opencampus main .strength {
  position: relative;
  z-index: 2;
  padding: 16rem calc(50% - 55rem) 0rem;
  background-color: #fefbfc;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #opencampus main .strength {
    padding: 5.6rem 2rem 0rem;
  }
}
#opencampus main .strength .common-heading {
  text-align: center;
}
#opencampus main .strength ul {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem 1.1rem;
  margin-top: 5rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #opencampus main .strength ul {
    grid-template-columns: 1fr;
  }
}
#opencampus main .strength ul li {
  position: relative;
  border-radius: 1rem;
  background-color: #fff;
  border: 1px solid var(--color-main);
  border-left: 2rem solid var(--color-main);
  padding: 2rem 2.5rem 1rem 1.6rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #opencampus main .strength ul li {
    border-left-width: 1.8rem;
    padding: 2rem 2rem 2.6rem 1.8rem;
  }
}
#opencampus main .strength ul li::before {
  content: "";
  position: absolute;
  top: 1.9rem;
  right: 2.6rem;
  z-index: 2;
  width: 10.9rem;
  aspect-ratio: 1;
  background: url(/assets/images/opencampus/top/strength-icon01.svg) no-repeat center/contain;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #opencampus main .strength ul li::before {
    top: 2rem;
    right: 2rem;
  }
}
#opencampus main .strength ul li p {
  font-size: 1.8rem;
  line-height: 1.6;
}
#opencampus main .strength ul li h3 {
  display: inline-block;
  margin-top: 3rem;
  font-feature-settings: "palt";
  font-size: 1.3rem;
  line-height: 1.5;
  letter-spacing: 0.1em;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #opencampus main .strength ul li h3 {
    letter-spacing: 0.08em;
  }
}
#opencampus main .strength ul li h3 strong {
  display: inline-block;
  padding-right: 0.6rem;
  color: var(--color-main);
  font-size: 2rem;
  font-weight: 700;
}
#opencampus main .strength ul li:nth-of-type(2)::before {
  background-image: url(/assets/images/opencampus/top/strength-icon02.svg);
}
#opencampus main .strength ul li:nth-of-type(2) h3 {
  text-align: end;
}
#opencampus main .strength ul li:nth-of-type(2) h3 strong {
  display: block;
  text-align: initial;
}
#opencampus main .strength ul li:nth-of-type(3)::before {
  background-image: url(/assets/images/opencampus/top/strength-icon03.svg);
}
#opencampus main .strength ul li:nth-of-type(3) h3 {
  white-space: nowrap;
}
#opencampus main .curriculum {
  padding: 13.6rem calc(50% - 55rem) 0rem;
  background-color: #fefbfc;
  overflow: hidden;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #opencampus main .curriculum {
    padding: 11.4rem 2rem 0rem;
  }
}
#opencampus main .curriculum > .inner {
  position: relative;
}
#opencampus main .curriculum > .inner::before {
  content: "";
  position: absolute;
  top: -11rem;
  right: -12rem;
  z-index: 2;
  width: 28.7rem;
  aspect-ratio: 287/275;
  background: url(/assets/images/opencampus/top/curriculum-comment.png) no-repeat center/contain;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #opencampus main .curriculum > .inner::before {
    display: none;
  }
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #opencampus main .curriculum .common-heading {
    text-align: center;
  }
}
#opencampus main .curriculum .common-heading .ja {
  margin-top: 1rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #opencampus main .curriculum .common-heading .ja {
    margin-top: initial;
  }
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #opencampus main .curriculum .image {
    overflow-x: scroll;
  }
}
#opencampus main .curriculum .image figure {
  margin-top: 8.5rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #opencampus main .curriculum .image figure {
    width: 110rem;
    margin-top: 5.7rem;
  }
}
#opencampus main .curriculum .partner {
  display: grid;
  grid-template-columns: 1fr 79rem;
  margin-top: 7rem;
  padding-inline: calc(50% - 49.5rem);
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #opencampus main .curriculum .partner {
    grid-template-columns: 1fr;
    margin-top: 5.6rem;
    padding-inline: initial;
  }
}
#opencampus main .curriculum .partner h3 {
  padding-top: 20rem;
  color: var(--color-main);
  font-size: 2.4rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #opencampus main .curriculum .partner h3 {
    padding-top: initial;
    text-align: center;
    font-size: 2.2rem;
  }
}
#opencampus main .curriculum .partner .content {
  border-radius: 1rem;
  border: 1px solid var(--color-font);
  background-color: var(--color-base);
  padding: 2rem 2.4rem 3.2rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #opencampus main .curriculum .partner .content {
    margin-top: 2.4rem;
    padding: 2rem 2.4rem 3.2rem;
  }
}
#opencampus main .curriculum .partner .content dl {
  border-bottom: 1px solid rgba(51, 51, 51, 0.3);
}
#opencampus main .curriculum .partner .content dl dt {
  position: relative;
  cursor: pointer;
  padding-block: 1.5rem;
  font-size: 1.6rem;
  transition: background-color 0.2s ease;
}
@media (any-hover: hover) {
  #opencampus main .curriculum .partner .content dl dt:hover {
    background-color: rgba(51, 51, 51, 0.1);
  }
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #opencampus main .curriculum .partner .content dl dt {
    font-size: 1.5rem;
  }
}
#opencampus main .curriculum .partner .content dl dt::before, #opencampus main .curriculum .partner .content dl dt::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  translate: 0 -50%;
  width: 1.4rem;
  height: 2px;
  border-radius: calc(infinity * 1px);
  background-color: var(--color-main);
  transition: transform 0.2s ease;
}
#opencampus main .curriculum .partner .content dl dt::after {
  transform: rotate(-90deg);
}
#opencampus main .curriculum .partner .content dl dd {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s ease-in-out;
}
#opencampus main .curriculum .partner .content dl dd .inner {
  overflow: hidden;
}
#opencampus main .curriculum .partner .content dl dd ul {
  -moz-column-count: 2;
       column-count: 2;
  padding: 1.6rem 3.2rem 2.4rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #opencampus main .curriculum .partner .content dl dd ul {
    padding: 1.6rem 0 2.4rem;
  }
}
#opencampus main .curriculum .partner .content dl dd ul li {
  font-size: 1.4rem;
  line-height: 1.6;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #opencampus main .curriculum .partner .content dl dd ul li {
    font-size: 1.2rem;
  }
}
#opencampus main .curriculum .partner .content dl.is-open dt::after {
  transform: rotate(0deg);
}
#opencampus main .curriculum .partner .content dl.is-open dd {
  grid-template-rows: 1fr;
}
#opencampus main .results {
  background-color: #fefbfc;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #opencampus main .results {
    padding-inline: 2rem;
  }
}
#opencampus main .results .inner {
  padding: 12rem calc(50% - 55rem) 0rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #opencampus main .results .inner {
    padding: 12.7rem 0 0rem;
  }
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #opencampus main .results .inner .common-heading {
    text-align: center;
  }
}
#opencampus main .results .inner > ul {
  -moz-column-count: 3;
       column-count: 3;
  border-top: 1px solid var(--color-font);
  margin-top: 1.5rem;
  padding-top: 2.4rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #opencampus main .results .inner > ul {
    -moz-column-count: initial;
         column-count: initial;
    margin-top: 2.3rem;
  }
}
#opencampus main .results .inner > ul li {
  font-size: 1.7rem;
  font-weight: 400;
  line-height: 1.6;
}
#opencampus main .results .wrapper {
  width: min(126.5rem, 100%);
  border: 1px solid var(--color-font);
  border-radius: 1rem;
  margin: 11.2rem auto 0;
  padding: 6.9rem 9rem 8rem 7.5rem;
  background-color: var(--color-base);
  background-image: linear-gradient(rgba(255, 255, 255, 0.35) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.35) 1px, transparent 1px);
  background-size: 3.2rem 3.2rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #opencampus main .results .wrapper {
    margin-top: 7.5rem;
    padding: 4.6rem 1.8rem 8rem;
    overflow: hidden;
  }
}
#opencampus main .results .wrapper h3 {
  position: relative;
  font-size: 3.2rem;
  font-weight: 700;
  letter-spacing: 0.03em;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #opencampus main .results .wrapper h3 {
    font-size: 2.2rem;
  }
}
#opencampus main .results .wrapper h3::before {
  position: absolute;
  color: rgba(242, 147, 160, 0.1);
  white-space: nowrap;
  font-family: var(--font-josefin);
  font-weight: 500;
  letter-spacing: -0.05em;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #opencampus main .results .wrapper h3::before {
    writing-mode: vertical-rl;
    color: rgba(255, 255, 255, 0.5);
    font-weight: 300;
  }
}
#opencampus main .results .wrapper .data h3::before {
  content: "Number of Butsuryo";
  top: -4.5rem;
  left: 19.4rem;
  font-size: 11.4rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #opencampus main .results .wrapper .data h3::before {
    top: -2rem;
    left: 24rem;
  }
}
#opencampus main .results .wrapper .data ul {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.2rem 1.1rem;
  margin-top: 4.2rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #opencampus main .results .wrapper .data ul {
    grid-template-columns: 1fr;
    margin-top: 3rem;
  }
}
#opencampus main .results .wrapper .data ul li {
  position: relative;
  box-shadow: 0.4rem 0.4rem 0 0 var(--color-accent), 0.4rem 0.4rem 0 1px #333;
  border-radius: 0.5rem;
  border: 1px solid var(--color-font);
  padding: 2rem 1.3rem 2rem 10rem;
  background-color: #fff;
  text-align: center;
  font-size: 1.4rem;
  font-weight: 400;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #opencampus main .results .wrapper .data ul li {
    padding: 2.4rem 1.3rem 1.7rem 9.2rem;
    font-size: 1.2rem;
  }
}
#opencampus main .results .wrapper .data ul li::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 2.7rem;
  translate: 0 -50%;
  width: 5.7rem;
  aspect-ratio: 57/68;
  background: url(/assets/images/opencampus/top/results-icon01.svg) no-repeat center/contain;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #opencampus main .results .wrapper .data ul li::before {
    width: 5rem;
  }
}
#opencampus main .results .wrapper .data ul li span:first-of-type {
  display: block;
  margin-bottom: 0.8rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #opencampus main .results .wrapper .data ul li span:first-of-type {
    white-space: nowrap;
  }
}
#opencampus main .results .wrapper .data ul li .count {
  color: var(--color-main);
  font-family: var(--font-josefin);
  font-size: 5.8rem;
  font-weight: 500;
  line-height: 1;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #opencampus main .results .wrapper .data ul li .count {
    font-size: 5rem;
  }
}
#opencampus main .results .wrapper .data ul li:nth-of-type(2)::before {
  background-image: url(/assets/images/opencampus/top/results-icon02.svg);
}
#opencampus main .results .wrapper .data ul li:nth-of-type(3) {
  position: relative;
}
#opencampus main .results .wrapper .data ul li:nth-of-type(3)::before {
  background-image: url(/assets/images/opencampus/top/results-icon03.svg);
}
#opencampus main .results .wrapper .data ul li:nth-of-type(4)::before {
  background-image: url(/assets/images/opencampus/top/results-icon04.svg);
}
#opencampus main .results .wrapper .data ul li:nth-of-type(5)::before {
  background-image: url(/assets/images/opencampus/top/results-icon05.svg);
}
#opencampus main .results .wrapper .data ul li:nth-of-type(6)::before {
  background-image: url(/assets/images/opencampus/top/results-icon06.svg);
}
#opencampus main .results .wrapper .entrants {
  padding-top: 8.2rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #opencampus main .results .wrapper .entrants {
    padding-top: 6.7rem;
  }
}
#opencampus main .results .wrapper .entrants h3::before {
  content: "High Schools of Past Entrants";
  top: -3rem;
  left: 10rem;
  font-size: 8.5rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #opencampus main .results .wrapper .entrants h3::before {
    display: none;
  }
}
#opencampus main .results .wrapper .entrants ul {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.6rem;
  margin-top: 5.2rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #opencampus main .results .wrapper .entrants ul {
    grid-template-columns: 1fr;
    margin-top: 3.6rem;
  }
}
#opencampus main .results .wrapper .entrants ul li button {
  position: relative;
  width: 100%;
  border-radius: calc(infinity * 1px);
  padding-block: 2.4rem;
  background-color: var(--color-main);
  text-align: center;
  font-size: 2.4rem;
  font-weight: 700;
  letter-spacing: 0.16rem;
}
@media (any-hover: hover) {
  #opencampus main .results .wrapper .entrants ul li button:hover {
    background-color: var(--color-accent);
  }
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #opencampus main .results .wrapper .entrants ul li button {
    padding-block: 1rem;
    font-size: 1.3rem;
  }
}
#opencampus main .results .wrapper .entrants ul li button span {
  position: absolute;
  top: 50%;
  right: 2.4rem;
  translate: 0 -50%;
  width: 3.6rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background-color: #fff;
  transition: 0.3s;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #opencampus main .results .wrapper .entrants ul li button span {
    right: 1rem;
    width: 2rem;
  }
}
#opencampus main .results .wrapper .entrants ul li button span::before, #opencampus main .results .wrapper .entrants ul li button span::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 1.1rem;
  translate: 0 -50%;
  width: 1.4rem;
  height: 2px;
  border-radius: calc(infinity * 1px);
  background-color: var(--color-font);
  transition: transform 0.2s ease;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #opencampus main .results .wrapper .entrants ul li button span::before, #opencampus main .results .wrapper .entrants ul li button span::after {
    right: 0.7rem;
    width: 0.6rem;
    height: 1px;
  }
}
#opencampus main .results .wrapper .entrants ul li button span::after {
  transform: rotate(-90deg);
}
#opencampus main .event {
  background-color: #fefbfc;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #opencampus main .event {
    grid-template-columns: 1fr;
    row-gap: 5rem;
  }
}
#opencampus main .event > .inner {
  position: relative;
  display: grid;
  grid-template-columns: 39rem 1fr;
  padding: 17.2rem 0 39.5rem 15rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #opencampus main .event > .inner {
    grid-template-columns: 1fr;
    row-gap: 5rem;
    padding: 8rem 0 14rem 2rem;
  }
}
#opencampus main .event > .inner::before {
  content: "";
  position: absolute;
  top: 34rem;
  left: 14rem;
  width: 32.5rem;
  aspect-ratio: 325/200;
  background: url(/assets/images/opencampus/top/event-img.png) no-repeat center/contain;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #opencampus main .event > .inner::before {
    top: 7rem;
    left: 20rem;
    width: 16.3rem;
  }
}
#opencampus main .event .common-heading {
  margin-top: 4rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #opencampus main .event .common-heading {
    margin-top: initial;
  }
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #opencampus main .event .common-heading .en {
    line-height: 0.8;
  }
}
#opencampus main .event .content {
  border-radius: 1rem 0 0 1rem;
  border: 1px solid var(--color-font);
  border-right-color: #fff;
  background-color: #fff;
  padding: 2.9rem 0 2.8rem 4.3rem;
  overflow: hidden;
  translate: 1px 0;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #opencampus main .event .content {
    translate: initial;
  }
}
#opencampus main .event .content .inner {
  display: grid;
  grid-template-columns: repeat(9, 19.2rem);
  -moz-column-gap: 4rem;
       column-gap: 4rem;
  overflow-x: scroll;
  padding: 0 4.3rem 2.4rem 0;
}
#opencampus main .event dl {
  display: grid;
  grid-template-rows: auto 1fr auto;
}
#opencampus main .event dl:not(:first-of-type) {
  position: relative;
}
#opencampus main .event dl:not(:first-of-type)::before {
  content: "";
  position: absolute;
  left: -2rem;
  z-index: 2;
  width: 1px;
  height: 18.2rem;
  background-color: #b8b8b8;
}
#opencampus main .event dl dt {
  color: var(--color-main);
  font-size: 2.8rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.05em;
}
#opencampus main .event dl dd.text {
  margin-block: 1.4rem;
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 1.5;
}
#opencampus main .event dl dd.image {
  border: 1px solid var(--color-font);
  border-radius: 1rem;
  overflow: hidden;
}
#opencampus main .voice {
  position: relative;
  padding: 15rem calc(50% - 55rem) 0;
  background-color: #fff;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #opencampus main .voice {
    padding: 5.3rem 2rem 0;
  }
}
#opencampus main .voice .common-heading {
  margin-bottom: 4rem;
  text-align: center;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #opencampus main .voice .common-heading {
    margin-bottom: 3.6rem;
  }
}
#opencampus main .voice section {
  position: relative;
  display: grid;
  grid-template-columns: 49.3rem 1fr;
  gap: 3.5rem 3.6rem;
  border-radius: 1rem;
  border: 1px solid var(--color-font);
  padding: 2.3rem 6rem 2.3rem 2.7rem;
  background-color: var(--color-base);
  background-image: linear-gradient(rgba(255, 255, 255, 0.35) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.35) 1px, transparent 1px);
  background-size: 3.2rem 3.2rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #opencampus main .voice section {
    display: block;
    padding: 1.3rem 1.8rem 2rem;
  }
}
#opencampus main .voice section + section {
  margin-top: 2.5rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #opencampus main .voice section + section {
    margin-top: 2rem;
  }
}
#opencampus main .voice section h3 {
  position: relative;
  min-width: 30.6rem;
  width: -moz-fit-content;
  width: fit-content;
  padding-block: 1.7rem;
  text-align: center;
  font-size: 2.8rem;
  translate: -2.7rem 0;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #opencampus main .voice section h3 {
    min-width: 20.9rem;
    padding-block: 1.2rem 1.4rem;
    font-size: 1.8rem;
    translate: -1.8rem;
  }
}
#opencampus main .voice section h3::before, #opencampus main .voice section h3::after {
  content: "";
  position: absolute;
  left: 0rem;
  height: 100%;
  border: 1px solid var(--color-font);
  border-left-color: transparent;
  border-radius: 0 0.5rem 0.5rem 0;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #opencampus main .voice section h3::before, #opencampus main .voice section h3::after {
    border-radius: 0 0.4rem 0.4rem 0;
  }
}
#opencampus main .voice section h3::before {
  top: 0;
  z-index: -1;
  width: 100%;
  background-color: #fff;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #opencampus main .voice section h3::before {
    width: 20.9rem;
  }
}
#opencampus main .voice section h3::after {
  top: 0.4rem;
  z-index: -2;
  width: calc(100% + 0.4rem);
  background-color: #bbebfb;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #opencampus main .voice section h3::after {
    top: 0.2rem;
    width: calc(100% + 0.2rem);
  }
}
#opencampus main .voice section .movie {
  width: min(49.3rem, 100%);
  grid-column: 1;
  grid-row: 2;
  border: 1px solid var(--color-font);
  border-radius: 1rem;
  background-color: var(--color-font);
  overflow: hidden;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #opencampus main .voice section .movie {
    border-radius: 0.4rem;
    margin-top: 2.3rem;
  }
}
@media (any-hover: hover) {
  #opencampus main .voice section .movie button:hover {
    filter: brightness(1.08);
  }
}
#opencampus main .voice section dl {
  grid-column: 1;
  grid-row: 3;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #opencampus main .voice section dl {
    margin-top: 2.1rem;
  }
}
#opencampus main .voice section dl dt {
  margin-bottom: 1rem;
  font-size: 2rem;
  font-weight: 500;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #opencampus main .voice section dl dt {
    margin-bottom: 1.4rem;
  }
}
#opencampus main .voice section dl dd {
  font-size: 1.2rem;
  line-height: 1.5;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #opencampus main .voice section dl dd {
    font-size: 1.1rem;
  }
}
#opencampus main .voice section .message {
  grid-column: 2;
  grid-row: 2/span 2;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #opencampus main .voice section .message {
    margin-top: 1.5rem;
    max-height: 17rem;
    overflow-y: scroll;
  }
}
#opencampus main .voice section .message header {
  color: var(--color-main);
  font-size: 1.9rem;
  font-weight: 700;
  line-height: 2;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #opencampus main .voice section .message header {
    font-size: 1.5rem;
  }
}
#opencampus main .voice section .message p {
  font-size: 1.5rem;
  line-height: 2;
}
#opencampus main .voice section.teacher dl dd {
  text-indent: -5em;
  padding-left: 5em;
}
#opencampus main > .movie {
  padding: 12rem calc(50% - 41.2rem) 0;
  background-color: #fff;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #opencampus main > .movie {
    padding: 8rem 2rem 0;
  }
}
#opencampus main > .movie .inner {
  position: relative;
}
#opencampus main > .movie .inner::before {
  content: "";
  position: absolute;
  top: 16.5rem;
  left: 4.5rem;
  width: 14.2rem;
  aspect-ratio: 142/355;
  background: url(/assets/images/opencampus/top/movie-decoration.png) no-repeat center/contain;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #opencampus main > .movie .inner::before {
    display: none;
  }
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #opencampus main > .movie .common-heading {
    text-align: center;
  }
}
#opencampus main > .movie figure {
  position: relative;
  grid-column: 1;
  grid-row: 2;
  width: min(54.5rem, 100%);
  margin: 8.7rem 0 0 27.7rem;
  background: var(--color-font);
  border-radius: 1rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #opencampus main > .movie figure {
    margin: 12.3rem 0 0 0;
  }
}
#opencampus main > .movie figure iframe {
  display: block;
  border: 1px solid var(--color-font);
  overflow: hidden;
  border-radius: 1rem;
}
#opencampus main > .movie figure figcaption {
  position: absolute;
  top: -8.6rem;
  left: 50%;
  translate: -50% 0;
  text-align: center;
  font-size: 1.8rem;
  line-height: 1.4;
  letter-spacing: 0.05em;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #opencampus main > .movie figure figcaption {
    top: -6.4rem;
    font-size: 1.6rem;
    white-space: nowrap;
  }
}
#opencampus main > .movie figure figcaption::before, #opencampus main > .movie figure figcaption::after {
  content: "";
  position: absolute;
  top: 0rem;
  width: 1px;
  height: 6rem;
  background-color: var(--color-accent);
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #opencampus main > .movie figure figcaption::before, #opencampus main > .movie figure figcaption::after {
    height: 5rem;
  }
}
#opencampus main > .movie figure figcaption::before {
  left: -2rem;
  transform: rotate(-22deg);
}
#opencampus main > .movie figure figcaption::after {
  right: -2rem;
  transform: rotate(22deg);
}
#opencampus main > .movie ~ .about {
  background-color: #fff;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #opencampus main > .movie ~ .about {
    padding-top: 14rem;
  }
}
#opencampus main .faq {
  padding: 9rem calc(50% - 46rem) 0;
  background-color: #fff;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #opencampus main .faq {
    padding: 10rem 2rem 0;
  }
}
#opencampus main .faq .content {
  margin-top: 1.8rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #opencampus main .faq .content {
    margin-top: 2.2rem;
  }
}
#opencampus main .faq .content dl dt {
  position: relative;
  display: grid;
  grid-template-columns: 3rem 1fr 1.2rem;
  align-items: center;
  -moz-column-gap: 1.2rem;
       column-gap: 1.2rem;
  cursor: pointer;
  border-bottom: 1px solid rgba(51, 51, 51, 0.3);
  padding: 2.3rem 6rem 2.3rem 2rem;
  font-size: 1.7rem;
  font-weight: 500;
  transition: background-color 0.2s ease;
}
@media (any-hover: hover) {
  #opencampus main .faq .content dl dt:hover {
    background-color: rgba(51, 51, 51, 0.1);
  }
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #opencampus main .faq .content dl dt {
    padding: 1.6rem 1rem 1.6rem 1rem;
    font-size: 1.6rem;
    line-height: 1.5;
  }
}
#opencampus main .faq .content dl dt::before {
  content: "Q";
  display: grid;
  place-content: center;
  border-radius: 50%;
  aspect-ratio: 1;
  padding-top: 0.4rem;
  background-color: var(--color-main);
  color: #fff;
  font-family: var(--font-josefin);
  font-size: 1.7rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #opencampus main .faq .content dl dt::before {
    font-weight: 300;
  }
}
#opencampus main .faq .content dl dt::after {
  content: "";
  aspect-ratio: 1;
  border-bottom: 0.2rem solid var(--color-main);
  border-right: 0.2rem solid var(--color-main);
  transform: rotate(45deg);
  transition: transform 0.2s ease;
}
#opencampus main .faq .content dl dd {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s ease-in-out;
}
#opencampus main .faq .content dl dd .wrapper {
  overflow: hidden;
}
#opencampus main .faq .content dl dd .body {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  -moz-column-gap: 1.8rem;
       column-gap: 1.8rem;
  margin: 1.2rem 2rem;
  padding: 1.1rem 2rem;
  background-color: #d9d9d9;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #opencampus main .faq .content dl dd .body {
    -moz-column-gap: 1.2rem;
         column-gap: 1.2rem;
    margin: 1.2rem 1rem;
    padding: 1.1rem 1.8rem;
  }
}
#opencampus main .faq .content dl dd .body::before {
  content: "A";
  color: var(--color-main);
  font-family: var(--font-josefin);
  font-size: 1.7rem;
}
#opencampus main .faq .content dl dd p {
  font-size: 1.4rem;
  line-height: 1.5;
}
#opencampus main .faq .content dl.is-open dt::after {
  transform: rotate(-135deg) translate(-0.4rem, -0.4rem);
}
#opencampus main .faq .content dl.is-open dd {
  grid-template-rows: 1fr;
}
#opencampus main .application {
  background-color: #fff;
  padding: 8.8rem calc(50% - 60rem) 37.1rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #opencampus main .application {
    padding: 10rem 2rem 13rem;
  }
}
#opencampus main .application .inner {
  border-radius: 1rem;
  border: 1px solid var(--color-font);
  padding: 9.1rem 7.4rem 4.2rem;
  background-color: var(--color-base);
  background-image: linear-gradient(rgba(255, 255, 255, 0.35) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.35) 1px, transparent 1px);
  background-size: 3.2rem 3.2rem;
  overflow: hidden;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #opencampus main .application .inner {
    padding: 4.5rem 2rem 3.1rem;
  }
}
#opencampus main .application h2 {
  position: relative;
  font-size: 3.2rem;
  font-weight: 700;
  letter-spacing: 0.03em;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #opencampus main .application h2 {
    font-size: 2.2rem;
  }
}
#opencampus main .application h2::before {
  content: "Application";
  position: absolute;
  top: -4rem;
  left: 55rem;
  color: rgba(242, 147, 160, 0.1);
  white-space: nowrap;
  font-family: var(--font-josefin);
  font-weight: 500;
  letter-spacing: -0.05em;
  font-size: 13.4rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #opencampus main .application h2::before {
    left: 25rem;
    writing-mode: vertical-rl;
    color: rgba(255, 255, 255, 0.5);
    font-size: 8.4rem;
    font-weight: 300;
  }
}
#opencampus main .application ul {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  align-items: baseline;
  gap: 1.6rem 1.1rem;
  margin-top: 7.5rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #opencampus main .application ul {
    grid-template-columns: 1fr;
    row-gap: 1.6rem;
    margin-top: 2.7rem;
  }
}
#opencampus main .application ul li a {
  position: relative;
  display: block;
  border-radius: calc(infinity * 1px);
  padding-block: 1rem;
  text-align: center;
  font-size: 2.2rem;
}
#opencampus main .application ul li a:focus {
  opacity: 0.8;
}
@media (hover: hover) and (pointer: fine) {
  #opencampus main .application ul li a:where(:-moz-any-link, :enabled, summary):hover {
    opacity: 0.8;
  }
  #opencampus main .application ul li a:where(:any-link, :enabled, summary):hover {
    opacity: 0.8;
  }
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #opencampus main .application ul li a {
    padding: 1rem 4rem;
    text-align: initial;
    font-size: 1.7rem;
    font-weight: 400;
  }
}
#opencampus main .application ul li a time {
  font-family: var(--font-josefin);
  font-weight: 400;
}
#opencampus main .application ul li[data-label=closed] a {
  pointer-events: none;
  background-color: #999999;
  color: #fff;
}
#opencampus main .application ul li[data-label=open] a {
  background-color: var(--color-accent);
}
#opencampus main .application ul li[data-label=open] a:focus {
  opacity: 0.8;
}
#opencampus main .application ul li[data-label=open] a:focus::after {
  translate: 0.5rem -50%;
}
@media (hover: hover) and (pointer: fine) {
  #opencampus main .application ul li[data-label=open] a:where(:-moz-any-link, :enabled, summary):hover {
    opacity: 0.8;
  }
  #opencampus main .application ul li[data-label=open] a:where(:any-link, :enabled, summary):hover {
    opacity: 0.8;
  }
  #opencampus main .application ul li[data-label=open] a:where(:-moz-any-link, :enabled, summary):hover::after {
    translate: 0.5rem -50%;
  }
  #opencampus main .application ul li[data-label=open] a:where(:any-link, :enabled, summary):hover::after {
    translate: 0.5rem -50%;
  }
}
#opencampus main .application ul li[data-label=coming] a {
  pointer-events: none;
  background-color: var(--color-main);
  font-family: var(--font-josefin);
}
#opencampus main .application ul li[data-label=coming] a .label {
  font-weight: 400;
}
#opencampus main .access {
  background-color: #fff1f1;
  padding: 6.5rem calc(50% - 55rem) 8rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #opencampus main .access {
    padding: 6.4rem 2rem 7.4rem;
  }
}
#opencampus main .access .common-heading {
  text-align: center;
}
#opencampus main .access .inner {
  display: grid;
  grid-template-columns: 45.2rem auto;
  gap: 2.4rem 4.3rem;
  margin-top: 4rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #opencampus main .access .inner {
    grid-template-columns: 1fr;
    margin-top: 5.6rem;
  }
}
#opencampus main .access .inner figure {
  border: 1px solid var(--color-font);
  border-radius: 1rem;
  overflow: hidden;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #opencampus main .access .inner figure {
    border-radius: 0.7rem;
  }
}
#opencampus main .access .inner dl {
  padding-top: 10.8rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #opencampus main .access .inner dl {
    padding-top: initial;
  }
}
#opencampus main .access .inner dl dt {
  font-size: 3.2rem;
  letter-spacing: 0.03em;
  font-weight: 500;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #opencampus main .access .inner dl dt {
    font-size: 2.2rem;
  }
}
#opencampus main .access .inner dl dd {
  margin-top: 2.1rem;
  font-size: 2rem;
  font-weight: 400;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #opencampus main .access .inner dl dd {
    margin-top: 1.1rem;
    font-size: 1.6rem;
  }
}
#opencampus main .access .inner dl dd a {
  display: grid;
  grid-template-columns: auto 2.4rem;
  -moz-column-gap: 0.5rem;
       column-gap: 0.5rem;
  margin-top: 1.6rem;
  width: -moz-fit-content;
  width: fit-content;
  text-decoration: underline;
  font-size: 1.6rem;
}
#opencampus main .access .inner dl dd a:focus {
  text-decoration: initial;
}
@media (hover: hover) and (pointer: fine) {
  #opencampus main .access .inner dl dd a:where(:-moz-any-link, :enabled, summary):hover {
    text-decoration: initial;
  }
  #opencampus main .access .inner dl dd a:where(:any-link, :enabled, summary):hover {
    text-decoration: initial;
  }
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #opencampus main .access .inner dl dd a {
    grid-template-columns: auto 1.2rem;
    margin-top: 0.8rem;
    font-size: 1.4rem;
  }
}
#opencampus main .access .inner dl dd a::after {
  content: "";
  display: inline-block;
  aspect-ratio: 1;
  background: url(/assets/images/opencampus/top/access-icon-map.svg) no-repeat center/contain;
}
#opencampus main .access h3 {
  display: grid;
  grid-template-columns: 3rem auto 1fr;
  align-items: center;
  -moz-column-gap: 0.5rem;
       column-gap: 0.5rem;
  font-size: 2rem;
  font-weight: 700;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #opencampus main .access h3 {
    font-size: 1.6rem;
    font-weight: 500;
  }
}
#opencampus main .access h3::before {
  content: "";
  aspect-ratio: 1;
}
#opencampus main .access :where(.train, .car) h3::after {
  content: "";
  height: 1px;
  background-color: var(--color-font);
}
#opencampus main .access .bus {
  padding-top: 8rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #opencampus main .access .bus {
    padding-top: 5.3rem;
  }
}
#opencampus main .access .bus h3 {
  margin-bottom: 0.7rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #opencampus main .access .bus h3 {
    margin-bottom: 1rem;
  }
}
#opencampus main .access .bus h3::before {
  background: url(/assets/images/opencampus/top/access-icon-bus.svg) no-repeat center/contain;
}
#opencampus main .access .bus .time {
  border-radius: 0.3rem;
  border: 1px solid var(--color-font);
  padding-block: 2rem;
  background-color: #fff;
  text-align: center;
  font-size: 2rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #opencampus main .access .bus .time {
    padding-block: 3.3rem;
  }
}
#opencampus main .access .bus ul {
  padding: 1.2rem 0 0 4rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #opencampus main .access .bus ul {
    padding: 1.1rem 0 0 0;
  }
}
#opencampus main .access .bus ul li {
  font-size: 1.4rem;
  line-height: 1.5;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #opencampus main .access .bus ul li {
    font-size: 1.3rem;
  }
}
#opencampus main .access .train {
  padding-top: 4.8rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #opencampus main .access .train {
    padding-top: 4rem;
  }
}
#opencampus main .access .train h3 {
  margin-bottom: 3rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #opencampus main .access .train h3 {
    margin-bottom: 2.6rem;
  }
}
#opencampus main .access .train h3::before {
  background: url(/assets/images/opencampus/top/access-icon-train.svg) no-repeat center/contain;
}
#opencampus main .access .car {
  padding-top: 6rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #opencampus main .access .car {
    padding-top: 4rem;
  }
}
#opencampus main .access .car h3 {
  margin-bottom: 3rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #opencampus main .access .car h3 {
    margin-bottom: 1.5rem;
  }
}
#opencampus main .access .car h3::before {
  background: url(/assets/images/opencampus/top/access-icon-car.svg) no-repeat center/contain;
}
#opencampus main .access .car p {
  font-size: 2rem;
  line-height: 1.6;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #opencampus main .access .car p {
    font-size: 1.6rem;
    font-weight: 400;
  }
}
#opencampus main .closing {
  display: grid;
  align-items: center;
  height: 52.7rem;
  padding-inline: 6.4rem;
  background: url(/assets/images/opencampus/top/closing-bg.jpg) no-repeat center/cover;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #opencampus main .closing {
    padding: 3rem 3.2rem 0;
    background-image: url(/assets/images/opencampus/top/closing-bg-sp.jpg);
  }
}
#opencampus main .closing p {
  width: -moz-fit-content;
  width: fit-content;
  color: #fff;
  font-size: 3.2rem;
  line-height: 1.5;
  letter-spacing: 0.03em;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #opencampus main .closing p {
    font-size: 1.6rem;
    font-weight: 400;
  }
}
#opencampus main .closing p .en {
  margin-top: 1.9rem;
  display: grid;
  grid-template-columns: 7.4rem auto;
  align-items: center;
  justify-content: flex-end;
  -moz-column-gap: 1.1rem;
       column-gap: 1.1rem;
  font-family: var(--font-josefin);
  font-size: 2rem;
  letter-spacing: -0.02em;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #opencampus main .closing p .en {
    padding-right: 1em;
    grid-template-columns: 3.7rem auto;
    font-size: 1rem;
    font-weight: 400;
  }
}
#opencampus main .closing p .en::before {
  content: "";
  height: 1px;
  background-color: #fff;
}
#features main .fv {
  background-image: url(/assets/images/features/fv.jpg);
}
#features main figure {
  border-radius: 0.5rem;
  overflow: hidden;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #features main figure {
    border-radius: 0.3rem;
  }
}
#features main .common-inner > section:where(.teatures, .curriculum, .career) {
  padding-block: 10rem 12rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #features main .common-inner > section:where(.teatures, .curriculum, .career) {
    padding-block: 8rem;
  }
}
#features main .common-inner > section:where(.teatures, .curriculum, .career):where(.teatures, .career) {
  -o-border-image: linear-gradient(var(--color-base) 0 0) 0/0/0 100vw;
     border-image: linear-gradient(var(--color-base) 0 0) fill 0/0/0 100vw;
}
#features main .common-inner > section:where(.teatures, .curriculum, .career) .common-link {
  margin: 7.2rem auto 0;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #features main .common-inner > section:where(.teatures, .curriculum, .career) .common-link {
    margin-top: 4rem;
  }
}
#features main .intro {
  padding-bottom: 13rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #features main .intro {
    padding-bottom: 8rem;
  }
}
#features main .intro .data {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem 4rem;
  margin-top: 3.6rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #features main .intro .data {
    grid-template-columns: 1fr;
  }
}
#features main .intro .data dl {
  display: grid;
  justify-content: center;
  gap: 1.6rem;
  border-radius: 0.3rem;
  border: 1px solid var(--color-line);
  padding: 3.5rem 1rem;
  background-color: #fff;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #features main .intro .data dl {
    padding: 2.4rem 1rem;
  }
}
#features main .intro .data dl dt {
  width: -moz-fit-content;
  width: fit-content;
  margin-inline: auto;
  padding: 0.6rem 0.9rem 0.5rem 1rem;
  background-color: var(--color-main);
  color: #fff;
  font-family: var(--font-biz-mincho);
  font-size: 2.2rem;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.12em;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #features main .intro .data dl dt {
    font-size: 1.6rem;
  }
}
#features main .intro .data dl dd {
  font-family: var(--font-biz-mincho);
}
#features main .intro .data dl dd .number {
  color: var(--color-main);
  font-size: 2rem;
}
#features main .intro .data dl dd .number em {
  margin-right: 0.4rem;
  font-style: initial;
  font-size: 10rem;
  line-height: 1;
  letter-spacing: -0.06em;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #features main .intro .data dl dd .number em {
    font-size: 8rem;
  }
}
#features main .intro .data dl dd .note {
  display: block;
  margin-top: 1.6rem;
  text-align: center;
  font-size: 1.2rem;
}
#features main .teatures p + p {
  margin-top: 2em;
}
#features main .teatures figure {
  margin-top: 3.6rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #features main .teatures figure {
    overflow-x: auto;
  }
  #features main .teatures figure img {
    width: 93.4rem;
  }
}
#features main .curriculum .common-heading-h2 span {
  display: block;
  margin-bottom: 0.4rem;
  font-size: 1.6rem;
}
#features main .curriculum .wrapper {
  margin-top: 3.6rem;
  border: 1px solid var(--color-line);
  padding: 4rem 5.2rem 6.2rem;
  background-color: #fff;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #features main .curriculum .wrapper {
    padding: 4rem 2.4rem;
  }
}
#features main .curriculum .wrapper .qualification {
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  justify-content: center;
  -moz-column-gap: 8rem;
       column-gap: 8rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #features main .curriculum .wrapper .qualification {
    grid-template-columns: 1fr;
    width: -moz-fit-content;
    width: fit-content;
    margin-inline: auto;
  }
}
#features main .curriculum .wrapper .qualification h3 {
  font-family: var(--font-biz-mincho);
  font-size: var(--font-size-md);
  font-weight: 400;
  line-height: 1.3;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #features main .curriculum .wrapper .qualification .common-list {
    margin-top: 2rem;
  }
}
#features main .curriculum .wrapper .qualification .common-list li {
  -moz-column-gap: 1.2rem;
       column-gap: 1.2rem;
}
#features main .curriculum .wrapper > ul {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: center;
  -moz-column-gap: 3.6rem;
       column-gap: 3.6rem;
  margin-top: 5.5rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #features main .curriculum .wrapper > ul {
    justify-content: center;
    grid-template-columns: repeat(2, auto);
    -moz-column-gap: 1.6rem;
         column-gap: 1.6rem;
    margin-top: 4rem;
  }
}
#features main .curriculum .wrapper > ul li {
  display: grid;
  place-content: center;
  aspect-ratio: 1;
  border-radius: 50%;
  background-color: var(--color-main);
  color: #fff;
  text-align: center;
  padding-bottom: 1rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #features main .curriculum .wrapper > ul li {
    width: 14.1rem;
  }
}
#features main .curriculum .wrapper > ul li .label {
  margin-bottom: 0.4rem;
  text-decoration: underline;
  text-underline-offset: 0.6rem;
  font-family: var(--font-biz-mincho);
  font-size: 2.2rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #features main .curriculum .wrapper > ul li .label {
    font-size: 1.6rem;
  }
}
#features main .curriculum .wrapper > ul li .value {
  font-size: 3.2rem;
  line-height: 1;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #features main .curriculum .wrapper > ul li .value {
    font-size: 2rem;
  }
}
#features main .curriculum .wrapper > ul li .value b {
  font-size: 8rem;
  font-weight: 400;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #features main .curriculum .wrapper > ul li .value b {
    font-size: 4rem;
  }
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #features main .curriculum .wrapper > ul li:nth-of-type(1) {
    justify-self: center;
    grid-column: 1/span 2;
  }
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #features main .curriculum .wrapper > ul li:nth-of-type(2) {
    grid-column: 1;
    grid-row: 2;
  }
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #features main .curriculum .wrapper > ul li:nth-of-type(3) {
    grid-column: 2;
    grid-row: 2;
  }
}
#features main .career .inner {
  display: grid;
  grid-template-columns: 1fr 30rem;
  gap: 2.4rem 5rem;
  align-items: flex-start;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #features main .career .inner {
    grid-template-columns: 1fr;
  }
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #features main .career .body {
    grid-row: 2;
  }
}
#features main .career .body .wrapper {
  position: relative;
  display: grid;
  grid-template-columns: 14.8rem 1fr;
  align-items: center;
  -moz-column-gap: 1.1rem;
       column-gap: 1.1rem;
  margin-top: 3.6rem;
  border: 1px solid var(--color-line);
  background-color: #fff;
  padding: 3.6rem 1.7rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #features main .career .body .wrapper {
    grid-template-columns: 1fr;
    margin-top: 4rem;
    padding: 2.4rem 2.4rem;
  }
}
#features main .career .body .wrapper::before {
  content: "";
  aspect-ratio: 1;
  border-radius: 50%;
  background-color: #f0f5ff;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #features main .career .body .wrapper::before {
    width: 14rem;
    justify-self: center;
  }
}
#features main .career .body .wrapper::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 6.3rem;
  translate: 0 -50%;
  z-index: 2;
  width: 5.7rem;
  aspect-ratio: 57/68;
  background: url(/assets/images/features/carrer-icon.svg) no-repeat center/contain;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #features main .career .body .wrapper::after {
    top: 7rem;
    left: 50%;
    translate: -50% 0;
  }
}
#features main .career .body .wrapper p {
  padding-top: 0.5rem;
  font-size: 2.8rem;
  line-height: 1;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #features main .career .body .wrapper p {
    padding-top: 1.6rem;
    text-align: center;
    font-size: 2.4rem;
  }
}
#features main .career .body .wrapper p span {
  display: block;
  margin-bottom: 1rem;
  color: var(--color-main);
  font-size: 2rem;
  font-weight: 500;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #features main .career .body .wrapper p span {
    font-size: 1.6rem;
  }
}
#features main .career .body .wrapper p b {
  font-size: 10rem;
  font-weight: 400;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #features main .career .body .wrapper p b {
    font-size: 6.4rem;
  }
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #features main .career figure {
    width: 24rem;
    margin-inline: auto;
  }
}
#features main .fee {
  padding-top: 10rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #features main .fee {
    padding-top: 8rem;
  }
}
#features main .fee .inner {
  display: grid;
  grid-template-columns: 39rem 1fr;
  -moz-column-gap: 5rem;
       column-gap: 5rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #features main .fee .inner {
    grid-template-columns: 1fr;
  }
}
#features main .fee .inner .body {
  padding-top: 2.4rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #features main .fee .inner .body {
    padding-top: 4rem;
  }
}
#features main .fee .inner .body .common-arrow-link {
  margin-top: 7.2rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #features main .fee .inner .body .common-arrow-link {
    margin-top: 4rem;
  }
}
#features main .campuslife {
  padding-block: 7.2rem 11rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #features main .campuslife {
    padding-block: 8rem;
  }
}
#features main .campuslife .body p {
  grid-column: 1;
}
#features main .campuslife .body .common-arrow-link {
  margin-top: 3rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #features main .campuslife .body .common-arrow-link {
    margin-top: 4rem;
  }
}
#features main .campuslife figure {
  margin-top: 4.3rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #features main .campuslife figure {
    margin-top: 2.4rem;
  }
}

#philosophy main .fv {
  background-image: url(/assets/images/philosophy/fv.jpg);
}
#philosophy main .common-inner {
  padding-bottom: 10.4rem;
}
#philosophy main .common-inner .philosophy > section {
  padding-top: 8rem;
}
#philosophy main .common-inner .philosophy h3 {
  margin-bottom: 3rem;
  border-bottom: 2px solid var(--color-main);
  padding-bottom: 1.2rem;
  color: var(--color-main);
  font-size: 2.8rem;
  line-height: 1.3;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #philosophy main .common-inner .philosophy h3 {
    margin-bottom: 2rem;
    padding-bottom: 0.8rem;
    font-size: 2rem;
  }
}
#philosophy main .common-inner .philosophy .detail {
  display: grid;
  grid-template-columns: 1fr 32rem;
  gap: 4rem 6.4rem;
  margin-top: 3rem;
  padding: 6.4rem 5.8rem;
  background-color: var(--color-base);
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #philosophy main .common-inner .philosophy .detail {
    grid-template-columns: 1fr;
    padding: 4rem 4rem;
  }
}
#philosophy main .common-inner .philosophy .detail ol {
  counter-reset: item;
}
#philosophy main .common-inner .philosophy .detail ol li {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  -moz-column-gap: 3rem;
       column-gap: 3rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #philosophy main .common-inner .philosophy .detail ol li {
    -moz-column-gap: 2.4rem;
         column-gap: 2.4rem;
  }
}
#philosophy main .common-inner .philosophy .detail ol li + li {
  margin-top: 2.4rem;
}
#philosophy main .common-inner .philosophy .detail ol li::before {
  content: counter(item);
  counter-increment: item;
  color: var(--color-main);
  font-size: 2.8rem;
  line-height: 1.3;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #philosophy main .common-inner .philosophy .detail ol li::before {
    font-size: 2.4rem;
  }
}
#philosophy main .common-inner .philosophy .detail ol li dl dt {
  margin-bottom: 0.4rem;
  font-weight: 500;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #philosophy main .common-inner .philosophy .detail ol li dl dt {
    margin-bottom: 0.2rem;
  }
}
#philosophy main .common-inner .philosophy .detail figure {
  border-radius: 0.5rem;
  overflow: hidden;
}
#philosophy main .common-inner .philosophy .detail + p {
  margin-top: 3rem;
}
#philosophy main .common-inner .philosophy .common-list {
  margin-top: 3rem;
}
#philosophy main .common-inner .philosophy .common-list li + li {
  margin-top: 0.8rem;
}
#philosophy main .common-inner .philosophy .common-list li dl {
  display: grid;
  grid-template-columns: auto 1fr;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #philosophy main .common-inner .philosophy .common-list li dl {
    grid-template-columns: 1fr;
  }
}
#philosophy main .common-inner .philosophy .common-list li dl dt {
  color: var(--color-main);
  font-weight: 500;
}

#research main .fv {
  background-image: url(/assets/images/research/fv.jpg);
}
#research main .research {
  padding-bottom: 11rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #research main .research > hgroup .common-heading-h2 {
    font-size: 2rem;
    letter-spacing: 0.04em;
  }
}
#research main .research > hgroup a {
  color: var(--color-main);
  text-decoration: underline;
  font-weight: 700;
}
@media (any-hover: hover) {
  #research main .research > hgroup a:hover {
    text-decoration: initial;
  }
}
#research main .research > section {
  padding-top: 8rem;
}
#research main .research > section .related-links {
  margin-top: 3rem;
}
#research main .research > section .contact-list {
  margin-top: 3rem;
  padding: 4rem 5.7rem 3.8rem;
  background-color: var(--color-base);
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #research main .research > section .contact-list {
    padding: 4rem 4rem;
  }
}
#research main .research > section .contact-list dt {
  margin-bottom: 1.6rem;
  color: var(--color-main);
  font-weight: 700;
}
#research main .research > section .contact-list dd + dd {
  margin-top: 0.4rem;
}
@media (any-hover: hover) {
  #research main .research > section .contact-list dd a:hover {
    text-decoration: underline;
  }
}
#research main .research > section .common-list {
  margin-top: 3rem;
}
#research main .research > section .common-list li + li {
  margin-top: 0.8rem;
}
#research main .research > section .common-list dl dt {
  font-family: var(--font-biz-mincho);
  color: var(--color-main);
  font-size: var(--font-size-md);
  font-weight: 500;
  line-height: 1.3;
}
#research main .research > section hgroup + a {
  margin-top: 3rem;
}

#community main .fv {
  background-image: url(/assets/images/community/fv.jpg);
}
#community main .common-intro {
  padding-block: 8rem 7.2rem;
}
#community main .lecture {
  -o-border-image: linear-gradient(var(--color-base) 0 0) 0/0/0 100vw;
     border-image: linear-gradient(var(--color-base) 0 0) fill 0/0/0 100vw;
  padding-block: 13rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #community main .lecture {
    padding-block: 8rem;
  }
}
#community main .lecture .inner {
  display: grid;
  grid-template-columns: 1fr 35rem;
  gap: 3.2rem 9.7rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #community main .lecture .inner {
    grid-template-columns: 1fr;
  }
}
#community main .lecture figure {
  grid-column: 2;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #community main .lecture figure {
    grid-column: 1;
  }
}
#community main .lecture figure img {
  border-radius: 0.5rem;
}
#community main .lecture .body {
  grid-column: 1;
  grid-row: 1;
}
#community main .lecture .body p {
  margin-bottom: 1rem;
}
#community main .lecture .body p + p {
  margin-top: 1.5em;
}
#community main .lecture .body .common-link {
  margin-top: 2.7rem;
}
#community main .public {
  padding-block: 8rem 11rem;
}
#community main .public .common-table {
  margin-block: 2rem;
}
#community main .public .common-table th {
  background-color: var(--color-base);
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #community main .public .common-table th {
    padding-inline: 1rem;
  }
}
#community main .public .common-table td {
  padding-inline: 5rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #community main .public .common-table td {
    padding-inline: 2.4rem;
  }
}
#community main .public section {
  padding-top: 4rem;
}
#community main .public section .common-table {
  width: 100%;
  margin-block: 4rem;
}
#community main .public section .common-table th {
  font-size: 1.6rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #community main .public section .common-table th {
    font-size: 1.4rem;
  }
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #community main .public section .common-table td {
    padding-inline: 1rem;
  }
}
#community main .public .inner {
  padding-top: 4rem;
}
#community main .public .inner > p {
  font-family: var(--font-biz-mincho);
  font-size: var(--font-size-md);
}
#community main .public .inner .common-contact {
  margin-top: 1.6rem;
}

#donate main .fv {
  background-image: url(/assets/images/donate/fv.jpg);
}
#donate main .outreach {
  margin-top: 10rem;
  -o-border-image: linear-gradient(var(--color-base) 0 0) 0/0/0 100vw;
     border-image: linear-gradient(var(--color-base) 0 0) fill 0/0/0 100vw;
  padding-block: 13rem 12rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #donate main .outreach {
    padding-block: 8rem;
  }
}
#donate main .outreach > div > ol {
  counter-reset: item;
}
#donate main .outreach > div > ol > li {
  margin-top: 8rem;
}
#donate main .outreach > div > ol > li h3 {
  display: grid;
  grid-template-columns: auto 1fr;
}
#donate main .outreach > div > ol > li h3::before {
  content: counter(item) ".";
  counter-increment: item;
  margin-right: 0.6rem;
}
#donate main .outreach > div > ol > li dl {
  margin-top: 1.8rem;
}
#donate main .outreach > div > ol > li dl dt {
  margin-bottom: 0.8rem;
  color: var(--color-main);
  font-weight: 700;
}
#donate main .outreach > div > ol > li dl dd + dt {
  margin-block: 1.8rem;
}
#donate main .outreach > div > ol > li .common-table {
  margin-top: 0.4rem;
}
#donate main .outreach > div > ol > li .common-table tr {
  grid-template-columns: 30rem 1fr 1fr;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #donate main .outreach > div > ol > li .common-table tr {
    grid-template-columns: 10rem 1fr 1fr;
  }
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #donate main .outreach > div > ol > li .common-table tr th,
  #donate main .outreach > div > ol > li .common-table tr td {
    padding: 0.8rem 1.2rem;
    font-size: 1.4rem;
  }
}
#donate main .outreach > div > ol > li .common-table tr.row-2 {
  grid-template-rows: 1fr 1fr;
}
#donate main .outreach > div > ol > li .common-table tr.row-2 th {
  grid-row: 1/span 3;
}
#donate main .outreach > div > ol > li .common-table tr.row-2 td:nth-of-type(1) {
  grid-row: 1/span 3;
}
#donate main .outreach > div > ol > li .common-table tr.row-2 td:nth-of-type(3) {
  grid-row: 2;
  margin-top: -1px;
}
#donate main .outreach > div > ol > li .common-table th {
  font-size: 1.6rem;
}
#donate main .outreach > div > ol > li .common-table tbody {
  translate: 0 -1px;
}
#donate main .outreach > div > ol > li .step-list {
  counter-reset: item;
}
#donate main .outreach > div > ol > li .step-list li + li {
  margin-top: 3.2rem;
}
#donate main .outreach > div > ol > li .step-list li h4 {
  display: grid;
  grid-template-columns: auto 1fr;
  margin-bottom: 2.4rem;
}
#donate main .outreach > div > ol > li .step-list li h4::before {
  content: counter(item) "）";
  counter-increment: item;
}
#donate main .outreach > div > ol > li a + a {
  margin-top: 3rem;
}
#donate main .outreach > div > ol > li figure {
  margin-top: 1.6rem;
}
#donate main .outreach > div > ol > li figure img {
  border-radius: 0.5rem;
}
#donate main .outreach > div > ol > li .common-notes {
  margin-top: 1.8rem;
}
#donate main .outreach .common-contact {
  margin-top: 5.4rem;
}
#donate main .contact {
  padding-block: 6.4rem 11rem;
}
#donate main .contact .common-contact {
  margin-top: 1.6rem;
}
#donate main .contact .common-contact h3 {
  margin-bottom: 1.6rem;
}
#donate main .contact .common-contact .common-link {
  margin-bottom: 3.4rem;
}

#lecture main .fv {
  background-image: url(/assets/images/lecture/fv.jpg);
}
#lecture main .intro {
  padding-bottom: 11rem;
}
#lecture main .intro .common-intro .related-links {
  margin-top: 3.2rem;
}
#lecture main .intro .contact {
  margin-top: 10.4rem;
  border: 1px solid var(--color-line);
  padding: 2.4rem 4rem;
  text-align: center;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #lecture main .intro .contact {
    margin-top: 4rem;
    padding: 2.4rem;
  }
}
#lecture main .intro .contact .common-link {
  margin: 2.4rem auto;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #lecture main .intro .contact .common-link {
    margin-block: 1.6rem;
  }
}
#lecture main .intro .contact p.description {
  color: var(--color-main);
  font-size: 2rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #lecture main .intro .contact p.description {
    font-size: 1.6rem;
  }
}
#lecture main .intro .contact p.fax {
  font-size: var(--font-size-md);
}
#lecture main .search {
  -o-border-image: linear-gradient(var(--color-base) 0 0) 0/0/0 100vw;
     border-image: linear-gradient(var(--color-base) 0 0) fill 0/0/0 100vw;
  padding-block: 10rem 11rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #lecture main .search {
    padding-block: 8rem;
  }
}
#lecture main .search .filter {
  padding: 8rem 14rem;
  background-color: #fff;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #lecture main .search .filter {
    padding: 3.2rem 2.4rem;
  }
}
#lecture main .search .filter fieldset + fieldset {
  margin-top: 3.2rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #lecture main .search .filter fieldset + fieldset {
    margin-top: 2.4rem;
  }
}
#lecture main .search .filter fieldset legend {
  width: 100%;
  margin-bottom: 1.4rem;
  border-bottom: 1px solid var(--color-main);
  padding-bottom: 1.4rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #lecture main .search .filter fieldset legend {
    margin-bottom: 1rem;
    padding-bottom: 0.8rem;
  }
}
#lecture main .search .filter fieldset .checkboxes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.2rem;
  border-top: 0.1rem solid var(--color-border);
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #lecture main .search .filter fieldset .checkboxes {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.8rem;
  }
}
#lecture main .search .filter fieldset .checkboxes label {
  display: grid;
  grid-template-columns: 2.2rem auto;
  -moz-column-gap: 1.2rem;
       column-gap: 1.2rem;
  width: -moz-fit-content;
  width: fit-content;
  align-items: center;
  cursor: pointer;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #lecture main .search .filter fieldset .checkboxes label {
    grid-template-columns: 1.6rem auto;
    -moz-column-gap: 0.8rem;
         column-gap: 0.8rem;
  }
}
#lecture main .search .filter fieldset .checkboxes label input[type=checkbox] {
  position: absolute;
  width: 0.1rem;
  height: 0.1rem;
  opacity: 0;
}
#lecture main .search .filter fieldset .checkboxes label input[type=checkbox]:checked + .box {
  background-color: var(--color-main);
  border-color: var(--color-main);
}
#lecture main .search .filter fieldset .checkboxes label input[type=checkbox]:checked + .box::after {
  opacity: 1;
}
#lecture main .search .filter fieldset .checkboxes label input[type=checkbox]:focus-visible + .box {
  outline: 0.2rem solid var(--color-main);
  outline-offset: 0.2rem;
}
#lecture main .search .filter fieldset .checkboxes label .box {
  position: relative;
  display: grid;
  place-content: center;
  aspect-ratio: 1;
  border: 1px solid var(--color-line);
  background-color: #fff;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
#lecture main .search .filter fieldset .checkboxes label .box::after {
  content: "";
  display: block;
  width: 1.1rem;
  aspect-ratio: 11/7;
  border-left: 0.2rem solid #fff;
  border-bottom: 0.2rem solid #fff;
  transform: rotate(-45deg) translate(0.1rem, -0.1rem);
  opacity: 0;
  transition: opacity 0.2s ease;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #lecture main .search .filter fieldset .checkboxes label .box::after {
    width: 0.8rem;
  }
}
#lecture main .search .filter fieldset .checkboxes label .text {
  line-height: 1.4;
}
#lecture main .search .filter .select {
  position: relative;
  border: 1px solid var(--color-line);
  background-color: #fff;
}
#lecture main .search .filter .select::after {
  position: absolute;
  top: 50%;
  right: 2.2rem;
  translate: 0 -50%;
  content: "";
  width: 0.7rem;
  aspect-ratio: 4/8;
  background: url(/assets/images/common/icon-arrow04.svg) no-repeat center/contain;
  transform: rotate(90deg);
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #lecture main .search .filter .select::after {
    right: 1.6rem;
  }
}
#lecture main .search .filter .select select {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  width: 100%;
  cursor: pointer;
  padding: 1rem 4rem 1rem 2rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #lecture main .search .filter .select select {
    padding: 0.8rem 3.2rem 0.8rem 1.6rem;
  }
}
#lecture main .search .result .lecture-item {
  margin-top: 3.2rem;
}
#lecture main .search .result .lecture-item.is-hidden {
  display: none;
}
#lecture main .search .result .lecture-item.is-animating {
  animation: lectureItemFadeUp 0.45s ease both;
}
#lecture main .search .result .no-result {
  margin-block: 8rem;
  text-align: center;
  color: var(--color-text-sub, #666);
  font-size: var(--font-size-md);
}
#lecture main .search .result .no-result.is-hidden {
  display: none;
}
#lecture main .search .result .no-result.is-animating {
  animation: lectureItemFadeUp 0.45s ease both;
}
#lecture main .search .result .common-table {
  width: 100%;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #lecture main .search .result .common-table tr {
    grid-template-columns: 10rem 1fr;
  }
}
#lecture main .search .result .common-table th,
#lecture main .search .result .common-table td {
  padding: 1.6rem 3rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #lecture main .search .result .common-table th,
  #lecture main .search .result .common-table td {
    padding: 0.8rem 1.2rem;
  }
}
#lecture main .search .result .common-table th {
  font-family: var(--font-noto-sans);
  font-size: var(--font-size-base);
}

@keyframes lectureItemFadeUp {
  from {
    opacity: 0;
    translate: 0 2rem;
  }
  to {
    opacity: 1;
    translate: 0 0;
  }
}
#teachers main .fv {
  background-image: url(/assets/images/teachers/fv.jpg);
}
#teachers main .common-inner > section:not(.common-intro, .common-contact) {
  padding-block: 10rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #teachers main .common-inner > section:not(.common-intro, .common-contact) {
    padding-block: 8rem;
  }
}
#teachers main .common-inner > section:not(.common-intro, .common-contact):nth-of-type(2n) {
  -o-border-image: linear-gradient(var(--color-base) 0 0) 0/0/0 100vw;
     border-image: linear-gradient(var(--color-base) 0 0) fill 0/0/0 100vw;
}
#teachers main .common-inner > section:not(.common-intro, .common-contact) .links {
  display: grid;
  grid-template-columns: repeat(2, 41.5rem);
  justify-content: center;
  gap: 1.6rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #teachers main .common-inner > section:not(.common-intro, .common-contact) .links {
    grid-template-columns: 1fr;
  }
}
#teachers main .common-inner > section:not(.common-intro, .common-contact) .links .common-link {
  width: 100%;
  -moz-column-gap: 1rem;
       column-gap: 1rem;
  font-family: var(--font-biz-mincho);
  letter-spacing: 0.1em;
}
#teachers main .common-intro {
  padding-bottom: 11rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #teachers main .common-intro {
    padding-bottom: 8rem;
  }
}
#teachers main .common-intro a {
  display: inline-block;
  margin-top: 4rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #teachers main .common-intro a {
    margin-top: 2.4rem;
  }
}
#teachers main .features .data {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem 4rem;
  margin-top: 3.6rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #teachers main .features .data {
    grid-template-columns: 1fr;
  }
}
#teachers main .features .data dl {
  display: grid;
  justify-content: center;
  gap: 1.6rem;
  border-radius: 0.3rem;
  border: 1px solid var(--color-line);
  padding: 3.5rem 1rem;
  background-color: #fff;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #teachers main .features .data dl {
    padding: 2.4rem 1rem;
  }
}
#teachers main .features .data dl dt {
  width: -moz-fit-content;
  width: fit-content;
  margin-inline: auto;
  padding: 0.6rem 0.9rem 0.5rem 1rem;
  background-color: var(--color-main);
  color: #fff;
  font-family: var(--font-biz-mincho);
  font-size: 2.2rem;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.12em;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #teachers main .features .data dl dt {
    font-size: 1.6rem;
  }
}
#teachers main .features .data dl dd {
  font-family: var(--font-biz-mincho);
}
#teachers main .features .data dl dd .number {
  color: var(--color-main);
  font-size: 2rem;
}
#teachers main .features .data dl dd .number em {
  margin-right: 0.4rem;
  font-style: initial;
  font-size: 10rem;
  line-height: 1;
  letter-spacing: -0.06em;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #teachers main .features .data dl dd .number em {
    font-size: 8rem;
  }
}
#teachers main .features .data dl dd .note {
  display: block;
  margin-top: 1.6rem;
  text-align: center;
  font-size: 1.2rem;
}
#teachers main .challenge .common-intro {
  grid-template-columns: 1fr 29.1rem;
  -moz-column-gap: 5.8rem;
       column-gap: 5.8rem;
  padding-bottom: initial;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #teachers main .challenge .common-intro {
    grid-template-columns: 1fr;
  }
}
#teachers main .challenge .common-intro .body h2 {
  margin-bottom: 0.8rem;
  line-height: 1.4;
  letter-spacing: 0.04em;
}
#teachers main .challenge .common-intro .body p {
  font-family: var(--font-biz-mincho);
  font-size: 1.5rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #teachers main .challenge .inner {
    margin-top: 6rem;
  }
}
#teachers main .challenge section + section {
  margin-top: 4rem;
}
#teachers main .challenge section h3 {
  margin-bottom: 0.8rem;
  font-family: var(--font-biz-mincho);
  font-size: 2.8rem;
  line-height: 1.6;
  letter-spacing: 0.12em;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #teachers main .challenge section h3 {
    font-size: 2.2rem;
  }
}
#teachers main .challenge section h3 strong {
  display: inline-block;
  margin-right: 0.8rem;
  padding-inline: 1rem 0.8rem;
  background-color: var(--color-main);
  color: #fff;
  font-weight: 400;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #teachers main .challenge section h3 strong {
    margin-right: 0.4rem;
    padding-inline: 0.8rem 0.6rem;
  }
}
#teachers main .challenge section p {
  font-family: var(--font-biz-mincho);
  font-size: 1.5rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #teachers main .challenge section p {
    font-size: 1.4rem;
  }
}
#teachers main .challenge section > strong {
  color: var(--color-attention);
  font-family: var(--font-biz-mincho);
  font-weight: 400;
}
#teachers main .challenge .links {
  margin-top: 10rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #teachers main .challenge .links {
    margin-top: 6rem;
  }
}
#teachers main .qualification .links {
  margin-top: 7.2rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #teachers main .qualification .links {
    margin-top: 4rem;
  }
}
#teachers main .qualification dl {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  -moz-column-gap: 8rem;
       column-gap: 8rem;
  width: min(73.8rem, 100%);
  margin: 3.6rem auto 7.2rem;
  padding: 2.4rem 6.4rem;
  border: 1px solid var(--color-line);
  background-color: #fff;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #teachers main .qualification dl {
    grid-template-columns: 1fr;
    margin-block: 3.2rem 6rem;
    padding: 2.4rem;
  }
}
#teachers main .qualification dl dt {
  font-family: var(--font-biz-mincho);
  font-size: var(--font-size-md);
  font-weight: 400;
  line-height: 1.3;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #teachers main .qualification dl dd .common-list {
    margin-top: 2rem;
  }
}
#teachers main .qualification dl dd .common-list li {
  -moz-column-gap: 1.2rem;
       column-gap: 1.2rem;
}
#teachers main .visit .common-link,
#teachers main .recture .common-link {
  margin: 7.2rem auto 0;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #teachers main .visit .common-link,
  #teachers main .recture .common-link {
    margin-top: 4rem;
  }
}
#teachers main .common-contact {
  margin-block: 10rem 11rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #teachers main .common-contact {
    margin-block: 8rem;
  }
}

#recruiters main .fv {
  background-image: url(/assets/images/recruiters/fv.jpg);
}
#recruiters main .common-intro {
  padding-bottom: 11rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #recruiters main .common-intro {
    padding-bottom: 8rem;
  }
}
#recruiters main .recruitment,
#recruiters main .format {
  -o-border-image: linear-gradient(var(--color-base) 0 0) 0/0/0 100vw;
     border-image: linear-gradient(var(--color-base) 0 0) fill 0/0/0 100vw;
}
#recruiters main .recruitment {
  padding-top: 11rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #recruiters main .recruitment {
    padding-top: 8rem;
  }
}
#recruiters main .recruitment .method {
  padding-top: 3.6rem;
}
#recruiters main .recruitment .method ul {
  background-color: #fff;
  margin-top: 3.2em;
  padding: 2.4rem 4rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #recruiters main .recruitment .method ul {
    padding: 2.4rem 2.4rem;
  }
}
#recruiters main .recruitment .method ul li {
  display: grid;
  grid-template-columns: 6.4rem auto;
  align-items: center;
  gap: 2rem 1.6rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #recruiters main .recruitment .method ul li {
    grid-template-columns: 5.4rem auto;
    gap: 1.6rem 1.2rem;
  }
}
#recruiters main .recruitment .method ul li + li {
  margin-top: 4rem;
}
#recruiters main .recruitment .method ul li figure {
  display: grid;
  place-content: center;
  aspect-ratio: 1;
  border-radius: 50%;
  padding-inline: 0.4rem;
  background-color: #f0f5ff;
}
#recruiters main .recruitment .method ul li p:not(.detail) {
  font-size: 1.8rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #recruiters main .recruitment .method ul li p:not(.detail) {
    font-size: 1.4rem;
  }
}
#recruiters main .recruitment .method ul li p.detail {
  grid-column: 1/span 2;
}
#recruiters main .recruitment .method ul li .common-link {
  grid-column: 1/span 2;
  width: min(33rem, 100%);
  -moz-column-gap: 1rem;
       column-gap: 1rem;
}
#recruiters main .recruitment .method .note {
  margin-top: 1.6rem;
}
#recruiters main .format {
  padding-block: 10rem 11rem;
}
#recruiters main .common-contact {
  margin-block: 10rem 11rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #recruiters main .common-contact {
    margin-block: 8rem;
  }
}

:where(#recruitment-archive, #recruitment-single) main .fv {
  background-image: url(/assets/images/recruitment/fv.jpg);
}

#recruitment-archive main > :where(.common-inner) > :where(section) {
  padding-block: 12rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #recruitment-archive main > :where(.common-inner) > :where(section) {
    padding-block: 8rem;
  }
}
#recruitment-archive main > :where(.common-inner) > :where(section):nth-of-type(2n) {
  -o-border-image: linear-gradient(var(--color-base) 0 0) 0/0/0 100vw;
     border-image: linear-gradient(var(--color-base) 0 0) fill 0/0/0 100vw;
}
#recruitment-archive main .common-intro {
  padding-top: initial;
}
#recruitment-archive main .common-intro .lead {
  font-family: var(--font-biz-mincho);
  color: var(--color-main);
  font-size: 2.8rem;
  line-height: 1.6;
  letter-spacing: 0.12em;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #recruitment-archive main .common-intro .lead {
    font-size: 2rem;
  }
}
#recruitment-archive main .common-intro p + p {
  margin-top: 3.2rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #recruitment-archive main .common-intro p + p {
    margin-top: 2.4rem;
  }
}
#recruitment-archive main .news .common-heading-h2 {
  margin-bottom: initial;
}
#recruitment-archive main .news .news-list {
  margin-top: 1.6rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #recruitment-archive main .news .news-list {
    margin-top: 0.8rem;
  }
}
#recruitment-archive main .news .news-list li {
  border-bottom: 1px solid var(--color-line);
}
#recruitment-archive main .news .news-list a {
  display: block;
  padding-block: 2.2rem 1.2rem;
  font-family: var(--font-biz-mincho);
  transition: opacity 0.2s ease;
}
@media (any-hover: hover) {
  #recruitment-archive main .news .news-list a:hover .title {
    translate: 0.4rem;
    color: var(--color-main);
  }
}
#recruitment-archive main .news .news-list .meta {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 1.5rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #recruitment-archive main .news .news-list .meta {
    gap: 1.2rem;
  }
}
#recruitment-archive main .news .news-list .meta time {
  display: grid;
  grid-template-columns: auto 2.4rem;
  align-items: center;
  -moz-column-gap: 2.2rem;
       column-gap: 2.2rem;
  width: -moz-fit-content;
  width: fit-content;
  font-family: var(--font-lora);
  font-size: 1.3rem;
  line-height: 1.65;
  letter-spacing: 0.14em;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #recruitment-archive main .news .news-list .meta time {
    -moz-column-gap: 1.2rem;
         column-gap: 1.2rem;
  }
}
#recruitment-archive main .news .news-list .meta time::after {
  content: "";
  height: 1px;
  background-color: var(--color-font);
}
#recruitment-archive main .news .news-list .meta .tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
}
#recruitment-archive main .news .news-list .meta .tags span {
  display: grid;
  place-content: center;
  height: 2.6rem;
  border-radius: calc(infinity * 1px);
  padding-inline: 1.4rem;
  background-color: var(--color-main);
  white-space: nowrap;
  color: #fff;
  font-size: 1.2rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #recruitment-archive main .news .news-list .meta .tags span {
    height: 2.4rem;
    padding-inline: 1.2rem;
  }
}
#recruitment-archive main .news .news-list .meta .tags span.target {
  background-color: transparent;
  border: 1px solid var(--color-main);
  color: var(--color-main);
}
#recruitment-archive main .news .news-list .title {
  display: grid;
  grid-template-columns: 1.6rem auto;
  align-items: center;
  gap: 0.8rem;
  margin-top: 1.2rem;
  font-size: 1.6rem;
  line-height: 1.65;
  letter-spacing: 0.08em;
  transition: color 0.2s ease, translate 0.2s ease-out;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #recruitment-archive main .news .news-list .title {
    align-items: baseline;
    margin-top: 0.8rem;
    font-size: 1.4rem;
  }
}
#recruitment-archive main .news .news-list .title::before {
  content: "";
  aspect-ratio: 16/12;
  background: url(/assets/images/common/icon-arrow03.svg) no-repeat center/contain;
}
#recruitment-archive main .news .common-link {
  margin: 3.6rem auto 0;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #recruitment-archive main .news .common-link {
    margin-top: 3.2rem;
  }
}
#recruitment-archive main .work ul {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2.4rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #recruitment-archive main .work ul {
    grid-template-columns: 1fr;
  }
}
#recruitment-archive main .work li {
  display: grid;
  grid-template-columns: 6rem 1fr;
  grid-template-rows: auto 1fr;
  gap: 1.6rem 1rem;
  border: 1px solid var(--color-line);
  border-radius: 0.3rem;
  padding: 2.4rem;
  background-color: #fff;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #recruitment-archive main .work li {
    grid-template-columns: 5rem 1fr;
    grid-template-rows: initial;
    gap: 1rem;
  }
}
#recruitment-archive main .work figure {
  display: grid;
  place-content: center;
  border-radius: 50%;
  aspect-ratio: 1;
  padding: 1rem;
  background-color: #f0f5ff;
}
#recruitment-archive main .work h3 {
  grid-column: 2;
  align-self: center;
  color: var(--color-main);
  font-size: 2rem;
  line-height: 1.5;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #recruitment-archive main .work h3 {
    font-size: 1.8rem;
  }
}
#recruitment-archive main .work p {
  grid-column: 1/-1;
}
#recruitment-archive main .jobs ul {
  margin-top: 4rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #recruitment-archive main .jobs ul {
    margin-top: 3.2rem;
  }
}
#recruitment-archive main .jobs ul li {
  border: 1px solid var(--color-line);
  border-radius: 0.3rem;
  padding: 2.4rem 3.2rem 3.2rem;
  background-color: #fff;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #recruitment-archive main .jobs ul li {
    padding: 2.4rem;
  }
}
#recruitment-archive main .jobs ul li + li {
  margin-top: 1rem;
}
#recruitment-archive main .jobs ul h3 {
  padding: 0.4rem 1.6rem;
  background-color: var(--color-main);
  color: #fff;
  font-size: var(--font-size-md);
  font-weight: 500;
  line-height: 1.5;
}
#recruitment-archive main .jobs ul dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.8rem 3.2rem;
  margin-top: 1.6rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #recruitment-archive main .jobs ul dl {
    -moz-column-gap: 2rem;
         column-gap: 2rem;
  }
}
#recruitment-archive main .jobs ul dl dt {
  color: var(--color-main);
  font-weight: 600;
}
#recruitment-archive main .jobs .common-link {
  height: 4.8rem;
  -moz-column-gap: 8.5rem;
       column-gap: 8.5rem;
  margin: 2.4rem auto 0;
  font-size: 1.4rem;
}

#recruitment-single main .detail > section {
  margin-top: 6.4rem;
}
#recruitment-single main .detail .common-table tbody {
  display: grid;
  grid-template-columns: auto 1fr;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #recruitment-single main .detail .common-table tbody {
    grid-template-columns: 1fr;
  }
}
#recruitment-single main .detail .common-table tr {
  grid-template-columns: subgrid;
  grid-column: 1/span 2;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #recruitment-single main .detail .common-table tr {
    grid-column: 1;
  }
}
#recruitment-single main .detail .common-table th {
  font-size: 1.6rem;
}
#recruitment-single main .detail .common-table td {
  word-break: break-all;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #recruitment-single main .detail .common-table td {
    margin-left: initial;
    border-top-width: 0;
  }
}
#recruitment-single main .detail .common-table ol {
  counter-reset: item;
}
#recruitment-single main .detail .common-table ol li {
  display: grid;
  grid-template-columns: auto 1fr;
  -moz-column-gap: 0.4rem;
       column-gap: 0.4rem;
}
#recruitment-single main .detail .common-table ol li::before {
  content: counter(item) ".";
  counter-increment: item;
}
#recruitment-single main .other {
  padding-top: 8rem;
}
#recruitment-single main .other ul li {
  display: grid;
  grid-template-columns: auto 1fr;
}
#recruitment-single main .other ul li::before {
  content: "・";
}
#recruitment-single main .common-contact {
  margin-block: 11rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #recruitment-single main .common-contact {
    margin-block: 8rem;
  }
}

#students main .fv {
  background-image: url(/assets/images/students/fv.jpg);
}
#students main > :where(.common-inner) > :where(section) {
  padding-block: 12rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #students main > :where(.common-inner) > :where(section) {
    padding-block: 8rem;
  }
}
#students main > :where(.common-inner) > :where(section):where(.news, .support, .career) {
  -o-border-image: linear-gradient(var(--color-base) 0 0) 0/0/0 100vw;
     border-image: linear-gradient(var(--color-base) 0 0) fill 0/0/0 100vw;
}
#students main .portal .inner,
#students main .aaa .inner {
  border-radius: 5rem;
  border: 1px solid var(--color-line);
  padding: 4rem;
  background: url(/assets/images/students/portal-bg.svg) no-repeat center/cover;
  text-align: center;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #students main .portal .inner,
  #students main .aaa .inner {
    border-radius: 2.4rem;
    padding: 4rem 2.4rem;
  }
}
#students main .portal .inner h2,
#students main .aaa .inner h2 {
  color: var(--color-main);
  font-family: var(--font-biz-mincho);
  font-size: var(--font-size-2xl);
  line-height: 1.6;
  letter-spacing: 0.12em;
}
#students main .portal .inner .common-link,
#students main .aaa .inner .common-link {
  margin: 4rem auto;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #students main .portal .inner .common-link,
  #students main .aaa .inner .common-link {
    margin-block: 3.2rem;
  }
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #students main .portal .inner p,
  #students main .aaa .inner p {
    text-align: initial;
  }
}
#students main .portal {
  padding-block: 12rem 0;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #students main .portal {
    padding-top: 8rem;
  }
}
#students main .aaa {
  padding-block: 8rem 10rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #students main .aaa {
    padding-top: 4rem;
  }
}
#students main .news .common-heading-h2 {
  margin-bottom: initial;
}
#students main .news .news-list {
  margin-top: 1.6rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #students main .news .news-list {
    margin-top: 0.8rem;
  }
}
#students main .news .news-list li {
  border-bottom: 1px solid var(--color-line);
}
#students main .news .news-list a {
  display: block;
  padding-block: 2.2rem 1.2rem;
  font-family: var(--font-biz-mincho);
  transition: opacity 0.2s ease;
}
@media (any-hover: hover) {
  #students main .news .news-list a:hover .title {
    translate: 0.4rem;
    color: var(--color-main);
  }
}
#students main .news .news-list .meta {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 1.5rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #students main .news .news-list .meta {
    gap: 1.2rem;
  }
}
#students main .news .news-list .meta time {
  display: grid;
  grid-template-columns: auto 2.4rem;
  align-items: center;
  -moz-column-gap: 2.2rem;
       column-gap: 2.2rem;
  width: -moz-fit-content;
  width: fit-content;
  font-family: var(--font-lora);
  font-size: 1.3rem;
  line-height: 1.65;
  letter-spacing: 0.14em;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #students main .news .news-list .meta time {
    -moz-column-gap: 1.2rem;
         column-gap: 1.2rem;
  }
}
#students main .news .news-list .meta time::after {
  content: "";
  height: 1px;
  background-color: var(--color-font);
}
#students main .news .news-list .meta .tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
}
#students main .news .news-list .meta .tags span {
  display: grid;
  place-content: center;
  height: 2.6rem;
  border-radius: calc(infinity * 1px);
  padding-inline: 1.4rem;
  background-color: var(--color-main);
  white-space: nowrap;
  color: #fff;
  font-size: 1.2rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #students main .news .news-list .meta .tags span {
    height: 2.4rem;
    padding-inline: 1.2rem;
  }
}
#students main .news .news-list .meta .tags span.target {
  background-color: transparent;
  border: 1px solid var(--color-main);
  color: var(--color-main);
}
#students main .news .news-list .title {
  display: grid;
  grid-template-columns: 1.6rem auto;
  align-items: center;
  gap: 0.8rem;
  margin-top: 1.2rem;
  font-size: 1.6rem;
  line-height: 1.65;
  letter-spacing: 0.08em;
  transition: color 0.2s ease, translate 0.2s ease-out;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #students main .news .news-list .title {
    align-items: baseline;
    margin-top: 0.8rem;
    font-size: 1.4rem;
  }
}
#students main .news .news-list .title::before {
  content: "";
  aspect-ratio: 16/12;
  background: url(/assets/images/common/icon-arrow03.svg) no-repeat center/contain;
}
#students main .news .no-result {
  margin-block: 4rem;
}
#students main .news .common-link {
  margin: 3.6rem auto 0;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #students main .news .common-link {
    margin-top: 3.2rem;
  }
}
#students main .alert .common-heading-h2 {
  margin-bottom: 6.6rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #students main .alert .common-heading-h2 {
    margin-bottom: 4rem;
  }
}
#students main .alert section + section {
  margin-top: 7rem;
}
#students main .alert section .common-heading-h3-border {
  margin-bottom: 3.6rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #students main .alert section .common-heading-h3-border {
    margin-bottom: 2rem;
  }
}
#students main .alert section .common-link {
  margin: 3.2rem auto 0;
}
#students main .alert .body {
  display: flex;
  flex-direction: column;
  gap: 3.2rem;
  margin-top: 3.2rem;
}
#students main .alert .body > div h4 {
  margin-bottom: 0.4rem;
  color: var(--color-main);
  font-size: var(--font-size-md);
}
#students main .alert .body ul li {
  padding-left: 1em;
  text-indent: -1em;
}
#students main .alert .body ul li::before {
  content: "・";
}
#students main .alert .body .common-table {
  width: 100%;
}
#students main .alert .body .common-table tr {
  grid-template-columns: 32rem 1fr;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #students main .alert .body .common-table tr {
    grid-template-columns: 17rem 1fr;
  }
}
#students main .alert .body .common-table th {
  font-family: var(--font-noto-sans);
  font-size: var(--font-size-base);
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #students main .alert .body .common-table th {
    padding-inline: 1rem;
  }
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #students main .alert .body .common-table td {
    padding-inline: 1rem;
  }
}
#students main .alert .body .notes li {
  padding-left: 1em;
  text-indent: -1em;
  font-size: 1.3rem;
}
#students main .alert .body .notes li::before {
  content: "※";
}
#students main .support .inner {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.4rem;
  margin-top: 5.6rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #students main .support .inner {
    grid-template-columns: 1fr;
    gap: 1.6rem;
    margin-top: 4rem;
  }
}
#students main .support a {
  display: block;
  border: 1px solid var(--color-line);
  padding: 2.4rem 2.4rem;
  background-color: #fff;
  transition: border-color 0.2s ease;
}
@media (any-hover: hover) {
  #students main .support a:hover {
    background-color: #f0f5ff;
    border-color: var(--color-main);
  }
  #students main .support a:hover h3 {
    text-decoration: underline;
  }
  #students main .support a:hover h3::after {
    content: "";
    translate: 0.4rem;
  }
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #students main .support a {
    padding: 2rem;
  }
}
#students main .support a h3 {
  display: grid;
  grid-template-columns: auto 3.2rem;
  align-items: center;
  -moz-column-gap: 1.6rem;
       column-gap: 1.6rem;
  width: -moz-fit-content;
  width: fit-content;
  color: var(--color-main);
  font-size: 2rem;
  letter-spacing: 0.08em;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #students main .support a h3 {
    width: 100%;
    font-size: 1.8rem;
  }
}
#students main .support a h3::after {
  content: "";
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--color-main) url("/assets/images/common/icon-arrow02.svg") no-repeat center/1.1rem auto;
  transition: translate 0.2s ease;
}
#students main .support a p {
  margin-top: 1.6rem;
}
#students main .support a.qr {
  grid-column: 1/-1;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2.4rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #students main .support a.qr {
    grid-template-columns: 1fr;
    grid-column: 1;
  }
}
#students main .support a.qr figure {
  text-align: center;
}
#students main .support a.qr figure img {
  width: 10.7rem;
}
#students main .support a.qr figure figcaption {
  font-size: 1rem;
  text-decoration: underline;
  word-break: break-all;
}
#students main :where(.counseling, .harassment) .common-table {
  width: 100%;
  margin-top: 3.6rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #students main :where(.counseling, .harassment) .common-table tr {
    grid-template-columns: 12rem 1fr;
  }
}
#students main :where(.counseling, .harassment) .common-table th,
#students main :where(.counseling, .harassment) .common-table td {
  padding-block: 1.6rem;
}
#students main :where(.counseling, .harassment) .common-table th {
  font-family: var(--font-noto-sans);
  font-size: var(--font-size-base);
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #students main :where(.counseling, .harassment) .common-table th {
    padding-inline: 1rem;
  }
}
#students main :where(.counseling, .harassment) .common-table td figure {
  margin-top: 1.6rem;
}
#students main :where(.counseling, .harassment) .common-table td figure img {
  width: min(15rem, 100%);
}
#students main :where(.counseling, .harassment) .common-table td .common-list {
  margin-bottom: 0.8rem;
}
#students main :where(.counseling, .harassment) .common-table td .name {
  margin-top: 1.6rem;
  font-size: 1.3rem;
}
#students main :where(.counseling, .harassment) .common-table td .common-link {
  margin-top: 1.2rem;
}
#students main .counseling {
  padding-bottom: initial;
}
#students main .counseling .link-list {
  margin-top: 0.8rem;
}
#students main .counseling .link-list li + li {
  margin-top: 0.8rem;
}
#students main .counseling .inner {
  display: grid;
  grid-template-columns: 4rem 1fr 40.8rem 4rem;
  row-gap: 4rem;
  margin-top: 5.6rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #students main .counseling .inner {
    grid-template-columns: 1fr;
    row-gap: 2rem;
    margin-top: 4rem;
  }
}
#students main .counseling .inner h3 {
  grid-column: 1/span 4;
  border-radius: 1rem;
  padding: 0.8rem 1.6rem;
  background-color: var(--color-main);
  color: #fff;
  font-size: var(--font-size-md);
  line-height: 1.3;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #students main .counseling .inner h3 {
    grid-column: 1;
  }
}
#students main .counseling .inner .body {
  grid-column: 2;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #students main .counseling .inner .body {
    grid-column: 1;
  }
}
#students main .counseling .inner .body ul li + li {
  margin-top: 0.4rem;
}
#students main .counseling .inner .body .etc {
  margin-top: 2.4rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #students main .counseling .inner .body .etc {
    margin-top: 1.6rem;
  }
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #students main .counseling .inner figure {
    margin-top: 2rem;
  }
}
#students main .career .inner {
  margin-top: 3.6rem;
}
#students main .career section + section {
  margin-top: 8rem;
}
#students main .career section .common-list {
  margin-top: 3.2rem;
}
#students main .career section .common-list li + li {
  margin-top: 0.6rem;
}
#students main .career section .common-list li p {
  grid-column: 2;
}
#students main .career section p + p {
  margin-top: 1.5em;
}
#students main .career section .common-link {
  margin-top: 3.2rem;
}
#students main .contact .contact-list > li + li {
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: 1px solid var(--color-line);
}
#students main .contact .contact-list h3 {
  color: var(--color-main);
  font-size: var(--font-size-md);
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #students main .contact .contact-list h3 {
    font-size: 1.6rem;
  }
}
#students main .contact .contact-list dl {
  display: grid;
  grid-template-columns: auto auto;
  -moz-column-gap: 1em;
       column-gap: 1em;
  width: -moz-fit-content;
  width: fit-content;
  margin-top: 0.4rem;
}
#students main .contact .contact-list dl dt {
  grid-column: 1;
  font-weight: 400;
}
#students main .contact .contact-list dl dd {
  grid-column: 2;
}
#students main .contact .contact-list dl dd a {
  transition: opacity 0.2s ease;
}
@media (any-hover: hover) {
  #students main .contact .contact-list dl dd a:hover {
    text-decoration: underline;
  }
}

#alumni main .fv {
  background-image: url(/assets/images/alumni/fv.jpg);
}
#alumni main > :where(.common-inner) .lead {
  text-align: center;
  font-family: var(--font-biz-mincho);
  font-size: 1.5rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #alumni main > :where(.common-inner) .lead {
    font-size: 1.4rem;
  }
}
#alumni main > :where(.common-inner) .common-page-nav {
  margin-top: 8rem;
}
#alumni main > :where(.common-inner) > :where(section) {
  padding-block: 12rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #alumni main > :where(.common-inner) > :where(section) {
    padding-block: 8rem;
  }
}
#alumni main > :where(.common-inner) > :where(section):nth-of-type(2n - 1) {
  -o-border-image: linear-gradient(var(--color-base) 0 0) 0/0/0 100vw;
     border-image: linear-gradient(var(--color-base) 0 0) fill 0/0/0 100vw;
}
#alumni main > :where(.common-inner) > :where(section) .common-heading-h2 span {
  font-size: 2.6rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #alumni main > :where(.common-inner) > :where(section) .common-heading-h2 span {
    display: block;
    font-size: 2rem;
  }
}
#alumni main .certificate > ol,
#alumni main .vocational > ol {
  counter-reset: item;
}
#alumni main .certificate > ol > li + li,
#alumni main .vocational > ol > li + li {
  margin-top: 8rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #alumni main .certificate > ol > li + li,
  #alumni main .vocational > ol > li + li {
    margin-top: 6.4rem;
  }
}
#alumni main .certificate > ol > li h3,
#alumni main .vocational > ol > li h3 {
  display: grid;
  grid-template-columns: auto 1fr;
}
#alumni main .certificate > ol > li h3::before,
#alumni main .vocational > ol > li h3::before {
  content: counter(item) ".";
  counter-increment: item;
  margin-right: 0.6rem;
}
#alumni main .certificate h4,
#alumni main .vocational h4 {
  color: var(--color-main);
  font-size: var(--font-size-md);
}
#alumni main .certificate h4 ~ .common-table,
#alumni main .vocational h4 ~ .common-table {
  margin-top: 0.4rem;
}
#alumni main .certificate .common-table th,
#alumni main .certificate .common-table td,
#alumni main .vocational .common-table th,
#alumni main .vocational .common-table td {
  display: inline-block;
  border: 1px solid var(--color-line);
  padding: 1rem 3rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #alumni main .certificate .common-table th,
  #alumni main .certificate .common-table td,
  #alumni main .vocational .common-table th,
  #alumni main .vocational .common-table td {
    padding: 0.8rem 0.8rem;
    font-size: 1.4rem;
    line-height: 1.4;
  }
}
#alumni main .certificate .common-table th,
#alumni main .vocational .common-table th {
  font-size: var(--color-base);
  font-weight: 400;
}
#alumni main .certificate .common-table thead th,
#alumni main .vocational .common-table thead th {
  padding-block: 2rem;
  font-size: 1.6rem;
  line-height: 1;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #alumni main .certificate .common-table thead th,
  #alumni main .vocational .common-table thead th {
    padding-block: 1.2rem;
    font-size: 1.4rem;
    line-height: 1.3;
  }
}
#alumni main .certificate .common-table tbody,
#alumni main .vocational .common-table tbody {
  translate: 0 -1px;
}
#alumni main .certificate .common-table tbody th,
#alumni main .vocational .common-table tbody th {
  font-family: var(--font-noto-sans);
}
#alumni main .certificate .common-table tbody td span,
#alumni main .vocational .common-table tbody td span {
  font-size: 1.2rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #alumni main .certificate .common-table tbody td span,
  #alumni main .vocational .common-table tbody td span {
    font-size: 1.1rem;
  }
}
#alumni main .certificate .common-table.issue-table,
#alumni main .vocational .common-table.issue-table {
  width: -moz-fit-content;
  width: fit-content;
}
#alumni main .certificate .step-list,
#alumni main .vocational .step-list {
  counter-reset: item;
}
#alumni main .certificate .step-list li h4,
#alumni main .vocational .step-list li h4 {
  display: grid;
  grid-template-columns: auto 1fr;
}
#alumni main .certificate .step-list li h4::before,
#alumni main .vocational .step-list li h4::before {
  content: "（" counter(item) "）";
  counter-increment: item;
}
#alumni main .certificate .step-list li h4 > .links,
#alumni main .vocational .step-list li h4 > .links {
  display: flex;
  flex-wrap: wrap;
  -moz-column-gap: 1.2rem;
       column-gap: 1.2rem;
}
#alumni main .certificate .method-title,
#alumni main .vocational .method-title {
  margin-bottom: 1rem;
  color: var(--color-main);
  font-size: var(--font-size-md);
}
#alumni main .certificate {
  margin-top: 12rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #alumni main .certificate {
    margin-top: 8rem;
  }
}
#alumni main .certificate .issue-table tr {
  grid-template-columns: 21rem 21rem auto;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #alumni main .certificate .issue-table tr {
    grid-template-columns: 11rem 9rem 1fr;
  }
}
#alumni main .vocational > ol {
  margin-top: 3.6rem;
}
#alumni main .vocational .issue-table tr {
  grid-template-columns: 21rem 21rem 1fr;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #alumni main .vocational .issue-table tr {
    grid-template-columns: 11rem 9rem 1fr;
  }
}
#alumni main .vocational table ~ .common-notes {
  margin-block: 3rem;
}
#alumni main .vocational .fee-table {
  width: min(52.4rem, 100%);
}
#alumni main .vocational .fee-table tr {
  grid-template-columns: 21rem 1fr;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #alumni main .vocational .fee-table tr {
    grid-template-columns: 15rem 1fr;
  }
}
#alumni main .vocational .payment-list {
  margin-top: 3.6rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #alumni main .vocational .payment-list {
    margin-top: 2.4rem;
  }
}
#alumni main .vocational .payment-list article + article {
  margin-top: 3.6rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #alumni main .vocational .payment-list article + article {
    margin-top: 2rem;
  }
}
#alumni main .vocational .payment-list article h4 button {
  display: grid;
  grid-template-columns: auto 2rem;
  align-items: center;
  gap: 1.6rem;
  cursor: pointer;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #alumni main .vocational .payment-list article h4 button {
    grid-template-columns: auto 1.6rem;
    gap: 1rem;
  }
}
#alumni main .vocational .payment-list article h4 button::after {
  content: "";
  aspect-ratio: 10/6;
  background: url(/assets/images/common/icon-arrow01.svg) no-repeat center/contain;
  transition: transform 0.2s ease;
}
@media (any-hover: hover) {
  #alumni main .vocational .payment-list article h4 button:hover {
    text-decoration: underline;
  }
}
#alumni main .vocational .payment-list article.is-open h4 button::after {
  transform: rotate(180deg);
}
#alumni main .vocational .payment-list article .wrapper {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s ease;
}
#alumni main .vocational .payment-list article .wrapper .body {
  overflow: hidden;
}
#alumni main .vocational .payment-list article.is-open .wrapper {
  grid-template-rows: 1fr;
}
#alumni main .vocational .payment-list article ol {
  counter-reset: item;
  margin-top: 1.6rem;
  background-color: var(--color-base);
  padding: 1.6rem;
}
#alumni main .vocational .payment-list article ol li {
  display: grid;
  grid-template-columns: auto 1fr;
}
#alumni main .vocational .payment-list article ol li::before {
  content: counter(item) ". ";
  counter-increment: item;
}
#alumni main .vocational .payment-list .info {
  grid-column: 2;
}
#alumni main .vocational .payment-list .info p:first-child {
  font-weight: 700;
  color: var(--color-main);
}
#alumni main .research section {
  margin-top: 5.6rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #alumni main .research section {
    margin-top: 6.4rem;
  }
}
#alumni main .research section .common-heading-h3-border {
  margin-bottom: 3.6rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #alumni main .research section .common-heading-h3-border {
    margin-bottom: 2rem;
  }
}
#alumni main .research ul {
  margin-top: 3rem;
}
#alumni main .research ul li + li {
  margin-top: 0.6rem;
}
#alumni main .research table {
  width: min(63rem, 100%);
  margin-top: 2.4rem;
}
#alumni main .research table th,
#alumni main .research table td {
  border: 1px solid var(--color-line);
  padding: 1rem 2.4rem;
  text-align: center;
  font-weight: 400;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #alumni main .research table th,
  #alumni main .research table td {
    padding: 0.8rem 2rem;
  }
}
#alumni main .research table th {
  background-color: #f0f5ff;
}
#alumni main .research table td {
  background-color: #fff;
}
#alumni main .support p + p {
  margin-top: 1.5em;
}
#alumni main .library {
  padding-top: initial;
  -o-border-image: initial;
     border-image: initial;
}
#alumni main .library .common-link {
  margin-top: 4rem;
}

#parents main .fv {
  background-image: url(/assets/images/parents/fv.jpg);
}
#parents main :where(.common-inner) > :where(section):not(.common-intro, .demand) {
  padding-block: 10rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #parents main :where(.common-inner) > :where(section):not(.common-intro, .demand) {
    padding-block: 8rem;
  }
}
#parents main :where(.common-inner) > section:where(.features, .career, .comparison, .demand, .faq) {
  -o-border-image: linear-gradient(var(--color-base) 0 0) 0/0/0 100vw;
     border-image: linear-gradient(var(--color-base) 0 0) fill 0/0/0 100vw;
}
#parents main .common-intro {
  padding-block: 11rem;
  row-gap: 7.2rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #parents main .common-intro {
    row-gap: 3.2rem;
    padding-block: 8rem;
  }
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #parents main .common-intro h2 {
    font-size: 2rem;
  }
}
#parents main .common-intro .common-movie {
  grid-column: 1/-1;
  margin-top: initial;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #parents main .common-intro .common-movie {
    margin-top: 1.6rem;
  }
}
#parents main .features ul {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4rem;
  margin-top: 4rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #parents main .features ul {
    grid-template-columns: 1fr;
  }
}
#parents main .features ul li {
  display: grid;
  grid-template-columns: 16rem 1fr;
  gap: 1.6rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #parents main .features ul li {
    grid-template-columns: 1fr;
  }
}
#parents main .features ul li figure {
  border-radius: 0.5rem;
  overflow: hidden;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #parents main .features ul li figure {
    border-radius: 0.3rem;
  }
}
#parents main .features ul li figure {
  aspect-ratio: 160/114;
}
#parents main .features ul li figure img {
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
#parents main .features ul li .body h3 {
  margin-bottom: 0.2rem;
  font-size: 2rem;
  line-height: 1.5;
  color: var(--color-main);
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #parents main .features ul li .body h3 {
    font-size: 1.8rem;
  }
}
#parents main .features ul li .body p {
  margin-top: 0.4rem;
  font-size: 1.3rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #parents main .features ul li .body p {
    margin-top: 0.8rem;
  }
}
#parents main .features .links {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2.4rem 1.6rem;
  margin-top: 7.2rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #parents main .features .links {
    grid-template-columns: 1fr;
    margin-top: 4rem;
  }
}
#parents main .features .links .common-link {
  width: 100%;
  -moz-column-gap: 2rem;
       column-gap: 2rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #parents main .features .links .common-link {
    -moz-column-gap: 1rem;
         column-gap: 1rem;
  }
}
#parents main .access section + section {
  margin-top: 8rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #parents main .access section + section {
    margin-top: 6.4rem;
  }
}
#parents main .access ul {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.4rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #parents main .access ul {
    grid-template-columns: 1fr;
  }
}
#parents main .access ul li {
  border: 1px solid var(--color-line);
  padding: 2.4rem;
}
#parents main .access ul li figure {
  border-radius: 0.5rem;
  overflow: hidden;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #parents main .access ul li figure {
    border-radius: 0.3rem;
  }
}
#parents main .access ul li figure {
  margin-bottom: 2.4rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #parents main .access ul li figure {
    margin-bottom: 1.6rem;
  }
}
#parents main .access ul li figure img {
  aspect-ratio: 247/150;
  -o-object-fit: cover;
     object-fit: cover;
}
#parents main .access .common-link {
  margin: 4rem auto 0;
}
#parents main .career section + section {
  margin-top: 8rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #parents main .career section + section {
    margin-top: 5.6rem;
  }
}
#parents main .career .accordion-list {
  margin-top: 3.6rem;
}
#parents main .career dl + dl {
  margin-top: 1.4rem;
}
#parents main .career dl dt button {
  display: grid;
  grid-template-columns: 1fr 2.4rem;
  align-items: center;
  -moz-column-gap: 1.6rem;
       column-gap: 1.6rem;
  width: 100%;
  border: 1px solid #fff;
  padding: 1.6rem 3rem;
  background-color: #fff;
  cursor: pointer;
  color: var(--color-main);
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 1.3;
}
@media (any-hover: hover) {
  #parents main .career dl dt button:hover {
    border-color: var(--color-main);
  }
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #parents main .career dl dt button {
    padding: 1.2rem 2.4rem;
  }
}
#parents main .career dl dt button::after {
  content: "";
  display: grid;
  place-content: center;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--color-main) url(/assets/images/common/icon-arrow05.svg) no-repeat center/0.4rem auto;
  transition: transform 0.3s ease;
}
#parents main .career dl dd {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s ease;
}
#parents main .career dl dd .body {
  overflow: hidden;
}
#parents main .career dl dd .body ul {
  -moz-columns: 3;
       columns: 3;
  -moz-column-gap: 1.6rem;
       column-gap: 1.6rem;
  padding-block: 2.4rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #parents main .career dl dd .body ul {
    -moz-columns: 1;
         columns: 1;
    padding-block: 2rem;
  }
}
#parents main .career dl dd .body ul li {
  -moz-column-break-inside: avoid;
       break-inside: avoid;
}
#parents main .career dl dd .body ul li::before {
  content: "・";
}
#parents main .career dl.is-open dt button::after {
  transform: rotate(180deg);
}
#parents main .career dl.is-open dd {
  grid-template-rows: 1fr;
}
#parents main .support .images {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.2rem;
  margin-bottom: 3.6rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #parents main .support .images {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin-bottom: 2.4rem;
  }
}
#parents main .support .images figure {
  aspect-ratio: 224/298;
  overflow: hidden;
}
#parents main .support .images figure img {
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
#parents main .support ol {
  counter-reset: item;
  margin-top: 9rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #parents main .support ol {
    margin-top: 5.6rem;
  }
}
#parents main .support ol li {
  display: grid;
  grid-template-columns: 1fr 43.2rem;
  padding-bottom: 3.5rem;
  border-bottom: 1px solid var(--color-line);
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #parents main .support ol li {
    grid-template-columns: 1fr;
    gap: 1.2rem;
    padding-bottom: 3.2rem;
  }
}
#parents main .support ol li + li {
  margin-top: 3.8rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #parents main .support ol li + li {
    margin-top: 3.2rem;
  }
}
#parents main .support ol li h3 {
  color: var(--color-main);
  font-size: 2.8rem;
  line-height: 1.3;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #parents main .support ol li h3 {
    font-size: 2rem;
  }
}
#parents main .support ol li h3::before {
  content: counter(item) ".";
  counter-increment: item;
}
#parents main .comparison ul {
  width: min(80rem, 100%);
  margin: 4rem auto 0;
}
#parents main .comparison ul li {
  display: grid;
  grid-template-columns: 9rem 1fr;
  align-items: center;
  -moz-column-gap: 3.2rem;
       column-gap: 3.2rem;
  border: 1px solid var(--color-line);
  background-color: #fff;
  padding: 1.6rem 4rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #parents main .comparison ul li {
    grid-template-columns: 4.8rem 1fr;
    -moz-column-gap: 1.6rem;
         column-gap: 1.6rem;
    padding: 1.6rem 2.4rem;
  }
}
#parents main .comparison ul li figure {
  aspect-ratio: 1;
  border-radius: 50%;
  padding: 1.5rem;
  background-color: #f0f5ff;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #parents main .comparison ul li figure {
    padding: 0.4rem;
  }
}
#parents main .comparison ul li + li {
  margin-top: 1.6rem;
}
#parents main .comparison ul li p {
  color: var(--color-main);
  font-size: 2rem;
  font-weight: 500;
  line-height: 1.5;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #parents main .comparison ul li p {
    font-size: 1.6rem;
  }
}
#parents main .demand {
  padding-bottom: 10rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #parents main .demand {
    padding-bottom: 8rem;
  }
}
#parents main .demand .common-link {
  margin: 4rem auto 0;
}
#parents main .message .inner {
  display: grid;
  grid-template-columns: 25.2rem 1fr;
  -moz-column-gap: 4rem;
       column-gap: 4rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #parents main .message .inner {
    grid-template-columns: 1fr;
  }
}
#parents main .message .common-heading-h2 {
  grid-column: 1/-1;
}
#parents main .message figure {
  border-radius: 0.5rem;
  overflow: hidden;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #parents main .message figure {
    border-radius: 0.3rem;
  }
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #parents main .message figure {
    width: 24rem;
    margin: 0 auto 2.4rem;
  }
}
#parents main .message .body {
  align-self: center;
}
#parents main .message .body .lead {
  margin-bottom: 2.4rem;
  color: var(--color-main);
  font-size: 2.4rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #parents main .message .body .lead {
    margin-bottom: 1.6rem;
    font-size: 1.8rem;
  }
}
#parents main .message .body .common-link {
  margin-top: 4rem;
}
#parents main .faq section + section {
  margin-top: 4.6rem;
}
#parents main .faq dl + dl {
  margin-top: 2.4rem;
}
#parents main .faq dl dt button {
  display: grid;
  grid-template-columns: 1fr 2.4rem;
  align-items: center;
  -moz-column-gap: 1.6rem;
       column-gap: 1.6rem;
  width: 100%;
  border: 1px solid #fff;
  padding: 1.1rem 1.6rem;
  background-color: #fff;
  cursor: pointer;
  color: var(--color-main);
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 1.3;
}
@media (any-hover: hover) {
  #parents main .faq dl dt button:hover {
    border-color: var(--color-main);
  }
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #parents main .faq dl dt button {
    font-size: 1.4rem;
  }
}
#parents main .faq dl dt button::after {
  content: "";
  display: grid;
  place-content: center;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--color-main) url(/assets/images/common/icon-arrow05.svg) no-repeat center/0.4rem auto;
  transition: transform 0.3s ease;
}
#parents main .faq dl dd {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s ease;
}
#parents main .faq dl dd .body {
  overflow: hidden;
}
#parents main .faq dl dd p {
  padding-top: 2.4rem;
}
#parents main .faq dl.is-open dt button::after {
  transform: rotate(180deg);
}
#parents main .faq dl.is-open dd {
  grid-template-rows: 1fr;
}

#facilities main .fv {
  background-image: url(/assets/images/facilities/fv.jpg);
}
#facilities main :where(.common-inner) > :where(section):not(.common-intro) {
  padding-block: 10rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #facilities main :where(.common-inner) > :where(section):not(.common-intro) {
    padding-block: 8rem;
  }
}
#facilities main :where(.common-inner) > :nth-of-type(2n) {
  -o-border-image: linear-gradient(var(--color-base) 0 0) 0/0/0 100vw;
     border-image: linear-gradient(var(--color-base) 0 0) fill 0/0/0 100vw;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #facilities main :where(.common-inner) .common-heading-h2:has(span) {
    font-size: 2.3rem;
    letter-spacing: 0.03em;
  }
}
#facilities main :where(.common-inner) .common-heading-h2 span {
  display: inline-flex;
  align-items: center;
}
#facilities main :where(.common-inner) .common-heading-h2 span::after {
  content: "";
  width: 1.8rem;
  height: 1px;
  margin-inline: 1.6rem;
  background-color: var(--color-main);
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #facilities main :where(.common-inner) .common-heading-h2 span::after {
    width: 1rem;
    margin-inline: 0.8rem;
  }
}
#facilities main :where(.common-inner) .accordion-list {
  margin-top: 3.6rem;
}
#facilities main :where(.common-inner) .accordion-list dl + dl {
  margin-top: 4rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #facilities main :where(.common-inner) .accordion-list dl + dl {
    margin-top: 2.4rem;
  }
}
#facilities main :where(.common-inner) .accordion-list dl dt button {
  display: grid;
  grid-template-columns: 1fr 2.4rem;
  align-items: center;
  -moz-column-gap: 1.6rem;
       column-gap: 1.6rem;
  width: 100%;
  border: 1px solid var(--color-base);
  padding: 1.6rem 3rem;
  background-color: var(--color-base);
  cursor: pointer;
  color: var(--color-main);
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 1.3;
}
@media (any-hover: hover) {
  #facilities main :where(.common-inner) .accordion-list dl dt button:hover {
    border-color: var(--color-main);
  }
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #facilities main :where(.common-inner) .accordion-list dl dt button {
    padding: 1.2rem 2.4rem;
  }
}
#facilities main :where(.common-inner) .accordion-list dl dt button::after {
  content: "";
  display: grid;
  place-content: center;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--color-main) url(/assets/images/common/icon-arrow05.svg) no-repeat center/0.4rem auto;
  transition: transform 0.3s ease;
}
#facilities main :where(.common-inner) .accordion-list dl dd {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s ease;
}
#facilities main :where(.common-inner) .accordion-list dl dd .body {
  overflow: hidden;
}
#facilities main :where(.common-inner) .accordion-list dl.is-open dt button::after {
  transform: rotate(180deg);
}
#facilities main :where(.common-inner) .accordion-list dl.is-open dd {
  grid-template-rows: 1fr;
}
#facilities main .common-intro {
  padding-bottom: 11rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #facilities main .common-intro {
    padding-bottom: 8rem;
  }
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #facilities main .common-intro h2 {
    font-size: 2rem;
  }
}
#facilities main .experience ul {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 3.6rem;
  margin-top: 4rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #facilities main .experience ul {
    grid-template-columns: 1fr;
  }
}
#facilities main .experience ul li figure {
  border-radius: 0.5rem;
  overflow: hidden;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #facilities main .experience ul li figure {
    border-radius: 0.3rem;
  }
}
#facilities main .experience ul li figure {
  aspect-ratio: 449/260;
}
#facilities main .experience ul li figure img {
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
#facilities main .experience ul li h3 {
  margin-block: 1rem 0.8rem;
  color: var(--color-main);
  font-size: 2rem;
  line-height: 1.5;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #facilities main .experience ul li h3 {
    font-size: 1.8rem;
  }
}
#facilities main .experience .links {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2.4rem 1.6rem;
  margin-top: 7.2rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #facilities main .experience .links {
    grid-template-columns: 1fr;
    margin-top: 4rem;
  }
}
#facilities main :where(.technology, .responsiveness) .accordion-list .inner {
  display: grid;
  grid-template-columns: 22rem 1fr;
  gap: 1.6rem 3.2rem;
  padding-top: 2.4rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #facilities main :where(.technology, .responsiveness) .accordion-list .inner {
    grid-template-columns: 1fr;
  }
}
#facilities main :where(.technology, .responsiveness) .accordion-list .inner figure {
  border-radius: 0.5rem;
  overflow: hidden;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #facilities main :where(.technology, .responsiveness) .accordion-list .inner figure {
    border-radius: 0.3rem;
  }
}
#facilities main :where(.technology, .responsiveness) .accordion-list .inner figure {
  aspect-ratio: 220/164;
  overflow: hidden;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #facilities main :where(.technology, .responsiveness) .accordion-list .inner figure {
    width: 30rem;
    margin-inline: auto;
  }
}
#facilities main :where(.technology, .responsiveness) .accordion-list .inner figure img {
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
#facilities main .responsiveness .accordion-list {
  margin-top: 3.6rem;
}
#facilities main .responsiveness .accordion-list dl dt button {
  background-color: #fff;
}
#facilities main .meaning .images {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.2rem;
  margin-bottom: 3.6rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #facilities main .meaning .images {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin-bottom: 2.4rem;
  }
}
#facilities main .meaning .images figure {
  aspect-ratio: 224/298;
  overflow: hidden;
}
#facilities main .meaning .images figure img {
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
#facilities main .career .accordion-list {
  margin-top: 3.6rem;
}
#facilities main .career dl + dl {
  margin-top: 1.4rem;
}
#facilities main .career dl dt button {
  padding: 1.6rem 3rem;
  background-color: #fff;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #facilities main .career dl dt button {
    padding: 1.2rem 2.4rem;
  }
}
#facilities main .career dl dd .body ul {
  -moz-columns: 3;
       columns: 3;
  -moz-column-gap: 1.6rem;
       column-gap: 1.6rem;
  padding-block: 2.4rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #facilities main .career dl dd .body ul {
    -moz-columns: 1;
         columns: 1;
    padding-block: 2rem;
  }
}
#facilities main .career dl dd .body ul li {
  -moz-column-break-inside: avoid;
       break-inside: avoid;
}
#facilities main .career dl dd .body ul li::before {
  content: "・";
}

#news-archive .fv,
#news-single .fv {
  background-image: url(/assets/images/news/fv.jpg);
}

#news-archive main .common-inner {
  padding-block: 8rem 14rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #news-archive main .common-inner {
    padding-block: 8rem 11rem;
  }
}
#news-archive main .common-inner .contents {
  padding-top: 12rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #news-archive main .common-inner .contents {
    padding-top: 8rem;
  }
}
#news-archive main .common-inner .contents [role=tabpanel] .inner {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6rem 3.2rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #news-archive main .common-inner .contents [role=tabpanel] .inner {
    grid-template-columns: 1fr;
  }
}
#news-archive main .common-inner article a figure {
  aspect-ratio: 290/193;
  border-radius: 0.5rem;
  overflow: hidden;
}
#news-archive main .common-inner article a figure img {
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transition: transform 0.4s ease-out;
}
#news-archive main .common-inner article a h3 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  line-clamp: 2;
  -webkit-line-clamp: 2;
  overflow: hidden;
  min-height: 4.7rem;
  margin-block: 1.9rem 1.3rem;
  font-family: var(--font-biz-mincho);
  font-size: var(--font-size-md);
  line-height: 1.35;
  transition: color 0.2s ease;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #news-archive main .common-inner article a h3 {
    min-height: initial;
  }
}
#news-archive main .common-inner article a p {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  font-family: var(--font-biz-mincho);
  line-height: 1.7;
}
#news-archive main .common-inner article a .tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem 0.4rem;
  margin-top: 1.6rem;
}
#news-archive main .common-inner article a .tags span {
  display: grid;
  place-content: center;
  height: 2.6rem;
  border-radius: calc(infinity * 1px);
  padding-inline: 2rem;
  background-color: var(--color-main);
  color: #fff;
  font-family: var(--font-biz-mincho);
  font-size: 1.3rem;
  line-height: 1;
}
@media (any-hover: hover) {
  #news-archive main .common-inner article a:hover figure img {
    transform: scale(1.05);
  }
  #news-archive main .common-inner article a:hover h3 {
    color: var(--color-main);
  }
}

#news-single main .common-inner {
  padding-bottom: 10.4rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #news-single main .common-inner {
    padding-bottom: 8rem;
  }
}
#news-single main .common-inner .inner {
  border-radius: 0.5rem;
  padding: 8rem 5.8rem;
  background-color: var(--color-base);
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #news-single main .common-inner .inner {
    padding: 4rem 2rem;
  }
}
#news-single main .common-inner .inner > header h1 {
  margin-bottom: initial;
}
#news-single main .common-inner .inner > header figure {
  border-radius: 0.5rem;
  overflow: hidden;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #news-single main .common-inner .inner > header figure {
    border-radius: 0.3rem;
  }
}
#news-single main .common-inner .inner > header figure {
  margin-top: 3.4rem;
}
#news-single main .common-inner .inner .common-article {
  padding-top: 3.4rem;
}
#news-single main .common-inner .common-link {
  margin: 4rem auto 0;
}

#faculty-archive .fv,
#faculty-single .fv {
  background-image: url(/assets/images/faculty/fv.jpg);
}

#faculty-archive main .common-inner {
  padding-bottom: 11rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #faculty-archive main .common-inner {
    padding-bottom: 8rem;
  }
}
#faculty-archive main .common-intro h2 {
  font-size: 3rem;
  letter-spacing: 0.04em;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #faculty-archive main .common-intro h2 {
    font-size: 2.4rem;
    letter-spacing: 0.03em;
  }
}
#faculty-archive main .contents {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6rem 1.8rem;
  padding-top: 8rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #faculty-archive main .contents {
    grid-template-columns: repeat(2, 1fr);
    gap: 4rem 1.6rem;
  }
}
#faculty-archive main .contents section h2 {
  display: grid;
  grid-template-columns: 1.8rem 1fr;
  align-items: center;
  -moz-column-gap: 0.7rem;
       column-gap: 0.7rem;
  color: var(--color-main);
  font-feature-settings: "palt";
  font-size: var(--font-size-md);
}
#faculty-archive main .contents section h2::before {
  content: "";
  height: 1px;
  background-color: var(--color-font);
}
#faculty-archive main .contents section ul {
  margin-top: 1.6rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #faculty-archive main .contents section ul {
    margin-top: 0.8rem;
  }
}
#faculty-archive main .contents section ul li a figure {
  border-radius: 0.5rem;
  aspect-ratio: 220/270;
  overflow: hidden;
}
#faculty-archive main .contents section ul li a figure img {
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transition: transform 0.4s ease-out;
}
#faculty-archive main .contents section ul li a .body {
  padding: 1.6rem 1rem 0;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #faculty-archive main .contents section ul li a .body {
    padding: 0.8rem 0.8rem 0;
  }
}
#faculty-archive main .contents section ul li a .body h3 {
  font-family: var(--font-biz-mincho);
  font-size: var(--font-size-md);
  font-weight: 500;
  line-height: 1.4;
  transition: color 0.2s ease;
}
#faculty-archive main .contents section ul li a .body h3 span {
  display: block;
  font-size: var(--font-size-base);
  letter-spacing: 0.1em;
}
#faculty-archive main .contents section ul li a .body h3 span::before {
  content: "（";
}
#faculty-archive main .contents section ul li a .body h3 span::after {
  content: "）";
}
#faculty-archive main .contents section ul li a .body dl {
  margin-top: 1rem;
}
#faculty-archive main .contents section ul li a .body dl dt {
  color: var(--color-main);
  font-weight: 400;
}
#faculty-archive main .contents section ul li a .body dl dd {
  line-height: 1.4;
}
@media (any-hover: hover) {
  #faculty-archive main .contents section ul li a:hover figure img {
    transform: scale(1.05);
  }
  #faculty-archive main .contents section ul li a:hover h3 {
    color: var(--color-main);
  }
}
#faculty-archive main .contents section:where(.professor, .associate, .lecturer, .assistant) {
  grid-column: 1/span 5;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #faculty-archive main .contents section:where(.professor, .associate, .lecturer, .assistant) {
    grid-column: 1/span 2;
  }
}
#faculty-archive main .contents section:where(.professor, .associate, .lecturer, .assistant) ul {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4rem 1.8rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #faculty-archive main .contents section:where(.professor, .associate, .lecturer, .assistant) ul {
    grid-template-columns: repeat(2, 1fr);
  }
}

#faculty-single main .common-inner {
  padding-bottom: 10.4rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #faculty-single main .common-inner {
    padding-bottom: 8rem;
  }
}
#faculty-single main header {
  display: grid;
  grid-template-columns: 1fr 1fr;
  -moz-column-gap: 4rem;
       column-gap: 4rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #faculty-single main header {
    grid-template-columns: 1fr;
  }
}
#faculty-single main header figure {
  grid-column: 1;
  grid-row: 1/span 2;
  width: 25.3rem;
  aspect-ratio: 253/324;
  margin-inline: auto;
  border-radius: 0.5rem;
  overflow: hidden;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #faculty-single main header figure {
    grid-row: 1;
  }
}
#faculty-single main header figure img {
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
#faculty-single main header .profile {
  grid-column: 2;
  grid-row: 1;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #faculty-single main header .profile {
    grid-column: 1;
    grid-row: 2;
    margin-top: 4rem;
  }
}
#faculty-single main header .profile .position {
  display: block;
  color: var(--color-main);
  font-size: 1.5rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #faculty-single main header .profile .position {
    font-size: 1.4rem;
  }
}
#faculty-single main header .profile h1 {
  font-family: var(--font-biz-mincho);
  font-size: 3.2rem;
  letter-spacing: 0.08em;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #faculty-single main header .profile h1 {
    font-size: 2.6rem;
  }
}
#faculty-single main header .profile h1 span {
  margin-left: 1.2rem;
  font-size: 2rem;
  line-height: 1.3;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #faculty-single main header .profile h1 span {
    font-size: 1.6rem;
  }
}
#faculty-single main header .profile .link-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, 3rem);
  -moz-column-gap: 1.6rem;
       column-gap: 1.6rem;
  margin-top: 2.4rem;
}
#faculty-single main header .profile .link-list li {
  aspect-ratio: 1;
}
#faculty-single main header .profile .link-list li a {
  display: grid;
  place-content: center;
  background-color: var(--color-font);
  border-radius: 0.5rem;
  overflow: hidden;
}
@media (any-hover: hover) {
  #faculty-single main header .profile .link-list li a:hover {
    background-color: var(--color-main);
  }
}
#faculty-single main header .details {
  grid-column: 2;
  grid-row: 2/span 3;
  margin-top: 5.4rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #faculty-single main header .details {
    grid-column: 1;
    grid-row: initial;
    margin-top: 4rem;
  }
}
#faculty-single main header .details dl dt {
  margin-bottom: 0.5rem;
  border-left: 2px solid var(--color-main);
  padding-inline: 1.4rem;
  color: var(--color-main);
  font-family: var(--font-biz-mincho);
  font-size: var(--font-size-md);
  font-weight: 400;
  line-height: 1.3;
}
#faculty-single main header .details dl dd {
  font-size: 1.5rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #faculty-single main header .details dl dd {
    font-size: 1.4rem;
  }
}
#faculty-single main header .details dl dd + dt {
  margin-top: 2rem;
}
#faculty-single main header .message {
  grid-column: 1;
  grid-row: 3/span 4;
  align-self: flex-start;
  margin-top: 3.4rem;
  border-radius: 0.5rem;
  padding: 2rem 3.2rem;
  background-color: var(--color-base);
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #faculty-single main header .message {
    margin-top: 4rem;
  }
}
#faculty-single main header .message h2 {
  margin-bottom: 0.8rem;
  font-family: var(--font-biz-mincho);
  color: var(--color-main);
  font-size: var(--font-size-md);
  line-height: 1.3;
}
#faculty-single main header .message p {
  font-size: 1.5rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #faculty-single main header .message p {
    font-size: 1.4rem;
  }
}
#faculty-single main .common-article {
  margin-top: 8rem;
  border-radius: 0.5rem;
  padding: 4rem 5.8rem 5.5rem;
  background-color: var(--color-base);
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #faculty-single main .common-article {
    margin-top: 8rem;
    padding: 4rem 2rem;
  }
}

#voices-archive .fv,
#voices-single .fv {
  background-image: url(/assets/images/voices/fv.jpg);
}

#voices-archive main .common-inner {
  padding-block: 8rem 14rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #voices-archive main .common-inner {
    padding-block: 8rem 11rem;
  }
}
#voices-archive main .common-inner .common-category-list {
  grid-template-columns: auto auto;
  width: -moz-fit-content;
  width: fit-content;
  margin-inline: auto;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #voices-archive main .common-inner .common-category-list {
    justify-content: space-between;
    margin-inline: initial;
  }
}
#voices-archive main .common-inner .contents {
  padding-top: 15.7rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #voices-archive main .common-inner .contents {
    padding-top: 8rem;
  }
}
#voices-archive main .common-inner .contents [role=tabpanel] .inner {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6rem 3.2rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #voices-archive main .common-inner .contents [role=tabpanel] .inner {
    grid-template-columns: 1fr;
  }
}
#voices-archive main .common-inner article {
  position: relative;
  display: grid;
  grid-template-rows: 19.3rem auto 1fr;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #voices-archive main .common-inner article {
    grid-template-rows: auto auto 1fr;
  }
}
#voices-archive main .common-inner article::before {
  content: attr(data-label);
  position: absolute;
  top: 0.4rem;
  left: 0.4rem;
  z-index: 2;
  display: grid;
  place-content: center;
  height: 2.6rem;
  border-radius: calc(infinity * 1px);
  padding-inline: 1.2rem;
  pointer-events: none;
  color: #fff;
  font-family: var(--font-biz-mincho);
  font-size: 1.3rem;
  line-height: 1;
}
#voices-archive main .common-inner article[data-label=卒業生]::before {
  background-color: #01b791;
}
#voices-archive main .common-inner article[data-label=在学生]::before {
  background-color: #3dc0fe;
}
#voices-archive main .common-inner article a {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 3;
}
#voices-archive main .common-inner article a figure {
  aspect-ratio: 290/193;
  border-radius: 0.5rem;
  overflow: hidden;
}
#voices-archive main .common-inner article a figure img {
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transition: transform 0.4s ease-out;
}
#voices-archive main .common-inner article a h3 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  min-height: 4.7rem;
  margin-block: 1.6rem;
  color: var(--color-main);
  font-family: var(--font-biz-mincho);
  font-size: var(--font-size-md);
  line-height: 1.3;
  transition: color 0.2s ease;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #voices-archive main .common-inner article a h3 {
    min-height: initial;
  }
}
#voices-archive main .common-inner article a .profile {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.8rem 0.6rem;
  height: -moz-fit-content;
  height: fit-content;
}
#voices-archive main .common-inner article a .profile .name {
  align-self: center;
  font-family: var(--font-biz-mincho);
  font-size: 2rem;
  line-height: 1.3;
}
#voices-archive main .common-inner article a .profile .label {
  display: grid;
  place-content: center;
  align-self: center;
  border-radius: calc(infinity * 1px);
  border: 1px solid var(--color-main);
  height: 2.6rem;
  padding-inline: 1.2rem;
  font-family: var(--font-biz-mincho);
  color: var(--color-main);
  font-size: 1.3rem;
  letter-spacing: -0.03em;
  line-height: 1;
}
#voices-archive main .common-inner article a .profile .place {
  grid-column: 1/-1;
}
@media (any-hover: hover) {
  #voices-archive main .common-inner article a:hover figure img {
    transform: scale(1.05);
  }
  #voices-archive main .common-inner article a:hover h3 {
    text-decoration: underline;
  }
}
#voices-archive main .common-inner .pagination {
  width: -moz-fit-content;
  width: fit-content;
  margin: 6rem auto 0;
}
#voices-archive main .common-inner .pagination ol {
  display: flex;
  align-items: center;
  -moz-column-gap: 0.8rem;
       column-gap: 0.8rem;
}
#voices-archive main .common-inner .pagination ol li a {
  display: grid;
  place-content: center;
  width: 4.4rem;
  aspect-ratio: 1;
  border-radius: 0.5rem;
  border: 1px solid var(--color-line);
  background-color: #fff;
}
@media (any-hover: hover) {
  #voices-archive main .common-inner .pagination ol li a:not([aria-current=page]):hover {
    border-color: var(--color-main);
    background-color: var(--color-main);
    color: #fff;
  }
  #voices-archive main .common-inner .pagination ol li a:not([aria-current=page]):hover:where(.prev, .next)::before {
    background-color: #fff;
  }
}
#voices-archive main .common-inner .pagination ol li a[aria-current=page] {
  border-color: var(--color-main);
  background-color: var(--color-main);
  color: #fff;
}
#voices-archive main .common-inner .pagination ol li a:where(.prev, .next) {
  position: relative;
}
#voices-archive main .common-inner .pagination ol li a:where(.prev, .next)::before {
  content: "";
  display: grid;
  place-content: center;
  width: 0.6rem;
  aspect-ratio: 6/11;
  -webkit-mask: url(/assets/images/common/icon-arrow04.svg) no-repeat center/contain;
          mask: url(/assets/images/common/icon-arrow04.svg) no-repeat center/contain;
  background-color: var(--color-font);
  transition: background-color 0.2s ease;
}

#voices-single main .common-inner {
  padding-bottom: 10.4rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #voices-single main .common-inner {
    padding-bottom: 8rem;
  }
}
#voices-single main .intro {
  display: grid;
  grid-template-columns: 1fr 44.7rem;
  gap: 4rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #voices-single main .intro {
    grid-template-columns: 1fr;
  }
}
#voices-single main .intro h1 {
  margin-bottom: 3.2rem;
  color: var(--color-main);
  font-family: var(--font-biz-mincho);
  font-size: 3.6rem;
  line-height: 1.4;
  letter-spacing: 0.12em;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #voices-single main .intro h1 {
    margin-bottom: 1.6rem;
    font-size: 2.4rem;
  }
}
#voices-single main .intro .profile p {
  font-family: var(--font-biz-mincho);
  font-size: 2rem;
  line-height: 1.3;
}
#voices-single main .intro .profile p span {
  display: block;
  width: -moz-fit-content;
  width: fit-content;
  margin-top: 0.5rem;
  border-radius: calc(infinity * 1px);
  border: 1px solid var(--color-main);
  padding: 0.7rem 1.2rem 0.4rem;
  color: var(--color-main);
  font-size: 1.3rem;
  line-height: 1;
  letter-spacing: -0.03em;
}
#voices-single main .intro .profile dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.4rem 1.6rem;
  margin-top: 1.2rem;
}
#voices-single main .intro .profile dl dt {
  grid-column: 1;
  font-weight: 500;
}
#voices-single main .intro .profile dl dd {
  grid-column: 2;
}
#voices-single main .intro figure {
  aspect-ratio: 447/297;
  border-radius: 0.5rem;
  overflow: hidden;
}
#voices-single main .intro figure img {
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
#voices-single main .inner {
  margin-top: 6rem;
  border-radius: 0.5rem;
  padding: 4rem 5.8rem;
  background-color: var(--color-base);
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #voices-single main .inner {
    padding: 4rem 2rem;
  }
}
#voices-single main .qa-list dt {
  margin-bottom: 2rem;
  padding-bottom: 1.6rem;
  border-bottom: 2px solid var(--color-main);
  color: var(--color-main);
  font-size: 2.8rem;
  font-weight: 400;
  line-height: 1.3;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #voices-single main .qa-list dt {
    margin-bottom: 1.6rem;
    padding-bottom: 0.8rem;
    font-size: 2rem;
  }
}
#voices-single main .qa-list dd + dt {
  margin-top: 3.4rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #voices-single main .qa-list dd + dt {
    margin-top: 2.4rem;
  }
}
#voices-single main .common-article {
  margin-top: 11.5rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #voices-single main .common-article {
    margin-top: 8rem;
  }
}
#voices-single main .common-link {
  margin: 5rem auto 0;
}

#exam main .fv {
  background-image: url(/assets/images/exam/fv.jpg);
}
#exam main .common-inner {
  padding-bottom: 19rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #exam main .common-inner {
    padding-bottom: 12rem;
  }
}
#exam main .common-inner ul {
  display: grid;
  grid-template-columns: repeat(3, 25.2rem);
  grid-row: span 2;
  justify-content: space-between;
  gap: 16.6rem 4rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #exam main .common-inner ul {
    grid-template-columns: repeat(2, 1fr);
    gap: 8rem 2rem;
  }
}
#exam main .common-inner ul li {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-rows: auto 1fr auto;
  align-items: flex-start;
  row-gap: 1.6rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #exam main .common-inner ul li {
    row-gap: 0.8rem;
  }
}
#exam main .common-inner ul li a {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 3;
  font-family: var(--font-biz-mincho);
}
#exam main .common-inner ul li a figure {
  border: 1px solid var(--color-line);
  transition: border-color 0.2s ease;
}
#exam main .common-inner ul li a figure img,
#exam main .common-inner ul li a figure canvas {
  width: 100%;
  height: 100%;
  aspect-ratio: 252/358;
  -o-object-fit: cover;
     object-fit: cover;
}
#exam main .common-inner ul li a h3 {
  display: grid;
  grid-template-columns: auto 2.6rem;
  align-items: center;
  -moz-column-gap: 1.6rem;
       column-gap: 1.6rem;
  width: -moz-fit-content;
  width: fit-content;
  margin-inline: auto;
  text-align: center;
  font-size: var(--font-size-md);
  line-height: 1.3;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #exam main .common-inner ul li a h3 {
    grid-template-columns: 1fr;
    -moz-column-gap: 0.4rem;
         column-gap: 0.4rem;
  }
}
#exam main .common-inner ul li a h3::after {
  content: "";
  aspect-ratio: 1;
  background: url(/assets/images/common/icon-pdf.svg) no-repeat center/contain;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #exam main .common-inner ul li a h3::after {
    display: none;
  }
}
#exam main .common-inner ul li a p {
  text-align: center;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #exam main .common-inner ul li a p {
    font-size: 1rem;
  }
}
@media (any-hover: hover) {
  #exam main .common-inner ul li a:hover figure {
    border-color: var(--color-main);
  }
  #exam main .common-inner ul li a:hover h3 {
    color: var(--color-main);
  }
}
@media screen and (min-width: 769px) {
  #exam main .common-inner ul li:nth-of-type(3n + 1)::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 22rem;
    left: 0;
    width: 100vw;
    height: 33rem;
    -o-border-image: linear-gradient(var(--color-base) 0 0) 0/0/0 100vw;
       border-image: linear-gradient(var(--color-base) 0 0) fill 0/0/0 100vw;
  }
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #exam main .common-inner ul li:nth-of-type(2n + 1)::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 15rem;
    left: 0;
    width: 100vw;
    height: 18rem;
    -o-border-image: linear-gradient(var(--color-base) 0 0) 0/0/0 100vw;
       border-image: linear-gradient(var(--color-base) 0 0) fill 0/0/0 100vw;
  }
}

#publications main .fv {
  background-image: url(/assets/images/publications/fv.jpg);
}
#publications main .common-inner {
  padding-bottom: 12rem;
}
#publications main .common-inner section section {
  padding-top: 5rem;
}
#publications main .common-inner section section h3 {
  margin-bottom: 4rem;
  color: var(--color-main);
  font-size: 2.8rem;
  line-height: 1.3;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #publications main .common-inner section section h3 {
    font-size: 2rem;
  }
}
#publications main .common-inner .bulletin {
  padding-top: 8rem;
}
#publications main .common-inner .bulletin ul {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.6rem 1.1rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #publications main .common-inner .bulletin ul {
    grid-template-columns: repeat(2, 1fr);
  }
}
#publications main .common-inner .bulletin ul li a {
  display: grid;
  grid-template-columns: auto 1fr 2rem;
  align-items: center;
  -moz-column-gap: 0.8rem;
       column-gap: 0.8rem;
  height: 5.7rem;
  padding-inline: 3rem 1.6rem;
  background-color: var(--color-base);
}
@media (any-hover: hover) {
  #publications main .common-inner .bulletin ul li a:hover {
    background-color: var(--color-line);
  }
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #publications main .common-inner .bulletin ul li a {
    grid-template-columns: 1fr 2rem;
    height: 6.4rem;
    padding: 0.8rem 1.6rem;
  }
}
#publications main .common-inner .bulletin ul li a::after {
  content: "";
  aspect-ratio: 1;
  background: url(/assets/images/common/icon-tab.svg) no-repeat center/contain;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #publications main .common-inner .bulletin ul li a::after {
    grid-column: 2;
    grid-row: 1/span 2;
  }
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #publications main .common-inner .bulletin ul li a span.name {
    line-height: 1.2;
  }
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #publications main .common-inner .bulletin ul li a span.date {
    font-size: 1.2rem;
    line-height: 1.2;
  }
}
#publications main .common-inner .newspaper {
  padding-top: 13rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #publications main .common-inner .newspaper {
    padding-top: 8rem;
  }
}
#publications main .common-inner .newspaper ul {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 3rem 1.8rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #publications main .common-inner .newspaper ul {
    grid-template-columns: repeat(2, 1fr);
    gap: 2.4rem 1.6rem;
  }
}
#publications main .common-inner .newspaper ul li {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-rows: auto 1fr auto;
  row-gap: 1.6rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #publications main .common-inner .newspaper ul li {
    row-gap: 0.8rem;
  }
}
#publications main .common-inner .newspaper ul li a figure {
  aspect-ratio: 220/313;
  border: 1px solid transparent;
  transition: border-color 0.2s ease;
}
#publications main .common-inner .newspaper ul li a figure img,
#publications main .common-inner .newspaper ul li a figure canvas {
  width: 100%;
  height: 100%;
  aspect-ratio: 252/358;
  -o-object-fit: cover;
     object-fit: cover;
}
#publications main .common-inner .newspaper ul li a .body {
  display: grid;
  grid-template-columns: 1fr 2.6rem;
  margin-top: 0.8rem;
  background-color: #f0f5ff;
  padding: 0.8rem 2.7rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #publications main .common-inner .newspaper ul li a .body {
    padding: 0.8rem 1.6rem;
  }
}
#publications main .common-inner .newspaper ul li a .body::after {
  content: "";
  grid-column: 2;
  grid-row: 1/span 3;
  align-self: center;
  aspect-ratio: 1;
  background: url(/assets/images/common/icon-pdf.svg) no-repeat center/contain;
}
#publications main .common-inner .newspaper ul li a .body h4 {
  color: var(--color-main);
}
#publications main .common-inner .newspaper ul li a .body p {
  line-height: 1.4;
}
@media (any-hover: hover) {
  #publications main .common-inner .newspaper ul li a:hover figure {
    border-color: var(--color-main);
  }
}

#contact main .fv {
  background-image: url(/assets/images/contact/fv.jpg);
}
#contact main .common-inner {
  padding-bottom: 19rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #contact main .common-inner {
    padding-bottom: 8rem;
  }
}
#contact main .common-inner > header {
  padding-bottom: 10rem;
  text-align: center;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #contact main .common-inner > header {
    padding-bottom: 8rem;
  }
}
#contact main .common-inner > header h2 {
  margin-bottom: 3.2rem;
  font-family: var(--font-biz-mincho);
  font-size: 3.6rem;
  text-align: center;
  line-height: 1.6;
  letter-spacing: 0.12em;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #contact main .common-inner > header h2 {
    font-size: 2.4rem;
  }
}
#contact main .common-inner > header .common-link {
  margin: 4rem auto 0;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #contact main .common-inner > header .common-link {
    width: 22rem;
  }
}
#contact main section .common-heading-h2 {
  margin-bottom: 3.6rem;
}
#contact main section .common-heading-h2 + p {
  text-align: center;
  font-size: var(--font-size-md);
}
#contact main section .common-heading-h2 + p + p {
  margin-top: 1rem;
}
#contact main .tel {
  padding-block: 10rem;
  -o-border-image: linear-gradient(var(--color-base) 0 0) 0/0/0 100vw;
     border-image: linear-gradient(var(--color-base) 0 0) fill 0/0/0 100vw;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #contact main .tel {
    padding-block: 8rem;
  }
}
#contact main .tel .common-table {
  width: min(81.5rem, 100%);
  margin: 3.2rem auto 0;
}
#contact main .tel .common-table tr {
  grid-template-columns: 32.2rem 1fr;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #contact main .tel .common-table tr {
    grid-template-columns: 14rem 1fr;
  }
}
#contact main .tel .common-table tr th,
#contact main .tel .common-table tr td {
  padding: 1.6rem 3rem;
  font-size: 1.8rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #contact main .tel .common-table tr th,
  #contact main .tel .common-table tr td {
    padding: 1rem 1.6rem;
    font-size: 1.4rem;
  }
}
#contact main .form {
  padding-block: 10rem 11rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #contact main .form {
    padding-block: 8rem;
  }
}
#contact main .form > p {
  text-align: center;
}
#contact main .form > p strong {
  color: var(--color-attention);
  font-weight: 400;
}
#contact main .form .inner {
  margin-top: 4.8rem;
  padding: 6rem 12rem;
  background-color: #f4f4f4;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #contact main .form .inner {
    padding: 4rem 2.4rem 0;
  }
}

#policy main .fv {
  height: 18.6rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #policy main .fv {
    height: 13rem;
  }
}
#policy main .fv .title {
  color: var(--color-main);
}
#policy main .common-inner {
  padding-bottom: 12rem;
}
#policy main .common-inner :where(.privacy, .site) {
  padding-top: 8rem;
}
#policy main .common-inner :where(.privacy, .site) section {
  margin-top: 4rem;
}
#policy main .common-inner :where(.privacy, .site) section .common-heading-h3-border {
  margin-bottom: 2rem;
}
#policy main .common-inner :where(.privacy, .site) section ul {
  margin-top: 2rem;
}
#policy main .common-inner :where(.privacy, .site) section ul li {
  padding-left: 1em;
  text-indent: -1em;
}
#policy main .common-inner :where(.privacy, .site) section ul li::before {
  content: "・";
}
@media (any-hover: hover) {
  #policy main .common-inner :where(.privacy, .site) a:hover {
    text-decoration: underline;
  }
}
#policy main .common-inner :where(.privacy, .site) > p {
  margin-top: 4rem;
}
#policy main .common-inner :where(.privacy, .site) .common-contact {
  margin-top: 4rem;
}

#notfound main .fv {
  background-image: url(/assets/images/contact/fv.jpg);
}
#notfound main .common-inner {
  padding-bottom: 19rem;
  text-align: center;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #notfound main .common-inner {
    padding-bottom: 12rem;
  }
}
#notfound main .common-inner h2 {
  margin-bottom: 3.2rem;
  font-family: var(--font-biz-mincho);
  font-size: 3.6rem;
  text-align: center;
  line-height: 1.6;
  letter-spacing: 0.12em;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #notfound main .common-inner h2 {
    font-size: 2.4rem;
  }
}
#notfound main .common-inner .common-link {
  margin: 4rem auto 0;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #notfound main .common-inner .common-link {
    width: 22rem;
  }
}

#search main .fv {
  background-image: url(/assets/images/contact/fv.jpg);
}
#search main .common-inner {
  padding-bottom: 12rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #search main .common-inner {
    padding-bottom: 8rem;
  }
}
#search main .search-form-section {
  margin-bottom: 5.6rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #search main .search-form-section {
    margin-bottom: 4rem;
  }
}
#search main .search-form-section .search-form .input-wrap {
  display: flex;
  align-items: center;
  gap: 0;
  max-width: 64rem;
  margin-inline: auto;
  border: 2px solid var(--color-main);
  border-radius: 0.4rem;
  overflow: hidden;
  background: #fff;
}
#search main .search-form-section .search-form .input-wrap input[type=search] {
  flex: 1;
  height: 5.2rem;
  padding-inline: 2rem;
  border: none;
  outline: none;
  font-size: var(--font-size-md);
  background: transparent;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #search main .search-form-section .search-form .input-wrap input[type=search] {
    height: 4.8rem;
    font-size: 1.5rem;
  }
}
#search main .search-form-section .search-form .input-wrap button {
  display: grid;
  place-content: center;
  width: 5.6rem;
  height: 5.2rem;
  background: var(--color-main);
  border: none;
  cursor: pointer;
  color: #fff;
  transition: opacity 0.2s;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #search main .search-form-section .search-form .input-wrap button {
    width: 5.2rem;
    height: 4.8rem;
  }
}
@media (any-hover: hover) {
  #search main .search-form-section .search-form .input-wrap button:hover {
    opacity: 0.8;
  }
}
#search main .result-section .result-count {
  margin-bottom: 4rem;
  font-size: var(--font-size-md);
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #search main .result-section .result-count {
    margin-bottom: 3.2rem;
    font-size: 1.4rem;
  }
}
#search main .result-section .result-count em {
  font-style: normal;
  font-weight: 700;
  color: var(--color-main);
}
#search main .result-section .result-count strong {
  font-size: 2rem;
  color: var(--color-main);
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #search main .result-section .result-count strong {
    font-size: 1.8rem;
  }
}
#search main .result-section .result-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid #e5e5e5;
}
#search main .result-section .result-list li {
  list-style: none;
  border-bottom: 1px solid #e5e5e5;
}
#search main .result-section .result-list li a {
  display: block;
  padding: 2.8rem 0;
  text-decoration: none;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #search main .result-section .result-list li a {
    padding: 2rem 0;
  }
}
@media (any-hover: hover) {
  #search main .result-section .result-list li a:hover h2 {
    text-decoration: underline;
    color: var(--color-main);
  }
}
#search main .result-section .result-list li a h2 {
  font-family: var(--font-biz-mincho);
  font-size: 1.8rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--color-text);
  margin-bottom: 0.8rem;
  transition: color 0.2s;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #search main .result-section .result-list li a h2 {
    font-size: 1.6rem;
  }
}
#search main .result-section .result-list li a .excerpt {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  font-size: 1.4rem;
  line-height: 1.7;
  color: #555;
  margin-bottom: 0.6rem;
}
#search main .result-section .result-list li a .url {
  font-size: 1.2rem;
  color: #888;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#search main .result-section .no-results {
  padding: 4rem 0;
}
#search main .result-section .no-results p {
  margin-bottom: 1.2rem;
  font-weight: 700;
}
#search main .result-section .no-results ul {
  padding-left: 2rem;
}
#search main .result-section .no-results ul li {
  list-style: disc;
  font-size: var(--font-size-md);
  line-height: 2;
  color: #555;
}
#search main .result-section .common-pagination {
  margin-top: 6.4rem;
}

#future main .fv {
  background-image: url(/assets/images/future/fv.jpg);
}
#future main .common-inner > :where(section) {
  padding-block: 12rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #future main .common-inner > :where(section) {
    padding-block: 8rem;
  }
}
#future main .common-inner > :where(section):nth-of-type(2n - 1) {
  -o-border-image: linear-gradient(var(--color-base) 0 0) 0/0/0 100vw;
     border-image: linear-gradient(var(--color-base) 0 0) fill 0/0/0 100vw;
}
#future main .job {
  margin-top: 10.4rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #future main .job {
    margin-top: 8rem;
  }
}
#future main .job .description {
  margin-top: 3.2rem;
  color: var(--color-font);
  font-size: 1.4rem;
  font-weight: 400;
  letter-spacing: 0.04em;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #future main .job .description {
    margin-top: 2.4rem;
    font-size: 1.3rem;
  }
}
#future main .job .description span {
  color: var(--color-main);
  font-weight: 700;
}
#future main .job ul {
  display: flex;
  flex-wrap: wrap;
  gap: 3.8rem;
  margin-top: 7rem;
  width: 95%;
  margin-inline: auto;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #future main .job ul {
    flex-direction: column;
    gap: 2.4rem;
    margin-top: 3.2rem;
  }
}
#future main .job ul li {
  flex: 1;
  min-width: calc(50% - 1.9rem);
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #future main .job ul li {
    min-width: 100%;
  }
}
#future main .job ul li figure {
  aspect-ratio: 16/9.3;
  border-radius: 0.3rem;
  overflow: hidden;
  margin-bottom: 1.3rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #future main .job ul li figure {
    margin-bottom: 1.2rem;
  }
}
#future main .job ul li figure img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
#future main .job ul li h3 {
  margin-bottom: 0.8rem;
  color: var(--color-main);
  font-family: var(--font-noto-sans);
  font-size: 2rem;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #future main .job ul li h3 {
    font-size: 1.8rem;
    margin-bottom: 0.6rem;
  }
}
#future main .job ul li p {
  color: var(--color-font);
  font-family: var(--font-noto-sans);
  font-size: 1.4rem;
  font-weight: 400;
  letter-spacing: 0.04em;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #future main .job ul li p {
    font-size: 1.3rem;
  }
}
#future main .job .importance {
  margin-top: 10.6rem;
  display: flex;
  flex-direction: row;
  gap: 4.1rem;
  align-items: center;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #future main .job .importance {
    margin-top: 4rem;
    gap: 2.4rem;
    flex-direction: column-reverse;
  }
}
#future main .job .importance p {
  font-size: 1.5rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #future main .job .importance p {
    font-size: 1.4rem;
  }
}
#future main .job .importance p span {
  color: var(--color-main);
  font-weight: 700;
}
#future main .job .importance figure {
  width: 27%;
  flex-shrink: 0;
  aspect-ratio: 360/240;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #future main .job .importance figure {
    width: 100%;
    aspect-ratio: 16/9;
  }
}
#future main .attention .common-heading-h2 {
  margin-bottom: 5.6rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #future main .attention .common-heading-h2 {
    margin-bottom: 4rem;
  }
}
#future main .attention .common-heading-h2 span {
  display: block;
  font-size: 1.6rem;
  line-height: 1.6;
  letter-spacing: 0.12em;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #future main .attention .common-heading-h2 span {
    font-size: 1.4rem;
  }
}
#future main .attention ul li {
  display: grid;
  grid-template-columns: 22rem 1fr;
  -moz-column-gap: 3.2rem;
       column-gap: 3.2rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #future main .attention ul li {
    grid-template-columns: 1fr;
  }
}
#future main .attention ul li + li {
  margin-top: 8.2rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #future main .attention ul li + li {
    margin-top: 6.4rem;
  }
}
#future main .attention ul li h3 {
  grid-column: 1/-1;
  margin-bottom: 3.6rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #future main .attention ul li h3 {
    margin-bottom: 2.4rem;
  }
}
#future main .attention ul li figure {
  aspect-ratio: 220/164;
}
#future main .attention ul li figure img {
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #future main .attention ul li .body {
    margin-top: 2.4rem;
  }
}
#future main .attention ul li .body p + p {
  margin-top: 1.5em;
}
#future main .attention aside {
  display: grid;
  grid-template-columns: 1fr 16rem;
  gap: 4rem 5.2rem;
  margin-top: 13.8rem;
  border: 1px solid var(--color-line);
  border-radius: 0.5rem;
  padding: 5.7rem 4rem 6.3rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #future main .attention aside {
    grid-template-columns: 1fr;
    gap: 2.4rem;
    margin-top: 8rem;
    padding: 4rem 2.4rem;
  }
}
#future main .attention aside h3 {
  grid-column: 1/-1;
  background-color: var(--color-main);
  border-radius: 0.3rem;
  padding: 0.6rem 2.7rem;
  color: #fff;
  font-family: var(--font-biz-mincho);
  font-size: 2.8rem;
  letter-spacing: 0.1em;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #future main .attention aside h3 {
    padding: 0.6rem 1.6rem;
    font-size: 2.4rem;
  }
}
#future main .career {
  padding-block: 9.9rem 15.8rem;
  -o-border-image: linear-gradient(var(--color-base) 0 0) 0/0/0 100vw;
     border-image: linear-gradient(var(--color-base) 0 0) fill 0/0/0 100vw;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #future main .career {
    padding-block: 6rem 6rem;
  }
}
#future main .career p {
  margin-top: 3.2rem;
  color: var(--color-font);
  font-size: 1.4rem;
  font-weight: 400;
  letter-spacing: 0.04em;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #future main .career p {
    margin-top: 2.4rem;
    font-size: 1.3rem;
  }
}
#future main .career p span {
  color: var(--color-main);
  font-weight: 700;
}
#future main .career ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 3.6rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #future main .career ul {
    flex-direction: column;
    gap: 0.8rem;
    margin-top: 3.2rem;
  }
}
#future main .career ul li {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: calc(25% - 0.3rem);
  padding: 2.8rem 2.2rem 3.3rem;
  background-color: #fff;
  border: 1px solid var(--color-line);
  border-radius: 0.3rem;
  position: relative;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #future main .career ul li {
    padding: 2rem 1.6rem;
    width: 100%;
  }
}
#future main .career ul li h3 {
  margin-bottom: 1.2rem;
  min-height: 6rem;
  color: var(--color-main);
  font-size: 2rem;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.04em;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #future main .career ul li h3 {
    font-size: 1.8rem;
    margin-bottom: 1rem;
    min-height: 0;
  }
}
#future main .career ul li p {
  font-size: 1.3rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  margin-top: 2.8rem;
  min-height: 6.6rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #future main .career ul li p {
    font-size: 1.4rem;
    margin-top: 1.8rem;
  }
}
#future main .career ul li .icon {
  width: 9rem;
  height: 9rem;
  margin-inline: auto;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #future main .career ul li .icon {
    width: 8rem;
    height: 8rem;
  }
}
#future main .field {
  padding-block: 12rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #future main .field {
    padding-block: 8rem;
  }
}
#future main .field .images {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.2rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #future main .field .images {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }
}
#future main .field .images figure {
  aspect-ratio: 224/298;
  overflow: hidden;
}
#future main .field .images figure img {
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
#future main .field ul {
  margin-top: 9rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #future main .field ul {
    margin-top: 5.6rem;
  }
}
#future main .field ul li {
  display: grid;
  grid-template-columns: 1fr 43.2rem;
  padding-bottom: 3.5rem;
  border-bottom: 1px solid var(--color-line);
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #future main .field ul li {
    grid-template-columns: 1fr;
    gap: 1.2rem;
    padding-bottom: 3.2rem;
  }
}
#future main .field ul li + li {
  margin-top: 3.8rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #future main .field ul li + li {
    margin-top: 3.2rem;
  }
}
#future main .field ul li h3 {
  color: var(--color-main);
  font-size: 2.8rem;
  line-height: 1.3;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #future main .field ul li h3 {
    font-size: 2rem;
  }
}
#future main .skills {
  padding-block: 10rem 16rem;
  background-color: var(--color-base);
  -o-border-image: linear-gradient(var(--color-base) 0 0) 0/0/0 100vw;
     border-image: linear-gradient(var(--color-base) 0 0) fill 0/0/0 100vw;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #future main .skills {
    padding-block: 6rem 5rem;
  }
}
#future main .skills .skill-images {
  margin-top: 5rem;
  background-color: #fff;
  padding: 4.5rem 4rem 7.8rem;
  border: 1px solid var(--color-line);
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #future main .skills .skill-images {
    margin-top: 6rem;
    padding: 2.8rem 2rem;
  }
}
#future main .skills .skill-images h3 {
  background-color: var(--color-main);
  color: #fff;
  letter-spacing: 0.1em;
  padding: 0.6rem 2.7rem;
  font-size: 2.8rem;
  font-family: var(--font-biz-mincho);
  border-radius: 0.3rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #future main .skills .skill-images h3 {
    padding: 0.6rem 1.6rem;
    font-size: 1.8rem;
  }
}
#future main .skills .skill-images picture {
  margin-top: 6.8rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #future main .skills .skill-images picture {
    margin-top: 3.2rem;
  }
}
#future main .skills .skill-images .sp-content {
  display: none;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #future main .skills .skill-images .sp-content {
    margin-top: 2rem;
    display: block;
  }
}
#future main .skills .skill-images .sp-content h4 {
  text-align: center;
  border-radius: 50rem;
  font-size: 1.8rem;
  padding-block: 0.4rem;
  color: #fff;
  margin-top: 2rem;
  margin-bottom: 1.8rem;
}
#future main .skills .skill-images .sp-content h4:nth-of-type(1) {
  background-color: #01b791;
  margin-top: 4rem;
}
#future main .skills .skill-images .sp-content h4:nth-of-type(2) {
  background-color: #3dc0fe;
}
#future main .skills .skill-images .sp-content h4:nth-of-type(3) {
  background-color: #ffaf3f;
}
#future main .skills .skill-images .sp-content h4:nth-of-type(4) {
  background-color: #ff8790;
}
#future main .skills .skill-images .sp-content span {
  font-weight: 700;
}
#future main .skills .content {
  margin-top: 7.9rem;
}
#future main .skills .content p {
  width: 72%;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #future main .skills .content p {
    width: 100%;
  }
}
#future main .skills .content h3,
#future main .preparation .university-features h3 {
  padding-bottom: 1.6rem;
  border-bottom: 2px solid var(--color-main);
  margin-bottom: 3.6rem;
  color: var(--color-main);
  font-size: 2.8rem;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: 0.04em;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #future main .skills .content h3,
  #future main .preparation .university-features h3 {
    padding-bottom: 1.2rem;
    margin-bottom: 2.4rem;
    font-size: 2rem;
  }
}
#future main .preparation {
  padding-block: 10rem 17rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #future main .preparation {
    padding-block: 6rem 5rem;
  }
}
#future main .preparation figure {
  margin-top: 3rem;
}
#future main .preparation .university-features {
  margin-top: 6.6rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #future main .preparation .university-features {
    margin-top: 2.4rem;
  }
}
#future main .preparation .university-features .content p {
  color: var(--color-font);
  font-size: 1.4rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  width: 74%;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #future main .preparation .university-features .content p {
    font-size: 1.3rem;
    width: 100%;
  }
}
#future main .preparation .university-features + .university-features {
  margin-top: 3.8rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #future main .preparation .university-features + .university-features {
    margin-top: 2.4rem;
  }
}

#library main .fv {
  background-image: url(/assets/images/library/fv.jpg);
}
#library main .common-inner {
  padding-bottom: 10.4rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #library main .common-inner {
    padding-bottom: 8rem;
  }
}
#library main .library-guide {
  padding-block: 6.7rem 10.7rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #library main .library-guide {
    padding-block: 8rem 5rem;
  }
}
#library main .library-guide .lead span {
  color: var(--color-main);
  font-weight: 700;
}
#library main .library-guide .box {
  margin-top: 2.3rem;
  margin-bottom: 2.7rem;
  padding: 2.4rem 4rem;
  background-color: var(--color-base);
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #library main .library-guide .box {
    padding: 2rem 2.4rem;
  }
}
#library main .library-guide .list {
  display: flex;
}
#library main .library-guide .list + .list {
  margin-top: 1rem;
}
#library main .library-guide dl dt {
  min-width: 8.2rem;
  color: var(--color-main);
  font-weight: 700;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #library main .library-guide dl dt {
    font-size: 1.3rem;
  }
}
#library main .library-guide dl dd {
  margin: 0;
  color: var(--color-font);
  font-size: 1.4rem;
  font-weight: 400;
  letter-spacing: 0.04em;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #library main .library-guide dl dd {
    font-size: 1.3rem;
  }
}
#library main .library-guide p {
  margin-top: 1rem;
}
#library main .library-guide .common-link {
  -moz-column-gap: 6rem;
       column-gap: 6rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #library main .library-guide .common-link {
    -moz-column-gap: 1rem;
         column-gap: 1rem;
  }
}
#library main .library-guide h3 {
  padding-top: 11rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #library main .library-guide h3 {
    padding-top: 6rem;
  }
}
#library main .library-guide .wrap {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  width: min(38.3rem, 100%);
}
#library main .library-guide .note {
  margin: 0;
  font-size: 1.4rem;
  font-weight: 400;
  letter-spacing: 0.04em;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #library main .library-guide .note {
    font-size: 1.3rem;
  }
}
#library main .information {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4rem;
  padding-block: 10rem 10.4rem;
  background-color: var(--color-base);
  -o-border-image: linear-gradient(var(--color-base) 0 0) 0/0/0 100vw;
     border-image: linear-gradient(var(--color-base) 0 0) fill 0/0/0 100vw;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #library main .information {
    grid-template-columns: 1fr;
    padding-block: 6rem 10rem;
  }
}
#library main .information .library-news ul {
  margin-bottom: 2.2rem;
}
#library main .information .library-news li {
  display: flex;
  align-items: center;
  font-family: var(--font-biz-mincho);
  gap: 2rem;
  padding-bottom: 1.1rem;
  border-bottom: 1px solid rgba(85, 85, 85, 0.3);
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #library main .information .library-news li {
    grid-template-columns: 1fr;
    gap: 1rem;
    padding-bottom: 1.6rem;
  }
}
#library main .information .library-news li + li {
  margin-top: 2.5rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #library main .information .library-news li + li {
    margin-top: 1.6rem;
  }
}
#library main .information .library-news li .date span {
  border-radius: calc(infinity * 1px);
  padding: 0.6rem 1.2rem;
  background-color: var(--color-main);
  white-space: nowrap;
  color: #fff;
  font-size: 1.3rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #library main .information .library-news li .date span {
    font-size: 1.2rem;
    padding: 0.4rem 1.2rem;
  }
}
#library main .information .library-news li time {
  font-family: var(--font-lora);
  font-size: 1.3rem;
  letter-spacing: 0.14em;
  white-space: nowrap;
  position: relative;
  margin-right: 5.5rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #library main .information .library-news li time {
    font-size: 1.2rem;
  }
}
#library main .information .library-news li time:after {
  content: "";
  position: absolute;
  top: 50%;
  right: -4.4rem;
  transform: translateY(-50%);
  width: 2.4rem;
  height: 1px;
  background-color: var(--color-font);
}
#library main .information .library-news li h3 {
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
  margin-top: 1.6rem;
  font-size: 1.6rem;
  line-height: 1.6;
  letter-spacing: 0.08em;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #library main .information .library-news li h3 {
    font-size: 1.4rem;
  }
}
#library main .information .library-news li h3 span {
  display: inline-flex;
  flex-shrink: 0;
  width: 1.7rem;
  height: 2.9rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #library main .information .library-news li h3 span {
    width: 1.6rem;
    height: 2.2rem;
  }
}
@media (any-hover: hover) {
  #library main .information .library-news li a:hover {
    color: var(--color-main);
  }
}
#library main .information .library-news .common-link {
  margin: 2rem auto 0;
}
#library main .information .calendar {
  display: grid;
  grid-template-rows: auto 1fr;
  scroll-margin-top: calc(var(--header-hight) + 10rem);
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #library main .information .calendar {
    padding-top: 6rem;
    scroll-margin-top: 0;
  }
}
#library main .information .calendar iframe {
  aspect-ratio: 1;
}
#library main #service {
  padding-block: 12.5rem 12.9rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #library main #service {
    padding-block: 6rem 10rem;
  }
}
#library main #service > div {
  display: flex;
  flex-direction: column;
  gap: 2.4rem;
}
#library main #service .box {
  display: flex;
  align-items: flex-start;
  gap: 10rem;
  padding: 2.4rem 4rem;
  background-color: var(--color-base);
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #library main #service .box {
    flex-direction: column;
    gap: 2rem;
    padding: 2rem 2.4rem;
  }
}
#library main #service .box + .box {
  margin-top: 2.4rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #library main #service .box + .box {
    margin-top: 1.6rem;
  }
}
#library main #service .box h3 {
  display: flex;
  gap: 1.7rem;
  align-items: center;
  flex-shrink: 0;
  color: var(--color-main);
  font-weight: 700;
}
#library main #service .box h3 span {
  width: 5rem;
}
#library main #service .box ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
#library main #service .box > div > div > ul {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
#library main #service .box li {
  position: relative;
  padding-left: 1.6rem;
  font-size: 1.4rem;
  font-weight: 400;
  letter-spacing: 0.04em;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #library main #service .box li {
    font-size: 1.3rem;
  }
}
#library main #service .box li span {
  color: var(--color-main);
  font-weight: 700;
}
#library main #service .box li::before {
  position: absolute;
  left: 0;
  top: 0.7em;
  width: 0.8rem;
  height: 0.8rem;
  border-radius: 50%;
  background-color: var(--color-main);
  content: "";
  transform: translateY(-50%);
}
#library main #service .box li + li {
  margin-top: 0.5rem;
}
#library main #service .box p {
  margin-top: 2.3rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #library main #service .box p {
    font-size: 1.3rem;
  }
}
#library main #service .box li ul li {
  padding-left: 2.2rem;
}
#library main #service .box li ul li::before {
  display: none;
}
#library main #service .box li ul li + li {
  margin-top: 0.1rem;
}
#library main #service .box li ul li::after {
  content: "";
  position: absolute;
  left: -0.4rem;
  top: 50%;
  transform: translateY(-50%);
  background-color: var(--color-font);
  height: 0.1rem;
  width: 1.8rem;
}
#library main #magazine {
  padding-block: 12.8rem 0.2rem;
  -o-border-image: linear-gradient(var(--color-base) 0 0) 0/0/0 100vw;
     border-image: linear-gradient(var(--color-base) 0 0) fill 0/0/0 100vw;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #library main #magazine {
    padding-block: 6rem;
  }
}
#library main #magazine h2 {
  margin-bottom: 3.8rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #library main #magazine h2 {
    margin-bottom: 2.8rem;
  }
}
#library main #magazine > p {
  line-height: 1.3;
}
#library main #magazine .table {
  margin-top: 4rem;
}
#library main #magazine .table h3 {
  margin-bottom: 2.1rem;
}
#library main #magazine h3 {
  color: var(--color-main);
  font-weight: 700;
}
#library main #magazine .common-table {
  width: 100%;
  overflow-y: auto;
  max-height: 33.4rem;
}
#library main #magazine .common-table::-webkit-scrollbar {
  width: 0.6rem;
}
#library main #magazine .common-table::-webkit-scrollbar-track {
  background-color: var(--color-line);
}
#library main #magazine .common-table::-webkit-scrollbar-thumb {
  background-color: #808080;
  border-radius: 0.3rem;
}
#library main #magazine .common-table table {
  margin-right: 1rem;
  border-left: 1px solid var(--color-line);
  border-top: 1px solid var(--color-line);
  width: 98.8%;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #library main #magazine .common-table table {
    width: 97%;
  }
}
#library main #magazine .common-table tr {
  grid-template-columns: 1fr 37.7rem 16.9rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #library main #magazine .common-table tr {
    grid-template-columns: 14.3rem 1fr 6.7rem;
  }
}
#library main #magazine .common-table tr th:first-child {
  border: none;
}
#library main #magazine .common-table tr th {
  border-bottom: none;
}
#library main #magazine .common-table th,
#library main #magazine .common-table td {
  padding: 1rem 0.5rem 1rem 3rem;
  border: 1px solid var(--color-line);
  font-size: 1.4rem;
  line-height: 2;
  letter-spacing: 0.04em;
  color: var(--color-font);
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #library main #magazine .common-table th,
  #library main #magazine .common-table td {
    padding: 0.8rem 1.2rem;
    font-size: 1.3rem;
  }
}
#library main #magazine .common-table thead th {
  border-top: none;
  background-color: #f0f5ff;
  font-family: var(--font-biz-mincho);
  font-size: 1.6rem;
  font-weight: 400;
  letter-spacing: 0.1em;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #library main #magazine .common-table thead th {
    font-size: 1.4rem;
  }
}
#library main #magazine .common-table thead th:first-child {
  padding-left: 3rem;
}
#library main #magazine .common-table th:first-child,
#library main #magazine .common-table td:first-child {
  border-left: 1px solid var(--color-line);
}
#library main #magazine .common-table tbody td {
  background-color: #ffffff;
}
#library main #magazine .common-table tbody td:first-child {
  background-color: #f0f5ff;
}
#library main #links {
  padding-block: 9.6rem 13.4rem;
  -o-border-image: linear-gradient(var(--color-base) 0 0) 0/0/0 100vw;
     border-image: linear-gradient(var(--color-base) 0 0) fill 0/0/0 100vw;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #library main #links {
    padding-block: 6rem 5rem;
  }
}
#library main #links .box {
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
}
#library main #links .box + .box {
  margin-top: 3.9rem;
}
#library main #links h2 {
  padding-bottom: 1.2rem;
  border-bottom: 2px solid var(--color-main);
  color: var(--color-main);
  font-size: 2.8rem;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: 0.04em;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #library main #links h2 {
    font-size: 2.2rem;
  }
}
#library main #links h3 {
  font-family: var(--font-biz-mincho);
  font-size: 1.7rem;
  letter-spacing: 0.1em;
}
#library main #links h3 + h3 {
  margin-top: 3.6rem;
}
#library main #links ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
#library main #links li + li {
  margin-top: 1.2rem;
}
#library main #links li span {
  font-size: inherit;
  margin-left: 0.5rem;
  display: inline-block;
}
#library main #links li > a {
  color: var(--color-main);
  font-size: 1.4rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-decoration: none;
  transition: opacity 0.3s ease;
  position: relative;
  padding-left: 3rem;
  text-decoration: underline;
}
#library main #links li > a::before {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0.7rem;
  width: 0.8rem;
  height: 0.8rem;
  border-radius: 50%;
  background-color: var(--color-main);
  content: "";
}
@media (any-hover: hover) {
  #library main #links li > a:hover {
    opacity: 0.7;
  }
}
#library main #links li > p {
  margin-top: 0.4rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #library main #links li > p {
    font-size: 1.3rem;
  }
}
#library main .contact {
  padding-block: 11rem 0.4rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #library main .contact {
    padding-block: 6rem 0;
  }
}
#library main .contact {
  display: flex;
  flex-direction: column;
  gap: 4rem;
}
#library main .contact h2 {
  margin: 0;
  color: var(--color-main);
  font-family: var(--font-noto-sans);
  font-size: 2.8rem;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: 0.04em;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #library main .contact h2 {
    font-size: 2.2rem;
  }
}
#library main .contact .contact-box {
  padding: 5rem 6rem;
  border-radius: 0.5rem;
  background-color: #f4f4f4;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #library main .contact .contact-box {
    padding: 2rem 2.4rem;
  }
}
#library main .contact .contact-box p {
  margin-top: 2.3rem;
}
#visitors main .fv {
  background-image: url(/assets/images/visitors/fv.jpg);
}
#visitors main .common-inner {
  padding-bottom: 10.4rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #visitors main .common-inner {
    padding-bottom: 8rem;
  }
}
#visitors main .library-guide {
  padding-block: 6rem 14.7rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #visitors main .library-guide {
    padding-block: 8rem 4rem;
  }
}
#visitors main .library-guide .box {
  margin-top: 2.3rem;
  margin-bottom: 2.7rem;
  padding: 2.4rem 4rem;
  background-color: var(--color-base);
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #visitors main .library-guide .box {
    padding: 2rem 2.4rem;
  }
}
#visitors main .library-guide .list {
  display: flex;
}
#visitors main .library-guide .list + .list {
  margin-top: 1rem;
}
#visitors main .library-guide dl dt {
  min-width: 8.2rem;
  color: var(--color-main);
  font-weight: 700;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #visitors main .library-guide dl dt {
    font-size: 1.3rem;
  }
}
#visitors main .library-guide dl dd {
  margin: 0;
  color: var(--color-font);
  font-size: 1.4rem;
  font-weight: 400;
  letter-spacing: 0.04em;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #visitors main .library-guide dl dd {
    font-size: 1.3rem;
  }
}
#visitors main .library-guide p {
  margin-top: 1rem;
  font-weight: 400;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #visitors main .library-guide p {
    font-size: 1.3rem;
  }
}
#visitors main .information {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4rem;
  padding-block: 10rem 10.4rem;
  background-color: var(--color-base);
  -o-border-image: linear-gradient(var(--color-base) 0 0) 0/0/0 100vw;
     border-image: linear-gradient(var(--color-base) 0 0) fill 0/0/0 100vw;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #visitors main .information {
    grid-template-columns: 1fr;
    padding-block: 6rem 10rem;
  }
}
#visitors main .information .library-news h2 + p {
  margin-block: 4rem;
}
#visitors main .information .library-news ul {
  margin-bottom: 2.2rem;
}
#visitors main .information .library-news li {
  display: flex;
  align-items: center;
  font-family: var(--font-biz-mincho);
  gap: 2rem;
  padding-bottom: 1.1rem;
  border-bottom: 1px solid rgba(85, 85, 85, 0.3);
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #visitors main .information .library-news li {
    grid-template-columns: 1fr;
    gap: 1rem;
    padding-bottom: 1.6rem;
  }
}
#visitors main .information .library-news li + li {
  margin-top: 2.5rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #visitors main .information .library-news li + li {
    margin-top: 1.6rem;
  }
}
#visitors main .information .library-news li .date span {
  border-radius: calc(infinity * 1px);
  padding: 0.6rem 1.2rem;
  background-color: var(--color-main);
  white-space: nowrap;
  color: #fff;
  font-size: 1.3rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #visitors main .information .library-news li .date span {
    font-size: 1.2rem;
    padding: 0.4rem 1.2rem;
  }
}
#visitors main .information .library-news li time {
  font-family: var(--font-lora);
  font-size: 1.3rem;
  letter-spacing: 0.14em;
  white-space: nowrap;
  position: relative;
  margin-right: 5.5rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #visitors main .information .library-news li time {
    font-size: 1.2rem;
  }
}
#visitors main .information .library-news li time:after {
  content: "";
  position: absolute;
  top: 50%;
  right: -4.4rem;
  transform: translateY(-50%);
  width: 2.4rem;
  height: 1px;
  background-color: var(--color-font);
}
#visitors main .information .library-news li h3 {
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
  margin-top: 1.6rem;
  font-size: 1.6rem;
  line-height: 1.6;
  letter-spacing: 0.08em;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #visitors main .information .library-news li h3 {
    font-size: 1.4rem;
  }
}
#visitors main .information .library-news li h3 span {
  display: inline-flex;
  flex-shrink: 0;
  width: 1.7rem;
  height: 2.9rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #visitors main .information .library-news li h3 span {
    width: 1.6rem;
    height: 2.2rem;
  }
}
@media (any-hover: hover) {
  #visitors main .information .library-news li a:hover {
    color: var(--color-main);
  }
}
#visitors main .information .library-news .common-link {
  margin: 2rem auto 0;
}
#visitors main .information .calendar {
  display: grid;
  grid-template-rows: auto 1fr;
  scroll-margin-top: calc(var(--header-hight) + 10rem);
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #visitors main .information .calendar {
    padding-top: 6rem;
    scroll-margin-top: 0;
  }
}
#visitors main .information .calendar iframe {
  aspect-ratio: 1;
}
#visitors main #service {
  padding-block: 12.5rem 10.4rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #visitors main #service {
    padding-block: 6rem 10rem;
  }
}
#visitors main #entrance {
  padding-block: 11rem 0;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #visitors main #entrance {
    padding-block: 6rem 4rem;
  }
}
#visitors main #entrance h3 {
  margin-bottom: 2.1rem;
}
#visitors main #entrance > p {
  margin: 0;
  color: var(--color-font);
  font-family: var(--font-noto-sans);
  font-size: 1.4rem;
  font-weight: 400;
  letter-spacing: 0.04em;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #visitors main #entrance > p {
    font-size: 1.3rem;
  }
}
#visitors main #entrance .entrance-required-head {
  padding: 0.8rem 1.6rem;
  border-radius: 0.5rem;
  background-color: var(--color-main);
  color: #ffffff;
  font-family: var(--font-noto-sans);
  font-size: 1.8rem;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0.04em;
  margin-top: 1.8rem;
  margin-bottom: 1.8rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #visitors main #entrance .entrance-required-head {
    font-size: 1.6rem;
  }
}
#visitors main #entrance .entrance-categories {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 3.8rem;
  margin-bottom: 3.8rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #visitors main #entrance .entrance-categories {
    grid-template-columns: 1fr;
  }
}
#visitors main #entrance .box {
  padding: 2.4rem 3.7rem;
  background-color: #f4f4f4;
}
#visitors main #entrance .entrance-categories h3 {
  margin: 0;
  color: var(--color-main);
  font-family: var(--font-noto-sans);
  font-size: 1.4rem;
  font-weight: 500;
  letter-spacing: 0.04em;
}
#visitors main #entrance .entrance-categories ul {
  margin-top: 1.5rem;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
#visitors main #entrance .entrance-categories li {
  color: var(--color-font);
  font-family: var(--font-noto-sans);
  font-size: 1.4rem;
  font-weight: 400;
  letter-spacing: 0.04em;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #visitors main #entrance .entrance-categories li {
    font-size: 1.3rem;
  }
}
#visitors main #services {
  padding-block: 7.9rem 0;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #visitors main #services {
    padding-block: 6rem 1rem;
  }
}
#visitors main #services h3 {
  margin-bottom: 2.1rem;
}
#visitors main #services .box {
  margin-top: 3.8rem;
}
#visitors main #services .visitor-services-body p {
  margin: 0;
  color: var(--color-font);
  font-family: var(--font-noto-sans);
  font-size: 1.4rem;
  font-weight: 400;
  letter-spacing: 0.04em;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #visitors main #services .visitor-services-body p {
    font-size: 1.3rem;
  }
}
#visitors main #services .visitor-services-table-wrap {
  overflow-x: auto;
}
#visitors main #services .visitor-services-table-wrap table {
  border-collapse: collapse;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #visitors main #services .visitor-services-table-wrap table {
    width: 100%;
  }
}
#visitors main #services .visitor-services-table-wrap th,
#visitors main #services .visitor-services-table-wrap td {
  padding: 1rem 3rem;
  border: 1px solid var(--color-line);
  color: var(--color-font);
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 2;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #visitors main #services .visitor-services-table-wrap th,
  #visitors main #services .visitor-services-table-wrap td {
    padding: 0.8rem 1.2rem;
    font-size: 1.3rem;
  }
}
#visitors main #services .visitor-services-table-wrap th {
  width: 21rem;
  padding: 1rem 1rem 1rem 3rem;
  background-color: var(--color-base);
  font-family: var(--font-biz-mincho);
  font-size: 1.6rem;
  letter-spacing: 0.1em;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #visitors main #services .visitor-services-table-wrap th {
    padding: 1rem;
  }
}
#visitors main #services .visitor-services-table-wrap th:last-child {
  width: 16.9rem;
}
#visitors main #services .visitor-services-table-wrap tbody td {
  background-color: #ffffff;
}
#visitors main #services .visitor-services-table-wrap tbody td:first-child {
  background-color: var(--color-base);
}
#visitors main #services .visitor-services-table-wrap tbody td[rowspan] {
  vertical-align: middle;
}
#visitors main #rules {
  padding-top: 7.9rem;
}
#visitors main #rules li {
  display: grid;
  grid-template-columns: 11rem 1fr;
  height: 6rem;
  border: 1px solid var(--color-line);
}
#visitors main #rules li + li {
  border-top: none;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #visitors main #rules li {
    height: auto;
  }
}
#visitors main #rules li span:first-child {
  background-color: var(--color-base);
  font-family: var(--font-biz-mincho);
  font-size: 1.4rem;
  text-align: center;
  padding: 0.4rem 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
#visitors main #rules li span:last-child {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-left: 2.5rem;
  border-left: 1px solid var(--color-line);
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #visitors main #rules li span:last-child {
    padding-block: 1.6rem;
    padding-inline: 1.6rem;
  }
}

#admissions main .fv {
  background-image: url(/assets/images/admissions/fv.jpg);
}
#admissions main #about {
  padding-block: 5rem 10rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #admissions main #about {
    padding-block: 4rem 6rem;
  }
}
#admissions main #about figure {
  border-radius: 0.3rem;
  overflow: hidden;
  width: 31%;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #admissions main #about figure {
    margin-top: 2.4rem;
    width: 100%;
  }
}
#admissions main #about figure img {
  width: 100%;
  height: auto;
  display: block;
}
#admissions main #about .box {
  margin-top: 5rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #admissions main #about .box {
    margin-top: 3.2rem;
  }
}
#admissions main #about .box:first-child {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #admissions main #about .box:first-child {
    flex-direction: column;
  }
}
#admissions main #about .box:first-child .content {
  width: 47%;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #admissions main #about .box:first-child .content {
    width: 100%;
  }
}
#admissions main #about .box .attention {
  color: var(--color-attention);
  margin-top: 0;
  letter-spacing: 0.05em;
}
#admissions main #about .box:not(:first-child) {
  margin-top: 4rem;
}
#admissions main #about .box h2 {
  font-size: 3.7rem;
  font-family: var(--font-biz-mincho);
  margin-bottom: 5.1rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #admissions main #about .box h2 {
    font-size: 2rem;
  }
}
#admissions main #about h3 {
  font-family: var(--font-biz-mincho);
  font-size: 2.8rem;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0.12em;
  color: var(--color-font);
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #admissions main #about h3 {
    font-size: 2rem;
  }
}
#admissions main #about h3 span {
  display: inline-block;
  margin-inline: 0.4rem;
  margin-right: 0.7rem;
  background-color: var(--color-main);
  color: #ffffff;
  padding-inline: 1rem 0.6rem;
}
#admissions main #about > div p {
  margin-top: 0.8rem;
  font-family: var(--font-biz-mincho);
  font-size: 1.5rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--color-font);
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #admissions main #about > div p {
    margin-top: 1.2rem;
    font-size: 1.3rem;
  }
}
#admissions main #system {
  padding-top: 11rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #admissions main #system {
    padding-top: 6rem;
  }
}
#admissions main #system h2 {
  margin-bottom: 7.6rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #admissions main #system h2 {
    margin-bottom: 4rem;
  }
}
#admissions main #system ul {
  width: 87%;
  margin-inline: auto;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #admissions main #system ul {
    width: 100%;
  }
}
#admissions main #system li {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #admissions main #system li {
    flex-direction: column;
  }
}
#admissions main #system li .content {
  width: 63%;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #admissions main #system li .content {
    margin-right: auto;
    width: 100%;
  }
}
#admissions main #system li h3 {
  font-family: var(--font-noto-sans);
  font-size: 2.4rem;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: 0.04em;
  color: var(--color-main);
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #admissions main #system li h3 {
    font-size: 2rem;
  }
}
#admissions main #system li + li {
  margin-top: 3rem;
}
#admissions main #system li p {
  margin-top: 0.9rem;
  font-family: var(--font-noto-sans);
  font-size: 1.4rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--color-font);
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #admissions main #system li p {
    margin-top: 1.2rem;
    font-size: 1.3rem;
  }
}
#admissions main #system .system-link {
  text-align: center;
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  margin-top: 2rem;
  font-family: var(--font-noto-sans);
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0.1em;
  transition: opacity 0.3s ease;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #admissions main #system .system-link {
    margin-top: 1.6rem;
    font-size: 1.2rem;
    gap: 0;
  }
}
@media (any-hover: hover) {
  #admissions main #system .system-link:hover {
    opacity: 0.7;
    color: var(--color-main);
  }
}
#admissions main #system span {
  width: 4.4rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #admissions main #system span {
    width: 3rem;
  }
}
#admissions main #system span img {
  width: 0.8rem;
  height: auto;
  filter: brightness(0) invert(1);
}
#admissions main #information {
  padding-block: 8rem 9rem;
  -o-border-image: linear-gradient(var(--color-base) 0 0) 0/0/0 100vw;
     border-image: linear-gradient(var(--color-base) 0 0) fill 0/0/0 100vw;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #admissions main #information {
    padding-block: 8rem;
  }
}
#admissions main #information h2 {
  margin-bottom: 3.8rem;
}
#admissions main #information > p {
  margin-top: 1.2rem;
  margin-bottom: 2.3rem;
  font-size: 1.4rem;
  letter-spacing: 0.04em;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #admissions main #information > p {
    font-size: 1.3rem;
  }
}
#admissions main #information figure {
  width: 34.9rem;
  margin-inline: auto;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #admissions main #information figure {
    width: 80%;
  }
}
#admissions main #information figure p {
  margin-top: 1.5rem;
  margin-bottom: 1.6rem;
}
#admissions main #information figure .download-link {
  justify-content: center;
  text-decoration: underline;
  color: var(--color-font);
  position: relative;
  display: flex;
  align-items: center;
}
#admissions main #information figure .download-link::before {
  content: "";
  display: inline-block;
  width: 1.6rem;
  height: 1.2rem;
  background-image: url(/assets/images/common/icon-arrow03.svg);
  background-size: contain;
  background-repeat: no-repeat;
  margin-right: 0.6rem;
}
#admissions main #information figure .download-link:after {
  content: "";
  display: inline-block;
  width: 2.7rem;
  height: 2.7rem;
  background-image: url(/assets/images/common/icon-pdf.svg);
  background-size: contain;
  background-repeat: no-repeat;
  margin-left: 0.7rem;
}
#admissions main #information .table-of-contents {
  margin-top: 4.1rem;
  padding: 6.8rem 9.4rem;
  background-color: #fff;
  border: 1px solid var(--color-line);
  width: 81.8rem;
  margin-inline: auto;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #admissions main #information .table-of-contents {
    margin-top: 3rem;
    padding: 2rem 1.6rem;
    width: 100%;
  }
}
#admissions main #information .table-of-contents h3 {
  font-family: var(--font-biz-mincho);
  font-size: 1.9rem;
  font-weight: 400;
  letter-spacing: 0.05em;
  margin-bottom: 2.6rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #admissions main #information .table-of-contents h3 {
    font-size: 1.8rem;
  }
}
#admissions main #information .table-of-contents h3 span {
  font-size: 1.5rem;
  color: var(--color-font);
  margin-left: 2.3rem;
  letter-spacing: 0.07em;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #admissions main #information .table-of-contents h3 span {
    font-size: 1.1rem;
    margin-bottom: 1.5rem;
    display: block;
    margin-left: 0;
  }
}
#admissions main #information .table-of-contents ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
#admissions main #information .table-of-contents ul > li {
  margin-top: 0;
}
#admissions main #information .table-of-contents ul > li + li {
  margin-top: 1.3rem;
}
#admissions main #information .table-of-contents ul > li .item {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  font-family: var(--font-noto-sans);
  font-size: 1.4rem;
  line-height: 1.6;
  letter-spacing: 0.04em;
  color: var(--color-main);
  text-decoration: none;
  transition: color 0.2s ease, opacity 0.2s ease;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #admissions main #information .table-of-contents ul > li .item {
    font-size: 1.3rem;
  }
}
@media (any-hover: hover) {
  #admissions main #information .table-of-contents ul > li .item:hover {
    opacity: 0.7;
  }
}
#admissions main #information .table-of-contents ul > li .item .title {
  flex-shrink: 0;
  font-size: 1.4rem;
  position: relative;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #admissions main #information .table-of-contents ul > li .item .title {
    font-size: 1.2rem;
  }
}
#admissions main #information .table-of-contents ul > li .item .title:after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0.1rem;
  background-color: var(--color-main);
  height: 0.1rem;
  width: 100%;
}
#admissions main #information .table-of-contents ul > li .item .title span {
  margin-right: 0.9rem;
  display: inline-block;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #admissions main #information .table-of-contents ul > li .item .title span {
    margin-right: 0.3rem;
  }
}
#admissions main #information .table-of-contents ul > li .item .leader {
  flex: 1 1 auto;
  margin-left: 1.8rem;
  height: 1rem;
  background-image: radial-gradient(#999999 24%, transparent 24%);
  background-size: 0.8rem 0.8rem;
  background-repeat: repeat-x;
  background-position: left center;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #admissions main #information .table-of-contents ul > li .item .leader {
    margin-left: 0.5rem;
  }
}
#admissions main #information .table-of-contents ul > li .item .page {
  flex-shrink: 0;
  font-family: var(--font-noto-sans);
  color: var(--color-font);
}
#admissions main #information .table-of-contents ul > li .item--sub {
  font-size: 1.3rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #admissions main #information .table-of-contents ul > li .item--sub {
    font-size: 1.2rem;
  }
}
#admissions main #information .table-of-contents .sublist {
  list-style: none;
  margin-top: 1rem;
  padding: 0;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #admissions main #information .table-of-contents .sublist {
    margin-left: 0.5rem;
  }
}
#admissions main #information .table-of-contents .sublist li + li {
  margin-top: 1.3rem;
}
#admissions main .schedule {
  padding-block: 11.8rem 15.2rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #admissions main .schedule {
    padding-block: 8rem;
  }
}
#admissions main h2 {
  margin-bottom: 6.6rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #admissions main h2 {
    margin-bottom: 4rem;
  }
}
#admissions main .schedule-table-wrap {
  overflow-x: auto;
}
#admissions main .schedule-table-wrap table {
  width: 100%;
  min-width: 93.4rem;
  border: 1px solid var(--color-line);
}
#admissions main .schedule-table-wrap th,
#admissions main .schedule-table-wrap td {
  border: 1px solid var(--color-line);
  padding: 1rem;
  text-align: center;
  vertical-align: middle;
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 1.5;
  white-space: nowrap;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #admissions main .schedule-table-wrap th,
  #admissions main .schedule-table-wrap td {
    font-size: 1.4rem;
    padding: 0.8rem;
  }
}
#admissions main .schedule-table-wrap tbody tr {
  height: 12rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #admissions main .schedule-table-wrap tbody tr {
    height: 6.4rem;
  }
}
#admissions main .schedule-table-wrap thead th {
  background-color: var(--color-base);
  font-family: var(--font-biz-mincho);
}
#admissions main .schedule-table-wrap tbody th {
  background-color: var(--color-base);
}
#admissions main .schedule-table-wrap tbody th[rowspan],
#admissions main .schedule-table-wrap tbody th[colspan] {
  color: var(--color-main);
  font-family: var(--font-biz-mincho);
  text-decoration: underline;
}
#admissions main .schedule-table-wrap tbody td {
  background-color: #ffffff;
  letter-spacing: 0.04em;
}
#admissions main .schedule-table-wrap tbody tr:nth-child(even) td {
  background-color: #f3f3f3;
}
#admissions main .schedule-table-wrap .end {
  text-decoration: line-through;
}
#admissions main #method {
  -o-border-image: linear-gradient(var(--color-base) 0 0) 0/0/0 100vw;
     border-image: linear-gradient(var(--color-base) 0 0) fill 0/0/0 100vw;
  padding-block: 8rem;
}
#admissions main #method h2 {
  margin-bottom: 5.5rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #admissions main #method h2 {
    margin-bottom: 4rem;
  }
}
#admissions main #method h3 {
  color: var(--color-main);
  font-size: 2.4rem;
  letter-spacing: 0.04em;
  margin-bottom: 2rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #admissions main #method h3 {
    font-size: 2rem;
  }
}
#admissions main #method h3 + ul,
#admissions main #method h3 + ul {
  margin-top: 2rem;
}
#admissions main #method .common-list {
  margin-bottom: 4.3rem;
}
#admissions main #method ul li {
  font-size: 1.8rem;
  letter-spacing: 0.04em;
  gap: 1.6rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #admissions main #method ul li {
    font-size: 1.4rem;
  }
}
#admissions main #method ul li + li {
  margin-top: 1.1rem;
}
#admissions main #method .box {
  margin-top: 1.7rem;
}
#admissions main #method .box p {
  font-size: 1.4rem;
  letter-spacing: 0.04em;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #admissions main #method .box p {
    font-size: 1.2rem;
  }
}
#admissions main #method .box p span {
  text-indent: 18rem;
  display: block;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #admissions main #method .box p span {
    text-indent: 0;
  }
}
#admissions main #method .box p + p {
  margin-top: 0.4rem;
}
#admissions main .venue {
  padding-top: 8rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #admissions main .venue {
    padding-block: 6rem;
  }
}
#admissions main .venue .box {
  display: flex;
  justify-content: space-between;
  gap: 4rem;
  background-color: var(--color-base);
  padding: 3.8rem 5.8rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #admissions main .venue .box {
    gap: 4.2rem;
    flex-direction: column;
    padding: 1.8rem;
  }
}
#admissions main .venue .box figure {
  width: 94%;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #admissions main .venue .box figure {
    width: 100%;
  }
}
#admissions main .venue .box figure img {
  aspect-ratio: 480/340;
  -o-object-fit: cover;
     object-fit: cover;
}
#admissions main .venue .box .content {
  width: 33%;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #admissions main .venue .box .content {
    width: 100%;
  }
}
#admissions main .venue .box .map {
  width: 59%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #admissions main .venue .box .map {
    width: 100%;
  }
}
#admissions main .venue .box .map p {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #admissions main .venue .box .map p {
    margin-bottom: 1.6rem;
  }
}
#admissions main .venue .box .map p span {
  width: 1.6rem;
  display: flex;
}
#admissions main .venue .box + .box {
  margin-top: 3.8rem;
}
#admissions main .venue h3 {
  margin-bottom: 2.5rem;
  color: var(--color-main);
  font-size: 2rem;
  line-height: 1.3;
  letter-spacing: 0.04em;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #admissions main .venue h3 {
    font-size: 1.8rem;
  }
}
#admissions main .venue h3 span {
  font-size: 1.4rem;
}
#admissions main .venue iframe {
  border-radius: 0.5rem;
}
#admissions main .venue dl {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  margin-bottom: 2.6rem;
}
#admissions main .venue dt {
  font-size: 1.6rem;
  font-weight: 500;
  letter-spacing: 0.04em;
}
#admissions main .venue dd {
  font-size: 1.4rem;
  letter-spacing: 0.04em;
}
#admissions main #notice {
  padding-block: 8rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #admissions main #notice {
    padding-block: 6rem;
  }
}
#admissions main #notice h2 {
  margin-bottom: 3.3rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #admissions main #notice h2 {
    margin-bottom: 2rem;
  }
}
#admissions main #notice ul {
  display: flex;
  flex-direction: column;
  row-gap: 0.9rem;
}
#admissions main #notice li {
  display: flex;
  align-items: flex-start;
  font-size: 1.8rem;
  letter-spacing: 0.04em;
}
#admissions main #notice li::before {
  content: "";
  display: inline-block;
  width: 1.7rem;
  height: 0.1rem;
  background-color: var(--color-font);
  margin-right: 1rem;
  margin-top: 1.6rem;
  flex-shrink: 0;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #admissions main #notice li {
    font-size: 1.4rem;
  }
}
#admissions main #notice li span {
  width: 1.8rem;
  height: 1px;
  display: flex;
  background-color: var(--color-font);
}
#admissions main #notice .box {
  display: flex;
  align-items: center;
  gap: 9rem;
  border: 1px solid var(--color-line);
  padding-block: 2.3rem;
  width: 73.7rem;
  margin-inline: auto;
  padding-inline: 9.4rem;
  margin-top: 8.4rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #admissions main #notice .box {
    width: 100%;
    gap: 0;
    flex-direction: column;
    margin-top: 4rem;
    padding-inline: 2.4rem;
  }
}
#admissions main #notice .box h3 {
  font-size: 1.7rem;
  letter-spacing: 0.06em;
}
#admissions main #notice .box h3::before {
  content: "";
  display: inline-block;
  width: 1.3rem;
  height: 1.3rem;
  border-radius: 50%;
  background-color: var(--color-main);
  margin-right: 0.5rem;
  margin-top: 1.6rem;
  flex-shrink: 0;
}
#admissions main #notice .box nav ul {
  display: flex;
  flex-wrap: wrap;
  flex-grow: 1;
  gap: 0.4rem;
  background-color: #ffffff;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #admissions main #notice .box nav ul {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0;
    margin-top: 1.8rem;
  }
}
#admissions main #notice .box li {
  text-decoration: underline;
}
#admissions main #notice .box li:first-child:after {
  content: "";
  display: inline-block;
  width: 2.6rem;
  height: 2.6rem;
  margin-left: 0.4rem;
  background-image: url(/assets/images/common/icon-pdf.svg);
  background-repeat: no-repeat;
  background-size: contain;
}
#admissions main #notice .box li::before {
  display: none;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #admissions main #notice .box li:last-child {
    border-bottom: none;
  }
}
#admissions main #notice a {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  color: var(--color-main);
  font-size: 1.4rem;
  letter-spacing: 0.04em;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #admissions main #notice a {
    padding: 0.4rem 0;
  }
}
#admissions main #contact {
  padding: 5rem 6rem;
  border-radius: 0.5rem;
  background-color: #f4f4f4;
  margin-block: 2rem 10.3rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #admissions main #contact {
    padding: 2rem 2.4rem;
    margin-block: 6rem 8rem;
  }
}
#admissions main #contact h2 {
  color: var(--color-main);
  font-size: 2.8rem;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0.04em;
  margin-bottom: 1.7rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #admissions main #contact h2 {
    font-size: 2rem;
    margin-bottom: 1.2rem;
  }
}
#admissions main #contact p + p {
  margin-top: 1.9rem;
}

#application main .fv {
  background-image: url(/assets/images/application/fv.jpg);
}
#application main .method {
  padding-block: 0 10rem;
}
#application main .method .intro {
  display: flex;
  gap: 2rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #application main .method .intro {
    flex-direction: column;
  }
}
#application main .method .intro h2 {
  font-family: var(--font-biz-mincho);
  font-size: 3.6rem;
  line-height: 1.6;
  letter-spacing: 0.12em;
  margin-bottom: 4rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #application main .method .intro h2 {
    font-size: 2.4rem;
    margin-bottom: 2.8rem;
  }
}
#application main .method .intro h3 {
  padding-left: 1.1rem;
  margin-bottom: 3rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #application main .method .intro h3 {
    padding-left: 0.3rem;
  }
}
#application main .method .intro .body {
  width: 67%;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #application main .method .intro .body {
    width: 100%;
  }
}
#application main .method .intro p + p {
  margin-top: 1.9rem;
}
#application main .method .intro p span {
  color: var(--color-main);
}
#application main .method .intro .common-link {
  margin-top: 3.2rem;
}
#application main .method .intro figure {
  border-radius: 0.5rem;
  overflow: hidden;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #application main .method .intro figure {
    border-radius: 0.3rem;
  }
}
#application main .method .intro figure {
  width: 31%;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #application main .method .intro figure {
    width: 100%;
  }
}
#application main .method .acceptance {
  margin-top: 10rem;
}
#application main .method .acceptance .card {
  border: 1px solid var(--color-line);
  padding: 2.2rem 4rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #application main .method .acceptance .card {
    padding: 2.4rem;
  }
}
#application main .method .acceptance .card .head {
  display: flex;
  align-items: center;
  gap: 2rem;
  margin-bottom: 2rem;
}
#application main .method .acceptance .card span {
  display: inline-block;
  background-color: var(--color-main);
  color: #fff;
  font-family: var(--font-biz-mincho);
  font-size: 1.8rem;
  line-height: 1.3;
  letter-spacing: 0.04em;
  padding: 1rem;
}
#application main .method .acceptance .card h3 {
  font-family: var(--font-biz-mincho);
  font-size: 3.5rem;
  font-weight: 400;
  line-height: 1;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #application main .method .acceptance .card h3 {
    font-size: 2.4rem;
  }
}
#application main .method .acceptance .card p {
  font-size: 1.4rem;
  letter-spacing: 0.04em;
}
#application main .method .acceptance .note {
  margin-top: 2.2rem;
  font-size: 1.4rem;
  letter-spacing: 0.04em;
  padding-left: 2.6rem;
  margin-bottom: 3.8rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #application main .method .acceptance .note {
    padding-left: initial;
    margin-bottom: 3.2rem;
  }
}
#application main .method .acceptance .external-link {
  background-color: #01b791;
  color: #fff;
  margin-top: 3.2rem;
  font-family: var(--font-biz-mincho);
  display: inline-flex;
  align-items: center;
  font-size: 1.6rem;
  line-height: 1;
  letter-spacing: 0.1em;
  padding: 2.6rem 3.5rem 2.8rem 4.7rem;
  border-radius: 5rem;
  transition: opacity 0.3s;
  width: min(53.8rem, 100%);
  position: relative;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #application main .method .acceptance .external-link {
    width: 100%;
    justify-content: center;
    padding: 1.6rem 2.4rem;
    font-size: 1.4rem;
    flex-direction: column;
    line-height: 1.6;
  }
}
#application main .method .acceptance .external-link span {
  font-size: 1.4rem;
}
#application main .method .acceptance .external-link::after {
  content: "";
  display: block;
  margin-left: 5.1rem;
  width: 2.2rem;
  height: 2.2rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' viewBox='0 -960 960 960' width='24' fill='%23ffffff'%3E%3Cpath d='M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h280v80H200v560h560v-280h80v280q0 33-23.5 56.5T760-120H200Zm188-212-56-56 372-372H560v-80h280v280h-80v-144L388-332Z'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  flex-shrink: 0;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #application main .method .acceptance .external-link::after {
    position: absolute;
    right: 2.4rem;
    top: 50%;
    transform: translateY(-50%);
    width: 2.2rem;
    height: 2.2rem;
  }
}
#application main .method .acceptance .external-link:hover {
  opacity: 0.8;
}
#application main .step-heading {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  font-family: var(--font-biz-mincho);
  font-size: 2.8rem;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0.04em;
  color: var(--color-main);
  border-bottom: 2px solid var(--color-main);
  padding-bottom: 1.6rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #application main .step-heading {
    font-size: 2rem;
  }
}
#application main .step-heading span {
  font-size: inherit;
}
#application main .step-content h4 {
  margin-top: 0.4rem;
  font-size: 1.8rem;
  font-weight: 400;
  letter-spacing: 0.05em;
  margin-bottom: 2rem;
  color: var(--color-main);
}
#application main .step-content h4 + h4:nth-of-type(2) {
  margin-top: 3.2rem;
}
#application main .step-content .list li {
  padding-left: 0;
}
#application main .step-content .list li span {
  display: inline-block;
  margin-left: 1.5rem;
}
#application main .step-content .list li ul {
  padding-left: 1em;
  margin-top: 0;
  margin-bottom: 0;
}
#application main .step-content .list li ul li + li {
  margin-top: 0.2rem;
}
#application main .flow {
  -o-border-image: linear-gradient(var(--color-base) 0 0) 0/0/0 100vw;
     border-image: linear-gradient(var(--color-base) 0 0) fill 0/0/0 100vw;
  padding-block: 10rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #application main .flow {
    padding-block: 8rem;
  }
}
#application main .flow > section {
  padding-top: 10rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #application main .flow > section {
    padding-top: 8rem;
  }
}
#application main .preparation h2 {
  margin-bottom: 6rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #application main .preparation h2 {
    margin-bottom: 4rem;
  }
}
#application main .preparation h3 {
  padding-left: 1.1rem;
  margin-bottom: 3rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #application main .preparation h3 {
    padding-left: 0.3rem;
  }
}
#application main .preparation .content h4 {
  margin-top: 1rem;
}
#application main .preparation .content + .content {
  margin-top: 3rem;
}
#application main .preparation .content ol li + li {
  margin-top: 0.9rem;
}
#application main .preparation .content ol li p {
  padding-left: 1.4rem;
}
#application main .preparation .content ul > li + li {
  margin-top: 1rem;
}
#application main .preparation .content ul > li a {
  color: var(--color-main);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: underline;
  width: -moz-max-content;
  width: max-content;
}
#application main .preparation .content ul > li a::before {
  background-image: url(/assets/images/application/preparation01-img01.png);
  background-repeat: no-repeat;
  background-size: contain;
  width: 2.4rem;
  height: 2.5rem;
  content: "";
  display: inline-block;
}
#application main .preparation .content ul > li p {
  padding-left: 1em;
}
#application main .payment h3 {
  padding-left: 1.1rem;
  margin-bottom: 3rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #application main .payment h3 {
    padding-left: 0.3rem;
  }
}
#application main .payment dl {
  display: flex;
  font-size: 1.8rem;
  letter-spacing: 0.04em;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #application main .payment dl {
    font-size: 1.6rem;
    flex-direction: column;
  }
}
#application main .payment dl + dl {
  margin-top: 1rem;
}
#application main .payment dl dt {
  font-weight: 400;
}
#application main .payment dl dd::before {
  content: "：";
}
#application main .payment .caution {
  margin-top: 1.1rem;
  color: var(--color-attention);
  font-size: 1.4rem;
  letter-spacing: 0.04em;
}
#application main .payment ul {
  margin-top: 1.6rem;
}
#application main .payment ul + ul {
  margin-top: 4rem;
}
#application main .payment ul li span {
  display: flex;
  align-items: center;
  padding-left: 0.9rem;
  margin-top: 0.2rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #application main .payment ul li span {
    padding-left: 0;
  }
}
#application main .payment ul li span:before {
  content: "";
  width: 1.7rem;
  height: 0.1rem;
  background-color: var(--color-font);
  display: inline-block;
  margin-right: 0.4rem;
  flex-shrink: 0;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #application main .payment ul li span:before {
    width: 1rem;
  }
}
#application main .payment ul li::before {
  content: "";
  width: 0.8rem;
  height: 0.8rem;
  border-radius: 50%;
  background-color: var(--color-main);
  display: inline-block;
  flex-direction: column;
  line-height: 8px;
  margin-right: 1.5rem;
}
#application main .payment .content + .content {
  margin-top: 4rem;
}
#application main .payment .box {
  margin-top: 3rem;
  border-radius: 0.5rem;
  background-color: #fff;
  padding: 1.4rem 4.9rem 2.5rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #application main .payment .box {
    padding: 2rem 2.4rem;
  }
}
#application main .payment .box .head {
  color: var(--color-main);
  font-size: 1.7rem;
  margin-bottom: 0.8rem;
  padding-left: 0;
}
#application main .payment .box p {
  padding-left: 1rem;
  font-size: 1.4rem;
  letter-spacing: 0.04em;
}
#application main .payment h4 {
  font-size: 1.8rem;
  color: var(--color-main);
  margin-bottom: 1.9rem;
  letter-spacing: 0.03em;
  margin-top: 4rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #application main .payment h4 {
    font-size: 1.6rem;
    margin-top: 3rem;
  }
}
#application main .registration h3 {
  padding-left: 1.1rem;
  margin-bottom: 3rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #application main .registration h3 {
    padding-left: 0.3rem;
  }
}
#application main .registration h4 {
  margin-bottom: 0.9rem;
}
#application main .registration h4:first-child {
  margin-top: 0;
}
#application main h4 {
  margin-top: 4rem;
  color: var(--color-main);
  font-size: var(--font-size-md);
  letter-spacing: 0.03em;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #application main h4 {
    margin-top: 3rem;
  }
}
#application main .content + .content {
  margin-top: 3rem;
}
#application main .content ul {
  margin-bottom: 0;
}
#application main .content ul p {
  margin-top: 0;
}
#application main .content li + li {
  margin-top: 0;
}
#application main .content p span {
  display: block;
  padding-left: 1em;
}
#application main .mailing h3 {
  padding-left: 1.1rem;
  margin-bottom: 3rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #application main .mailing h3 {
    padding-left: 0.3rem;
  }
}
#application main .mailing h4 {
  margin-top: 0;
  margin-bottom: 1rem;
}
#application main .mailing .content + .content {
  margin-top: 2rem;
}
#application main .mailing .content ul {
  margin-bottom: 0;
}
#application main .mailing .content ul p {
  margin-top: 0;
}
#application main .mailing .content li {
  padding-left: 0;
}
#application main .mailing .content li span {
  color: var(--color-attention);
}
#application main .mailing .content li + li {
  margin-top: 0;
}
#application main .mailing .content p span {
  padding-left: 0;
}
#application main .mailing .content p span a {
  color: var(--color-main);
  text-decoration: underline;
  position: relative;
  margin-left: 3rem;
}
#application main .mailing .content p span a:hover {
  text-decoration: none;
}
#application main .mailing .content p span a::before {
  content: "";
  position: absolute;
  width: 2.8rem;
  height: 2.5rem;
  top: 50%;
  transform: translateY(-50%);
  left: -2.9rem;
  background-image: url(/assets/images/application/preparation01-img01.png);
  background-repeat: no-repeat;
  background-size: contain;
  pointer-events: none;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #application main .mailing .content p span a::before {
    top: 21%;
  }
}
#application main .mailing .wrap {
  margin-top: 3rem;
}
#application main .mailing .wrap li {
  padding-left: 0;
}
#application main .mailing .wrap li span {
  padding-left: 1.5em;
  margin-top: 0.8rem;
  display: block;
}
#application main .mailing .wrap li::before {
  content: "・";
  width: 0.8rem;
  height: 0.8rem;
  border-radius: 50%;
  background-color: var(--color-main);
  display: inline-block;
  flex-direction: column;
  line-height: 8px;
  margin-right: 1.5rem;
}
#application main .mailing .box {
  margin-top: 3rem;
  border-radius: 0.5rem;
  background-color: #fff;
  padding: 1.7rem 4.9rem 2.8rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #application main .mailing .box {
    padding: 2rem 2.4rem;
  }
}
#application main .mailing .box .head {
  color: var(--color-main);
  font-family: var(--font-biz-mincho);
  font-size: 1.7rem;
  margin-bottom: 0.4rem;
}
#application main .mailing .period {
  margin-top: 2rem;
}
#application main .mailing .period h3 {
  font-size: 1.6rem;
  font-weight: 700;
  margin-bottom: 0.8rem;
}
#application main .mailing .period p {
  letter-spacing: 0.06em;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #application main .mailing .period p {
    letter-spacing: 0.05em;
  }
}
#application main .exam-ticket h3 {
  padding-left: 1.1rem;
  margin-bottom: 3rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #application main .exam-ticket h3 {
    padding-left: 0.3rem;
  }
}
#application main .exam-ticket ul {
  margin-bottom: 2.4rem;
}
#application main .exam-ticket ul li {
  position: relative;
  font-size: 1.4rem;
  letter-spacing: 0.04em;
  display: flex;
  align-items: flex-start;
}
#application main .exam-ticket ul li + li {
  margin-top: 0.8rem;
}
#application main .exam-ticket ul li::before {
  content: "";
  display: inline-block;
  flex-shrink: 0;
  margin-top: 1rem;
  font-size: 1.2rem;
  width: 0.8rem;
  height: 0.8rem;
  border-radius: 50%;
  background-color: var(--color-main);
  margin-right: 1.5rem;
}
#application main .exam-ticket p {
  color: var(--color-attention);
  text-indent: -1.5rem;
  padding-left: 1rem;
}
#application main .result h3 {
  padding-left: 1.1rem;
  margin-bottom: 3rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #application main .result h3 {
    padding-left: 0.3rem;
  }
}
#application main .result ul {
  margin-bottom: 2.4rem;
}
#application main .result ul li {
  position: relative;
  font-size: 1.4rem;
  letter-spacing: 0.04em;
  text-indent: -1.5em;
  padding-left: 1.5em;
}
#application main .result ul li + li {
  margin-top: 0.8rem;
}
#application main .result ul li::before {
  content: "";
  display: inline-block;
  flex-shrink: 0;
  margin-top: 1rem;
  font-size: 1.2rem;
  width: 0.8rem;
  height: 0.8rem;
  border-radius: 50%;
  background-color: var(--color-main);
  margin-right: 1.5rem;
}
#application main .notice h3 {
  font-size: 1.8rem;
  background-color: var(--color-main);
  color: #fff;
  font-weight: 400;
  margin-bottom: 1.9rem;
  border-radius: 0.5rem;
  padding: 0.5rem 1.8rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #application main .notice h3 {
    font-size: 1.6rem;
  }
}
#application main .notice dl dt {
  font-size: 1.4rem;
  letter-spacing: 0.04em;
  margin-top: 1rem;
  font-weight: 500;
  display: flex;
  align-items: center;
}
#application main .notice dl dt:first-child {
  margin-top: 0;
}
#application main .notice dl dt::before {
  content: "";
  width: 1.8rem;
  height: 0.1rem;
  background-color: var(--color-font);
  display: inline-block;
  flex-direction: column;
  margin-right: 0.7rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #application main .notice dl dt::before {
    width: 1.4rem;
  }
}
#application main .notice dl dd {
  font-size: 1.4rem;
  letter-spacing: 0.04em;
  padding-left: 2.5rem;
}
#application main .contact {
  padding: 5rem 6rem;
  border-radius: 0.5rem;
  background-color: #f4f4f4;
  margin-block: 8rem 10.3rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #application main .contact {
    padding: 2rem 2.4rem;
    margin-block: 6rem 8rem;
  }
}
#application main .contact h2 {
  color: var(--color-main);
  font-size: 2.8rem;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0.04em;
  margin-bottom: 1.7rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #application main .contact h2 {
    font-size: 2rem;
    margin-bottom: 1.2rem;
  }
}
#application main .contact p + p {
  margin-top: 1.9rem;
}

#curriculum main .fv {
  background-image: url(/assets/images/curriculum/fv.jpg);
}
#curriculum main .common-intro {
  padding-block: 9rem 11rem;
  gap: 4rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #curriculum main .common-intro {
    padding-block: 8rem 2rem;
  }
}
#curriculum main .common-intro h2 {
  margin-bottom: 0.8rem;
  line-height: 1.4;
}
#curriculum main .common-intro .lead {
  margin-bottom: 4rem;
  font-family: var(--font-biz-mincho);
  font-size: 2.8rem;
  line-height: 1.6;
  letter-spacing: 0.12em;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #curriculum main .common-intro .lead {
    margin-bottom: 2.4rem;
    font-size: 2rem;
  }
}
#curriculum main .common-intro figure img {
  border-radius: 0.5rem;
  width: 100%;
  height: auto;
}
#curriculum main .common-intro .box {
  grid-column: 1/-1;
  display: flex;
  align-items: center;
  gap: 8rem;
  width: 73.8rem;
  border: 1px solid var(--color-line);
  padding: 2.3rem 6.4rem;
  margin-inline: auto;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #curriculum main .common-intro .box {
    gap: 0;
    flex-direction: column;
    width: 100%;
    padding-inline: 2.4rem;
  }
}
#curriculum main .common-intro .box h2 {
  font-family: var(--font-biz-mincho);
  font-size: 1.7rem;
  letter-spacing: 0.09em;
}
#curriculum main .common-intro .box ul {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  gap: 0.1rem;
  background-color: #fff;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #curriculum main .common-intro .box ul {
    align-items: stretch;
    gap: 0;
    padding: 0;
    margin-top: 1.8rem;
  }
}
#curriculum main .step {
  -o-border-image: linear-gradient(var(--color-base) 0 0) 0/0/0 100vw;
     border-image: linear-gradient(var(--color-base) 0 0) fill 0/0/0 100vw;
  padding-block: 12rem 10rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #curriculum main .step {
    padding-block: 8rem;
  }
}
#curriculum main .step .item {
  display: flex;
  border-bottom: 1px solid var(--color-line);
  padding-bottom: 3rem;
  gap: 11rem;
  border-radius: 0.5rem;
  overflow: hidden;
  align-items: flex-start;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #curriculum main .step .item {
    flex-direction: column;
    gap: 1.8rem;
  }
}
#curriculum main .step .item + .item {
  margin-top: 3.3rem;
}
#curriculum main .step .item:last-child {
  border-bottom: none;
}
#curriculum main .step .item .body {
  width: 76%;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #curriculum main .step .item .body {
    width: 100%;
  }
}
#curriculum main .step .item li {
  display: flex;
  align-items: flex-start;
}
#curriculum main .step .item li + li {
  margin-top: 0.6rem;
}
#curriculum main .step .item li:before {
  content: "";
  display: inline-block;
  width: 1.7rem;
  height: 0.1rem;
  background-color: var(--color-font);
  margin-right: 0.9rem;
  flex-shrink: 0;
  margin-top: 1.1rem;
}
#curriculum main .step .item figure {
  border-radius: 0.5rem;
  overflow: hidden;
  width: 56%;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #curriculum main .step .item figure {
    width: 100%;
  }
}
#curriculum main .step .item figure img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
  aspect-ratio: 350/211;
}
#curriculum main .step .item h3 {
  font-size: 2.8rem;
  font-weight: 400;
  line-height: 1.3;
  color: var(--color-main);
  margin-bottom: 1.7rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #curriculum main .step .item h3 {
    font-size: 2rem;
    margin-bottom: 1.2rem;
  }
}
#curriculum main .step .item a {
  margin: 2.4rem 0 0 auto;
}
#curriculum main .subject {
  padding-block: 12rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #curriculum main .subject {
    padding-block: 4rem;
  }
}
#curriculum main .subject .common-intro h2 {
  font-size: 3.2rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #curriculum main .subject .common-intro h2 {
    font-size: 2.4rem;
  }
}
#curriculum main .subject .common-intro p strong {
  font-weight: 500;
}
#curriculum main .subject .common-intro figure {
  border-radius: 0.5rem;
  overflow: hidden;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #curriculum main .subject .common-intro figure {
    border-radius: 0.3rem;
  }
}
#curriculum main .subject #core-competencies {
  padding-top: 8rem;
}
#curriculum main .subject .subject-list {
  display: flex;
  flex-direction: column;
  gap: 5.7rem;
  margin-top: 6.4rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #curriculum main .subject .subject-list {
    gap: 5rem;
  }
}
#curriculum main .subject .title {
  display: flex;
  align-items: center;
  gap: 3.2rem;
  margin-bottom: 2.6rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #curriculum main .subject .title {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.2rem;
    margin-bottom: 2rem;
  }
}
#curriculum main .subject .title h3 {
  font-size: 3.2rem;
  font-weight: 500;
  line-height: 1.3;
  color: var(--color-main);
  flex-shrink: 0;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #curriculum main .subject .title h3 {
    font-size: 2.2rem;
  }
}
#curriculum main .subject .title p {
  font-size: 1.4rem;
  font-weight: 400;
  color: var(--color-font);
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #curriculum main .subject .title p {
    font-size: 1.3rem;
  }
}
#curriculum main .subject .content {
  border-radius: 0.5rem;
  overflow: hidden;
  padding: 4rem 3.9rem 4.4rem 4.2rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #curriculum main .subject .content {
    flex-direction: column;
    padding: 2.8rem;
    padding-top: 2rem;
  }
}
#curriculum main .subject .content h4 {
  font-size: 2.8rem;
  color: var(--color-main);
  margin-bottom: 1.7rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #curriculum main .subject .content h4 {
    font-size: 1.8rem;
    margin-bottom: 1.2rem;
  }
}
#curriculum main .subject .content .body {
  display: flex;
  align-items: flex-start;
  gap: 2.9rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #curriculum main .subject .content .body {
    flex-direction: column;
    gap: 1.8rem;
  }
}
#curriculum main .subject .content figure {
  border-radius: 0.5rem;
  overflow: hidden;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #curriculum main .subject .content figure {
    border-radius: 0.3rem;
  }
}
#curriculum main .subject .content figure {
  width: 30%;
  flex-shrink: 0;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #curriculum main .subject .content figure {
    width: 100%;
  }
}
#curriculum main .subject .content figure img {
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
#curriculum main .subject .content figure.scale img {
  transform: scale(1.2);
}
#curriculum main .subject .subject-detail {
  flex: 1;
}
#curriculum main .subject .green .content {
  background-color: #e6f8f4;
}
#curriculum main .subject .orange .content {
  background-color: #fff7ec;
}
#curriculum main .subject .blue .content {
  background-color: #ecf9ff;
}
#curriculum main .subject .pink .content {
  background-color: #fff3f4;
}
#curriculum main .subject .subject-badge {
  display: grid;
  place-content: center;
  width: -moz-fit-content;
  width: fit-content;
  padding: 1rem 1.5rem;
  border-radius: calc(infinity * 1px);
  background-color: var(--color-main);
  white-space: nowrap;
  color: #fff;
  font-family: var(--font-biz-mincho);
  font-size: 1.5rem;
  line-height: 1;
  letter-spacing: -0.03em;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #curriculum main .subject .subject-badge {
    font-size: 1.3rem;
    padding: 0.5rem 1.2rem;
  }
}
#curriculum main .subject .subject-feature {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}
#curriculum main .subject .subject-meta {
  display: flex;
  align-items: center;
  gap: 1.6rem;
  margin-bottom: 1.2rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #curriculum main .subject .subject-meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    margin-top: 1.2rem;
  }
}
#curriculum main .subject .subject-meta-item {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}
#curriculum main .subject .subject-meta-item span:not(.subject-badge) {
  font-size: 1.4rem;
  font-weight: 400;
  color: var(--color-font);
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #curriculum main .subject .subject-meta-item span:not(.subject-badge) {
    font-size: 1.3rem;
  }
}
#curriculum main .subject .subject-related {
  margin-top: 2.4rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #curriculum main .subject .subject-related {
    margin-top: 1.6rem;
  }
}
#curriculum main .subject .subject-related-label,
#curriculum main .subject .subject-related-name {
  font-size: 2.8rem;
  font-weight: 400;
  line-height: 1.3;
  color: var(--color-main);
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #curriculum main .subject .subject-related-label,
  #curriculum main .subject .subject-related-name {
    font-size: 1.8rem;
  }
}
#curriculum main .subject .cta {
  display: flex;
  gap: 2.4rem;
  margin-top: 7.4rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #curriculum main .subject .cta {
    margin-top: 4rem;
    flex-direction: column;
  }
}
#curriculum main .subject .cta h3 {
  font-size: 2.7rem;
  letter-spacing: 0.16em;
  line-height: 1.6;
  width: 35%;
  flex-shrink: 0;
  font-family: var(--font-biz-mincho);
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #curriculum main .subject .cta h3 {
    font-size: 2.6rem;
    width: 100%;
  }
}
#curriculum main .subject .common-link {
  margin: 6.4rem auto 0;
}
#curriculum main .feature {
  -o-border-image: linear-gradient(var(--color-base) 0 0) 0/0/0 100vw;
     border-image: linear-gradient(var(--color-base) 0 0) fill 0/0/0 100vw;
  padding-block: 10rem 12rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #curriculum main .feature {
    padding-block: 8rem;
  }
}
#curriculum main .feature .common-heading-h2 {
  margin-bottom: 3rem;
}
#curriculum main .feature h3 {
  margin-bottom: 0.8rem;
  font-family: var(--font-biz-mincho);
  font-size: 2.8rem;
  line-height: 1.3;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #curriculum main .feature h3 {
    font-size: 2rem;
  }
}
#curriculum main .feature ul {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4rem;
  margin-top: 4rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #curriculum main .feature ul {
    grid-template-columns: 1fr;
  }
}
#curriculum main .feature li {
  display: grid;
  grid-template-columns: 16rem 1fr;
  gap: 1.6rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #curriculum main .feature li {
    grid-template-columns: 1fr;
  }
}
#curriculum main .feature li figure {
  border-radius: 0.5rem;
  overflow: hidden;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #curriculum main .feature li figure {
    border-radius: 0.3rem;
  }
}
#curriculum main .feature li figure {
  aspect-ratio: 160/114;
}
#curriculum main .feature li figure img {
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
#curriculum main .feature li .body h3 {
  margin-bottom: 0.2rem;
  font-size: 2rem;
  line-height: 1.5;
  color: var(--color-main);
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #curriculum main .feature li .body h3 {
    font-size: 1.8rem;
  }
}
#curriculum main .feature li .body p {
  margin-top: 0.4rem;
  font-size: 1.3rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #curriculum main .feature li .body p {
    margin-top: 0.8rem;
  }
}
#curriculum main .feature .common-link {
  margin: 6.4rem auto 0;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #curriculum main .feature .common-link {
    margin-top: 4rem;
  }
}
#curriculum main .introduction .content {
  padding-top: 11.9rem;
}
#curriculum main .introduction .content h2 {
  margin-bottom: 1.2rem;
}
#curriculum main .introduction .content p {
  margin-bottom: 2rem;
}
#curriculum main .voices {
  padding-top: 8rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #curriculum main .voices {
    padding-top: 4rem;
  }
}
#curriculum main .voices .common-heading-h2 {
  margin-bottom: 1.2rem;
}
#curriculum main .voices .lead {
  margin-bottom: 2.6rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #curriculum main .voices .lead {
    font-size: 1.3rem;
    margin-bottom: 3rem;
  }
}
#curriculum main .voices .common-archive-list {
  gap: 6rem 3.2rem;
  margin-top: 0;
  margin-bottom: 2.3rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #curriculum main .voices .common-archive-list {
    grid-template-columns: 1fr;
    gap: 4rem;
  }
}
#curriculum main .voices .common-archive-list li {
  list-style: none;
}
#curriculum main .voices .common-archive-list li article {
  position: relative;
  display: grid;
  grid-template-rows: 19.3rem auto 1fr;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #curriculum main .voices .common-archive-list li article {
    grid-template-rows: auto auto 1fr;
  }
}
#curriculum main .voices .common-archive-list li article::before {
  content: attr(data-label);
  position: absolute;
  top: 0.4rem;
  left: 0.4rem;
  z-index: 2;
  display: grid;
  place-content: center;
  height: 2.6rem;
  border-radius: calc(infinity * 1px);
  padding-inline: 1.2rem;
  pointer-events: none;
  color: #fff;
  font-family: var(--font-biz-mincho);
  font-size: 1.3rem;
  line-height: 1;
}
#curriculum main .voices .common-archive-list li article[data-label=卒業生]::before {
  background-color: #01b791;
}
#curriculum main .voices .common-archive-list li article a {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 3;
}
#curriculum main .voices .common-archive-list li article a figure {
  aspect-ratio: 290/193;
  border-radius: 0.5rem;
  overflow: hidden;
}
#curriculum main .voices .common-archive-list li article a figure img {
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transition: transform 0.4s ease-out;
}
#curriculum main .voices .common-archive-list li article a h3 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  min-height: 4.7rem;
  margin-block: 1.6rem;
  color: var(--color-main);
  font-family: var(--font-biz-mincho);
  font-size: var(--font-size-md);
  line-height: 1.3;
  transition: color 0.2s ease;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #curriculum main .voices .common-archive-list li article a h3 {
    min-height: initial;
  }
}
#curriculum main .voices .common-archive-list li article a .profile {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.8rem 0.6rem;
  height: -moz-fit-content;
  height: fit-content;
}
#curriculum main .voices .common-archive-list li article a .profile .name {
  align-self: center;
  font-family: var(--font-biz-mincho);
  font-size: 2rem;
  line-height: 1.3;
}
#curriculum main .voices .common-archive-list li article a .profile .label {
  display: grid;
  place-content: center;
  align-self: center;
  border-radius: calc(infinity * 1px);
  border: 1px solid var(--color-main);
  height: 2.6rem;
  padding-inline: 1.2rem;
  font-family: var(--font-biz-mincho);
  color: var(--color-main);
  font-size: 1.3rem;
  letter-spacing: -0.03em;
  line-height: 1;
}
@media (any-hover: hover) {
  #curriculum main .voices .common-archive-list li article a:hover figure img {
    transform: scale(1.05);
  }
  #curriculum main .voices .common-archive-list li article a:hover h3 {
    text-decoration: underline;
  }
}
#curriculum main .parents {
  padding-block: 7.9rem 15.6rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #curriculum main .parents {
    padding-top: 4rem;
  }
}
#curriculum main .parents h2 {
  margin-bottom: 2.9rem;
}
#curriculum main .parents p {
  width: 79%;
  margin-bottom: -0.7rem;
}
@media screen and (min-width: 0px) and (max-width: 768px) {
  #curriculum main .parents p {
    width: 100%;
  }
}

/*# sourceMappingURL=styles.css.map*/