@media (max-width: 768px) {
    .oshicome{
    }

    .oshicome-rapper {
        display: flex;
            flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .oshicome-count {
            width: 20rem;
            max-width: 100%;
        text-align: center;
    }

    .oshicome-count img {
            width: 20rem;
    }

    .oshicome-recent {
        background-color: rgba(255, 255, 255, 0.8);
            border-radius: 1rem;
            margin-right: 0;
            padding: 1rem 2.2rem 1rem 0;
            width: 20rem;
            max-width: 100%;
        text-align: center;
        font-family: "RocknRoll One";
            font-size: 0.6rem;
        font-weight: bold;
        line-height: 2;
            display: flex;
            flex-direction: column;
            justify-content: center;
    }

    .oshicome-recent-title{
            margin-left: 3rem;
            font-size: 0.8rem;
    }

    .oshicome-listener {
            width: 22rem;
            max-width: 100%;
            height: 30rem;
        font-family: "Yuji Syuku";
        background-color: rgba(255, 255, 255, 0.8);
            margin: 1rem auto;
            padding: 1rem 1rem;
            border-radius: 1rem;
    }

    .oshicome-data {
            overflow-x: auto;
            overflow-y: auto;
            max-height: 25rem;
    }

    .oshicome-list-title {
        margin: 0 0 1rem 0;
        text-align: center;
        font-family: "RocknRoll One";
        font-size: 1rem;
    }

    /* ----- meter ----- */

    .meter {
        --value: 0;
        --max: 18;
        position: relative;
            width: 4rem;
            height: 0.6rem;
            margin-left: 0.2rem;
        background: #eee;
            border-radius: 0.5rem;
        overflow: hidden;
    }

    .meter-bar {
        height: 100%;
        width: calc((var(--value) / var(--max)) * 100%);
        border-radius: 0.2rem;
        animation: grow 5s ease-out forwards;
    }


    /* ▼ 段階 × グラデーション ＋ ななめ縞 */
    .meter.low .meter-bar {
        background:
        repeating-linear-gradient(
            45deg,
            rgba(255,255,255,0.35) 0px,
            rgba(255,255,255,0.35) 6px,
            rgba(255,255,255,0) 6px,
            rgba(255,255,255,0) 12px
        ),
        linear-gradient(90deg, #f2d668, #70ff48);
    }

    .meter.mid .meter-bar {
        background:
        repeating-linear-gradient(
            45deg,
            rgba(255,255,255,0.35) 0px,
            rgba(255,255,255,0.35) 6px,
            rgba(255,255,255,0) 6px,
            rgba(255,255,255,0) 12px
        ),
        linear-gradient(90deg, #f2d668, #33e4ff);
    }

    .meter.high .meter-bar {
        background:
        repeating-linear-gradient(
            45deg,
            rgba(255,255,255,0.35) 0px,
            rgba(255,255,255,0.35) 6px,
            rgba(255,255,255,0) 6px,
            rgba(255,255,255,0) 12px
        ),
        linear-gradient(90deg, #f2d668, #ff5a2c);
    }

    .data-table{
        text-align: center;
    }

    th {
        font-size: 0.6rem;
        padding-bottom: 0.2rem;
    }

    td[data-key="name"] {
            font-size: 0.8rem;
        background-color: #fff7d1; /* 好きな色に変更 */
        font-weight: bold;
            border-radius: 1rem;
        border: 2px solid #ffc368;
    }

    td[data-key^="day"] {
    border: 1px solid #ccc; /* セルの線 */
    padding: 0.1rem;       /* 余白（任意） */
    text-align: center;     /* 中央寄せ（任意） */
    }

    td[data-key="percentage"] {
        font-family: "RocknRoll One";
        font-size: 0.8rem;
        padding-left: 0.3rem;
    }

    @keyframes grow {
        from {
        width: 0%;
        }
    }

    .meter-label {
        font-size: 2rem;
        vertical-align: middle;
    }

    .mark-img {
        width: 1.3rem;   /* 好きなサイズに変更 */
        height: auto;  /* 縦横比を維持 */
        display: block;
        margin: 0 auto; /* 中央寄せしたい場合 */
    }
}