body {
    transition: opacity 0.5s ease;
    background-color: white;
}

body.fade-out {
    opacity: 0;
}

.main {
    justify-content: center;
    width: 88%;
    margin: auto;
    margin-top: 200px;
    padding-bottom: 100px;
    align-items: center;
    text-align: center;
    color: #1F1F1F;
}

.main-title {
    width: 40%;
    align-items: center;

    margin: auto;

}

.main-title img {
    width: 100%;
    justify-content: center;
}

.face-wrapper {
    width: 20%;
}


@media screen and (max-width: 480px) {
    .face-wrapper {
        width: 44%;
    }
}

.face-wrapper {
    position: relative;
}

.transaction {
    width: 80%;
    color: blue;
    margin: 200px auto;
}


/* face-wrrapperで、名前表示するポップアップ */
  .tooltip {
    position: absolute;
    visibility: hidden;
    background-color: black;
    color: white;
    text-align: center;
    padding: 5px;
    border-radius: 6px;
}

@keyframes infinity-scroll-left {
    from {
      transform: translateX(0);
    }
      to {
      transform: translateX(-100%);
    }
    }
    .scroll-infinity__wrap {
      display: flex;
      overflow: hidden;
    }
    .scroll-infinity__list {
      display: flex;
      list-style: none;
      padding: 0
    }
    .scroll-infinity__list--left {
      animation: infinity-scroll-left 40s infinite linear 0.5s both;
    }
    .scroll-infinity__item {
        transition: transform 0.3s ease;  /* アニメーションの速度とタイプを設定 */
        transform:rotate3d(0,0 ,0, 0deg);

        background-color: rgb(254, 255, 255);
        border-radius: 4px;
        border: #030a04 solid 3px;
        margin: 10px;
        padding: 10px;
        color: #030a04;
        text-decoration: none;
        height: auto;
        text-align: center;

      width: calc(100vw / 3);
    }
    .scroll-infinity__item>a {
      width: 100%;
      color: #030a04;
    }

    .scroll-infinity__item:hover {
        transform:rotate3d(-1, 1, 1, 5deg);
      }
      

      .secret-boku {
        overflow: hidden; /* 画像がdiv外に出た時に見えないようにする */
        position: relative; /* 位置の基準をこのdivにする */
        top: 0;
        left: 0;
        width: 10%;
        height: 100px;
      }

      .secret-boku a {
        display: block;
        width: 100%; /* divの全体幅に合わせる */
        height: 100%; /* divの全体高に合わせる */
      }
      
      .secret-boku img {
        width: auto;
        height: 90%;
        position: absolute;
        left: -100%; /* 画像をdivの左外に配置 */
        transition: left 0.5s; /* 左方向への移動に0.5秒かける */
      }
      
      .secret-boku:hover img {
        left: 0; /* ホバー時に画像をdivの左端に移動 */
      }