/********** index section *********/
#main-visual {
  --noticeH: 0px;
  position: relative;
  width: 100%;
  height: calc(100vh - var(--noticeH));
  min-height: 700px;
  /* overflow: hidden; */
}

#main-visual:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background: url(../images/home/index-main-vis-bg.png) no-repeat center center;
}

#main-visual-container {
  position: relative;
  width: 100%;
  height: 100%;
  padding-top: 2.5rem;
  z-index: 2;
  /* overflow: hidden; */
}

#main-visual canvas {
  transform: rotate(-17deg);
  width: 100%;
  height: 100%;
}

#main-visual>div.container {
  --container-width: calc(1640px + var(--page-horizontal-padding) + var(--page-horizontal-padding));
  padding: 0 var(--page-horizontal-padding);
  position: absolute;
  width: 100%;
  height: 100%;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
}

#main-visual>div.container:nth-child(1) {
  position: relative;
  left: 0;
  transform: translateX(0);
}

#main-visual-container {
  position: absolute;
  top: 0;
}
#main-visual>div.container:has(#school-year),
#main-visual>div.container.c2 {
  z-index: 3;
}

#main-visual>div.container>div {
  position: absolute;
}

#main-visual #school-year {
  color: var(--grey1);
  font-weight: 700;
  text-transform: uppercase;
  display: flex;
  align-items: baseline;
  gap: 10px;
  opacity: 0.5;
  top: 7rem;
  line-height: 1;
}

#main-visual #school-year>span:not(.big) {
  font-size: var(--index-main-visual-year-text-size);
}

#main-visual #school-year>span.big {
  font-size: var(--index-main-visual-year-big-text-size);
}

#main-visual #school-slogan {
  font-weight: 400;
  right: var(--page-horizontal-padding);
  bottom: 6em;
}

#main-visual #school-slogan>div {
  text-transform: uppercase;
  font-weight: 700;
}

#main-visual #school-slogan>div div:not(.big) {
  font-size: var(--index-main-visual-year-text-size);
  padding-inline-end: 1em;
  line-height: 1;
}

#main-visual #school-slogan>div div.big {
  display: flex;
  justify-content: flex-end;
  font-size: var(--index-main-visual-year-big-text-size);
  line-height: 0.9;
}

#main-visual #school-slogan>span {
  color: var(--green1);
  display: block;
  padding-inline-start: 4em;
  font-size: clamp(0.75rem, 0.6885rem + 0.2623vw, 1rem);
}

#main-visual #main-visual-scroll {
  position: absolute;
  width: 27px;
  height: 60px;
  border: 3px solid var(--green5);
  border-radius: var(--border-radius-40);
  background-color: var(--white);
  left: calc(50% - 13px);
  bottom: 3rem;
  transition: all .3s;
  transform-origin: center 100%;
}

#main-visual #main-visual-scroll>span {
  position: absolute;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background-color: var(--green1);
  left: 50%;
  transform: translateX(-50%);
  top: 10px;
  animation: wheel 2s infinite;
}

@keyframes wheel {
  to {
    opacity: 0;
    top: 37px;
  }
}

#news,
#giving-quote {
  padding-block: var(--index-section-padding-block);
  overflow: hidden;
}

#vision {
  padding-block: var(--index-section-padding-block);
}

#vision .container {
  --container-width: calc(1150px + var(--page-horizontal-padding) + var(--page-horizontal-padding));
  padding: 0 var(--page-horizontal-padding);
  position: relative;
}

#vision .mission-text {
  position: relative;
  margin-bottom: 5em;
}

#vision .make-quote {
  position: absolute;
  height: 100%;
  left: 50%;
  transform: translateX(-50%);
  top: 0;
  max-width: calc(700px + var(--page-horizontal-padding) + var(--page-horizontal-padding));
  width: 100%;
}

#vision .make-quote:before,
#vision .make-quote:after {
  content: "";
  position: absolute;
  width: 30%;
  max-width: 150px;
  aspect-ratio: 198 / 150;
  background-size: cover;
  background-repeat: no-repeat;
  transition: max-width 0.3s ease 0s;
}

#vision .make-quote:before {
  background-image: url(../images/home/icon-QuotationMarks-open.png);
  left: var(--page-horizontal-padding);
  bottom: 92%;
}

#vision .make-quote:after {
  background-image: url(../images/home/icon-QuotationMarks-close.png);
  right: var(--page-horizontal-padding);
  bottom: -50px;
}

.home #content #vision .title {
  color: var(--green3);
  font-size: var(--index-vision-title-text-size);
  margin-bottom: 0.5em;
}

#vision p {
  font-size: var(--index-vision-content-text-size);
  line-height: 1.7;
}

#vision .btn-wrap {
  margin-bottom: 0;
}

#vision .swiper-outer {
  --tilt: -5deg;
  --bleed-x: 0px;
  --bleed-y: 0px;
  transform: rotate(var(--tilt));
  width: calc(100% + (var(--bleed-x) * 2));
  margin-left: calc(var(--bleed-x) * -1);
  padding-bottom: clamp(15px, calc(7.623px + 1.967vw), 45px);
}

#vision .swiper {
  /* width: 100%; */
  padding-top: 50px;
  padding-bottom: 50px;
  overflow: initial;
  width: 70%;
  max-width: 1000px;
  margin: 0 auto;
}

/* #vision .swiper .swiper-wrapper {
  width: 70%;
  max-width: 1000px;
  margin: 0 auto;
} */

#vision .swiper-slide {
  position: relative;
  background-position: center;
  background-size: cover;

  aspect-ratio: 1060/660;
  overflow: initial;
}

#vision .swiper-slide img {
  display: none;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 5px;
}

#vision.showImg .swiper-slide img {
  display: block;
}

#vision .swiper .btn-wrap {
  position: absolute;
  margin-top: 15px;
  top: calc(100% - 20px);
  transform: rotate(5deg);
  right: -40px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease 0s, margin-top 0.1s ease 1s;
  transform-origin: top right;
}

#vision .swiper .btn-wrap a.common-arrow-btn span.word {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

#vision #vision-swiper-outer.scroll-end.after-scroll-end .swiper-slide-active .btn-wrap {
  opacity: 1;
  margin-top: 0;
  pointer-events: auto;
  transition: opacity 1s ease 1s, margin-top 1s ease 1s;
}

#vision .swiper-slide-shadow {
  background-color: #000;
}

#vision :is(.swiper-button-next, .swiper-button-prev) {
  color: var(--green1);
  border-radius: 50%;
  width: 70px;
  height: 70px;
  transition: all 0.3s ease;
  overflow: hidden;
  z-index: 30;
  pointer-events: auto;
}

#vision :is(.swiper-button-next, .swiper-button-prev):after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 50%;
  width: 100%;
  height: 100%;
  border: 2px solid var(--green3);
  z-index: -2;
}

/* #vision .is-sliding .swiper-button-next,
#vision .is-sliding .swiper-button-prev {
  pointer-events: none !important;
} */

#vision :is(.swiper-button-next, .swiper-button-prev)::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 50%;
  width: 100%;
  height: 100%;
  background-color: var(--green3);
  transform: scaleX(0);
  z-index: -1;
  transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

#vision .swiper-button-next::before {
  transform-origin: left center;
}

#vision .swiper-button-prev::before {
  transform-origin: right center;
}

#vision :is(.swiper-button-next, .swiper-button-prev):hover::before {
  transform: scaleX(1);
}

#vision :is(.swiper-button-next, .swiper-button-prev):hover {
  color: var(--white);
}

#vision :is(.swiper-button-next, .swiper-button-prev) .swiper-navigation-icon {
  width: 35%;
  height: 35%;
  transition: margin 0.3s ease 0s;
}

#vision .swiper-button-next {
  right: -95px;
}

#vision .swiper-button-next:is(:hover, :focus-visible) .swiper-navigation-icon {
  margin-left: 10px;
}

#vision .swiper-button-prev {
  left: -95px;
}

#vision .swiper-button-prev:is(:hover, :focus-visible) .swiper-navigation-icon {
  margin-right: 10px;
}

#figure {
  background-image: linear-gradient(to bottom,
      transparent 0%,
      transparent 70%,
      var(--white) 70%,
      var(--white) 100%);
  position: relative;
}

#figure .container,
#figure .bg {
  --container-width: 100%;
  position: relative;
}

#figure .bg {
  width: 100%;
  position: absolute;
  background: url(../images/home/index-facts-bg.png) no-repeat center 100%;
  min-height: 1100px;
  margin-top: -4.5%;
  z-index: 1;
}

#figure .container .btn-wrap {
  margin-top: 1em;
}

#figure :is(.title, .btn-wrap) {
  position: relative;
  z-index: 3;
}

#figure #bubbles-wrap{
	position: relative;
	z-index: 2;
}

#figure #student-wrap {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  min-width: 2000px;
  width: 100%;
  height: 100%;
  /* max-width: 1030px; */
}

#figure #student-wrap>.student {
  position: absolute;
  line-height: 0;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
}

#figure #student-wrap>.student img {
  object-fit: contain;
  width: 100%;
  height: 100%;
}

#figure #student-wrap>.student#s-8 {
  /* aspect-ratio: 93/207;
  width: 9.1%;
  left: 0;
  bottom: 17%; */
  z-index: 3;
}

#figure #student-wrap>.student#s-9 {
  /* aspect-ratio: 66/205;
  width: 6.4%;
  right: 0;
  bottom: 17%; */
  z-index: 4;
}

#figure #student-wrap>.student#s-6 {
  /* aspect-ratio: 98/275;
  width: 9.52%;
  left: 19.8%;
  bottom: 14%; */
  z-index: 5;
}

#figure #student-wrap>.student#s-7 {
  /* aspect-ratio: 110/237;
  width: 10.68%;
  right: 26.9%;
  bottom: 15.7%; */
  z-index: 6;
}

#figure #student-wrap>.student#s-5 {
  /* aspect-ratio: 146/332;
  width: 14.2%;
  left: 8.3%;
  bottom: 10.7%; */
  z-index: 7;
}

#figure #student-wrap>.student#s-04 {
  /* aspect-ratio: 222/336;
  width: 21.56%;
  right: 11.11%;
  bottom: 11%; */
  z-index: 8;
}

#figure #student-wrap>.student#s-04>div {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
}

#figure #student-wrap>.student#s-04>div:last-child {
  /* width: 62.95%;
  aspect-ratio: 141/336; */
  left: 0;
}

#figure #student-wrap>.student#s-04>div:first-child {
  /* width: 63.4%;
  aspect-ratio: 142/336; */
  right: 0;
}

#figure #student-wrap>.student#s-2 {
  /* aspect-ratio: 234/527;
  width: 22.72%;
  left: 24.7%;
  bottom: 2.5%; */
  z-index: 9;
}

#figure #student-wrap>.student#s-1 {
  /* aspect-ratio: 328/463;
  width: 31.85%;
  left: 31.82%;
  bottom: 0; */
  z-index: 10;
}

#figure #bubbles-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 1780/910;
  margin-top: -11%;
  min-height: 910px;
}

#figure #bubbles-wrap .bubble {
  --border-width: 12px;
  position: absolute;
  width: 23%;
  max-width: 300px;
  aspect-ratio: 1/1;
}

#figure #bubbles-wrap .bubble:before {
  content: "";
  position: absolute;
  width: calc(100% + var(--border-width) * 2);
  aspect-ratio: 1/1;
  border-radius: 50%;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background-color: var(--green5);
  opacity: 0.4;
}

#figure #bubbles-wrap .bubble#b-1 {
  left: var(--border-width);
  top: 36%;
}

#figure #bubbles-wrap .bubble#b-2 {
  left: 23%;
  bottom: var(--border-width);
}

#figure #bubbles-wrap .bubble#b-3 {
  left: 62%;
  top: 0;
}

#figure #bubbles-wrap .bubble#b-4 {
  right: var(--border-width);
  bottom: 21.5%;
}

#figure #bubbles-wrap .bubble .bubble-inner {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  flex-direction: column;
  background-color: var(--white);
  border-radius: 50%;
  position: relative;
  z-index: 1;
  color: var(--green2);
  text-align: center;
  padding: 5%;
  background-size: 70% auto;
  background-position: center;
  background-repeat: no-repeat;
}

#figure #bubbles-wrap .bubble#b-1 .bubble-inner {
  background-image: url(../images/home/icon-bg-fact01.png);
}

#figure #bubbles-wrap .bubble#b-2 .bubble-inner {
  background-image: url(../images/home/icon-bg-fact02.png);
}

#figure #bubbles-wrap .bubble#b-3 .bubble-inner {
  background-image: url(../images/home/icon-bg-fact03.png);
}

#figure #bubbles-wrap .bubble#b-4 .bubble-inner {
  background-image: url(../images/home/icon-bg-fact04.png);
}

#figure #bubbles-wrap .bubble .bubble-inner .bubble-text {
  display: flex;
  align-items: flex-end;
  font-weight: 600;
  column-gap: 10px;
}

#figure #bubbles-wrap .bubble .bubble-inner .bubble-text.counter[data-target] {
  opacity: 0;
  transition: opacity 0.35s ease;
}

#figure #bubbles-wrap .bubble .bubble-inner .bubble-text.counter[data-target].is-visible {
  opacity: 1;
}

#figure #bubbles-wrap .bubble .bubble-inner .bubble-text>div {
  /* font-size: clamp(2.125rem, 1.0522rem + 4.5771vw, 5rem); */
  font-size: 4em;
  line-height: 0.9;
}

#figure #bubbles-wrap .bubble .bubble-inner .bubble-text>div span.no {
  display: inline-block;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  text-align: right;
  position: relative;
}

#figure #bubbles-wrap .bubble .bubble-inner .bubble-text>div span.icon {
  display: block;
  width: 1.5em;
  aspect-ratio: 1 / 1;
  background-color: currentColor;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

#figure #bubbles-wrap .bubble .bubble-inner .bubble-text>div.infin {
  /* font-size: clamp(3.125rem, 0.2099rem + 12.4378vw, 10.9375rem); */
  /* font-size: 8.75em;
  line-height: 0.41;
  font-family: "Segoe UI", Arial, sans-serif; */
}

@media screen and(max-width: 380px) {
  #figure #bubbles-wrap .bubble .bubble-inner .bubble-text>div {
    height: 28px;
  }
}

#figure #bubbles-wrap .bubble .bubble-inner .bubble-text span.smaller {
  /* font-size: clamp(1rem, 0.3937rem + 2.5871vw, 2.625rem);/* z */
  font-size: 2.1em;
  line-height: 1;
}

#figure #bubbles-wrap .bubble .bubble-inner .bubble-sub-text {
  /* font-size: clamp(1.375rem, 0.9086rem + 1.99vw, 2.625rem); */
  font-size: 2.1em;
  font-weight: 600;
  line-height: 1.2;
}

#figure #bubbles-wrap .bubble .bubble-inner .bubble-small-text {
  /* font-size: clamp(0.75rem, 0.3805rem + 1.5764vw, 1.75rem); */
  font-size: 1.4em;
  font-weight: 400;
  line-height: 1.1;
  margin-top: 0.1em;
}

#figure+.pin-spacer {
  background-color: var(--white);
}

#news {
  --swiper-padding: 40px;
  --minus-width: 100px;
  position: relative;
  z-index: 1;
}

#news .container {
  --container-width: 100%;
  padding-top: 2em;
}

#news .grid-wrap {
  display: grid;
  grid-template-columns: 1fr minmax(70%, 1200px);
  gap: 40px;
}

#news .title {
  position: relative;
  z-index: 3;
}

#news .swiper {
  width: calc(100% - var(--minus-width));
  overflow: visible;
  background-color: rgba(62, 152, 145, 0.08);
  padding: var(--swiper-padding);
  margin: 0;
  border-radius: var(--border-radius-10);
}

#news .swiper-slide {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: initial;
}

#news .swiper-slide a {
  text-decoration: none;
  display: block;
  width: 100%;
  height: 100%;
}

#news .swiper-slide a>span {
  display: block;
  line-height: 0;
  width: 100%;
  aspect-ratio: 16/9;
  position: relative;
  transform: translateZ(0);
  /* transition: border-radius 0.1s ease 0s; */
}

#news .swiper-slide a>span>span.pin,
#news #news-list .news-list-item a>div.basic-info>div.img>span.pin {
  display: block;
  position: absolute;
  width: clamp(26px, calc(22.557px + 0.918vw), 40px);
  aspect-ratio: 1/1;
  right: calc(-1 * clamp(5px, calc(3.77px + 0.328vw), 10px));
  top: calc(-1 * clamp(5px, calc(3.77px + 0.328vw), 10px));
  background-color: var(--red1);
  border-radius: 50%;
}

#news .swiper-slide a>span>span.pin:after,
#news #news-list .news-list-item a>div.basic-info>div.img>span.pin:after {
  content: "";
  display: block;
  position: absolute;
  width: 55%;
  aspect-ratio: 1 / 1;
  left: 50%;
  top: 50%;
  background: url(../images/icon-highlight-pdf.svg) no-repeat center center;
  background-size: contain;
  opacity: 1;
  transform: translate(-50%, -50%);
}

#news .swiper-slide a>span:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000;
  opacity: 0;
  transition: opacity 0.5s ease;
}

#news .swiper-slide:not(.swiper-slide-active, .swiper-slide-prev, .swiper-slide-next) a>span {
  opacity: 0;
}

#news .swiper-slide.swiper-slide-prev a>span {
  border-radius: 15px;
  transition: border-radius 0.1s ease 0.3s;
}

#news .swiper-slide:not(.swiper-slide-active) a>span:after {
  opacity: 0.3;
}

#news .swiper-slide a>span img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--border-radius-10);
  overflow: hidden;
}

#news .swiper-slide a .slide-detail {
  width: calc(100% - 220px);
  margin-top: 1em;
}

#news .swiper-slide a .slide-detail>div {
  opacity: 0;
  transition: opacity 0.3s ease 0s;
}

#news .swiper-slide a .slide-detail>div.new-title {
  transform: translateY(20px);
  transition: opacity 0.3s ease 0s, transform 0.3s ease 0s;
}

#news .swiper-slide.swiper-slide-active a .slide-detail>div:not(.new-title) {
  opacity: 1;
  transition: opacity 0.3s ease 1.2s;
}

#news .swiper-slide.swiper-slide-active a .slide-detail>div.new-title {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.3s ease 1.7s, transform 0.5s ease 1.7s;
}

#news .swiper-slide a .slide-detail>div:not(.new-title) {
  display: flex;
  column-gap: 15px;
  font-weight: 400;
}

#news .swiper-slide a .slide-detail>div:not(.new-title) span.date {
  color: var(--base-text-color);
  font-size: clamp(0.875rem, 0.8135rem + 0.2623vw, 1.125rem);
}

#news .swiper-slide a .slide-detail>div:not(.new-title) span.category,
#news #news-list .news-list-item a>div.detail span.category {
  color: var(--white);
  border-radius: 3px;
  font-size: clamp(0.75rem, 0.7193rem + 0.1311vw, 0.875rem);
  display: inline-block;
  padding: 0.2em 1em;
  line-height: 1.5;
  align-self: center;
}

#news .swiper-slide a .slide-detail>div:not(.new-title) span.category.c1,
#news #news-list .news-list-item a>div.detail span.category.c1 {
  background-color: var(--green6);
}

#news .swiper-slide a .slide-detail>div:not(.new-title) span.category.c2,
#news #news-list .news-list-item a>div.detail span.category.c2 {
  background-color: var(--red1);
}

#news .swiper-slide a .slide-detail>div:not(.new-title) span.category.c3,
#news #news-list .news-list-item a>div.detail span.category.c3 {
  background-color: var(--blue2);
}

#news .swiper-slide a .slide-detail>div.new-title {
  color: var(--green1);
  font-weight: 400;
  font-size: clamp(1.0625rem, 0.8012rem + 1.1148vw, 2.125rem);
  line-height: 1.1;
  margin-top: 0.3em;
  padding-bottom: 3px;
}

#news .swiper-slide a .slide-detail>div.new-title>span,
#news #news-list .news-list-item a>div.detail>div>span {
  box-shadow: inset -100% 0 0 0 transparent;
  background-image: linear-gradient(to top, var(--green1) 2px, transparent 2px);
  background-repeat: no-repeat;
  background-size: 0% 100%;
  background-position: left 100%;
  transition: background-size 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

#news .swiper-slide a:is(:hover, :focus-visible) .slide-detail>div.new-title>span,
#news #news-list .news-list-item a:is(:hover, :focus-visible)>div.detail>div>span {
  background-size: 100% 100%;
}

#news .swiper-control {
  position: absolute;
  bottom: var(--swiper-padding);
  right: var(--swiper-padding);
  display: flex;
  align-items: center;
  gap: 15px;
}

#news .swiper-control>div {
  position: relative;
}

#news :is(.swiper-button-next, .swiper-button-prev) {
  color: var(--green1);
  border-radius: 50%;
  width: 70px;
  height: 70px;
  transition: all 0.3s ease;
  overflow: hidden;
  z-index: 1;
}

#news :is(.swiper-button-next, .swiper-button-prev)::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 50%;
  width: 100%;
  height: 100%;
  border: 2px solid var(--green3);
  z-index: -2;
}

#news :is(.swiper-button-next, .swiper-button-prev)::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: var(--green3);
  transform: scaleX(0);
  z-index: -1;
  transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

#news .swiper-button-next::before {
  transform-origin: left center;
}

#news .swiper-button-prev::before {
  transform-origin: right center;
}

#news :is(.swiper-button-next, .swiper-button-prev):hover::before {
  transform: scaleX(1);
}

#news :is(.swiper-button-next, .swiper-button-prev):hover {
  color: var(--white);
}

#news :is(.swiper-button-next, .swiper-button-prev) .swiper-navigation-icon {
  width: 35%;
  height: 35%;
  transition: margin 0.3s ease 0s;
}

#news .swiper-button-next:is(:hover, :focus-visible) .swiper-navigation-icon {
  margin-left: 10px;
}

#news .swiper-button-prev:is(:hover, :focus-visible) .swiper-navigation-icon {
  margin-right: 10px;
}

#news .swiper-pagination {
  width: auto;
  font-size: clamp(0.75rem, 0.6578rem + 0.3934vw, 1.125rem);
  min-width: 40px;
  text-align: center;
}

#news #news-list {
  width: calc(100% - var(--minus-width));
  padding-block-start: clamp(1.875rem, calc(1.107rem + 3.279vw), 5rem);
  padding-bottom: 1px;
}

#news #news-list .news-list-item {
  margin-bottom: 20px;
}

#news #news-list .news-list-item a {
  box-shadow: none;
  background-image: none;
  display: flex;
  width: 100%;
  column-gap: 30px;
  padding: 15px 20px;
  position: relative;
}

#news #news-list .news-list-item a:before {
  content: "";
  position: absolute;
  width: 390px;
  left: 0;
  top: 0;
  height: 100%;
  background-color: rgba(62, 152, 145, 0.08);
  border-radius: var(--border-radius-10);
  transition: width 0.3s ease 0s;
}

#news #news-list .news-list-item a:is(:hover, :focus-visible):before {
  width: 100%;
}

#news #news-list .news-list-item a>div {
  position: relative;
  z-index: 2;
}

#news #news-list .news-list-item a>div.basic-info {
  flex: 0 0 370px;
  display: grid;
  column-gap: 20px;
  grid-template-columns: 1fr 255px;
  grid-template-rows: 1fr 1fr;
  grid-template-areas:
    "date img"
    "month img";
  padding-right: 15px;
}

#news #news-list .news-list-item a>div.basic-info>div.day {
  grid-area: date;
  font-size: clamp(0.8125rem, 0.0902rem + 3.082vw, 3.75rem);
  color: var(--green2);
  font-weight: 200;
  line-height: 1;
  align-self: flex-start;
  text-align: center;
}

#news #news-list .news-list-item a>div.basic-info>div.month {
  grid-area: month;
  font-size: clamp(0.8125rem, 0.7357rem + 0.3279vw, 1.125rem);
  font-weight: 400;
  color: var(--base-text-color);
  align-self: flex-end;
  text-align: center;
  line-height: 1.3;
}

#news #news-list .news-list-item a>div.basic-info>div.img {
  grid-area: img;
  line-height: 0;
  aspect-ratio: 255/159;
  position: relative;
}

#news #news-list .news-list-item a>div.basic-info>div.img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 5px;
  overflow: hidden;
}

#news #news-list .news-list-item a>div.detail {
  flex: 1 1 auto;
}

#news #news-list .news-list-item a>div.detail>div {
  font-size: clamp(0.9375rem, 0.7377rem + 0.8525vw, 1.75rem);
  color: var(--green1);
  line-height: 1.2;
}

#campus {
  z-index: 2;
  width: 100%;
  height: 100%;
  max-height: 100dvh;
}

#campus .campus-inner {
  --clip-radius: 0%;
  clip-path: circle(var(--clip-radius) at center bottom);
  width: 100%;
  height: 100%;
  background-image: linear-gradient(to right top, var(--green4), var(--green5));
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: auto;
  position: relative;
}

#campus .campus-inner #campus-canvas-container {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  clip-path: circle(var(--clip-radius) at center bottom);
  will-change: transform;
}

/* #campus .campus-inner #campus-canvas-container canvas {
  width: 100%;
  height: 100%;
} */

#campus .campus-inner .container {
  z-index: 2;
}

#campus .sub-title {
  font-size: var(--index-campus-sub-title-text-size);
  color: var(--white);
  font-weight: 600;
  text-transform: uppercase;
  text-align: center;
  line-height: 1;
  text-shadow: 0px 0px 20px rgba(0, 0, 0, 0.3);
}

.home #content #campus .title {
  font-size: var(--index-campus-title-text-size);
  color: var(--white);
  text-align: center;
  display: block;
  text-shadow: 0px 0px 20px rgba(0, 0, 0, 0.3);
}

#campus .btn-wrap a {
  min-width: 225px;
  justify-content: center;
}

#giving-quote {
  --content-padding-inline: 130px;
  position: relative;
  background-image: linear-gradient(to bottom, var(--white) 0%, var(--white) 10%, rgba(213, 228, 154, 0.2) 35%, rgba(213, 228, 154, 0.2) 100%), url(../images/home/index-giving-bg.png);
  background-repeat: no-repeat;
  background-position: center top, 100% 100%;
  background-size: cover, 947px auto;
}

#giving-quote .container {
  --container-width: 100%;
  position: relative;
  padding-block-start: 2em;
}

#giving-quote #giving {
  width: 100%;
  padding-inline: var(--content-padding-inline);
  display: flex;
  overflow: hidden;
}

#giving-quote #giving .img {
  line-height: 0;
  flex: 0 0 60%;
  position: relative;
  border-radius: var(--border-radius-10) 0px 0px var(--border-radius-10);
  overflow: hidden;
}

#giving-quote #giving .img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#giving-quote #giving .txt {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr auto;
  padding-inline: clamp(0.938rem, calc(0.553rem + 1.639vw), 2.5rem);
  padding-block: clamp(0.625rem, calc(0.318rem + 1.311vw), 1.875rem);
  background-color: var(--white);
  gap: 20px;
  border: 2px solid var(--green5);
  border-left: none;
  border-radius: 0px 10px 10px 0px;
}

#giving-quote #giving .txt .sub-title {
  color: var(--brown1);
  font-weight: 600;
  font-size: clamp(1.1875rem, 0.8955rem + 1.2459vw, 2.375rem);
  line-height: 1;
  margin-bottom: 0.5em;
}

#giving-quote #giving .txt p {
  line-height: 1.5;
  font-size: clamp(0.875rem, 0.6598rem + 0.918vw, 1.75rem);
}

#giving-quote #giving .txt .btn-wrap {
  margin: 0;
  align-self: flex-end;
  justify-content: flex-end;
}

#giving-quote #quote {
  padding-block-start: clamp(2.813rem, calc(1.429rem + 5.902vw), 8.438rem);
}

#giving-quote .quote-text {
  width: 100%;
  padding-inline: var(--content-padding-inline);
  position: relative;
}

#giving-quote .quote-text>div {
  position: relative;
  width: 60%;
  padding-block-end: clamp(2.813rem, calc(1.199rem + 6.885vw), 9.375rem);
}

#giving-quote .quote-text:before {
  content: "";
  position: absolute;
  width: clamp(3.125rem, calc(0.82rem + 9.836vw), 12.5rem);
  aspect-ratio: 198/150;
  background-image: url(../images/home/icon-QuotationMarks-open.png);
  background-repeat: no-repeat;
  background-size: cover;
  left: 0;
  top: -25%;
}

#giving-quote .quote-text>div:before {
  content: "";
  position: absolute;
  width: clamp(3.125rem, calc(0.82rem + 9.836vw), 12.5rem);
  aspect-ratio: 198/150;
  background-image: url(../images/home/icon-QuotationMarks-close.png);
  background-repeat: no-repeat;
  background-size: cover;
  right: 0;
  bottom: 0;
}

#giving-quote .quote-title {
  font-size: var(--index-giving-quote-title-text-size);
  color: var(--grey1);
  font-weight: 200;
  line-height: 1;
  margin-bottom: 0.3em;
}
#giving-quote .quote-title p{
	margin-bottom: 0!important;
}

#giving-quote #quote p.prayer-title {
  font-weight: 600;
  font-size: clamp(0.8125rem, 0.7049rem + 0.459vw, 1.25rem);
  color: var(--green1);
}

.home #content section .title {
  font-size: var(--index-section-title-text-size);
  font-weight: 600;
  display: inline-block;
  line-height: 0.9;
  text-transform: uppercase;
  margin-top: 0;
  margin-bottom: 0;
}

.home section.white-bg {
  background-color: var(--white);
}



/****** index animation ******/
@media screen{
#wrapper.home:before {
  height: 0;
  transition: height 5s ease 0s;
}

#wrapper.home.done:before {
  height: 100%;
}

#main-visual:before {
  opacity: 0;
  transition: opacity 1s ease 0s;
}

#main-visual.done:before {
  opacity: 1;
}

#main-visual #main-visual-scroll {
  opacity: 0;
  transition: opacity 1s ease 5s;
}

#main-visual.done #main-visual-scroll {
  opacity: 1;
}

#main-visual canvas {
  opacity: 0;
  transition: opacity 0.7s ease 0s;
}

#main-visual.doneAnimation canvas {
  opacity: 1;
}

#main-visual #school-year {
  transform: translateX(-100px);
  opacity: 0;
  transition: transform 0.8s ease 0s, opacity 0.4s ease 0s;
}

#main-visual.done #school-year.start {
  transform: translateX(0);
  opacity: 0.5;
}

#main-visual #school-slogan div.gradient-text {
  transform: translateX(50px);
  opacity: 0;
  transition: transform 0.7s ease 0s, opacity 0.3s ease 0s;
}

#main-visual #school-slogan div.gradient-text.big {
  transform: translateX(70px);
  transition-delay: 0.3s;
}

#main-visual.done #school-slogan.start div.gradient-text {
  transform: translateX(0);
  opacity: 1;
}

#main-visual #school-slogan>span {
  opacity: 0;
  transition: opacity 0.7s ease 0.8s;
}

#main-visual.done #school-slogan.start>span {
  opacity: 1;
}

#vision .mission-text>* {
  opacity: 0;
  transition: opacity 0.7s ease 0s, transform 0.9s ease 0s;
}

#vision .mission-text>.title {
  transform: translateY(20px);
}

#vision .mission-text>p {
  transition-delay: 0.5s;
}

#vision .mission-text>.btn-wrap {
  transition-delay: 0.9s;
}

#vision #vision-text.done .mission-text>* {
  transform: translateY(0);
  opacity: 1;
}

#vision .make-quote:before,
#vision .make-quote:after {
  opacity: 0;
  transition: opacity 0.5s ease 0s, transform 0.9s ease 0s;
}

#vision .make-quote:before {
  transform: translateX(-40px);
}

#vision .make-quote:after {
  transform: translateX(40px);
}

#vision #vision-text.done .make-quote:before,
#vision #vision-text.done .make-quote:after {
  opacity: 1;
  transform: translateX(0);
  transition: opacity 0.5s ease 0.9s, transform 0.9s ease 0.9s;
}

#vision #vision-swiper-outer:not(.scroll-end) .swiper-slide-active .btn-wrap {
  opacity: 0;
  pointer-events: none;
}

#vision #vision-swiper-outer.scroll-end .swiper-slide-active .btn-wrap {
  opacity: 1;
  margin-top: 0;
  pointer-events: auto;
  transition: opacity 0.5s ease 0.1s, margin-top 0.5s ease 0.1s;
}

#figure :is(.title, .btn-wrap) {
  opacity: 0;
  transition: opacity 0.5s ease 0s, transform 0.6s ease 0s;
}

#figure .title {
  transform: translateX(-20px);
}

#figure .title+.btn-wrap {
  transition-delay: 0.4s;
}

#figure.done :is(.title, .btn-wrap) {
  opacity: 1;
  transform: translateX(0);
}

#figure #student-wrap>.student {
  opacity: 0;
  transform: scale(0.7);
  transition: opacity 0.6s ease 0s, transform 1.2s ease 0s;
}

#figure #student-wrap>.student.done {
  opacity: 1;
  transform: scale(1);
}

#news .grid-wrap .title {
  transform: translateX(-40px);
  opacity: 0;
  transition: opacity 0.4s ease 0s, transform 0.7s ease 0s;
}

#news .grid-wrap #news-content-wrap {
  transform: translateX(140px);
  opacity: 0;
  transition: opacity 0.4s ease 0.3s, transform 1s ease 0.3s;
}

#news.done .grid-wrap :is(.title, #news-content-wrap) {
  transform: translateX(0);
  opacity: 1;
}

#news .grid-wrap #news-content-wrap .news-list-item {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.3s ease 0s, transform 0.4s ease 0s;
}

#news .grid-wrap #news-content-wrap .news-list-item.done {
  opacity: 1;
  transform: translateY(0);
}

#campus :is(.sub-title, .title, .btn-wrap) {
  opacity: 0;
  transition: opacity 0.5s ease 0s;
}

#campus.done :is(.sub-title, .title, .btn-wrap) {
  opacity: 1;
}

#campus.done .title {
  transition-delay: 0.4s;
}

#campus.done .btn-wrap {
  transition-delay: 0.7s;
}

#giving-quote #giving .img {
  opacity: 0;
  transform: translateX(-150px);
  transition: opacity 0.4s ease 0s, transform 0.7s ease 0s;
}

#giving-quote #giving.done .img {
  opacity: 1;
  transform: translateX(0);
}

#giving-quote #giving .txt {
  opacity: 0;
  transition: opacity 0.5s ease 0.6s;
}

#giving-quote #giving.done .txt {
  opacity: 1;
}

#giving-quote .quote-text:before,
#giving-quote .quote-text>div:before,
#giving-quote .quote-text>div::after {
  opacity: 0;
  transition: opacity 0.3s ease 0s, transform 0.5s ease 0s;
}

#giving-quote .quote-text:before,
#giving-quote .quote-text>div::after {
  transform: translateX(-50px);
}

#giving-quote .quote-text>div:before {
  transform: translateX(50px);
}

#giving-quote #quote.done .quote-text:before,
#giving-quote #quote.done .quote-text>div:before,
#giving-quote #quote.done .quote-text>div::after {
  opacity: 1;
  transform: translateX(0);
}

#giving-quote .quote-title,
#giving-quote .quote-text p.prayer-title {
  opacity: 0;
  transform: translateX(20px);
  transition: opacity 0.3s ease 0.3s, transform 0.5s ease 0.3s;
}

#giving-quote #quote.done .quote-title,
#giving-quote #quote.done .quote-text p.prayer-title {
  opacity: 1;
  transform: translateX(0);
}

#giving-quote .quote-text p.prayer-title {
  transition-delay: 0.6s;
}


.overlap-container {
  position: relative;
  width: 100%;
  min-height: 100dvh;
}

#campus {
  position: absolute;
  bottom: 0;
  left: 0;
  overflow: hidden;
  pointer-events: none;
}
}
/****** index animation end ******/

/********** index section end *********/