/* ============================================================
   1. 基本設定・リセット
============================================================ */
body, html {
    margin: 0;
    padding: 0;
    font-family: 'Zen Kaku Gothic New', sans-serif;
    background-color: #f1f3fb;
    color: #171919;
    letter-spacing: 0.04em;
}

a { text-decoration: none; }

.container {
    width: 90%;
    margin: 0 auto;
}

.pc-only { display: block; }
.sp-only { display: none; }

@media (max-width: 768px) {
    .pc-only { display: none; }
    .sp-only { display: block; }
}

/* ============================================================
   2. 共通パーツ（パンくず・タイトル等）
============================================================ */
.subtitle {
    font-size: 20px;
    font-weight: 600;
    border-bottom: solid #171919 1px;
    padding-bottom: 14px;
    margin-bottom: 14px;
    width: 100%;
}

.breadcrumb-home { margin-top: 20px; height: 80px; }
.breadcrumb-other { margin-top: 100px; height: 80px; }

@media screen and (max-width: 768px) {
    .breadcrumb-home { margin-top: 20px; height: 60px;line-height: 1.2; }
}

/* ============================================================
   3. メインメニュー・サイドバー
============================================================ */
.layout { display: flex; gap: 40px; }
.sidebar { flex: 0 0 290px; }

.menu { margin-bottom: 60px; }
.menu ul { list-style: none; padding-left: 0; }
.menu li { margin-bottom: 10px; }
.menu .menuli a {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    color: #171919;
    padding: 0px;
    transition: background 0.3s, color 0.3s;
}
.menu .menuli a::before {
    content: "";
    width: 6px;
    height: 6px;
    background-color: #171919;
    display: inline-block;
    border-radius: 2px;
}
.menu .menuli a:hover { color: #84868A; }
.menu .menuli a:hover::before { background-color: #84868A; }

@media (max-width: 768px) {
    .layout { flex-direction: column; }
    .sidebar { display: none; }
}

/* ============================================================
   4. メインビジュアル・ログインボタン周辺
============================================================ */

/* ログインボタン画像切替 */
.loginbox { position: relative; overflow: hidden; width: 100%; display: block; }
.loginbox img { width: 100%; transition: opacity 0.5s ease-in-out; margin-bottom: 40px; }
.loginbox img:first-child { opacity: 1; position: absolute; top: 0; left: 0; }
.loginbox img:last-child { opacity: 0; }
.loginbox:hover img:first-child { opacity: 0; }
.loginbox:hover img:last-child { opacity: 1; }

/* ヘッダー画像上のボタン(read-more_top) */
.button-overlay {
    position: absolute;
    left: 8%;
    bottom: 5%;
    transform: translateX(-50%);
    text-align: center;
}
.read-more_top {
    display: inline-flex;
    align-items: center;
    font-weight: 400;
    font-size: 12px;
    color: #fff;
    white-space: nowrap;
    transition: opacity 0.4s ease, color 0.4s ease;
}
.read-more_top .plus-icon_top {
    display: inline-block;
    margin-left: 5px;
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.4s ease;
}
.button-overlay:hover .read-more_top,
.button-overlay:hover .plus-icon_top { opacity: 0.5; }
.button-overlay:hover .plus-icon_top { transform: translateX(6px); }

/* box_pc設定 */
.box_pc { position: relative; overflow: hidden; width: 140px; }
.box_pc img { width: 100%; height: auto; object-fit: cover; cursor: pointer; transition: opacity 0.3s ease-in-out; border-radius: 0px; }
.po_pc { color: #fff; position: absolute; top: 35%; left: 50%; transform: translate(-50%, -50%); }
.button-overlay:hover .box_pc img { opacity: 0.5; }

/* ============================================================
   5. セクション：人気商品・ランキング
============================================================ */

/* 商品ランキング */
.rank-container { position: relative; width: 100%; margin-bottom: 20px; }
.rankimage-container { position: absolute; top: 10px; left: 10px; display: flex; flex-wrap: wrap; gap: 8px; }
.rankimage-wrapper { position: relative; overflow: hidden; }
.rankimage-wrapper::after {
    content: "";
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(to bottom, rgba(84, 101, 255, 0.0), rgba(84, 101, 255, 0.0), rgba(84, 101, 255, 0.4));
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    display: block;
    border-radius: 5px;
}
.rankimage-wrapper:hover::after { opacity: 1; }

/* ブログランキング */
.flex-link { display: flex; align-items: center; gap: 10px; text-decoration: none; margin-bottom: 10px; }
.rankbox {
    width: 45px; padding: 5px 0px; background-color: #171919; color: #fff;
    font-weight: 200; font-size: 12px; font-family: 'Zen Dots', sans-serif; text-align: center; border-radius: 3px; white-space: nowrap;
}
.ranktitle { font-weight: 600; font-size: 14px; color: #171919; }
.flex-link:hover .rankbox { background-color: #84868A; }
.flex-link:hover .ranktitle { color: #84868A; }

/* ============================================================
   6. セクション：Pick up Youtube
============================================================ */
/* PC表示共通 */
.youtubebox { display: flex; flex-wrap: wrap; gap: 10px; }

.youtube-parent {
    width: calc(33.333% - 7px);
    text-align: left;
    font-size: 12px;
    font-weight: 500;
    color: #171919;
}

/* 1. まず共通の余白などは設定するが、ここでは「消す設定」は書かない */
.youtube-parent .video-title,
.youtube-parent span.no-wrap,
.youtube-parent-sp .video-title {
    display: block;
    margin-top: 10px;
}

/* 2. PC表示（画面が広い時）だけ、入り切らない分を消す */
@media (min-width: 769px) {
    .youtube-parent .video-title,
    .youtube-parent span.no-wrap {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: clip;
    }
}

/* 3. SP表示（画面が狭い時）は、改行して全表示する */
@media (max-width: 768px) {
    .youtube-parent-sp .video-title {
        white-space: normal;    /* 改行を許可 */
        overflow: visible;      /* すべて表示 */
        text-overflow: clip;    /* 切り取りを無効化 */
        line-height: 1.4;       /* 改行した時に読みやすく */
    }
}

.youtubelabel {
    width: 92%; padding: 5px 4%; background-color: #171919;
    border-radius: 3px; color: #fff; margin: 20px 0 10px;
    box-sizing: content-box;
}

/* グッズアイテム（共通） */
.goods-grid { display: flex; gap: 8px; width: 100%; }
.youtube-goods-item {
    position: relative;
    flex: 1;
    overflow: hidden;
    border-radius: 5px;
}
.youtube-goods-item::before { content: ""; display: block; padding-top: 100%; }
.youtube-goods-item img {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    object-fit: cover; transition: opacity 0.3s;
}

/* ============================================================
   7. セクション：ブログ記事カード
============================================================ */
.article-card { position: relative; overflow: hidden; transition: box-shadow 0.3s ease-in-out; }
.article-date { font-size: 12px; color: #9FA5BD; transition: color 0.3s ease-in-out; }
.article-image-wrapper { position: relative; overflow: hidden; border-radius: 10px; }
.article-card img { width: 100%; height: auto; display: block; transition: transform 0.3s ease-in-out; border-radius: 10px; }
.article-image-wrapper::after {
    content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(to bottom , rgba(84, 101, 255, 0.0), rgba(84, 101, 255, 0.4), rgba(84, 101, 255, 0.6));
    opacity: 0; transition: opacity 0.3s ease-in-out;
}

/* 続きを読む(box) */
.box { 
    position: relative; 
    /* overflow: hidden; を削除またはコメントアウト */
    width: 110px; 
}

.box img { 
    width: 100%; 
    height: auto; 
    object-fit: cover; 
    cursor: pointer; 
    transition: opacity 0.3s ease-in-out; 
    border-radius: 0; /* ← 念のため角丸をリセット */
}
.box img:first-child { opacity: 1; }
.box img:last-child { position: absolute; top: 0; transition: 0.5s; opacity: 0; }
.button { position: relative; }
.po {
    position: absolute; top: 45%; left: 55px;
    -ms-transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%);
}
.read-more {
    display: inline-flex; align-items: center; text-decoration: none;
    font-size: 12px; font-weight: 400; color: #171919; transition: color 0.3s ease-in-out;
}
.read-more .plus-icon { display: inline-block; margin-left: 5px; transition: transform 0.3s ease-in-out; }

/* ホバーアクション */
.article-card:hover .article-date { color: #dfe1e6; }
.article-card:hover .read-more { color: #84868A; }
.article-card:hover .plus-icon { transform: translateX(5px); }
.article-card:hover .box img:first-child { opacity: 0; }
.article-card:hover .box img:last-child { opacity: 1; }
.article-card:hover .article-image-wrapper img { transform: scale(1.03); }
.article-card:hover .article-image-wrapper::after { opacity: 1; }
.article-card:hover .article-content { color: #84868A; }
.article-card:hover .tag { opacity: 0.7; }

/* タグ(共通) */
.image-container { position: relative; width: 100%; }
.tags-container { position: absolute; top: 20px; left: 20px; display: flex; flex-wrap: wrap; gap: 8px; }
.tag {
    background-color: #5465FF; color: #fff; padding: 8px 12px;
    border-radius: 5px; font-size: 12px; font-weight: 500; white-space: nowrap;
}

/* 矢印アイコン(box2) */
.box2 { position: relative; width: 40px; overflow: hidden; }
.box2 .bg-image { display: block; width: 100%; height: auto; object-fit: cover; z-index: 1; position: relative; }
.box2 .bg-image-hover { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.5s ease; z-index: 2; }
.box2 .arrow, .box2 .arrow-hover {
    position: absolute; top: 50%; left: 50%; width: 16px; height: auto;
    object-fit: contain; transform: translate(-50%, -50%); z-index: 3; transition: opacity 0.4s ease, transform 0.4s ease;
}
.box2 .arrow { opacity: 1; }
.box2 .arrow-hover { opacity: 0; z-index: 4; }

a#hover-link:hover .box2 .bg-image-hover { opacity: 1; }
a#hover-link:hover .box2 .arrow { opacity: 0; }
a#hover-link:hover .box2 .arrow-hover { opacity: 1; transform: translate(-50%, -50%) translate(4px, -4px); }

/* ============================================================
   8. セクション：商品一覧（フィルター・ソート）
============================================================ */

/* フィルター・セレクト */
.custom-select { position: relative; width: 90px; user-select: none; font-size: 14px; }
.custom-select .select-selected { background-color: transparent; color: #5465FF; padding: 5px 0px 5px 5px; border-bottom: 1px solid #5465FF; cursor: pointer; position: relative; transition: opacity 0.3s; }
.select-selected:hover { opacity: 0.5; }

/* 矢印自作 */
.custom-select .select-selected .arrow { position: relative; display: inline-block; width: 12.5px; height: 8.2px; margin-left: 6px; transition: transform 0.3s; }
.custom-select .select-selected .arrow::before,
.custom-select .select-selected .arrow::after {
    content: ""; position: absolute; top: 0; left: calc(50% - 0.5px);
    width: 1px; height: 10px; border-radius: 9999px; background-color: #5465FF; transform-origin: 50% 0.5px;
}
.custom-select .select-selected .arrow::before { transform: rotate(45deg); }
.custom-select .select-selected .arrow::after { transform: rotate(-45deg); }
.custom-select.open .select-selected .arrow { transform: rotate(180deg); }

.custom-select .select-items {
    position: absolute; top: 130%; width: 350px; background-color: #f1f3fb;
    border: 1px solid #5465FF; border-radius: 4px; z-index: 99; max-height: 250px;
    overflow-y: auto; display: none; padding: 0px; box-shadow: 4px 4px 6px rgba(84, 101, 255, 0.3);
}
.custom-select.open .select-items { display: block; }
.custom-select .select-items div { position: relative; padding: 4px 16px 4px 37px; cursor: pointer; color: #5465FF; transition: background-color 0.2s; }
.custom-select .select-items .circle { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); font-weight: bold; font-size: 14px; }

/* ボタン類 */
.custom-select .reset-btn, .custom-select .apply-btn { background: none; border: none; cursor: pointer; font-size: 12px; transition: opacity 0.2s; }
.custom-select .reset-btn { color: #80859A; }
.custom-select .apply-btn { background-color: #171919; color: #fff; border: 1px solid #171919; border-radius: 3px; padding: 4px 10px; }
.custom-select .apply-btn:hover { opacity: 0.7; }

/* ソート(custom-select2) */
.custom-select2 { position: relative; width: 80px; user-select: none; font-size: 14px; }
.custom-select2 .select-selected { background-color: transparent; color: #171919; padding: 5px 0 5px 0px; border-bottom: 1px solid #171919; cursor: pointer; position: relative; padding-right: 15px; transition: opacity 0.3s; }
.custom-select2 .select-selected::before { content: ''; position: absolute; top: 50%; right: 5px; transform: translateY(-50%); width:12px; height: 12px; background-image: url('../img/img019.png'); background-size: contain; background-repeat: no-repeat; pointer-events: none; }
.custom-select2 .select-items { position: absolute; top: 130%; right: 0; width: 150px; background-color: #f1f3fb; border: 1px solid #171919; border-radius: 4px; z-index: 99; display: none; padding: 10px 0; box-shadow: 4px 4px 6px rgba(84, 101, 255, 0.3); }
.custom-select2.open .select-items { display: block; }
.custom-select2 .select-items div { position: relative; padding: 4px 16px 4px 37px; cursor: pointer; color: #171919; }
.custom-select2 .select-items .circle { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); font-weight: bold; }

/* ============================================================
   9. 商品グリッド・カードデザイン
============================================================ */
.filter-form label { font-size: 14px; color: #80859A; margin-right: 10px; }
.product-grid { display: grid; grid-template-columns: repeat(4, 1fr); font-family: 'Zen Kaku Gothic New'; letter-spacing: 0.03em; gap: 24px; }
.product-card { text-align: left; text-decoration: none; position: relative; display: block; }
.product-image-wrap { width: 100%; aspect-ratio: 1 / 1; background: #f5f5f5; display: flex; align-items: center; justify-content: center; margin-bottom: 10px; overflow: hidden; border-radius: 6px; position: relative; }
.product-image-wrap .sold-out-label { position: absolute; top: 8px; left: 8px; background: #171919; color: #fff; font-weight: bold; padding: 4px 6px; border-radius: 3px; font-size: 14px; z-index: 10; }
.product-image { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 6px; transition: transform 0.4s ease; }
.product-card:hover .product-image { transform: scale(1.1); }

/* オーバーレイ・テキスト */
.overlay { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(84, 101, 255, 0.0), rgba(84, 101, 255, 0.0), rgba(84, 101, 255, 0.2), rgba(84, 101, 255, 0.5)); opacity: 0; transition: opacity 0.3s ease; border-radius: 6px; }
.product-vendor { font-size: 12px; color: #9FA5BD; margin-bottom: 2px; transition: opacity 0.3s ease; }
.product-name { font-size: 14px; color: #171919; margin-bottom: 2px; transition: opacity 0.3s ease; }
.product-price { font-size: 20px; color: #171919; letter-spacing: 0.05em; margin-bottom: 2px; transition: opacity 0.3s ease; }
.product-store { font-size: 12px; color: #9FA5BD; display: flex; align-items: center; gap: 6px; margin-bottom: 15px; transition: opacity 0.3s ease; }
.store-icon { width: 14px; object-fit: contain; transition: opacity 0.3s ease; }

.product-card:hover .overlay { opacity: 1; }
.product-card:hover .product-vendor, .product-card:hover .product-name, .product-card:hover .product-price, .product-card:hover .product-store, .product-card:hover .store-icon { opacity: 0.5; }

/* ============================================================
   10. ブログ一覧ページ（XB Container）
============================================================ */
#xb-articles-container { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 40px; }
.xb-article-card { display: flex; flex-direction: column; align-items: flex-start; width: 100%; position: relative; }
.xb-article-image-wrapper { position: relative; overflow: hidden; border-radius: 6px; width: 100%; }
.xb-article-image-wrapper img { width: 100%; height: 190px; object-fit: cover; display: block; transition: transform 0.6s ease; }
.xb-article-image-wrapper::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 8px; background: linear-gradient(to bottom, rgba(84,101,255,0), rgba(84,101,255,0), rgba(84,101,255,0.8)); opacity: 0; transition: opacity 0.6s ease; }

.xb-article-card:hover .xb-article-image-wrapper::after { opacity: 1; }
.xb-article-card:hover .xb-article-image-wrapper img { transform: scale(1.05); }
.xb-article-card:hover .xb-article-date, .xb-article-card:hover .xb-article-title { opacity: 0.5; transition: opacity 0.3s ease; }

.xb-tags-container { position: absolute; top: 10px; left: 10px; display: flex; flex-wrap: wrap; gap: 5px; z-index: 2; }
.xb-tag { background: #5465FF; border-radius: 3px; padding: 4px 6px; font-size: 12px; color: #fff; }
.xb-article-date { font-size: 12px; color: #9FA5BD; margin: 5px 0; transition: opacity 0.3s ease; }
.xb-article-title { font-size: 14px; font-weight: 600; color: #171919; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; transition: opacity 0.3s ease; }

/* XB フィルタボタン */
.tag-btn { padding: 10px 16px; border: 1px solid #80859A; background: #FFF; border-radius: 3px; color: #80859A; cursor: pointer; }
.tag-btn.selected { background: #5465FF; color: #fff; border-color: #5465FF; }
.tag-btn:hover { background: #5465FF; color: #fff; border-color: #5465FF; transition: all 0.3s ease; }
.reset-btn { font-size: 12px; background: none; border: none; padding: 0; color: #80859A; text-decoration: underline; cursor: pointer; margin-left: 20px; transition: opacity 0.3s ease; }
.reset-btn:hover { opacity: 0.5; }

/* ============================================================
   11. スマートフォン対応（メディアクエリ）
============================================================ */
@media (max-width: 768px) {
    body { padding-top: 70px; } /* 固定ヘッダー分の余白 */

    /* SPヘッダー */
    .sp-header {
        position: fixed; top: 0; left: 0; width: 100%; background: #F1F3FB; z-index: 1000;
        border-radius: 0 0 15px 15px; box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    }
    .sp-header-inner { display: flex; justify-content: space-between; align-items: center; padding: 12px 18px; height: auto; }
    .sp-logo img { height: 45px; }

    /* ハンバーガー三本線 */
    .sp-menu-btn { display: flex; flex-direction: column; justify-content: space-between; width: 40px; height: 25px; cursor: pointer; }
    .sp-menu-btn span { display: block; height: 2px; background-color: #171919; border-radius: 1px; transition: all 0.3s ease; }

    /* スライドメニュー本体 */
    .sp-nav {
        position: fixed; top: 0; right: 0; height: 100vh; width: 250px; background: #F1F3FB;
        box-shadow: -2px 0 5px rgba(0,0,0,0.1); padding: 60px 30px 0px;
        transform: translateX(100%); transition: transform 0.3s ease; z-index: 1001;
    }
    .sp-nav.open { transform: translateX(0); }
    .sp-nav-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.3); z-index: 1000; }
    .sp-nav.open + .sp-nav-overlay { display: block; }
    .sp-nav ul { list-style: none; margin: 0; padding: 0; }
    .sp-nav li { margin-bottom: 10px; }
    .sp-nav li a { color: #6E7073; font-size: 16px;font-weight: 600; }

    /* 閉じるボタン(バッテン) */
    .sp-nav-close { width: 40px; height: 35px; top: 15px; right: 15px; position: absolute; cursor: pointer; }
    .sp-nav-close::before, .sp-nav-close::after { content: ""; position: absolute; left: 0; top: 50%; width: 100%; height: 2px; background-color: #171919; }
    .sp-nav-close::before { transform: rotate(45deg); }
    .sp-nav-close::after { transform: rotate(-45deg); }

    /* YouTube横スクロール(SP) ★修正済み */
    .sp-youtubebox {
        display: flex;
        gap: 15px;
        overflow-x: auto;
		/* ↓ここを追加：親のcontainerを無視して画面の端まで広げる */
        width: 100vw;
        margin-left: calc(-50vw + 50%);
        margin-right: calc(-50vw + 50%);
        padding: 0 5% 20px 5%; /* 左右に5%の余白を作る（スクロールの起点） */
        box-sizing: border-box; 
        
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    .sp-youtubebox::-webkit-scrollbar { display: none; }

	/* 動画ブロック：余白計算が変わるためmarginを消す */
    .youtube-parent-sp {
        flex: 0 0 75%; 
        min-width: 250px;
        display: flex;
        flex-direction: column;
        /* ↓ margin-left / margin-right は不要になったので削除 */
    }
    

/* ★ここを追加：タイトルの太字設定と下の余白 */
    .youtube-parent-sp .video-title {
        display: block;
        font-weight: 600;      /* 太字にする */
        font-size: 14px;       /* 少し大きく（お好みで） */
        margin-top: 10px;
        margin-bottom: 0px;    /* タイトル直下の余白 */
    }


    .youtube-parent-sp iframe { width: 100%; aspect-ratio: 4/3; border: none; border-radius: 5px; }
    
    .youtube-parent-sp .youtubelabel { 
        width: auto; 
        padding: 3px 10px; 
        font-size: 12px; 
        font-weight: 600; 
        border-radius: 3px; 
        margin: 15px 0 10px 0; /* 1番目の 15px でタイトルの下を空ける */
    }
    /* グッズグリッド：画像を大きく表示 ★修正済み */
    .goods-grid {
        display: flex;
        gap: 8px;
        width: 100%;
    }
    .youtube-goods-item {
        flex: 1;
        position: relative;
        border-radius: 5px;
        overflow: hidden;
    }
    .youtube-goods-item::before { content: ""; display: block; padding-top: 100%; }
    .youtube-goods-item img {
        position: absolute; top: 0; left: 0;
        width: 100%; height: 100%; object-fit: cover;
    }

    /* SP用：トップ画像ボタン位置調整 */
    .sp-only .button-overlay { position: absolute; bottom: 30px; left: 18px; right: auto; width: auto; text-align: left; transform: none; }
    .sp-only .box_pc { width: 160px; position: relative; overflow: hidden; margin-left: 0; }
    .sp-only .read-more_top { font-size: 15px; display: inline-flex; align-items: center; position: relative; top: 1px; text-align: left; }
    .sp-only .read-more_top .plus-icon_top { margin-left: -2px; transition: transform 0.4s ease, opacity 0.4s ease; }
}

/* 768px以上でのSP要素非表示強制 */
@media (min-width: 769px) {
    .sp-header, .sp-nav, .sp-menu-btn, .sp-nav-overlay { display: none !important; }
}



/* ============================================================
   12. 最終統合：YouTubeカスタマイズ & メニュー修正
============================================================ */

/* --- 1. SP YouTube スクロールエリアの設定 --- */
.sp-youtubebox {
    display: flex;
    overflow-x: auto;
    gap: 15px;
    padding-bottom: 15px;
    padding-right: 40px; 
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
}
.sp-youtubebox::-webkit-scrollbar { display: none; }

/* --- 2. 画像コンテナ & グラデーション（ここで一括管理） --- */
.youtube-image-wrapper {
    position: relative;
    border-radius: 8px;
    overflow: hidden; 
    -webkit-mask-image: -webkit-radial-gradient(white, black);
}

.youtube-image-wrapper::after {
    content: "";
    position: fixed; 
    top: 0;
    right: 0;
    width: 25vw; 
    height: 100vh; 
    /* ↓ ここで薄さを調整しています（0.1 = 10%） */
    background: linear-gradient(to left, 
        rgba(84, 101, 255, 0.5) 0%, 
        rgba(84, 101, 255, 0.2) 50%, 
        rgba(84, 101, 255, 0) 100%
    ) !important;
    pointer-events: none;
    z-index: 10;
}

.youtube-parent-sp {
    flex: 0 0 auto;
}

/* --- 3. YouTube専用（グラデーションを消す設定） --- */
.youtube-image-only::after, 
.youtube-image-only::before {
    display: none !important;
    content: none !important;
}
.youtube-image-only {
    background: none !important;
    position: relative;
    overflow: hidden;
    border-radius: 8px;
}

/* --- 4. ホバー時の透明度設定 --- */
.youtubebox a:hover, 
.sp-youtubebox a:hover, 
.youtube-goods-item a:hover {
    opacity: 0.6 !important;
}
.youtubebox a, 
.sp-youtubebox a, 
.youtube-goods-item a {
    transition: opacity 0.3s ease;
}

/* --- 5. ハンバーガーメニュー復活の呪文（修正版） --- */
@media (max-width: 768px) {
    /* 三本線ボタン */
    .sp-menu-btn {
        display: flex !important;
        z-index: 1100 !important; /* グラデーション(10)より上 */
    }
    
    .sp-menu-btn span {
        background-color: #171919 !important;
    }

    /* 開いた後のメニュー本体 */
    .sp-nav {
        z-index: 2000 !important; /* さらに上へ */
    }

    /* 閉じるボタン(バッテン) */
    .sp-nav-close {
        z-index: 2001 !important; /* メニュー本体よりもさらに上に */
        pointer-events: auto !important; /* クリックを確実に有効化 */
    }

    /* メニュー背景のグレーの幕 */
    .sp-nav-overlay {
        z-index: 1999 !important;
    }
}