.home .c-section { padding: var(--space-section) 0;}
.c-front-title {
  font-size: 2rem;
  font-weight: var(--bold);
  letter-spacing: 0.3em;
  margin-bottom: 16px;
}
.c-front-title span {
  display: block;
  font-size: .875rem;
  letter-spacing: 0.3em;
  margin-top: 8px;
}
.c-front-title::before {
  content: "";
  display: block;
  background-repeat: no-repeat;
  background-size: contain;
  margin-bottom: 8px;
}
.c-front-title--center { max-width: max-content; margin: auto; position: relative;}
.c-front-title--center::before {
  position: absolute;
}
.c-front-title.news::before {
  width: 114px;
  aspect-ratio: 114 / 65;
  background-image: url(../img/text/news.svg);
}
.c-front-title.mitanerepo::before {
  width: 196px;
  aspect-ratio: 177 / 84;
  background-image: url(../img/text/mitanerepo.svg);
}
.c-front-title.about::before {
  width: 142px;
  aspect-ratio: 142 / 84;
  background-image: url(../img/text/about.svg);
}
.c-front-title.school-life::before {
  width: 226px;
  aspect-ratio: 226 / 128;
  background-image: url(../img/text/school-life.svg);
}
.c-front-title.buildings::before {
  width: 255px;
  aspect-ratio: 255 / 117;
  background-image: url(../img/text/school-buildings.svg);
}
.c-front-title.movie__title::before {
  width: 243px;
  aspect-ratio: 243 / 126;
  background-image: url(../img/text/movie.svg);
  left: -230px;
  top: 0;
  bottom: 0;
  margin: auto;
}
.fv {
  position: relative;
}
.fv__text {
  font-family: var(--font-serif);
  color: var(--white);
  position: absolute;
  text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.28);
  left: 5%;
  bottom: 8vw;
}
.fv__text-head { font-size: 4rem; letter-spacing: 0.3em; margin-bottom: 1rem;}
.fv__text-text { font-size: 2rem; letter-spacing: 0.3em;}

.news__inner { display: flex;}
.news__head {
  width: 22%;
  padding-right: 1%;
}
.news__content {
  width: 78%;
}
.news__item { border-bottom: 1px solid var(--main);}
.news__item:last-of-type { border: none;}
.news__item a {
  display: flex;
  align-items: center;
  column-gap: 2em;
  font-size: .875rem;
  padding: 16px 0;
}
.news__item a:hover {
  background-color: var(--bg);
}
.news__item:first-of-type a { margin-top: -16px;}
.news__item.key .news__item-text  { display: flex; align-items: center;}
.news__item.key .key-icon { width: 20px; margin-right: 8px;}
.news__item.key span { width: calc(100% - 28px);}
.news__item-meta {
  width: 34%;
  display: flex;
  align-items: center;
  column-gap: 2em;
}
.news__item-date { min-width: 5em;}
.news__item-category {
  min-width: 120px;
  background-color: var(--category-color);
  color: var(--white);
  font-weight: var(--bold);
  text-align: center;
  border-radius: 15px;
  padding: 4px;
}
.news__item-category.category1 { background-color: var(--main);}
.news__item-category.category2 { background-color: #4A7DB8;}
.news__item-category.category3 { background-color: #E59A2F;}
.news__item-category.category4 { background-color: #C95A4A;}
.news__item-text {
  width: calc(66% - 2em);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap; 
}

.mitanerepo__inner {
  display: flex;
}
.mitanerepo__head {
  width: 22%;
  display: flex;
  flex-direction: column;
  padding-right: 1%;
}
.mitanerepo__title {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}
.mitanerepo__title::before { flex-grow: 1;}
.mitanerepo__head p {
  font-size: .875rem;
  line-height: 2rem;
  letter-spacing: 0.25rem;
  margin-bottom: 16px;
}
.mitanerepo__content { width: 78%;}
.mitanerepo__box { display: flex; column-gap: 1%;}
.mitanerepo__item a { display: block;}
.mitanerepo__item a:hover { opacity: .7;}
.mitanerepo__item-category {
  max-width: max-content;
  display: inline-block;
  background-color: var(--category-color);
  color: var(--white);
  font-weight: var(--bold);
  padding: 2px 8px;
}
.mitanerepo__new {
  width: 64%;
  aspect-ratio: 500 / 390;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 8px 16px;
  position: relative;
  z-index: 1;
}
.mitanerepo__new a::after {
  content: "";
  width: 100%;
  height: 120px;
  background: linear-gradient(transparent 10%, rgba(255, 255, 255, .9) 90%);
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: -1;
}
.mitanerepo__new .mitanerepo__item-label {
  color: var(--white);
  font-size: 1.25rem;
  font-weight: var(--bold);
  letter-spacing: 0.3em;
  padding: 16px 8px;
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
}
.mitanerepo__new .mitanerepo__item-label::before {
  content: "";
  width: 0;
  height: 0;
  border-top: 101px solid var(--white);
  border-right: 129px solid transparent;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}
.mitanerepo__new .mitanerepo__item-label::after {
  content: "";
  width: 0;
  height: 0;
  border-top: 100px solid var(--main);
  border-right: 128px solid transparent;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}
.mitanerepo__new .mitanerepo__item-thumbnail {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
}
.mitanerepo__new .mitanerepo__item-content {
  display: flex;
  align-items: center;
  column-gap: 8px;
}
.mitanerepo__new .mitanerepo__item-date { font-size: .875rem; margin-bottom: 4px;}
.mitanerepo__new .mitanerepo__item-category { font-size: .875rem;}
.mitanerepo__new .mitanerepo__item-text { font-size: 1.25rem; font-weight: var(--bold);}
.mitanerepo__normal {
  width: 35%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  row-gap: 8px;
}
.mitanerepo__normal .mitanerepo__item-thumbnail {
  width: 60%;
  aspect-ratio: 180 / 100;
  object-fit: cover;
}
.mitanerepo__normal .mitanerepo__item-meta {
  display: flex;
  align-items: center;
  column-gap: 1em;
  font-size: .75rem;
  margin-bottom: 4px;
}
.mitanerepo__normal .mitanerepo__item-content { display: flex; column-gap: 8px;}
.mitanerepo__normal .mitanerepo__item-text { font-size: .75rem;}

.intro__box {
  display: flex;
  flex-direction: column;
  row-gap: 64px;
}
.intro__item-wrap {
  padding: 80px 0;
  position: relative;
  z-index: 1;
}
.intro__item-wrap::after {
  content: "";
  background-repeat: no-repeat;
  background-size: cover;
  width: 65%;
  height: 100%;
  position: absolute;
  left: 35%;
  top: 0;
  z-index: -1;
}
.intro__item-wrap:nth-of-type(1):after { background-image: url(../img/front-about.jpg);}
.intro__item-wrap:nth-of-type(2):after { background-image: url(../img/front-life.jpg);}
.intro__item-wrap:nth-of-type(3):after { background-image: url(../img/front-building.jpg);}
.intro__item {
  width: 42%;
  background-color: var(--main);
  color: var(--white);
  padding: 24px 24px 40px;
}
.intro__item-wrap:nth-of-type(even)::after { left: auto; right: 35%;}
.intro__item-wrap:nth-of-type(even) .intro__item { background-color: var(--sub); margin-left: auto;}
.intro__item-inner { max-width: 320px;}
.intro__item-wrap:nth-of-type(odd) .intro__item-inner { margin-left: auto;}
.intro__item-text {
  font-size: .875rem;
  line-height: 2rem;
  letter-spacing: 0.25rem;
  margin-bottom: 16px;
}
.movie__title {
  color: var(--main);
  margin-bottom: 64px;
}
.movie video {
  width: 100%;
  cursor: pointer;
}
.link__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.link__item {
  border: 1px solid #BEBEBE;
}
.link__item a:hover {
  opacity: .7;
}

@media (max-width: 1023px) {
  .home .c-section { padding: var(--space-section-sp) 0;}
  .c-front-title { font-size: 1.25rem; letter-spacing: 0.2em; padding-top: 1em; padding-left: 1em;}
  .c-front-title::before { position: absolute; left: 5%; z-index: -1;}
  .c-front-title.news::before { width: 100px; top: -32px; left: 0;}
  .c-front-title.mitanerepo::before { top: -56px; left: -4%;}
  .c-front-title.news { display: flex; align-items: center; column-gap: 8px;}
  .c-front-title span { letter-spacing: 0.2em; margin-top: 0;}
  .c-front-title span::before { content: "- ";}
  .c-front-title.movie__title::before { width: 120px; top: -32px; left: 0; right: 0; margin: auto;}
  .fv img { aspect-ratio: 1 / 1.1; object-fit: cover;}
  .fv__text-head { font-size: 2rem; letter-spacing: 0.05em;}
  .fv__text-text { font-size: 1.25rem; letter-spacing: 0.05em;}
  .news__inner { flex-direction: column; row-gap: 16px;}
  .news__head { width: 100%;}
  .news__content { width: 100%;}
  .news__item a { display: block;}
  .news__item-meta { width: 100%; column-gap: 8px; margin-bottom: 4px; font-size: .75rem;}
  .news__item-category { min-width: max-content; padding: 2px 16px;}
  .news__item-text { width: 100%;}
  .mitanerepo__inner { flex-direction: column; row-gap: 16px;}
  .mitanerepo__head { width: 100%;}
  .mitanerepo__content { width: 100%;}
  .mitanerepo__box { flex-direction: column; row-gap: 16px;}
  .mitanerepo__new { width: 100%; aspect-ratio: 500 / 280;}
  .mitanerepo__new .mitanerepo__item-label { font-size: 1rem; letter-spacing: 0.1em; padding-top: 12px;}
  .mitanerepo__new .mitanerepo__item-label::before { border-top-width: 81px; border-right-width: 101px;}
  .mitanerepo__new .mitanerepo__item-label::after { border-top-width: 80px; border-right-width: 100px;}
  .mitanerepo__new .mitanerepo__item-date,
  .mitanerepo__new .mitanerepo__item-category { font-size: .75rem;}
  .mitanerepo__new .mitanerepo__item-content { display: block;}
  .mitanerepo__new .mitanerepo__item-text { font-size: 1rem;}
  .mitanerepo__normal { width: 100%; row-gap: 8px;}
  .mitanerepo__normal .mitanerepo__item { border-top: 1px solid var(--text); padding-top: 8px;}
  .mitanerepo__normal .mitanerepo__item-content { align-items: center;}
  .mitanerepo__normal .mitanerepo__item-thumbnail { width: 25%;}
  .mitanerepo__normal .mitanerepo__item-text { width: 75%;}
  .intro__item-wrap { padding: 160px 0 0;}
  .intro__item { width: 90%; position: relative;}
  .intro__item .c-front-title::before { z-index: 0; top: -16px; right: -1%; left: auto; transform: rotate(18deg);}
  .intro__item-inner { position: relative;}
  .c-front-title.about::before { width: 100px; top: 0; right: 8%;}
  .c-front-title.school-life::before,
  .c-front-title.buildings::before { width: 180px;}
  .intro__item-wrap::after { width: 90%; height: 50%; left: 10%;}
  .intro__item-wrap:nth-of-type(even)::after { right: 10%;}
  .movie__title { margin-bottom: 32px;}
  .link__list { grid-template-columns: repeat(2, 1fr);}
}