:root {
  --main-bgc: #fff;
  --sub-bgc: #f5faff;
  --main-fc: #444;
  --35-fc: #009de6;
  --qra-fc: #0068b7;
}
@keyframes flip-horizontal-bottom {
  0% {
    transform: rotateX(0);
  }
  100% {
    transform: rotateX(-180deg);
  }
}

main.re2025 {
  color: var(--main-c);
  .header {
    background: rgba(255, 255, 255, 0.8);
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-16px);
    transition:
      opacity 0.3s ease,
      transform 0.3s ease,
      visibility 0.3s ease;
    &.is_show {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
    }
    .logo {
      padding: 10px 0;
      text-align: center;
    }
    img {
      width: 120px;
      height: auto;
    }
  }
  section {
    background-color: var(--main-bgc);
    margin: 0;
    padding: 0;
    .fz_35L {
      font-size: 16px;
      color: var(--main-fc);
      line-height: 1.7;
    }
    h2 {
      margin: 0;
      padding: 0;
      border: none;
      font-size: 20px;
      font-weight: 700;
      line-height: 1.3;
    }
    p {
      margin: 16px 0;
    }
    .infinite-slider {
      /* margin: 10px 0; */
      overflow: hidden;
      ul {
        display: flex;
        gap: 4px;
        margin: 0;
        padding: 0;
        width: max-content;
        li {
          list-style: none;
          /* width: calc(100vw / 3 - 10px);  */
        }
      }
      img {
        display: block;
        width: 100%;
      }
      &.kv {
        & + .kv {
          margin-top: 10px;
        }
        img {
          width: auto;
          height: 240px;
        }
      }
      &.sc {
        margin-top: 64px;
        img {
          width: auto;
          height: 120px;
        }
      }
    }
    @media (width >= 768px) {
      .infinite-slider {
        &.kv {
          & + .kv {
            margin-top: 20px;
          }
          img {
            height: calc((100vh - 40px) / 3);
          }
        }
      }
    }
    &.mv {
      height: 740px;
      position: relative;
      .logo-35th {
        position: absolute;
        width: 200px;
        height: 200px;
        margin: auto;
        top: 0;
        bottom: 0;
        right: 0;
        left: 0;
        transform-style: preserve-3d;
        &.flip-horizontal-bottom {
          animation: flip-horizontal-bottom 0.4s cubic-bezier(0.455, 0.03, 0.515, 0.955) 1s both;
        }
        .face {
          position: absolute;
          width: 100%;
          height: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
          border-radius: 100px;
          background-color: #000;
          backface-visibility: hidden;
          &.front {
            img {
              width: 120px;
            }
            background: var(--qra-fc);
            box-shadow: 0 4px 10px 0 rgba(0, 157, 230, 0.25);
          }
          &.back {
            transform: rotateX(180deg);
            img {
              height: 100px;
            }
            background-color: #fff;
            box-shadow: 0 4px 10px 0 rgba(0, 157, 230, 0.25);
          }
        }
      }
    }
    &.sect01 {
      padding: 64px 0 0;
      h1 {
        margin-bottom: 32px;
      }
      p {
        text-align: center;
      }
    }
    &.sect02 {
      padding: 64px 0;
      h2 {
        margin-bottom: 32px;
        text-align: center;
        > picture {
          display: block;
          width: 300px;
          margin: 0 auto;
        }
        > img {
          width: auto;
          height: 64px;
        }
      }
      p {
        text-align: center;
      }
      .aco_block {
        margin-top: 32px;
        text-align: center;
      }
      .aco_wrap {
        margin-top: 32px;
        height: 135px;
        overflow: hidden;
        position: relative;
        &::after {
          position: absolute;
          content: '';
          bottom: 0;
          right: 0;
          left: 0;
          width: 100%;
          height: 67px;
          background: linear-gradient(0deg, #fff 12.02%, rgba(255, 255, 255, 0) 100%);
        }
        &.is-open {
          &::after {
            background: none;
          }
        }
        h2 {
          img {
            width: auto;
            height: 64px;
          }
        }
        h3 {
          text-align: center;
          margin-bottom: 32px;
          img {
            width: auto;
            height: 90px;
          }
        }
        .final {
          margin-top: 48px;
          padding: 0 0 32px;
          p + p {
            margin-top: 32px;
          }
        }
      }
      .btn {
        width: 100%;
        display: inline-flex;
        padding: 16px 36px;
        justify-content: center;
        align-items: center;
        gap: 8px;
        border-radius: 100px;
        border: 1px solid var(--Black-BK2);
        background: var(--White-WH1);
        transition: 0.2s;
        font-weight: 500;
        font-size: 16px;
      }
    }
    &.sect03 {
      padding: 64px 0;
      h2 {
        text-align: left;
        margin-top: 64px;
        margin-bottom: 24px;
        &:first-of-type {
          margin-top: 0;
        }
        picture {
          display: block;
          margin-bottom: 8px;
        }
      }
      h3 {
        font-size: 17px;
      }
      p {
        margin: 24px 0;
        line-height: 1.5;
      }
    }
  }
  .bgc_bl {
    background-color: var(--sub-bgc);
  }
  .column_box {
    gap: 24px;
  }

  @media (width >= 768px) {
    .header {
      img {
        width: 160px;
      }
    }
    section {
      .fz_35L {
        font-size: 20px;
      }
      h2 {
        font-size: 24px;
      }
      &.mv {
        height: 100vh;
        .logo-35th {
          width: 400px;
          height: 400px;
          .face {
            border-radius: 200px;
            &.front {
              img {
                width: 240px;
              }
            }
            &.back {
              img {
                height: 200px;
              }
            }
          }
        }
      }
      &.sect01 {
      }
      &.sect02 {
        h2 {
          > picture {
            width: auto;
          }
        }
        .aco_wrap {
          height: 68px;
        }
        .btn {
          margin-top: 32px;
          max-width: 358px;
          cursor: pointer !important;
        }
      }
      &.sect03 {
        .inner {
          max-width: 738px;
        }
        h3 {
          font-size: 18px;
        }
      }
    }
  }
}