@media (max-width: 500px) {
    * {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
    }


    body {
        background-color: #fff2db;
        height: auto;
    }

    .button-group button {
        margin-right: 10px;
        padding: 10px 20px;
        border: 1px solid #ccc;
        cursor: pointer;
        border-radius: 2vw;
        font-size: 3vw;
        font-family: bold;
        margin-bottom: 10px;
        border-radius: 7px;
    }

    .button-group button.active {
        color: white;
    }


    .image-grid img {
        width: 80%;
        height: auto;
        object-fit: cover;
    }

    .image-grid {
        display: flex;
        flex-direction: column;

        justify-content: center;
        /* ← 横並びから縦並びに変更！ */
        gap: 10px;
    }

    .one {
        background-color: #f6e4ff;
    }

    /* ピンク系 */
    .two {
        background-color: #ffe2f2;
    }

    /* 赤ピンク系 */
    .three {
        background-color: #ffe6cc;
    }

    /* ワインレッド系 */
    .four {
        background-color: #fff3a3;
    }

    /* 紫系 */
    .five {
        background-color: #cacfff;
    }

    /* 紺系 */
    .six {
        background-color: #cbeeff;
    }

    .seven {
        background-color: #e3fad1;
    }

    .button-group {
        margin-bottom: 20px;
        margin-left: 10vw;
    }

    .one.active {
        background-color: #d278ff;
        color: white
    }

    .two.active {
        background-color: #ff85d2;
        color: white
    }

    .three.active {
        background-color: #ffb162;
        color: white
    }

    .four.active {
        background-color: #f1df3c;
        color: white
    }

    .five.active {
        background-color: #746aff;
        color: white
    }

    .six.active {
        background-color: #31b0ff;
        color: white
    }

    .seven.active {
        background-color: #5edd4a;
        color: white
    }

    .image {
        display: flex;
        justify-content: center;
    }

    .image-grid img {
        width: 80vw;
        height: auto;
        object-fit: cover;
    }

    .image {
        display: flex;
        justify-content: center;
    }

    .image-grid {
        display: flex;
        flex-direction: column;
        /* ← 横並びから縦並びに変更！ */
        gap: 10px;
    }


    .kikaku {
        display: flex;
        margin-left: 10vw;
        margin-top: 10vw;
        margin-bottom: 10vw;
    }

    .kikaku img {
        width: 40vw;
    }

    .searchbar img {
        width: 90vw;

    }

    .center {
        justify-content: center;
        display: flex;
    }

    .center img {
        justify-content: center;
        display: flex;
    }

    .ichiran {
        margin-top: -7vw;
    }

    .ichiran img {
        width: 80vw;
    }

    .shokai {
        margin-top: 7vw;
    }

    .bar img {
        display: flex;
        justify-content: center;
        height: 13vw;
    }

    .barr {
        display: flex;
        justify-content: center;
        gap: 10vw;
    }

    .bottom-tab {
        z-index: 100;
        position: fixed;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 100%;
        max-width: 600px;
        background: #ffffff;
        padding: 15px;
        display: flex;
        justify-content: space-around;
        height: 100px;
    }

    .arrow img {
        width: 10vw;
        margin-left: 6vw;
    }

    .arrow {
        margin-top: 2vw;
        margin-bottom: -4vw
    }

    .filters {
        display: flex;
        flex-direction: column;
        gap: 1em;
        margin-bottom: 1.5em;
    }

    select {
        -webkit-appearance: none;
        /* Chrome, Safari */
        -moz-appearance: none;
        /* Firefox */
        appearance: none;
        /* 標準 */
        background-image: none;
        /* 矢印の背景画像を消す */
        padding-right: 1em;
        /* 右側の余白調整 */
        min-width: 120px;
        /* 最低限の幅を決める */
        font-size: 1.1rem;
    }

    option {
        font-size: 4vw;
        /* 文字を小さく */
        padding: 30px 25px;
    }


    .filters label {
        display: inline-block;
        margin-bottom: 0.5em;
        font-weight: bold;
        font-size: 1.2rem;
        /* ラベルの文字サイズ大きめ */
        color: #414141;
    }

    .filters select {
        padding: 0.6em 1em;
        font-size: 1.1rem;
        border-radius: 1em;
        border: 1px solid #414141;
        background-color: #ffffff;
        color: #414141;
        cursor: pointer;
        transition: border-color 0.3s, box-shadow 0.3s;
    }

    .filters select:hover,
    .filters select:focus {
        border-color: #414141;
        outline: none;
    }


    .reset {
        margin-left: 5vw;
        margin-top: 2vw;
    }

    .categoryFilter {
        display: flex;
    }

    /* 横並びのところはそのままでOK */
    .horizontal-filters {
        display: flex;
        gap: 1.5em;
        flex-wrap: wrap;
    }


    /* ハッシュタグが流れるスタイル */
    .hashtag-marquee {
        overflow: auto;
        /* ← ここを変更（左右スクロール可） */
        white-space: nowrap;
        width: auto;
        padding: 0.5em;
        border-radius: 1em;
        font-weight: bold;
        color: #b60f55;
        scroll-behavior: smooth;
        scrollbar-width: none;
    }


    .hashtag.selected {
        background-color: #ff4190;
        /* 例: 薄めのピンク */
        color: #fff6f9;
    }

    .marquee-content {
        display: inline-block;
        padding-left: 0;
        animation: none;
    }


    .hashtag-marquee:hover .marquee-content {
        animation-play-state: paused;
        /* ← ホバーで止まる！ */
    }



    .hashtag {
        display: inline-block;
        /* border: 1px solid #000000; */
        margin-right: 1em;
        padding: 0.3em 0.8em;
        /* 余白をつけて丸く見せる */
        border-radius: 10px;
        /* まるっと丸く */
        background-color: #fff6f9;
        /* 薄いピンク背景（好みで変えてね） */
        color: #b60f55;
        /* 普段の文字色 */
        font-weight: bold;
        cursor: pointer;
        text-decoration: none;
        /* 下線なし */
        transition: background-color 0.3s, color 0.3s;
        /* なめらかな色変化 */
    }

    .hashtag:hover {
        background-color: #ffbed4;
        /* ホバー時の濃いピンク背景 */
        color: #b60f55;
        /* ホバー時は文字色を背景色っぽく */
    }

    .event img {
        width: 80%;
        height: auto;
    }

    .event {
        display: flex;
        justify-content: center;
    }

    .hashtag-marquee::-webkit-scrollbar {
        display: none;
    }

    @keyframes scroll-left {
        0% {
            transform: translateX(0);
        }

        100% {
            transform: translateX(-100%);
        }
    }

}












@media (min-width: 500px) {
    .bg-wrapper {
        background: url('img/back.png');
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
        background-attachment: fixed;
        width: 100%;
        height: auto;
    }

    .container {
        max-width: 500px;
        margin: 0 auto;
        background: #fff2db;
        position: relative;
        z-index: 1;
        height: auto;
    }


    .results-area.single {
        margin-bottom:15vw;
    }

    .results-area{
        margin-bottom:5vw;
    }

    body {
        background-color: #fff2db;
        min-height: 100vh;
        margin-bottom: -100px;
        margin-top: -10px;
        margin-left: -0px;
        margin-right: -10px;
    }

    .button-group {
        margin-bottom: 20px;

    }

    .button-group button {
        margin-right: 10px;
        padding: 10px 20px;
        /* background-color: #fff; */
        border: 1px solid #ccc;
        cursor: pointer;
        margin-left: 30px;
        margin-bottom: 10px;
        border-radius: 7px;
    }

    .one {
        background-color: #f6e4ff;
    }

    /* ピンク系 */
    .two {
        background-color: #ffe2f2;
    }

    /* 赤ピンク系 */
    .three {
        background-color: #ffe6cc;
    }

    /* ワインレッド系 */
    .four {
        background-color: #fff3a3;
    }

    /* 紫系 */
    .five {
        background-color: #cacfff;
    }

    /* 紺系 */
    .six {
        background-color: #cbeeff;
    }

    .seven {
        background-color: #e3fad1;
    }


    .one.active {
        background-color: #d278ff;
        color: white
    }

    .two.active {
        background-color: #ff85d2;
        color: white
    }

    .three.active {
        background-color: #ffb162;
        color: white
    }

    .four.active {
        background-color: #f1df3c;
        color: white
    }

    .five.active {
        background-color: #746aff;
        color: white
    }

    .six.active {
        background-color: #31b0ff;
        color: white
    }

    .seven.active {
        background-color: #5edd4a;
        color: white
    }


    .image-grid img {
        width: 400px;
        height: auto;
        object-fit: cover;
    }

    .image {
        display: flex;
        justify-content: center;
    }

    .image-grid {
        display: flex;
        flex-direction: column;
        /* ← 横並びから縦並びに変更！ */
        gap: 10px;
    }


    .kikaku {
        display: flex;
        margin-left: 40px;
        margin-bottom: 40px;
        margin-top: 0px;
        padding-top: 40px;
    }

    .kikaku img {
        width: 180px;
    }

    .searchbar img {
        width: 400px;
        margin-bottom: 30px;
    }

    .center {
        justify-content: center;
        display: flex;
    }

    .center img {
        justify-content: center;
        display: flex;
    }

    /* 
    .ichiran {
        margin-top: 30px;
    } */

    .ichiran img {
        width: 80%;
    }

    .shokai {
        padding-bottom: 10px;
    }


    .beige {
        background-color: #fff2db;
        height: 100px;
    }

    .arrow img {
        width: 50px;
        margin-left: 48px;
    }

    .arrow {
        margin-top: 5px;
        margin-bottom: -20px;
    }


    .bottom-tab {
        z-index: 100;
        position: fixed;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 100%;
        max-width: 500px;
        background: #ffffff;
        display: flex;
        justify-content: space-around;
        height: 100px;
        margin-left: 0px;
    }


    .tab-item {
        width: 60px;
        height: 60px;
        background: #14325c;
        border-radius: 50%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        color: white;
        font-size: 14px;
        font-style: italic;
        box-shadow: 5px 5px 8px rgba(0, 0, 0, 0.2),
            -5px -5px 8px rgba(255, 255, 255, 0.3);
        transition: all 0.3s ease;
    }

    .tab-item i {
        font-size: 20px;
        margin-bottom: 5px;
    }

    .tab-item:hover {
        transform: scale(1.1);
    }

    .bar img {
        display: flex;
        justify-content: center;
        height: 60px;
        margin-top: 20px;
    }

    .barr {
        display: flex;
        justify-content: center;
        gap: 50px;
    }






    .filters {
        display: flex;
        flex-direction: column;
        gap: 1em;
        margin-bottom: 1.5em;
    }

    select {
        -webkit-appearance: none;
        /* Chrome, Safari */
        -moz-appearance: none;
        /* Firefox */
        appearance: none;
        /* 標準 */
        background-image: none;
        /* 矢印の背景画像を消す */
        padding-right: 1em;
        /* 右側の余白調整 */
        min-width: 120px;
        /* 最低限の幅を決める */
        font-size: 1.1rem;
    }

    option {
        font-size: 16px;
        /* 文字を小さく */
        padding: 30px 25px;
        /* 上下10px、左右15pxの余白 */
    }


    .filters label {
        display: inline-block;
        margin-bottom: 0.5em;
        font-weight: bold;
        font-size: 1.2rem;
        /* ラベルの文字サイズ大きめ */
        color: #414141;
        margin-left: 20px;
    }

    .filters select {
        padding: 0.6em 1em;
        font-size: 1.1rem;
        border-radius: 1em;
        border: 1px solid #414141;
        background-color: white;
        color: #414141;
        cursor: pointer;
        transition: border-color 0.3s, box-shadow 0.3s;
    }

    .filters select:hover,
    .filters select:focus {
        border-color: #414141;
        outline: none;
    }

    /* 横並びのところはそのままでOK */
    .horizontal-filters {
        display: flex;
        gap: 1.5em;
        flex-wrap: wrap;
    }


    /* ハッシュタグが流れるスタイル */
    .hashtag-marquee {
        overflow: auto;
        /* ← ここを変更（左右スクロール可） */
        white-space: nowrap;
        width: 96.5%;
        padding: 0.5em;
        border-radius: 1em;
        font-weight: bold;
        color: #b60f55;
        scroll-behavior: smooth;
        scrollbar-width: none;
    }


    .hashtag.selected {
        background-color: #ff6ba9;
        /* 例: 薄めのピンク */
        color: #fff6f9;
    }

    .marquee-content {
        display: inline-block;
        padding-left: 0;
        /* ここも100%→0に */
        animation: none;
        /* ← アニメーションを止める */
    }


    .hashtag-marquee:hover .marquee-content {
        animation-play-state: paused;
        /* ← ホバーで止まる！ */
    }

    .categoryFilter {
        display: flex;
    }

    .reset {
        margin-left: 50px;
        margin-top: 5px;
    }


    .hashtag {
        display: inline-block;
        /* border: 1px solid #000000; */
        margin-right: 1em;
        padding: 0.3em 0.8em;
        /* 余白をつけて丸く見せる */
        border-radius: 10px;
        /* まるっと丸く */
        background-color: #fff6f9;
        /* 薄いピンク背景（好みで変えてね） */
        color: #b60f55;
        /* 普段の文字色 */
        font-weight: bold;
        cursor: pointer;
        text-decoration: none;
        /* 下線なし */
        transition: background-color 0.3s, color 0.3s;
        /* なめらかな色変化 */
    }

    .hashtag:hover {
        background-color: #ffbed4;
        /* ホバー時の濃いピンク背景 */
        color: #b60f55;
        /* ホバー時は文字色を背景色っぽく */
    }

    .event img {
        width: 400px;
        /* 横幅を200pxに */
        height: auto;
        /* 縦横比を維持 */
        /* または高さ指定したいなら height: 150px; width: auto; とか */
    }

    .event {
        display: flex;
        justify-content: center;
    }

    /* .hashtag:hover {
    color: #e4007f;
    /* ← 色濃くする */


    .hashtag-marquee::-webkit-scrollbar {
        display: none;
    }

    @keyframes scroll-left {
        0% {
            transform: translateX(0);
        }

        100% {
            transform: translateX(-100%);
        }
    }
}