#fixed-bg {
  width: 100%;
  height: 100lvh;
  position: fixed;
}

#fixed-bg picture,
#fixed-bg video {
  position: absolute;
  inset: 0;
}

#fixed-bg img,
#fixed-bg video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}

#fixed-bg video {
  opacity: 0.8;
  mix-blend-mode: soft-light;
}

main > .inner {
  position: relative;
  margin: 0 auto;
  width: 89.3333333333vw;
}

#kv {
  position: relative;
  z-index: 30;
  min-height: 144vw;
}

#kv .kv-scroll {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 4.8vw;
  bottom: max(-136.5px, calc(-136.5 / 1366 * 100vw));
}

#kv .kv-scroll .base {
  opacity: 0.3;
}

#kv .kv-scroll .light {
  position: absolute;
  inset: 0;
  opacity: 1;
  mask-image: linear-gradient(to bottom, transparent 0%, white 20%, transparent 40%);
  mask-repeat: no-repeat;
  mask-size: 100% 300%;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, white 20%, transparent 40%);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: 100% 300%;
}

#kv .logo {
  position: absolute;
  will-change: transform;
  top: 22.6666666667vw;
  left: -3.5333333333vw;
  width: 96.4vw;
  filter: drop-shadow(0px 0px 6.6666666667vw rgba(98, 220, 0, 0.6));
}

#kv .copy {
  position: absolute;
  top: 86vw;
  right: 12vw;
  width: 65.3333333333vw;
}

#kv .kv-scroll,
#kv .logo,
#kv .copy {
  opacity: 0;
}

#kv .logo {
  transform: scale(0.5);
}

#kv .copy {
  transform: translateY(60px);
}

#schedule .title,
#about .title,
#news .title {
  will-change: transform;
  filter: drop-shadow(0px 0px 2.6666666667vw rgba(98, 220, 0, 0.6));
}

#schedule .title,
#about .title,
#news .title {
  display: flex;
  flex-direction: column;
  gap: 3.2vw;
}

#schedule .title::after,
#about .title::after,
#news .title::after {
  content: "";
  display: block;
  background-image: linear-gradient(90deg, rgba(255, 255, 255, 0), rgb(100, 220, 0) 50%, rgba(255, 255, 255, 0));
  width: 120%;
  margin-left: -10%;
  height: 1.0666666667vw;
}

#news {
  position: relative;
  margin: 26.6666666667vw 0 20vw 0;
}

#news .bg {
  width: 100vw;
  height: 100%;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-black);
}

#news .bg::before,
#news .bg::after {
  content: "";
  position: absolute;
  width: 100%;
  left: 0;
}

#news .bg::before {
  background-image: linear-gradient(180deg, rgba(0, 0, 0, 0), rgb(0, 0, 0));
  top: -29.2vw;
  height: 29.3333333333vw;
}

#news .bg::after {
  background-image: linear-gradient(0deg, rgba(0, 0, 0, 0), rgb(0, 0, 0));
  bottom: -19.8666666667vw;
  height: 20vw;
}

#news .title {
  margin: 0 auto;
  width: 27.0666666667vw;
  margin-bottom: 10.1333333333vw;
}

#news .list {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  justify-content: center;
  margin: 0 auto;
  width: 89.3333333333vw;
  padding-bottom: 5.3333333333vw;
  gap: 5.3333333333vw;
}

#news .item {
  position: relative;
  background: var(--color-black);
  width: 42vw;
  border-radius: 4.2666666667vw;
}

#news .item::after {
  content: "";
  pointer-events: none;
  position: absolute;
  z-index: 1;
  inset: 0;
  border-style: solid;
  border-color: var(--color-white);
  border-radius: 4.2666666667vw;
  border-width: 0.5333333333vw;
}

#news .item.is-none {
  background: #111;
  mask-image: linear-gradient(to bottom, #000 0%, #000 10%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 10%, transparent 100%);
}

#news .item.is-none::after {
  border-color: #333;
}

#news .item a {
  display: block;
  width: 100%;
  height: 100%;
}

#news .item .texts {
  position: relative;
  padding: 10.6666666667vw 3.3333333333vw 4vw 3.3333333333vw;
}

#news .item .texts::before,
#news .item .texts::after {
  content: "";
  position: absolute;
  inset: 0;
}

#news .item .texts::before {
  background: linear-gradient(to bottom, #000 0%, #333 100%);
}

#news .item .texts::after {
  background: linear-gradient(to bottom, #000 0%, #666 100%);
  opacity: 0;
  transition: opacity 0.3s;
}

#news .item .text {
  position: relative;
  z-index: 1;
  font-weight: 700;
  line-height: 1.5;
  font-size: 16px;
}

#news .item a[target=_blank] .text::after {
  content: "";
  display: inline-block;
  aspect-ratio: 1;
  background: url(../img/common/ic_link.svg) no-repeat;
  background-size: contain;
  width: 0.8em;
  margin-left: 0.2em;
}

#news .item .date {
  background: #272727;
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  padding: 1.6vw 1.6vw 1.6vw 3.3333333333vw;
  font-family: "Roboto Condensed", sans-serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-size: 18px;
}

#news .item .date::after {
  content: "";
  background: #272727;
  position: absolute;
  top: 0;
  height: 100%;
  clip-path: polygon(0 0, 0% 100%, 100% 0);
  aspect-ratio: 30/60;
  right: -3.7333333333vw;
}

#about {
  position: relative;
  aspect-ratio: 710/1864;
  width: 94.6666666667vw;
  margin-bottom: 20vw;
}

#about .bg {
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url(../img/toppage/bg_about@sp.webp);
}

#about .images {
  position: relative;
  aspect-ratio: 724/797;
  width: 96.5333333333vw;
  left: -4vw;
  margin-bottom: 8vw;
}

#about .images .main {
  position: absolute;
  top: 0;
  left: 0;
  transform: translateZ(0);
  filter: drop-shadow(0px 0px 2.6666666667vw rgba(98, 220, 0, 0.4));
}

#about .images .main::before {
  content: "";
  position: absolute;
  z-index: -1;
  background: url(../img/toppage/ic_about.webp) no-repeat;
  background-size: contain;
  aspect-ratio: 196/239;
  width: 34.6666666667vw;
  right: 3.0666666667vw;
  top: 58.6666666667vw;
}

#about .images .before {
  position: absolute;
  bottom: 0;
  left: 9.3333333333vw;
  width: 47.2vw;
}

#about .texts {
  width: 77.3333333333vw;
  margin-left: 10.6666666667vw;
}

#about .texts .lead {
  font-weight: 700;
  line-height: 1.5;
  margin-bottom: 6.6666666667vw;
  font-size: 30px;
}

#about .texts .text {
  font-weight: 700;
  line-height: 2;
  font-size: 16px;
}

#about .title {
  width: 72.8vw;
  padding-top: 14.6666666667vw;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 7.4666666667vw;
}

#schedule {
  position: relative;
}

#schedule .title {
  margin-left: auto;
  margin-right: auto;
  width: 42.2666666667vw;
  margin-bottom: 10.6666666667vw;
}

#schedule .list {
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 4vw;
}

#schedule .item {
  position: relative;
  z-index: 1;
  border-radius: 4.2666666667vw;
}

#schedule .item::after {
  content: "";
  pointer-events: none;
  position: absolute;
  z-index: 1;
  inset: 0;
  border-style: solid;
  border-color: var(--color-white);
  border-width: 0.5333333333vw;
  border-radius: 4.2666666667vw;
}

#schedule .item a {
  width: 100%;
  height: 100%;
}

#schedule .schedule-card {
  display: flex;
  justify-content: center;
}

#schedule .date {
  background: var(--color-black);
  border-right-style: solid;
  border-right-color: var(--color-white);
  position: absolute;
  top: 0;
  left: 0;
  padding: 1.3333333333vw 5.3333333333vw;
  border-right-width: 0.5333333333vw;
  border-radius: 4.2666666667vw 0 4.2666666667vw 0;
  font-family: "Roboto Condensed", sans-serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-size: 30px;
}

#schedule .date span {
  font-size: 18px;
}

#schedule a.is-disabled {
  pointer-events: none;
}

#schedule a[target=_blank] .text::after {
  content: "";
  display: inline-block;
  aspect-ratio: 1;
  background: var(--color-black);
  -webkit-mask: url(../img/common/ic_link.svg) no-repeat;
  -webkit-mask-size: contain;
  mask: url(../img/common/ic_link.svg) no-repeat;
  mask-size: contain;
  width: 0.8em;
  margin-left: 0.2em;
}

#schedule .texts {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  gap: 2.6666666667vw;
  padding: 10.6666666667vw 5.3333333333vw 2.6666666667vw 2.6666666667vw;
}

#schedule .texts .bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  transition: opacity 0.3s;
}

#schedule .texts .image {
  width: 25.3333333333vw;
}

#schedule .texts .text {
  flex: 1;
}

#schedule .texts:has(.image) .bg {
  background: var(--color-white);
  opacity: 0.8;
}

#schedule .texts:has(.image) .text {
  color: var(--color-black);
  font-size: 18px;
}

#schedule .texts:not(:has(.image)) {
  padding-left: min(50px, calc(50 / 1366 * 100vw));
}

#schedule .texts:not(:has(.image)) .bg {
  background: var(--color-black);
  opacity: 0.7;
}

#schedule .texts:not(:has(.image)) .text {
  background: linear-gradient(to bottom, #fff 0%, #333 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  font-style: italic;
  font-family: "Roboto Condensed", sans-serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-size: 36px;
}

@media print, screen and (min-width: 768px) {
  main > .inner {
    width: min(1200px, calc(1200 / 1366 * 100vw));
  }

  #kv {
    min-height: min(780px, calc(780 / 1366 * 100vw));
  }

  #kv .kv-scroll {
    width: min(30px, calc(30 / 1366 * 100vw));
    bottom: max(-94px, calc(-94 / 1366 * 100vw));
  }

  #kv .logo {
    top: min(40px, calc(40 / 1366 * 100vw));
    left: min(20px, calc(20 / 1366 * 100vw));
    width: min(1042px, calc(1042 / 1366 * 100vw));
    filter: drop-shadow(0px 0px min(50px, calc(50 / 1366 * 100vw)) rgba(98, 220, 0, 0.6));
  }

  #kv .copy {
    top: min(530px, calc(530 / 1366 * 100vw));
    right: max(-15px, calc(-15 / 1366 * 100vw));
    width: min(380px, calc(380 / 1366 * 100vw));
  }

  #schedule .title,
  #about .title,
  #news .title {
    filter: drop-shadow(0px 0px min(20px, calc(20 / 1366 * 100vw)) rgba(98, 220, 0, 0.6));
  }

  #schedule .title,
  #about .title,
  #news .title {
    gap: min(12px, calc(12 / 1366 * 100vw));
  }

  #schedule .title::after,
  #about .title::after,
  #news .title::after {
    width: 100%;
    margin-left: 0;
    height: min(6px, calc(6 / 1366 * 100vw));
  }

  #news {
    margin: min(130px, calc(130 / 1366 * 100vw)) 0 min(200px, calc(200 / 1366 * 100vw)) 0;
  }

  #news .bg::before {
    top: max(-129px, calc(-129 / 1366 * 100vw));
    height: min(130px, calc(130 / 1366 * 100vw));
  }

  #news .bg::after {
    bottom: max(-99px, calc(-99 / 1366 * 100vw));
    height: min(100px, calc(100 / 1366 * 100vw));
  }

  #news .title {
    width: min(205px, calc(205 / 1366 * 100vw));
    margin-bottom: min(56px, calc(56 / 1366 * 100vw));
  }

  #news .list {
    grid-template-columns: 1fr 1fr 1fr 1fr;
    width: min(1200px, calc(1200 / 1366 * 100vw));
    padding-bottom: min(40px, calc(40 / 1366 * 100vw));
    gap: min(32px, calc(32 / 1366 * 100vw));
  }

  #news .item {
    width: min(276px, calc(276 / 1366 * 100vw));
    border-radius: min(16px, calc(16 / 1366 * 100vw));
  }

  #news .item::after {
    border-width: min(3px, calc(3 / 1366 * 100vw));
    border-radius: min(16px, calc(16 / 1366 * 100vw));
  }

  #news .item a:hover {
    filter: drop-shadow(0px 0px min(10px, calc(10 / 1366 * 100vw)) rgba(98, 220, 0, 0.6));
  }

  #news .item .image {
    overflow: hidden;
    border-radius: min(16px, calc(16 / 1366 * 100vw)) min(16px, calc(16 / 1366 * 100vw)) 0 0;
  }

  #news .item .texts {
    overflow: hidden;
    border-radius: 0 0 min(16px, calc(16 / 1366 * 100vw)) min(16px, calc(16 / 1366 * 100vw));
    padding: min(50px, calc(50 / 1366 * 100vw)) min(20px, calc(20 / 1366 * 100vw)) min(20px, calc(20 / 1366 * 100vw)) min(20px, calc(20 / 1366 * 100vw));
  }

  #news .item a:hover .texts::after {
    opacity: 1;
  }

  #news .item .date {
    padding: min(7px, calc(7 / 1366 * 100vw)) min(7px, calc(7 / 1366 * 100vw)) min(7px, calc(7 / 1366 * 100vw)) min(20px, calc(20 / 1366 * 100vw));
  }

  #news .item .date::after {
    aspect-ratio: 20/34;
    right: max(-20px, calc(-20 / 1366 * 100vw));
  }

  #about {
    aspect-ratio: 1200/580;
    width: min(1200px, calc(1200 / 1366 * 100vw));
    margin-bottom: min(150px, calc(150 / 1366 * 100vw));
  }

  #about .bg {
    background-image: url(../img/toppage/bg_about@pc.webp);
  }

  #about .images {
    position: absolute;
    aspect-ratio: 707/727;
    width: min(707px, calc(707 / 1366 * 100vw));
    top: max(-98px, calc(-98 / 1366 * 100vw));
    left: max(-60px, calc(-60 / 1366 * 100vw));
    margin-bottom: 0;
  }

  #about .images .main {
    filter: drop-shadow(0px 0px min(20px, calc(20 / 1366 * 100vw)) rgba(98, 220, 0, 0.4));
  }

  #about .images .main::before {
    width: min(196px, calc(196 / 1366 * 100vw));
    right: min(20px, calc(20 / 1366 * 100vw));
    top: min(390px, calc(390 / 1366 * 100vw));
  }

  #about .images .before {
    left: min(15px, calc(15 / 1366 * 100vw));
    width: min(331px, calc(331 / 1366 * 100vw));
  }

  #about .texts {
    width: min(418px, calc(418 / 1366 * 100vw));
    padding-top: min(90px, calc(90 / 1366 * 100vw));
    margin-right: min(70px, calc(70 / 1366 * 100vw));
    margin-left: auto;
  }

  #about .texts .lead {
    margin-bottom: min(25px, calc(25 / 1366 * 100vw));
  }

  #about .title {
    width: min(418px, calc(418 / 1366 * 100vw));
    padding-top: 0;
    margin-bottom: min(35px, calc(35 / 1366 * 100vw));
  }

  #about .title._only_sp {
    display: none;
  }

  #schedule .title {
    width: min(273px, calc(273 / 1366 * 100vw));
    margin-bottom: min(60px, calc(60 / 1366 * 100vw));
  }

  #schedule .list {
    gap: min(20px, calc(20 / 1366 * 100vw));
    width: min(1080px, calc(1080 / 1366 * 100vw));
  }

  #schedule .item {
    border-radius: min(16px, calc(16 / 1366 * 100vw));
  }

  #schedule .item::after {
    border-width: min(3px, calc(3 / 1366 * 100vw));
    border-radius: min(16px, calc(16 / 1366 * 100vw));
  }

  #schedule .item a:hover {
    filter: drop-shadow(0px 0px min(10px, calc(10 / 1366 * 100vw)) rgba(98, 220, 0, 0.6));
  }

  #schedule .item a:hover .bg {
    opacity: 1;
  }

  #schedule .date {
    position: static;
    overflow: hidden;
    border-right-width: min(3px, calc(3 / 1366 * 100vw));
    border-radius: min(16px, calc(16 / 1366 * 100vw)) 0 0 min(16px, calc(16 / 1366 * 100vw));
    width: min(170px, calc(170 / 1366 * 100vw));
    padding: min(30px, calc(30 / 1366 * 100vw)) 0 min(30px, calc(30 / 1366 * 100vw)) min(30px, calc(30 / 1366 * 100vw));
  }

  #schedule .texts {
    gap: min(20px, calc(20 / 1366 * 100vw));
    padding: min(5px, calc(5 / 1366 * 100vw)) min(40px, calc(40 / 1366 * 100vw));
    overflow: hidden;
    border-radius: 0 min(16px, calc(16 / 1366 * 100vw)) min(16px, calc(16 / 1366 * 100vw)) 0;
  }

  #schedule .texts .image {
    width: min(120px, calc(120 / 1366 * 100vw));
  }
}

@media only screen and (max-width: 767.8px) {
  #news .item {
    overflow: hidden;
  }

  #news .item .text {
    font-size: 2.8rem;
  }

  #news .item .date {
    font-size: 2.8rem;
  }

  #about .texts .lead {
    font-size: 4.8rem;
  }

  #about .texts .text {
    font-size: 3rem;
  }

  #about .title._only_pc {
    display: none;
  }

  #schedule .item {
    overflow: hidden;
  }

  #schedule .date {
    font-size: 3.2rem;
  }

  #schedule .date {
    border-bottom-width: 0.5333333333vw;
    border-bottom-style: solid;
    border-bottom-color: var(--color-white);
  }

  #schedule .date span {
    font-size: 2.4rem;
  }

  #schedule .texts:has(.image) .text {
    font-size: 3rem;
  }

  #schedule .texts:not(:has(.image)) {
    padding: 8vw 5.3333333333vw 8vw 5.3333333333vw;
  }

  #schedule .texts:not(:has(.image)) .text {
    font-size: 4rem;
  }

  #schedule .texts:not(:has(.image)) .text {
    text-align: center;
  }
}

@media screen and (min-width: 768px) and (max-width: 1365.8px) {
  #news .item .text {
    font-size: 1.6rem;
  }

  #news .item .date {
    font-size: 1.8rem;
  }

  #about .texts .lead {
    font-size: 3rem;
  }

  #about .texts .text {
    font-size: 1.6rem;
  }

  #schedule .date {
    font-size: 3rem;
  }

  #schedule .date span {
    font-size: 1.8rem;
  }

  #schedule .texts:has(.image) .text {
    font-size: 1.8rem;
  }

  #schedule .texts:not(:has(.image)) .text {
    font-size: 3.6rem;
  }
}