:root {
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --theme-color: #FFCC08;
}

body {
  min-width: auto !important;
}
dl:first-child, h1:first-child, h2:first-child, h3:first-child, h4:first-child, h5:first-child, h6:first-child, ol:first-child, p:first-child, ul:first-child {
  margin-top: 0;
}
dl, h1, h2, h3, h4, h5, h6, ol, p, ul {
  margin-bottom: 0;
}
img {
  max-width: 100%;
  width: auto;
  height: auto;
}

/* ========================================
   kv
======================================== */
.anniv-30th-kv {
  margin-bottom: 0;
}
.anniv-30th-kv img {
  width: 100%;
}

/* ========================================
   container
======================================== */
.anniv-30th-container {
  position: relative;
  padding-left: min(2.6666666667vw, 10px);
  padding-right: min(2.6666666667vw, 10px);
}
.anniv-30th-container__bar {
  background: #FFCC08;
  width: min(2.6666666667vw, 10px);
  height: 100%;
  position: absolute;
  top: 0;
  z-index: 1;
}
.anniv-30th-container__bar--left {
  left: 0;
}
.anniv-30th-container__bar--right {
  right: 0;
}

/* ========================================
   content
======================================== */
.anniv-30th-content {
  background: #fff;
  padding-bottom: min(19.4666666667vw, 73px);
}
.anniv-30th-content__inner {
  padding-top: min(10.666666667vw, 40px);
}

/* ========================================
   section
======================================== */
.anniv-30th-section:not(:first-child) {
  margin-top: min(8vw, 30px);
}
.anniv-30th-section__inner {
  max-width: 88.732%;
  margin-left: auto;
  margin-right: auto;
}

/* ========================================
   heading
======================================== */
.anniv-30th-section__heading--h2 {
  font-size: min(5.3333333333vw, 20px);
  font-weight: var(--font-weight-medium);
}
.anniv-30th-section__heading--circle {
  line-height: 1.2;
  padding-top: min(6.1333333333vw, 23px);
  padding-bottom: min(6.9333333333vw, 26px);
  position: relative;
}
.anniv-30th-section__heading--circle:before,
.anniv-30th-section__heading--circle:after {
  content: "";
  background-color: var(--theme-color, #87dff6);
  -webkit-mask: url(/special/statics-assets/img/30th_anniv/icon_heading_circle.svg) no-repeat min(1.44vw, 5.4px);
  mask: url(/special/statics-assets/img/30th_anniv/icon_heading_circle.svg) no-repeat min(1.44vw, 5.4px);
  -webkit-mask-size: min(18.4vw, 69px) auto;
  mask-size: min(18.4vw, 69px) auto;
  display: block;
  width: min(21.3333333333vw, 80px);
  height: min(5.3333333333vw, 20px);
  position: absolute;
  left: 0;
}
.anniv-30th-section__heading--circle:before {
  top: 0;
}
.anniv-30th-section__heading--circle:after {
  bottom: 0;
  transform: scaleY(-1);
}
h2.anniv-30th-section__heading--circle {
  margin-bottom: min(8vw, 30px);
}

/* ========================================
   text
======================================== */
.anniv-30th-section__highlight {
  font-size: min(5.3333333333vw, 20px);
  font-weight: var(--font-weight-regular);
}
.anniv-30th-section__text {
  font-size: min(4.26666666666vw, 20px);
  font-weight: var(--font-weight-regular);
}

/* ========================================
   slider
======================================== */
.anniv-30th-slider {
  position: relative;
}
.anniv-30th-slider .swiper-button-prev,
.anniv-30th-slider .swiper-button-next {
  top: 210px;
  width: min(8vw, 30px);
  height: min(8vw, 30px);
  margin-top: 0;
  background-image: url(/special/statics-assets/img/30th_anniv/arrow.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.anniv-30th-slider .swiper-button-prev {
  left: max(-2vw, -7.5px);
  transform: rotate(180deg);
}
.anniv-30th-slider .swiper-button-next {
  right: max(-2vw, -7.5px);
}
.anniv-30th-slider .swiper-button-prev:after,
.anniv-30th-slider .swiper-button-next:after {
  display: none;
}
/* img */
.anniv-30th-slide__img {
  display: block;
  width: 83%;
  max-width: 246px;
  margin: 0 auto;
}
/* phase */
.anniv-30th-slide__phase {
  margin-top: min(8vw, 30px);
  font-size: min(5.3333333333vw, 20px);
  font-weight: var(--font-weight-medium);
  color: var(--theme-color);
}
/* description */
.anniv-30th-slide__description {
  position: relative;
  margin-top: min(4vw, 15px);
  padding-left: min(10.6666666667vw, 40px);
  font-size: min(5.3333333333vw, 20px);
  line-height: 1.2;
}
.anniv-30th-slide__description:before {
  content: "";
  display: block;
  width: min(2.6666666667vw, 10px);
  height: min(2.6666666667vw, 10px);
  background-color: var(--theme-color);
  -webkit-mask: url(/special/statics-assets/img/30th_anniv/icon_ball.svg) no-repeat center center / contain;
  mask: url(/special/statics-assets/img/30th_anniv/icon_ball.svg) no-repeat center center / contain;
  position: absolute;
  top: 1px;
  width: min(6.9333333333vw, 26px);
  height: min(6.9333333333vw, 26px);
  left: 0;
}
/* btn */
.anniv-30th-slide__btn-outer {
  margin-top: min(8.8vw, 33px);
  text-align: center;
}

/* ========================================
   btn
======================================== */
.anniv-30th-btn-outer {
  margin-top: min(16vw, 60px);
  text-align: center;
}
.anniv-30th-btn {
  color: #fff !important;
  font-size: min(5.3333333333vw, 20px);
  font-weight: var(--font-weight-medium);
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  background-color: var(--theme-color);
  border: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: bottom;
  min-width: min(80vw, 300px);
  min-height: min(13.3333333333vw, 50px);
  padding: min(.5333333333vw, 2px) min(10.6666666667vw, 40px);
  border: min(1.0666666667vw, 4px) solid rgba(0, 0, 0, 0);
  border-radius: min(13.3333333333vw, 50px);
  box-sizing: border-box;
  position: relative;
}
.anniv-30th-btn::before,
.anniv-30th-btn::after {
  content: "";
  display: block;
  -webkit-mask: url(/special/statics-assets/img/30th_anniv/icon_ball.svg) no-repeat;
  mask: url(/special/statics-assets/img/30th_anniv/icon_ball.svg) no-repeat;
  background-color: currentColor;
  -webkit-mask-size: 100%;
  mask-size: 100%;
  width: min(8vw, 30px);
  height: min(8vw, 30px);
  margin: auto 0;
  position: absolute;
  top: 0;
  bottom: 0;
}
.anniv-30th-btn::before {
  left: min(2.1333333333vw, 8px);
}
.anniv-30th-btn::after {
  right: min(2.1333333333vw, 8px);
}
.anniv-30th-btn[aria-disabled="true"] {
  background-color: #C4C4C4;
  pointer-events: none;
}
.anniv-30th-btn:not(:first-child) {
  margin-top: min(8.8vw, 33px);
}

@media print, screen and (min-width: 768px) {
  .anniv-30th-container {
    padding-left: min(2.0833333333vw, 40px);
    padding-right: min(2.0833333333vw, 40px);
  }
  .anniv-30th-container__bar {
    width: min(2.0833333333vw, 40px);
  }
  .anniv-30th-content {
    padding-bottom: min(6.25vw, 120px);
  }
  .anniv-30th-content__inner {
    padding-top: min(6.25vw, 120px);
  }

  /* ========================================
      section
  ======================================== */
  .anniv-30th-section:not(:first-child) {
    margin-top: min(4.1666666667vw, 80px);
  }
  .anniv-30th-section__inner {
    max-width: min(71.1458333333vw, 1366px);
  }

  /* ========================================
      heading
  ======================================== */
  .anniv-30th-section__heading--h2 {
    font-size: min(1.8229166667vw, 35px);
  }
  .anniv-30th-section__heading--circle {
    padding-top: min(1.40625vw, 27px);
    padding-bottom: min(1.5625vw, 30px);
  }
  .anniv-30th-section__heading--circle:before,
  .anniv-30th-section__heading--circle:after {
    -webkit-mask-position: min(.28125vw, 5.4px);
    mask-position: min(.28125vw, 5.4px);
    -webkit-mask-size: min(3.59375vw, 69px) auto;
    mask-size: min(3.59375vw, 69px) auto;
    width: min(4.1666666667vw, 80px);
    height: min(1.0416666667vw, 20px);
  }
  h2.anniv-30th-section__heading--circle {
    margin-bottom: min(1.5625vw, 30px);
  }

  /* ========================================
      text
  ======================================== */
  .anniv-30th-section__highlight {
    font-size: min(1.8229166667vw, 35px);
    line-height: 1.57;
  }
  .anniv-30th-section__text {
    font-size: min(1.4583333333vw, 28px);
    line-height: 1.57;
  }

  /* ========================================
      slider
  ======================================== */
  .anniv-30th-slider .swiper {
    width: auto;
    margin: 0 min(4.4791666667vw, 86px);
    padding: 0;
  }
  .anniv-30th-slider .swiper-button-prev,
  .anniv-30th-slider .swiper-button-next {
    width: min(4.4791666667vw, 86px);
    height: min(4.4791666667vw, 86px);
  }
  /* phase */
  .anniv-30th-slide__phase {
    font-size: min(1.4583333333vw, 28px);
  }
  /* description */
  .anniv-30th-slide__description {
    font-size: min(1.09375vw, 21px);
  }
  /* btn */
  .anniv-30th-btn {
    font-size: min(1.5625vw, 30px);
    min-width: min(18.0208333333vw, 346px);
    min-height: min(3.6458333333vw, 70px);
    padding: min(.2083333333vw, 4px) min(3.6458333333vw, 70px);
    border-width: min(.2083333333vw, 4px);
    border-radius: min(3.6458333333vw, 70px);
  }
  .anniv-30th-btn:not(:first-child) {
    margin-top: min(1.71875vw, 33px);
  }
  .anniv-30th-btn::before,
  .anniv-30th-btn::after {
    width: min(2.0833333333vw, 40px);
    height: min(2.0833333333vw, 40px);
  }
  .anniv-30th-btn::before {
    left: min(2.9333333333vw, 11px);
  }
  .anniv-30th-btn::after {
    right: min(2.9333333333vw, 11px);
  }

  /* ========================================
      btn
  ======================================== */
  .anniv-30th-btn-outer {
    margin-top: min(3.125vw, 60px);
    text-align: center;
  }
}

@media screen and (min-width: 768px) and (max-width: 999px) {
  .anniv-30th-section__inner {
    max-width: 88.732%;
  }
  .anniv-30th-slider .swiper-button-prev,
  .anniv-30th-slider .swiper-button-next {
    top: 29%;
  }
}

@media screen and (min-width: 1000px) and (max-width: 1366px) {
  .anniv-30th-slider .swiper-button-prev,
  .anniv-30th-slider .swiper-button-next {
    top: 200px;
  }
}

@media print, screen and (min-width: 1367px) {
  .anniv-30th-slider .swiper-button-prev,
  .anniv-30th-slider .swiper-button-next {
    top: 180px;
  }
}

@media(any-hover: hover) and (prefers-reduced-motion: no-preference) {
  .anniv-30th-btn {
    transition: 0.3s;
  }
}

@media(any-hover: hover) {
  .anniv-30th-btn:hover {
    color: var(--theme-color, #80c6ff) !important;
    background-color: #fff;
    border-color: var(--theme-color, #80c6ff) !important;
  }
}
