/* レイアウト */
    body {
        width: 100vw;
        height: 100vh;
        margin: 0 auto;
        background-color:#4f4f4f !important;
    }

    .mobile-wrapper {
        max-width: 430px; /* iPhoneの標準幅など */
        margin: 0 auto; /* 中央寄せ */
        min-height: 100vh; /* 必要に応じて高さも調整 */
        background-color: #f5f5f5;
        position: relative; /* オフキャンバス位置の基準 */
        overflow-x: hidden;
    }

    #main-content {
        width: 100%;
        height: 100%;
        margin: 0 auto;
    }

    /* モバイル版（幅が430px未満） */
    @media screen and (max-width: 430px) {
        #main-content {
            margin-top: 60px; /* ヘッダーの高さ分。実際の高さに応じて調整 */
        }
    }

/* ヘッダー */
    .header-hr {
        border: 0;
        height: 2px; /* 太さを調整 */
        background-color:rgba(255, 119,0);
        margin: 0; /* 余白なし */
    }

    /* モバイル版（幅が430px未満） */
    @media screen and (max-width: 430px) {
        .fixed-header {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            z-index: 1000; /* メニューなどより前面に */
            background-color: white; /* 背景色が透明だと下のコンテンツが透ける */
            box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* 見た目改善用 */
        }
    }

/* メニュー */
    /* 共通スタイル */
    #offcanvasRight {
        right: -50%;
        top: 0;
        height: 100%;
        width: 50%;
        background-color: white;
        transition: right 0.3s ease-in-out;
        z-index: 1050;
    }

    /* PC版（幅が430px以上） */
    @media screen and (min-width: 431px) {
        #offcanvasRight {
            position: absolute !important;
        }
    }

    /* モバイル版（幅が430px未満） */
    @media screen and (max-width: 430px) {
        #offcanvasRight {
            position: fixed !important;
            height: 100vh; /* モバイルだけ100vhに */
        }
    }

    /* 表示中の状態（BootstrapのJSが .show をつける） */
    #offcanvasRight.show {
        right: 0;
    }

    .flush-list {
        margin: 0;
        padding: 0;
        border-radius: 0;
    }

    .flush-list .list-group-item {
        background-color: transparent;
        border-left: none;
        border-right: none;
        padding-top: 1.5rem !important;
        padding-bottom: 1.5rem !important;
    }

/* ローディング */
    #spinner-overlay {
        top: 0;
        margin: 0 auto;
        width: 100%;
        height: 100vh;
        background-color: rgba(255, 255, 255, 0.8); /* 白で透過 */
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        z-index: 9999; /* 最前面 */
    }
    /* PC版（幅が430px以上） */
    @media screen and (min-width: 431px) {
        #spinner-overlay {
            position: absolute !important;
        }
    }

    /* モバイル版（幅が430px未満） */
    @media screen and (max-width: 430px) {
        #spinner-overlay {
            position: fixed !important;
        }
    }

    #replay {
        margin-top: 20px;
        font-size: 32px;
        cursor: pointer;
    }

/* ログイン */
    #login_card {
        width: 500px;
    }

/* ボックス設定 */
    .box {
        position: relative;
        border: 1px solid #9e9e9e; /* 枠線 */
        border-radius: 10px; /* 角丸 */
        padding: 20px 10px 10px 10px;
        margin-top: 20px;
    }

    .box-title {
        position: absolute;
        top: -10px;
        left: 10px;
        padding: 0 10px;
        font-size: 14px;
    }

/* ボタングループ */
    .btn-group-vertical,
    .btn-group-vertical:hover,
    .btn-group-vertical:focus,
    .btn-group-vertical:active {
        box-shadow: none !important;
    }


/* ページネーション */
    .pagination {
        flex-wrap: wrap;
        justify-content: center;
    }


/* 細かな設定 */
    .max100{
        max-width: 100%;
    }
    .min230px{
        min-width: 230px;
    }

    .nowrap{
        white-space: nowrap;
    }

    .pointer {
        cursor: pointer;
    }

    a:hover {
        color: rgba(255, 119,0) !important;
    }

    .badge_custom{
        white-space: normal;
        word-break: break-word;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
    }