/* Minutes Games 共通スタイル */

/* フォントのインポート */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700;900&display=swap');

/* 基本スタイル */
body {
    font-family: 'Noto Sans JP', sans-serif;
    color: white;
    margin: 0;
    padding: 0;
    background-color: #0A0A23; /* 背景色を設定 */
}

/* ヘッダー・フッターフレーム */

#header {
  background-color: #0A0A23;
  position: sticky;  /* スクロールしてもこの要素はスクロール位置に「くっついて」表示される */
  top: 0;             /* ビューポートの上端にくっつく位置を指定 */
  z-index: 1000;      /* 他の要素との重なり順を指定（値が大きいほど前面に表示） */
}

iframe {
    border: none;
    width: 100%;
    margin: 0;
    padding: 0;
}

.app-btn-disabled {
    opacity: 0.5; /* グレーアウト効果 */
    cursor: default; /* カーソルをデフォルトのままにする */
    pointer-events: none; /* クリックやホバーなどのポインタイベントを無効化 */
  }

/* モバイルメニューアニメーション */
@keyframes slideIn {
    from {
        transform: translateX(100%);
    }
    to {
        transform: translateX(0);
    }
}

@keyframes slideOut {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(100%);
    }
}

.mobile-menu-enter {
    animation: slideIn 0.5s ease forwards;
}

.mobile-menu-exit {
    animation: slideOut 0.5s ease forwards;
}

/* メニュー項目のスタイル */
.menu-item-hover:hover {
    color: #82DCFF;
}

.menu-description {
    color: #6969A0;
}

.arrow-icon-hum {
    width: 10px;
    height: 16px;
    stroke: #1E1E3C;
    stroke-width: 3;
}

/* レスポンシブデザイン */
/* SPビュー用スタイル - 767px以下 */
@media (max-width: 767px) {
    /* ヘッダーサイズ */
    #header {
        height: 44px;
    }
    
    /* SPビュー用ロゴ切り替え */
    .sp-logo-header {
        content: url('../../images/01_logo_header_sp.png');
    }
    
    /* ヘッダーアイコン調整 */
    .header-crown-icon {
        width: 30px !important;
        height: 30px !important;
    }
    
    .header-contest-frame {
        width: 164px !important;
    }
    
    .header-contest-text {
        font-size: 12px !important;
    }
    
    /* フッターサイズ調整 */
    #footer-frame {
        height: 447px;
    }
}

/* 中間ビュー用スタイル - 768px以上1023px以下 */
@media (min-width: 768px) and (max-width: 1023px) {
    /* ヘッダーサイズ */
    #header {
        height: 84px;
    }
    
    /* フッターサイズ調整 */
    #footer-frame {
        height: 555px;
    }
}

/* PCビュー用メディアクエリ - 1024px以上 */
@media (min-width: 1024px) {
    #header {
        height: 84px;
    }

    #footer-frame {
        height: 676px;
    }
}