@-webkit-keyframes clipIn {
  0% {
    -webkit-clip-path: inset(0 100% 0 0);
            clip-path: inset(0 100% 0 0);
  }
  100% {
    -webkit-clip-path: inset(0 0 0 0);
            clip-path: inset(0 0 0 0);
  }
}
@keyframes clipIn {
  0% {
    -webkit-clip-path: inset(0 100% 0 0);
            clip-path: inset(0 100% 0 0);
  }
  100% {
    -webkit-clip-path: inset(0 0 0 0);
            clip-path: inset(0 0 0 0);
  }
}
@-webkit-keyframes fade {
  0% {
    opacity: 0;
    transform: translateY(10px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes fade {
  0% {
    opacity: 0;
    transform: translateY(10px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
.xicon__cont {
  margin-inline: auto;
}
@media (max-width: 1023px) {
  .xicon__cont {
    margin-top: 7.8125vw;
    width: 87.7604166667vw;
  }
}
@media (min-width: 1024px) {
  .xicon__cont {
    width: min(960px, 50vw);
  }
}

.xicon__head {
  -webkit-clip-path: inset(0 100% 0 0);
          clip-path: inset(0 100% 0 0);
}
.xicon__head.-reveal {
  -webkit-animation: clipIn 0.8s 0.5s cubic-bezier(0.785, 0.135, 0.15, 0.86) forwards;
          animation: clipIn 0.8s 0.5s cubic-bezier(0.785, 0.135, 0.15, 0.86) forwards;
}
@media (max-width: 1023px) {
  .xicon__head {
    margin-inline: -6.1197916667vw;
  }
}

.xicon__lead {
  font-weight: bold;
  opacity: 0;
}
.xicon__lead strong {
  background-color: #000;
  color: #ffd400;
  display: inline-block;
  font-weight: 900;
  line-height: 1.3;
  margin-left: 0.2em;
  padding: 0 0.2em 0.1em;
}
.xicon__lead.-reveal {
  -webkit-animation: fade 0.5s 1s forwards;
          animation: fade 0.5s 1s forwards;
}
@media (max-width: 1023px) {
  .xicon__lead {
    font-size: min(4.4270833333vw, 17px);
    line-height: 1.5294117647;
    margin-top: 6.7708333333vw;
  }
}
@media (min-width: 1024px) {
  .xicon__lead {
    font-size: min(26px, 1.3541666667vw);
    letter-spacing: -0.02em;
    line-height: 1.7692307692;
    margin-top: min(46px, 2.3958333333vw);
    text-align: center;
    white-space: nowrap;
  }
}

.xicon__sec {
  opacity: 0;
}
.xicon__sec.-reveal {
  -webkit-animation: fade 0.5s 1s forwards;
          animation: fade 0.5s 1s forwards;
}
@media (max-width: 1023px) {
  .xicon__sec {
    margin-top: 9.375vw;
  }
}
@media (min-width: 1024px) {
  .xicon__sec {
    margin-top: min(68px, 3.5416666667vw);
  }
}

.xicon__row {
  display: flex;
  justify-content: center;
}
@media (max-width: 1023px) {
  .xicon__row {
    -moz-column-gap: 11.1979166667vw;
         column-gap: 11.1979166667vw;
    margin-top: 4.4270833333vw;
  }
}
@media (min-width: 1024px) {
  .xicon__row {
    -moz-column-gap: min(80px, 4.1666666667vw);
         column-gap: min(80px, 4.1666666667vw);
    margin-top: min(34px, 1.7708333333vw);
  }
}

.xicon__item {
  margin: 0;
}
.xicon__item a {
  display: block;
  position: relative;
}
.xicon__item a:after {
  position: absolute;
  bottom: 0;
  right: 0;
  content: url(../../../assets/img/page/special/xicon/ico_dl.svg);
  font-size: 0;
}
.xicon__item figcaption {
  font-weight: 900;
  line-height: 1;
  text-align: center;
}
@media (max-width: 1023px) {
  .xicon__item {
    width: 34.375vw;
  }
  .xicon__item a:after {
    width: 10.9375vw;
  }
  .xicon__item figcaption {
    font-size: min(4.1666666667vw, 16px);
    margin-top: 2.8645833333vw;
  }
}
@media (min-width: 1024px) {
  .xicon__item {
    width: min(180px, 9.375vw);
  }
  .xicon__item a:after {
    width: min(48px, 2.5vw);
  }
  .xicon__item figcaption {
    font-size: min(16px, 0.8333333333vw);
    margin-top: min(14px, 0.7291666667vw);
  }
}