/*==================================================

** index
==================================================*/
@keyframes mvscroll {
  0% {
    opacity: 0;
    top: 0%; }
  10% {
    opacity: 1;
    top: 0%; }
  90% {
    opacity: 1;
    top: 100%; }
  100% {
    opacity: 0;
    top: 100%; } }
#mainvisual {
  position: relative; }
  #mainvisual::before {
    content: '';
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background: url("../img/index/mv_bg_pc.webp") no-repeat center center/cover;
    mask: url("data:image/svg+xml,%3Csvg%20width%3D%221908%22%20height%3D%221224%22%20viewBox%3D%220%200%201908%201224%22%20preserveAspectRatio%3D%22none%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cg%20filter%3D%22url(%23filter0_f_35_52)%22%3E%3Crect%20x%3D%2280.4706%22%20y%3D%2280.8235%22%20width%3D%221747.06%22%20height%3D%221062.79%22%20rx%3D%2280%22%20fill%3D%22black%22%20/%3E%3C/g%3E%3Cdefs%3E%3Cfilter%20id%3D%22filter0_f_35_52%22%20x%3D%220.470581%22%20y%3D%220.823486%22%20width%3D%221907.06%22%20height%3D%221222.79%22%20filterUnits%3D%22userSpaceOnUse%22%20color-interpolation-filters%3D%22sRGB%22%3E%3CfeFlood%20flood-opacity%3D%220%22%20result%3D%22BackgroundImageFix%22%20/%3E%3CfeBlend%20mode%3D%22normal%22%20in%3D%22SourceGraphic%22%20in2%3D%22BackgroundImageFix%22%20result%3D%22shape%22%20/%3E%3CfeGaussianBlur%20stdDeviation%3D%2240%22%20result%3D%22effect1_foregroundBlur_35_52%22%20/%3E%3C/filter%3E%3C/defs%3E%3C/svg%3E") no-repeat center center/100% 100%;
    opacity: 0; }
  #mainvisual .wrap {
    height: 900px;
    padding-block: 294px; }
  #mainvisual .txtbox {
    opacity: 0;
    text-align: center; }
    #mainvisual .txtbox .txt {
      line-height: 1.2;
      text-shadow: 0 0 8px #fff; }
      #mainvisual .txtbox .txt1 {
        font-size: 2.8rem; }
      #mainvisual .txtbox .txt2 {
        margin-top: 8px;
        font-size: min(5.3vw, 5.6rem); }
      #mainvisual .txtbox .txt3 {
        margin-top: 24px;
        font-size: 2rem; }
      #mainvisual .txtbox .txt-wrap {
        position: relative;
        z-index: 1; }
        #mainvisual .txtbox .txt-wrap:before {
          content: '';
          display: block;
          width: 100%;
          height: 30px;
          background: #fff;
          filter: blur(15px);
          border-radius: 1000px;
          position: absolute;
          left: 0;
          top: 0;
          bottom: 0;
          margin: auto;
          z-index: -1; }
  #mainvisual .scroll {
    opacity: 0;
    position: absolute;
    right: 0;
    bottom: 52px;
    left: 0;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    z-index: 99; }
    #mainvisual .scroll-txt {
      font-size: 1.4rem;
      line-height: 1.5; }
    #mainvisual .scroll-bar {
      width: 5px;
      height: 140px;
      position: relative; }
      #mainvisual .scroll-bar::before {
        content: '';
        display: block;
        width: 1px;
        height: 100%;
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        z-index: 0;
        margin: auto;
        background: #111; }
      #mainvisual .scroll-bar::after {
        content: '';
        display: block;
        border-radius: 1000px;
        width: 5px;
        aspect-ratio: 1;
        background: #111;
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        z-index: 0;
        margin: auto;
        animation: mvscroll 3s ease 0s infinite normal forwards; }
  #mainvisual.move::before,
  #mainvisual.move .txtbox,
  #mainvisual.move .scroll {
    opacity: 1;
    transition: opacity 1.5s ease-in-out; }
  #mainvisual.move::before {
    transition-delay: 1.2s; }
  #mainvisual.move .txtbox {
    transition-delay: 0.2s; }
  #mainvisual.move .scroll {
    transition-delay: 1.5s; }

#indexDownload h2 {
  margin-top: 64px; }
  #indexDownload h2 .maker {
    background: linear-gradient(90deg, rgba(107, 213, 225, 0.8) 0%, rgba(255, 217, 142, 0.8) 50%, rgba(255, 182, 119, 0.8) 100%) no-repeat left bottom/100% 20px; }
#indexDownload .lang-list {
  display: grid;
  margin-top: 96px;
  gap: 10px;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr; }
#indexDownload .lang-row {
  padding: 8px;
  background: #fff; }
  #indexDownload .lang-row:nth-child(7n+1) .lang-ttl {
    background: #67b2e4; }
  #indexDownload .lang-row:nth-child(7n+2) .lang-ttl {
    background: #53cdb5; }
  #indexDownload .lang-row:nth-child(7n+3) .lang-ttl {
    background: #62d995; }
  #indexDownload .lang-row:nth-child(7n+4) .lang-ttl {
    background: #f5d34b; }
  #indexDownload .lang-row:nth-child(7n+5) .lang-ttl {
    background: #ec9e59; }
  #indexDownload .lang-row:nth-child(7n+6) .lang-ttl {
    background: #ed796d; }
  #indexDownload .lang-row:nth-child(7n+7) .lang-ttl {
    background: #b483c8; }
#indexDownload .lang-ttl {
  background: #ddd;
  text-align: center;
  font-size: 2.0rem;
  line-height: 1.2;
  color: #fff;
  border-radius: 4px;
  padding: 9px 0 7px; }
#indexDownload .lang-box {
  padding: 16px 8px; }
#indexDownload .lang-ul li {
  line-height: 1.2; }
  #indexDownload .lang-ul li::before {
    top: 3px; }
#indexDownload .lang-ul a {
  font-size: 1.6rem;
  text-decoration: underline; }
  #indexDownload .lang-ul a:hover {
    text-decoration: none; }

#indexNews h2 {
  margin-top: 120px; }

@media screen and (min-width: 768px) {
  #indexDownload .lang-box {
    display: block !important; } }
@media screen and (max-width: 960px) and (min-width: 768px) {
  #indexDownload .lang-list {
    grid-template-columns: 1fr 1fr 1fr; } }
@media screen and (max-width: 767px) {
  #mainvisual::before {
    position: static;
    aspect-ratio: 400/350;
    background-image: url("../img/index/mv_bg_sp.webp");
    mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%22432%22%20height%3D%22366%22%20viewBox%3D%220%200%20432%20366%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cg%20filter%3D%22url%28%23filter0_f_138_832%29%22%3E%0A%3Crect%20x%3D%2240%22%20y%3D%2240%22%20width%3D%22352%22%20height%3D%22278%22%20rx%3D%2250%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fg%3E%0A%3Cdefs%3E%0A%3Cfilter%20id%3D%22filter0_f_138_832%22%20x%3D%220%22%20y%3D%220%22%20width%3D%22432%22%20height%3D%22358%22%20filterUnits%3D%22userSpaceOnUse%22%20color-interpolation-filters%3D%22sRGB%22%3E%0A%3CfeFlood%20flood-opacity%3D%220%22%20result%3D%22BackgroundImageFix%22%2F%3E%0A%3CfeBlend%20mode%3D%22normal%22%20in%3D%22SourceGraphic%22%20in2%3D%22BackgroundImageFix%22%20result%3D%22shape%22%2F%3E%0A%3CfeGaussianBlur%20stdDeviation%3D%2220%22%20result%3D%22effect1_foregroundBlur_138_832%22%2F%3E%0A%3C%2Ffilter%3E%0A%3C%2Fdefs%3E%0A%3C%2Fsvg%3E%0A"); }
  #mainvisual .wrap {
    height: auto;
    padding: 0; }
  #mainvisual .txtbox {
    margin-top: -12vw; }
    #mainvisual .txtbox .txt {
      line-height: 1.2;
      text-shadow: 0 0 8px #fff; }
      #mainvisual .txtbox .txt1 {
        font-size: 2.0rem; }
      #mainvisual .txtbox .txt2 {
        margin-top: 16px;
        font-size: min(8vw, 3.2rem); }
      #mainvisual .txtbox .txt3 {
        margin-top: 16px;
        font-size: 1.4rem; }
      #mainvisual .txtbox .txt-wrap:before {
        content: none; }
  #mainvisual .scroll {
    position: static;
    margin-top: 48px; }
    #mainvisual .scroll-txt {
      font-size: 1.2rem; }
    #mainvisual .scroll-bar {
      height: 80px; }
  #mainvisual.move::before {
    transition-delay: 0.2s; }
  #mainvisual.move .txtbox {
    transition-delay: 1.5s; }
  #mainvisual.move .scroll {
    transition-delay: 2s; }

  #indexDownload h2 {
    margin-top: 80px; }
    #indexDownload h2 .maker {
      background-size: 100% 15px; }
  #indexDownload .lang-list {
    margin-top: 80px;
    gap: 8px 0;
    background: #fff;
    padding: 8px;
    grid-template-columns: 1fr; }
  #indexDownload .lang-row {
    padding: 0; }
  #indexDownload .lang-box {
    display: none;
    padding: 24px 2.3% 16px; }
  #indexDownload .lang-ttl {
    cursor: pointer; }
  #indexDownload .lang-ul li + li {
    margin-top: 20px; } }