@charset "utf-8";


.nav_btn.sp_only {
    display: none;
}


/* --- スマホ時のスタイル (767px以下) --- */
@media screen and (max-width: 768px) {
    .tag_nav_outer {
        display: flex !important;
        align-items: center;
        /* stretch(縦に伸ばす)をやめて中央配置にする */
        justify-content: space-between;
        padding: 0 2px;
        /* 全体の左右に少しだけ余白を入れる */
        margin: 30px 0;
    }

    .tag_wrapper {
        flex: 1;
        min-width: 0;
        overflow-x: auto;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
        scroll-behavior: smooth;
        scroll-snap-type: x mandatory;
        text-align: left;
        padding: 10px 0;
        margin: 0 10px;
        /* ★ボタンとの間に「隙間」を作る */
        /* ★両端をフワッと透過させる魔法のコード（フェードアウト効果） */
        -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 5%, black 95%, transparent 100%);
        mask-image: linear-gradient(90deg, transparent 0%, black 5%, black 95%, transparent 100%);
        border: none;
        background: #fff;
    }

    .tag_wrapper::-webkit-scrollbar {
        display: none;
    }

    /* 矢印ボタンの設定：独立した「丸ボタン」にする */
    .nav_btn.sp_only {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        /* 少しコンパクトに */
        height: 36px;
        /* 高さを指定 */
       /* border-radius: 50%;
         ★丸くして「壁」感をなくす */
        flex-shrink: 0;
        background: #ae985c;
        border: none;
        cursor: pointer;
    }

    /* 矢印アイコンのデザイン（ボタンサイズに合わせて微調整） */
    .nav_btn::before {
        content: '';
        width: 6px;
        height: 6px;
        border-top: 2px solid #fff;
        border-right: 2px solid #fff;
        display: block;
    }

    .prev::before {
        transform: rotate(-135deg);
        margin-left: 2px;
    }

    .next::before {
        transform: rotate(45deg);
        margin-right: 2px;
    }
}