/* === Navbar separator line (mobile collapsed menu only) === */
@media (max-width: 767px) {
  .navbar-nav .nav-item.nav-sep {
    border-bottom: 1px solid #eeeeee;
    margin-left: -8px;
    padding-left: 8px;
  }

  ul.navbar-right {
    border-bottom: 1px solid #eeeeee;
    margin-left: -8px;
    padding-left: 8px;
  }
}
/* === 2026 KV banner: full-width, no cropping, centered slogan/button === */
#banner {
  position: relative;
}
#banner.banner-2026 {
  width: 100%;
  aspect-ratio: 3841/2304;
  background: url("../img/2026/MAIN - KV.png") center center/cover no-repeat;
  height: auto;
}
@media (max-width: 767px) {
  #banner.banner-2026 {
    aspect-ratio: 721/1594;
    background-image: url("../img/2026_mobile/Artboard 1.png");
    background-position: bottom center;
    background-size: cover;
    height: auto;
  }
}
#banner .slogan-container-desktop {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 0 10%;
}
#banner .slogan-container-desktop .slogan_image img {
  max-width: 100%;
  left: 0;
}
#banner .slogan-container-desktop .slogan_button {
  display: flex;
  justify-content: center;
  margin-top: 50px;
}
#banner .slogan-container-desktop .slogan_button a {
  display: block;
  width: 40%;
}
#banner .slogan-container-desktop .slogan_button a img {
  max-width: 100%;
  left: 0;
  height: auto;
}
@media (max-width: 767px) {
  #banner .slogan-container-desktop {
    display: none;
    margin: -60% 10% 0 10%;
  }
  #banner .slogan-container-desktop .slogan_image img {
    width: 100%;
  }
  #banner .slogan-container-desktop .slogan_button {
    margin-top: -600px;
  }
  #banner .slogan-container-desktop .slogan_button a {
    width: 50%;
  }
}
@media (max-width: 567px) {
  #banner .slogan-container-desktop .slogan_button {
    margin-top: -350px;
  }
  #banner .slogan-container-desktop .slogan_button a {
    width: 50%;
  }
}
#banner .slogan-container-mobile {
  display: none;
}
@media (max-width: 767px) {
  #banner .slogan-container-mobile {
    display: flex;
    position: absolute;
    inset: 0;
    z-index: 1;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: -20%;
  }
  #banner .slogan-container-mobile .slogan_image {
    position: relative;
    width: 100%;
    max-width: 100%;
  }
  #banner .slogan-container-mobile .slogan_image img.slogan_img_text {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
  }
  #banner .slogan-container-mobile .slogan_image .slogan_button {
    position: absolute;
    top: 62%;
    left: 56%;
    transform: translateX(-50%);
    width: 58%;
  }
  #banner .slogan-container-mobile .slogan_image .slogan_button a {
    display: block;
  }
  #banner .slogan-container-mobile .slogan_image .slogan_button a img {
    width: 100%;
    height: auto;
  }
}

#qualification {
  padding: 0 0 0 5%;
  --ov-bx: 100;
  --ov-by: 0;
  --ov-cx: 88;
  --ov-cy: 100;
  --ov-ratio: var(--ov-measured-ratio, 2.4);
  --ax: 10;
  --ay: 0;
  --ex: 0;
  --ey: 50;
  --q-ratio: var(--measured-ratio, 3);
  --angle-cb: atan2(
      calc(var(--ov-by) - var(--ov-cy)),
      calc((var(--ov-bx) - var(--ov-cx)) * var(--ov-ratio))
  );
  --angle-ae: atan2(
      calc(var(--ey) - var(--ay)),
      calc((var(--ex) - var(--ax)) * var(--q-ratio))
  );
}
@media (max-width: 767px) {
  #qualification {
    margin-top: 10%;
  }
  #qualification {
    padding: 0;
    --ax: 16;
    --ex: 0;
    --ey: 38;
  }
}
#qualification .osl {
  --osl-thickness: 2px;
  --osl-head-extend: 30%;
}
@media (max-width: 767px) {
  #qualification .osl {
    --osl-sq-size: 6px;
    --osl-sq-gap: 6px;
    --osl-head-extend: 0%;
    --osl-tail-angle: 0deg;
  }
  #qualification .osl .osl-line-h-2 {
    display: none;
  }
  #qualification .osl .osl-tail {
    display: none;
  }
}

#theme {
  --bx: 90;
  --by: 0;
  --cx: 100;
  --cy: 50;
  --t-ratio: var(--measured-ratio, 3);
  --qd-x: 10;
  --qd-y: 100;
  --qe-x: 0;
  --qe-y: 50;
  --q-ratio: var(--q-measured-ratio, 3);
  --theme-x1: 15%;
  --theme-x2: 85%;
  --angle-bc: atan2(
      calc(var(--cy) - var(--by)),
      calc((var(--cx) - var(--bx)) * var(--t-ratio))
  );
  --angle-de: atan2(
      calc(var(--qe-y) - var(--qd-y)),
      calc((var(--qe-x) - var(--qd-x)) * var(--q-ratio))
  );
}
@media (max-width: 767px) {
  #theme {
    --bx: 90;
    --cy: 26;
    --theme-x2: 90%;
    --qd-x: 20;
  }
}
#theme .osl {
  --osl-thickness: 2px;
  --osl-tail-length: 200vw;
  --osl-head-length: 200vw;
}
@media (max-width: 767px) {
  #theme .osl {
    --osl-sq-size: 6px;
    --osl-sq-gap: 6px;
  }
}

#prize {
  --bx: 88;
  --by: 0;
  --cx: 100;
  --cy: -40;
  --p-ratio: var(--measured-ratio, 3);
  --angle-bc: atan2(
      calc(var(--cy) - var(--by)),
      calc((var(--cx) - var(--bx)) * var(--p-ratio))
  );
}
@media (max-width: 767px) {
  #prize {
    --cy: -25;
  }
}
#prize .osl {
  --osl-thickness: 2px;
  --osl-tail-length: calc(
      1% * sqrt(pow(var(--cx) - var(--bx), 2) + pow((var(--cy) - var(--by)) / var(--p-ratio), 2))
      + var(--osl-tail-extend, 0%)
  );
  --osl-tail-extend: 30%;
}
@media (max-width: 767px) {
  #prize .osl {
    --osl-sq-size: 6px;
    --osl-sq-gap: 6px;
    --osl-tail-extend: 20%;
  }
}

#chance {
  --ax: 15;
  --ay: 0;
  --ex: 0;
  --ey: 74;
  --bx: 85;
  --by: 0;
  --cx: 100;
  --cy: -60;
  --c-ratio: var(--measured-ratio, 3);
  --angle-ae: atan2(
      calc(var(--ey) - var(--ay)),
      calc((var(--ex) - var(--ax)) * var(--c-ratio))
  );
  --angle-bc: atan2(
      calc(var(--cy) - var(--by)),
      calc((var(--cx) - var(--bx)) * var(--c-ratio))
  );
}
@media (max-width: 767px) {
  #chance {
    --ax: 20;
    --bx: 85;
    --ey: 68;
    --cy: -48;
  }
}
#chance .osl {
  --osl-thickness: 2px;
  --osl-tail-length: calc(
      1% * sqrt(pow(var(--cx) - var(--bx), 2) + pow((var(--cy) - var(--by)) / var(--c-ratio), 2))
      + var(--osl-tail-extend, 0%)
  );
  --osl-tail-extend: 30%;
  --osl-head-extend: 0%;
}
@media (max-width: 767px) {
  #chance .osl {
    --osl-sq-size: 6px;
    --osl-sq-gap: 6px;
    --osl-tail-extend: 20%;
  }
}

#schedule {
  --ax: 15;
  --ay: 0;
  --ex: 0;
  --ey: -90;
  --bx: 85;
  --by: 0;
  --cx: 100;
  --cy: 80;
  --s-ratio: var(--measured-ratio, 3);
  --angle-ae: atan2(
      calc(var(--ey) - var(--ay)),
      calc((var(--ex) - var(--ax)) * var(--s-ratio))
  );
  --angle-bc: atan2(
      calc(var(--cy) - var(--by)),
      calc((var(--cx) - var(--bx)) * var(--s-ratio))
  );
}
@media (max-width: 767px) {
  #schedule {
    --ax: 20;
    --bx: 86;
    --ey: -30;
    --cy: 30;
  }
}
#schedule .osl {
  --osl-thickness: 2px;
  --osl-sq-bias-x: 0;
}
@media (max-width: 767px) {
  #schedule .osl {
    --osl-sq-size: 6px;
    --osl-sq-gap: 6px;
  }
}

#info #theme {
  --bx: 90;
  --by: 0;
  --cx: 100;
  --cy: 68;
  --t-ratio: var(--measured-ratio, 3);
  --qd-x: 10;
  --qd-y: 100;
  --qe-x: 0;
  --qe-y: 50;
  --q-ratio: var(--q-measured-ratio, 3);
  --theme-x1: 15%;
  --theme-x2: 85%;
  --angle-bc: atan2(
      calc(var(--cy) - var(--by)),
      calc((var(--cx) - var(--bx)) * var(--t-ratio))
  );
  --angle-de: atan2(
      calc(var(--qe-y) - var(--qd-y)),
      calc((var(--qe-x) - var(--qd-x)) * var(--q-ratio))
  );
}
#info #theme::before {
  margin-top: -350px;
}
@media (max-width: 767px) {
  #info #theme::before {
    margin-top: -200px;
  }
}
#info #theme .container {
  padding-top: 10px;
}
@media (max-width: 767px) {
  #info #theme {
    --bx: 90;
    --cy: 68;
    --theme-x2: 90%;
    --qd-x: 20;
  }
}
#info #theme .osl {
  --osl-thickness: 2px;
  --osl-tail-length: 200vw;
  --osl-head-length: 200vw;
}
@media (max-width: 767px) {
  #info #theme .osl {
    --osl-sq-size: 6px;
    --osl-sq-gap: 6px;
  }
}