/* プリローダーのスタイル */
.preloader {
    position: fixed; /* プリローダーを固定位置に配置 */
    top: 0; /* 上端からの距離 */
    left: 0; /* 左端からの距離 */
    width: 100%; /* 横幅を100%に設定 */
    height: 100%; /* 高さを100%に設定 */
    background-color: #ffffff; /* 背景色を白色に設定 */
    display: flex; /* Flexboxを使用して要素を配置 */
    align-items: center; /* 垂直方向に中央寄せ */
    justify-content: center; /* 水平方向に中央寄せ */
    z-index: 1000; /* 他の要素より前面に表示 */
}

/* ロゴ画像のスタイル */
.preloader img {
    width: 100px; /* 画像の幅 */
    height: auto; /* 高さは自動調整 */
}

/* ロゴの振動アニメーション */
.logo {
    width: 100px; /* ロゴの幅 */
    height: auto; /* 高さは自動調整 */
    animation: shake 0.2s infinite; /* shakeアニメーションを0.2秒かけて無限に繰り返す */
}

/* shakeアニメーションの定義 */
@keyframes shake {
    0%, 100% {
        transform: rotate(0deg); /* 0度回転 */
    }
    50% {
        transform: rotate(10deg); /* 10度回転 */
    }
}