body {
        margin: 0;
        font-family: Arial, sans-serif;
    }

    #containerQuiz {
        width: 100%;
        max-width: 1000px;
        margin: 0 auto;
        border: 1px solid white;
        padding: 5px;
        box-sizing: border-box;
        text-align: center;
        line-height: 1;
        background-color: #273445;
    }

    /* タイムリミットバースタイル */
    .progress-bar {
        width: 100%;
        height: 20px;
        margin-bottom: 5px;
        border: 2px solid black;
        overflow: hidden;
        position: relative;
    }

    .time-bar {
        width: 100%;
        height: 100%;
    }

    .time-overlay {
        position: absolute;
        top: 0;
        right: 0;
        height: 100%;
        background-color: #ff9c9c;
    }

    /* デスクトップ用スタイル（例: 幅が800px以上の場合） */
    @media screen and (min-width: 800px) {
        #lbl問目 {
            font-weight: bold;
            font-size: 2.5em;
        }

        #lblメッセージ {
            font-weight: bold;
            font-size: 2.3em;

        }

        #lblランキング {
            font-weight: bold;
            font-size: 2em;
            color: gold;
        }

        #lbl正解数結果 {
            font-weight: bold;
            font-size: 2em;
            color: #87d1ff;
        }

        #lbl記号 {
            font-size: 3em;
            font-weight: bold;
        }

        #img回答,
        #img正解 {
            width: 45%;
            height: 45%;
            width: 240px;
            height: 240px;
        }

        #btn決定 {
            width: 60%;
        }

        #btnSelect1,
        #btnSelect2,
        #btnSelect3,
        #btnSelect4,
        #btnSelect5,
        #btnSelect6 {
            width: 50%;
            height: 70px;
            max-width: 700px;
            font-size: 2.5em;
            box-sizing: border-box;
            cursor: pointer;
            margin-bottom: 5px;
        }

        .selectImg {
            width: 68px;
            height: 68px;
            border: 1px solid white;
            background-color: #ccc;
            color: #000000;
            vertical-align: middle;
            margin-top: -15px;
            cursor: pointer;
        }

        /* ボタンコンテナのスタイル */
        .button-container {
            display: flex;
            justify-content: center;
            gap: 20px;
            margin-top: 1px;
            margin-bottom: 2px;
        }

        /* ボタンアイコンのスタイル */
        .button-icon {
            width: 40px;
            height: 40px;
            margin-right: 8px;
        }

        .checkbox-label {
            font-size: 1.5em;
        }

        /* タイムリミットバースタイル */
        .progress-bar {
            height: 30px;
        }
    }

    /* モバイル用スタイル（例: 幅が800px未満の場合） */
    @media screen and (max-width: 799px) {

        #lbl問目 {
            font-weight: bold;
            font-size: 1.5em;
        }

        #lblメッセージ {
            font-weight: bold;
            font-size: 1.2em;
        }

        #lblランキング {
            font-weight: bold;
            font-size: 1.5em;
            color: gold;
        }

        #lbl正解数結果 {
            font-weight: bold;
            font-size: 1.5em;
            color: #87d1ff;
        }

        #lbl記号 {
            font-size: 1.5em;
            font-weight: bold;
        }

        #img回答,
        #img正解 {
            width: 40%;
            height: 40%;
            width: 140px;
            height: 140px;
        }

        #btn決定 {
            width: 100%;
        }

        #btnSelect1,
        #btnSelect2,
        #btnSelect3,
        #btnSelect4,
        #btnSelect5,
        #btnSelect6 {
            width: 80%;
            height: 57px;
            max-width: 700px;
            font-size: 1.7em;
            box-sizing: border-box;
            cursor: pointer;
            margin-bottom: 2px;
        }

        .selectImg {
            width: 55px;
            height: 55px;
            border: 1px solid white;
            background-color: #ccc;
            color: #000000;
            vertical-align: middle;
            margin-top: -10px;
            cursor: pointer;
        }

        /* ボタンコンテナのスタイル */
        .button-container {
            display: flex;
            justify-content: center;
            gap: 5px;
            margin-top: 1px;
            margin-bottom: 2px;
        }

        /* ボタンアイコンのスタイル */
        .button-icon {
            width: 24px;
            height: 24px;
            margin-right: 2px;
        }

        .checkbox-label {
            font-size: 0.8em;
        }
    }

    /* モバイル用スタイル（例: 幅が400px未満の場合） */
    @media screen and (max-width: 400px) {

        #img回答,
        #img正解 {
            width: 40%;
            height: 40%;
            width: 110px;
            height: 110px;
        }

        #btnSelect1,
        #btnSelect2,
        #btnSelect3,
        #btnSelect4,
        #btnSelect5,
        #btnSelect6 {
            width: 75%;
            height: 60px;
            max-width: 800px;
            font-size: 1.3em;
            box-sizing: border-box;
            cursor: pointer;
            margin-bottom: 5px;
        }
    }

    /* スキル名ラベルのスタイル */
    .skill-name-label {
        color: gold;
    }

    /* 決定スタイル */
    #btn決定 {
        max-width: 900px;
        padding: 5px;
        box-sizing: border-box;
        font-size: 2em;
        background-color: #FFFF99;
        color: color: #000000;;
        cursor: pointer;
    }

    #imgArea {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 5px;
        margin-bottom: 5px;
    }

    #img回答,
    #img正解 {
        object-fit: cover;
        border: 2px solid white;
        margin: 0 10px;
        background-color: #ccc;
    }

    #buttonArea {
        margin-top: 1px;
        margin-bottom: 1px;
    }

    #ranking-container {
        background-color: #295069;
        width: 100%;
        max-width: 700px;
        border: 4px solid black;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        margin: 0 auto;
        align-items: center;
        line-height: 1;
        margin-top: 5px;
        margin-bottom: 5px;
    }

    /* ボタンのスタイル */
    .display-button {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 10px 10px;
        background-color: #3498db;
        color: #ffffff;
        border: none;
        border-radius: 5px;
        cursor: pointer;
        font-size: 16px;
        transition: all 0.3s ease;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }

    .display-button.hidden {
        display: none;
    }

    .checkbox-label {
        display: flex;
        align-items: center;
        justify-content: center;
        /* 横方向も中央揃えにする */
        margin: 0 auto;
        margin-bottom: 10px;
    }

    .checkbox-label input {
        margin-left: 5px;
        margin-right: 5px;
    }

    @keyframes fade-in {
        from {
            opacity: 0;
        }

        to {
            opacity: 1;
        }
    }

    .shake {
        animation: shake 0.3s infinite;
    }

    @keyframes shake {

        0%,
        100% {
            transform: translateX(0);
        }

        25%,
        75% {
            transform: translateX(-5px);
        }

        50% {
            transform: translateX(5px);
        }
    }

    #rankContainer {
        display: inline - block;
        /* 要素を横に並べる */
    }

    /* CSS */
    .float-up-animation {
        animation: floatUp 0.5s ease-out;
    }

    @keyframes floatUp {
        from {
            transform: translateY(100%);
            opacity: 0;
        }

        to {
            transform: translateY(0);
            opacity: 1;
        }
    }

    .input-field_B {
        display: flex;
        align-items: center;
    }

    .input-field_B .label {
        margin-right: 10px;
        white-space: nowrap;
    }

    .input-field_B input {
        flex: 1;
    }

    /* 等級部分のスタイル *********************/
    .CC-buttons {
        display: flex;
        flex-direction: column;
        gap: 5px;
        margin-bottom: 5px;
        max-width: 800px;
        margin-left: auto;
        margin-right: auto;
    }

    .CC-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
    }

    .CC-btn {
        padding: 5px 2px;
        border: 2px solid #66b0fa;
        background-color: #273445;
        color: #66b0fa;
        cursor: pointer;
        transition: all 0.2s ease;
        /* 中央揃えに変更 */
        display: flex;
    }

    .CC-btn.active {
        background-color: #66b0fa;
        color: #273445;
    }

    .CC-btn.competition {
        background-color: #5c2229;
        color: #5e5858;
    }

    .CC-btn:hover {
        opacity: 0.8;
    }

    .CC-description {
        flex-grow: 1;
        margin-left: 10px;
        color: #ccc;
    }

    #CC-List {
        text-align: center;
        margin-top: 1px;
        margin-bottom: 1px;
        font-weight: bold;
        color: #fbacac;
    }

    #CC-grade {
        text-align: center;
        margin-top: 1px;
        margin-bottom: 1px;
    }

    @media screen and (min-width: 800px) {
        .CC-btn {
            width: 200px;
        }

        .CC-icon {
            width: 30px;
            height: 30px;
            margin-right: 5px;
        }

        .CC-btn {
            font-size: 1.5em;
        }

        .CC-description {
            font-size: 1.5em;
        }

        #CC-List {
            font-size: 2em;
        }

        #CC-grade {
            font-size: 2em;
        }
    }

    /* モバイル用スタイル（例: 幅が800px未満の場合） */
    @media screen and (max-width: 799px) {
        .CC-btn {
            min-width: 140px;
        }

        .CC-icon {
            width: 25px;
            height: 25px;
            margin-right: 5px;
        }

        .CC-btn {
            font-size: 1.1em;
        }

        .CC-description {
            font-size: 1em;
        }

        #CC-List {
            font-size: 1.5em;
        }

        #CC-grade {
            font-size: 1.5em;
        }
    }

    /* 等級部分のスタイル *********************/

    /* ぼやけるアニメーション */
    @keyframes blurAnimation {
        0% {
            filter: blur(5px);
        }

        100% {
            filter: blur(0);
        }
    }

    /* ぼやけるクラス */
    .blurry {
        animation: blurAnimation 0.5s ease-out;
    }