/* ============================================
   custom_header.css
   ヘッダーデザイン（整理版）
   
   Block 1: 基本設定・グローバル
   Block 2: PC版ナビゲーション
   Block 3: カート・ユーザーナビ
   Block 4: ドロワーメニュー（SP）
   Block 5: レスポンシブ・最終上書き
============================================ */

/* ============================================
   BLOCK 1: 基本設定・グローバル
============================================ */

/* ヘッダー固定 */
.ec-headerRole {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 9998 !important;
    max-width: none !important;
    background: #fff !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06) !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    height: 70px !important;
    padding: 0 40px !important;
    transition: all 0.3s ease !important;
}

body {
    padding-top: 70px !important;
}

/* サイトタイトル（ロゴ） */
.ec-headerRole .ec-headerTitle {
    font-size: 16px !important;
    font-weight: 700 !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
}

.ec-headerRole .ec-headerTitle a {
    color: #23AC38 !important;
    text-decoration: none !important;
    letter-spacing: 0.03em !important;
    transition: all 0.3s ease !important;
    display: inline-block !important;
}

.ec-headerRole .ec-headerTitle a:hover {
    opacity: 0.8 !important;
    transform: scale(1.02) !important;
}

/* ナビゲーションエリア */
.ec-headerRole .ec-headerNaviRole {
    width: auto !important;
    max-width: none !important;
    padding: 0 !important;
    margin: 0 0 0 auto !important;
    display: flex !important;
    align-items: center !important;
    gap: 24px !important;
}

/* ヘッダー内画像 */
.headimg {
    width: 3% !important;
}


/* ============================================
   BLOCK 2: PC版カテゴリナビゲーション
============================================ */

/* 標準矢印の非表示 */
.ec-categoryNaviRole__lists li::before,
.ec-categoryNaviRole__lists li::after,
.ec-categoryNaviRole__lists li::marker,
.ec-categoryNaviRole__lists ul li::before,
.ec-categoryNaviRole__lists ul li::after,
.ec-categoryNaviRole__lists ul li::marker,
.ec-headerRole .ec-categoryNaviRole li a::after {
    content: none !important;
    display: none !important;
    background: none !important;
    border: none !important;
}

.ec-categoryNaviRole__lists li,
.ec-categoryNaviRole__lists ul {
    list-style: none !important;
}

/* カテゴリナビ基本 */
.ec-headerRole .ec-categoryNaviRole {
    display: block !important;
    position: relative !important;
    color: #333 !important;
}

.ec-categoryNaviRole__title {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 10px 18px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #333 !important;
    background: #f8f8f8 !important;
    border-radius: 4px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    border: none !important;
}

.ec-categoryNaviRole__title:hover {
    background: #f0f9f1 !important;
    color: #23AC38 !important;
}

.ec-categoryNaviRole__title::after {
    content: '' !important;
    width: 0 !important;
    height: 0 !important;
    border-left: 5px solid transparent !important;
    border-right: 5px solid transparent !important;
    border-top: 6px solid currentColor !important;
    transition: transform 0.3s ease !important;
    margin-left: 4px !important;
    display: block !important;
    background: none !important;
}

.ec-categoryNaviRole:hover .ec-categoryNaviRole__title::after {
    transform: rotate(180deg) !important;
}

/* ドロップダウン基本 */
.ec-categoryNaviRole__item {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    min-width: 180px !important;
    background: #fff !important;
    border-radius: 4px !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12) !important;
    padding: 20px 0 12px !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateY(10px) !important;
    transition: all 0.3s ease !important;
    z-index: 1000 !important;
    margin-top: -8px !important;
}

.ec-categoryNaviRole::after {
    content: '' !important;
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    width: 100% !important;
    height: 20px !important;
    background: transparent !important;
    display: block !important;
    border: none !important;
}

.ec-categoryNaviRole:hover .ec-categoryNaviRole__item {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
}

.ec-categoryNaviRole__lists {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* 第1階層 */
.ec-categoryNaviRole__lists > li {
    position: relative !important;
    padding-right: 8px !important;
    margin-right: -8px !important;
}

.ec-categoryNaviRole__lists > li > a {
    display: flex !important;
    align-items: center !important;
    padding: 10px 16px !important;
    font-size: 13px !important;
    color: #333 !important;
    text-decoration: none !important;
    transition: all 0.25s ease !important;
    position: relative !important;
    white-space: nowrap !important;
}

.ec-categoryNaviRole__lists > li > a::before {
    content: '' !important;
    position: absolute !important;
    left: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 3px !important;
    height: 0 !important;
    background: #23AC38 !important;
    border-radius: 2px !important;
    transition: height 0.25s ease !important;
    display: block !important;
}

.ec-categoryNaviRole__lists > li > a:hover {
    background: #f0f9f1 !important;
    color: #23AC38 !important;
    padding-left: 20px !important;
}

.ec-categoryNaviRole__lists > li > a:hover::before {
    height: 16px !important;
}

.ec-categoryNaviRole__lists > li:has(> ul) > a::after {
    content: '›' !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-left: auto !important;
    padding-left: 12px !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    color: #23AC38 !important;
    background: none !important;
    border: none !important;
    transition: all 0.25s ease !important;
    line-height: 1 !important;
    height: 100% !important;
}

.ec-categoryNaviRole__lists > li:has(> ul) > a:hover::after {
    color: #1a8a2c !important;
    transform: translateX(3px) !important;
}

/* 第2階層 */
.ec-categoryNaviRole__lists > li > ul {
    position: absolute !important;
    top: -12px !important;
    left: 100% !important;
    min-width: 160px !important;
    background: #fff !important;
    border-radius: 4px !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12) !important;
    padding: 12px 0 12px 8px !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateX(10px) !important;
    transition: all 0.3s ease !important;
    list-style: none !important;
    z-index: 1001 !important;
    margin-left: -8px !important;
}

.ec-categoryNaviRole__lists > li:hover > ul {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateX(0) !important;
}

.ec-categoryNaviRole__lists > li > ul > li {
    position: relative !important;
    padding-right: 8px !important;
    margin-right: -8px !important;
    list-style: none !important;
}

.ec-categoryNaviRole__lists > li > ul > li > a {
    display: flex !important;
    align-items: center !important;
    padding: 9px 14px !important;
    font-size: 13px !important;
    color: #333 !important;
    text-decoration: none !important;
    transition: all 0.25s ease !important;
    white-space: nowrap !important;
    position: relative !important;
}

.ec-categoryNaviRole__lists > li > ul > li > a::before {
    content: '' !important;
    position: absolute !important;
    left: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 3px !important;
    height: 0 !important;
    background: #23AC38 !important;
    border-radius: 2px !important;
    transition: height 0.25s ease !important;
    display: block !important;
}

.ec-categoryNaviRole__lists > li > ul > li > a:hover {
    background: #f0f9f1 !important;
    color: #23AC38 !important;
    padding-left: 18px !important;
}

.ec-categoryNaviRole__lists > li > ul > li > a:hover::before {
    height: 14px !important;
}

.ec-categoryNaviRole__lists > li > ul > li:has(> ul) > a::after {
    content: '›' !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-left: auto !important;
    padding-left: 12px !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    color: #23AC38 !important;
    background: none !important;
    border: none !important;
    transition: all 0.25s ease !important;
    line-height: 1 !important;
    height: 100% !important;
}

.ec-categoryNaviRole__lists > li > ul > li:has(> ul) > a:hover::after {
    color: #1a8a2c !important;
    transform: translateX(3px) !important;
}

/* 第3階層 */
.ec-categoryNaviRole__lists > li > ul > li > ul {
    position: absolute !important;
    top: -12px !important;
    left: 100% !important;
    min-width: 150px !important;
    background: #fff !important;
    border-radius: 4px !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12) !important;
    padding: 12px 0 12px 8px !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateX(10px) !important;
    transition: all 0.3s ease !important;
    list-style: none !important;
    z-index: 1002 !important;
    margin-left: -8px !important;
}

.ec-categoryNaviRole__lists > li > ul > li:hover > ul {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateX(0) !important;
}

.ec-categoryNaviRole__lists > li > ul > li > ul > li {
    position: relative !important;
    padding-right: 8px !important;
    margin-right: -8px !important;
    list-style: none !important;
}

.ec-categoryNaviRole__lists > li > ul > li > ul > li > a {
    display: flex !important;
    align-items: center !important;
    padding: 9px 14px !important;
    font-size: 12px !important;
    color: #333 !important;
    text-decoration: none !important;
    transition: all 0.25s ease !important;
    white-space: nowrap !important;
    position: relative !important;
}

.ec-categoryNaviRole__lists > li > ul > li > ul > li > a::before {
    content: '' !important;
    position: absolute !important;
    left: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 3px !important;
    height: 0 !important;
    background: #23AC38 !important;
    border-radius: 2px !important;
    transition: height 0.25s ease !important;
    display: block !important;
}

.ec-categoryNaviRole__lists > li > ul > li > ul > li > a:hover {
    background: #f0f9f1 !important;
    color: #23AC38 !important;
    padding-left: 18px !important;
}

.ec-categoryNaviRole__lists > li > ul > li > ul > li > a:hover::before {
    height: 12px !important;
}

.ec-categoryNaviRole__lists > li > ul > li > ul > li:has(> ul) > a::after {
    content: '›' !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-left: auto !important;
    padding-left: 12px !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    color: #23AC38 !important;
    background: none !important;
    border: none !important;
    transition: all 0.25s ease !important;
    line-height: 1 !important;
    height: 100% !important;
}

.ec-categoryNaviRole__lists > li > ul > li > ul > li:has(> ul) > a:hover::after {
    color: #1a8a2c !important;
    transform: translateX(3px) !important;
}

/* 第4階層 */
.ec-categoryNaviRole__lists > li > ul > li > ul > li > ul {
    position: absolute !important;
    top: -12px !important;
    left: 100% !important;
    min-width: 140px !important;
    background: #fff !important;
    border-radius: 4px !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12) !important;
    padding: 12px 0 12px 8px !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateX(10px) !important;
    transition: all 0.3s ease !important;
    list-style: none !important;
    z-index: 1003 !important;
    margin-left: -8px !important;
}

.ec-categoryNaviRole__lists > li > ul > li > ul > li:hover > ul {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateX(0) !important;
}

.ec-categoryNaviRole__lists > li > ul > li > ul > li > ul > li {
    position: relative !important;
    list-style: none !important;
}

.ec-categoryNaviRole__lists > li > ul > li > ul > li > ul > li > a {
    display: flex !important;
    align-items: center !important;
    padding: 9px 14px !important;
    font-size: 12px !important;
    color: #333 !important;
    text-decoration: none !important;
    transition: all 0.25s ease !important;
    white-space: nowrap !important;
    position: relative !important;
}

.ec-categoryNaviRole__lists > li > ul > li > ul > li > ul > li > a::before {
    content: '' !important;
    position: absolute !important;
    left: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 3px !important;
    height: 0 !important;
    background: #23AC38 !important;
    border-radius: 2px !important;
    transition: height 0.25s ease !important;
    display: block !important;
}

.ec-categoryNaviRole__lists > li > ul > li > ul > li > ul > li > a:hover {
    background: #f0f9f1 !important;
    color: #23AC38 !important;
    padding-left: 18px !important;
}

.ec-categoryNaviRole__lists > li > ul > li > ul > li > ul > li > a:hover::before {
    height: 10px !important;
}


/* ============================================
   BLOCK 3: カート・ユーザーナビ
============================================ */

/* ユーザーナビゲーション（PC） */
.ec-headerNav {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    margin-right: 0 !important;
}

.ec-headerNav .ec-headerNav__item {
    font-size: 13px !important;
    margin: 0 !important;
}

.ec-headerNav .ec-headerNav__item a {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 10px 14px !important;
    color: #555 !important;
    text-decoration: none !important;
    border-radius: 4px !important;
    transition: all 0.3s ease !important;
}

.ec-headerNav .ec-headerNav__item a:hover {
    background: #f0f9f1 !important;
    color: #23AC38 !important;
    transform: translateY(-2px) !important;
}

.ec-headerNav .ec-headerNav__itemIcon {
    display: inline-block !important;
    margin: 0 !important;
    font-size: 14px !important;
    color: #23AC38 !important;
    transition: all 0.3s ease !important;
}

.ec-headerNav .ec-headerNav__item a:hover .ec-headerNav__itemIcon {
    transform: scale(1.15) !important;
}

.ec-headerNav .ec-headerNav__itemLink {
    font-weight: 500 !important;
    color: inherit !important;
}

/* カートナビ */
.ec-cartNavi {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 10px 20px !important;
    min-width: 120px !important;
    background: linear-gradient(135deg, #23AC38 0%, #1a8a2c 100%) !important;
    border-radius: 4px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
}

.ec-cartNavi:hover {
    background: linear-gradient(135deg, #1a8a2c 0%, #156d23 100%) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(35, 172, 56, 0.3) !important;
}

.ec-cartNavi__icon {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 28px !important;
    height: 28px !important;
    flex-shrink: 0 !important;
}

.ec-cartNavi__icon img {
    width: 24px !important;
    height: 24px !important;
    filter: brightness(0) invert(1) !important;
}

.ec-cartNavi__badge {
    position: absolute !important;
    top: -8px !important;
    left: 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 18px !important;
    height: 18px !important;
    padding: 0 4px !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    color: #23AC38 !important;
    background: #fff !important;
    border-radius: 9px !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) !important;
    line-height: 1 !important;
}

.ec-cartNavi__price {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #fff !important;
    white-space: nowrap !important;
}

.ec-cartNavi .ec-cartNaviNull,
.ec-cartNavi .ec-cartNaviIsset {
    position: absolute !important;
    top: calc(100% + 8px) !important;
    right: 0 !important;
    z-index: 9999 !important;
}

.ec-cartNavi .ec-cartNaviNull {
    min-width: 200px !important;
    padding: 16px 20px !important;
    background: #fff !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15) !important;
    font-size: 13px !important;
    color: #666 !important;
    text-align: center !important;
}

/* SPナビアイコン（PC非表示） */
.ec-headerRole__navSP {
    display: none !important;
}

.ec-headerNavSP {
    width: 44px !important;
    height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #f8f8f8 !important;
    border-radius: 4px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
}

.ec-headerNavSP:hover,
.ec-headerNavSP:active {
    background: #f0f9f1 !important;
}

.ec-headerNavSP i {
    font-size: 20px !important;
    color: #23AC38 !important;
    transition: all 0.3s ease !important;
}


/* ============================================
   BLOCK 4: ドロワーメニュー（SP）
============================================ */

/* ドロワー基本 */
.ec-drawerRole {
    position: fixed !important;
    top: 0 !important;
    left: -100% !important;
    width: 85% !important;
    max-width: 320px !important;
    height: 100vh !important;
    height: 100dvh !important;
    background: #fff !important;
    z-index: 10000 !important;
    transition: left 0.3s ease !important;
    display: flex !important;
    flex-direction: column !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    box-shadow: 4px 0 24px rgba(35, 172, 56, 0.15) !important;
}

.ec-drawerRole.is_active {
    left: 0 !important;
}

.ec-drawerRole::before {
    content: 'MENU' !important;
    display: block !important;
    padding: 20px !important;
    background: linear-gradient(135deg, #23AC38 0%, #2ecc71 100%) !important;
    color: #fff !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    letter-spacing: 0.1em !important;
    text-align: center !important;
    flex-shrink: 0 !important;
}

.ec-drawerRoleClose,
.ec-drawerRoleClose.is_active,
div.ec-drawerRoleClose,
body .ec-drawerRoleClose {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(35, 172, 56, 0.15) !important;
    background-color: rgba(35, 172, 56, 0.15) !important;
    backdrop-filter: blur(2px) !important;
    -webkit-backdrop-filter: blur(2px) !important;
    z-index: 9999 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: all 0.3s ease !important;
    cursor: pointer !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.ec-drawerRoleClose.is_active {
    opacity: 1 !important;
    visibility: visible !important;
}

/* 閉じるボタン・円形を完全非表示 */
.ec-drawerRoleClose::before,
.ec-drawerRoleClose::after,
.ec-drawerRoleClose.is_active::before,
.ec-drawerRoleClose.is_active::after,
body .ec-drawerRoleClose::before,
body .ec-drawerRoleClose::after,
.ec-drawerRoleClose *,
.ec-drawerRoleClose i,
.ec-drawerRoleClose .fa,
.ec-drawerRoleClose .fas,
.ec-drawerRoleClose .fa-times,
.ec-drawerRoleClose span {
    display: none !important;
    content: none !important;
    background: none !important;
    background-color: transparent !important;
    opacity: 0 !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    position: absolute !important;
    left: -9999px !important;
}

/* ドロワー内検索 */
.ec-drawerRole .ec-headerSearch,
.ec-drawerRole .ec-headerSearch__category {
    background: #fff !important;
    padding: 12px 16px !important;
}

.ec-drawerRole .ec-headerSearch__category .ec-select,
.ec-drawerRole .ec-headerSearch__category .ec-select select {
    font-size: 12px !important;
    color: #fff !important;
    background: #23AC38 !important;
    border: none !important;
    border-radius: 4px !important;
    padding: 8px 12px !important;
}

.ec-drawerRole .ec-headerSearch__category .ec-select::after {
    border-color: #fff transparent transparent transparent !important;
}

/* ドロワー内ヘッダーリンク（カートを見る等） */
.ec-drawerRole .ec-headerLinkArea {
    background: #fff !important;
    padding: 16px !important;
    margin: 0 !important;
}

.ec-drawerRole .ec-headerLinkArea .ec-headerLink__list {
    background: #fff !important;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
}

/* aタグ直接指定（.ec-headerLink__item がaタグの場合） */
.ec-drawerRole a.ec-headerLink__item {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 16px 20px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #23AC38 !important;
    text-decoration: none !important;
    background: #f8fdf9 !important;
    border: 1px solid #e8f5e9 !important;
    border-radius: 4px !important;
    margin-bottom: 8px !important;
    transition: all 0.2s ease !important;
}

.ec-drawerRole a.ec-headerLink__item:last-child {
    margin-bottom: 0 !important;
}

.ec-drawerRole a.ec-headerLink__item:hover,
.ec-drawerRole a.ec-headerLink__item:active {
    background: #e8f5e9 !important;
    color: #1a8a2c !important;
}

.ec-drawerRole a.ec-headerLink__item i,
.ec-drawerRole a.ec-headerLink__item .fa,
.ec-drawerRole a.ec-headerLink__item .fas {
    color: #23AC38 !important;
    font-size: 16px !important;
    width: 20px !important;
    text-align: center !important;
}

/* li内のaタグの場合 */
.ec-drawerRole .ec-headerLinkArea .ec-headerLink__list li {
    background: #f8fdf9 !important;
    border: 1px solid #e8f5e9 !important;
    border-radius: 4px !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

.ec-drawerRole .ec-headerLinkArea .ec-headerLink__list li a {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 16px 20px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #23AC38 !important;
    text-decoration: none !important;
    background: transparent !important;
    border: none !important;
    border-radius: 4px !important;
}

.ec-drawerRole .ec-headerLinkArea .ec-headerLink__list li a:hover,
.ec-drawerRole .ec-headerLinkArea .ec-headerLink__list li a:active {
    background: #e8f5e9 !important;
    color: #1a8a2c !important;
}

.ec-drawerRole .ec-headerLinkArea .ec-headerLink__list li a i {
    color: #23AC38 !important;
    font-size: 16px !important;
    width: 20px !important;
    text-align: center !important;
}

/* ドロワー内ナビ */
.ec-drawerRole .ec-headerNav {
    display: flex !important;
    flex-direction: column !important;
    padding: 16px !important;
    gap: 8px !important;
    background: #fff !important;
    border-bottom: 2px solid #f0f9f1 !important;
}

.ec-drawerRole .ec-headerNav__item {
    width: 100% !important;
    background: #f8fdf9 !important;
    border: 1px solid #e8f5e9 !important;
    border-radius: 4px !important;
}

.ec-drawerRole .ec-headerNav__item a {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 14px 16px !important;
    border-radius: 4px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #333 !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
    background: transparent !important;
}

.ec-drawerRole .ec-headerNav__item a:hover,
.ec-drawerRole .ec-headerNav__item a:active {
    background: #e8f5e9 !important;
    color: #23AC38 !important;
}

.ec-drawerRole .ec-headerNav__itemIcon {
    color: #23AC38 !important;
    font-size: 18px !important;
}

/* ドロワー内カテゴリ */
.ec-drawerRole .ec-categoryNaviRole {
    display: block !important;
    padding: 0 !important;
    background: #fff !important;
}

.ec-drawerRole .ec-categoryNaviRole__title {
    display: none !important;
}

.ec-drawerRole .ec-categoryNaviRole__item {
    position: static !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
    margin-top: 0 !important;
    background: #fff !important;
}

.ec-drawerRole .ec-categoryNaviRole__lists {
    padding: 12px 16px !important;
    list-style: none !important;
    background: #fff !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
}

/* ドロワー第1階層 */
.ec-drawerRole .ec-categoryNaviRole__lists > li {
    padding-right: 0 !important;
    margin-right: 0 !important;
    margin-bottom: 0 !important;
    background: #f8fdf9 !important;
    border: 1px solid #e8f5e9 !important;
    border-radius: 4px !important;
}

.ec-drawerRole .ec-categoryNaviRole__lists > li > a {
    display: flex !important;
    align-items: center !important;
    padding: 14px 16px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    border-radius: 4px !important;
    border: none !important;
    color: #333 !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
    background: transparent !important;
}

.ec-drawerRole .ec-categoryNaviRole__lists > li > a::before {
    content: '●' !important;
    font-size: 8px !important;
    color: #23AC38 !important;
    margin-right: 12px !important;
    flex-shrink: 0 !important;
    position: static !important;
    transform: none !important;
    width: auto !important;
    height: auto !important;
    background: none !important;
    border-radius: 0 !important;
}

.ec-drawerRole .ec-categoryNaviRole__lists > li > a:hover,
.ec-drawerRole .ec-categoryNaviRole__lists > li > a:active {
    background: #e8f5e9 !important;
    color: #23AC38 !important;
}

/* ドロワー第2階層 */
.ec-drawerRole .ec-categoryNaviRole__lists > li > ul {
    position: static !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    box-shadow: none !important;
    min-width: 100% !important;
    padding: 8px 8px 8px 20px !important;
    border-radius: 0 !important;
    margin-left: 0 !important;
    list-style: none !important;
    background: #fff !important;
    border-left: 3px solid #23AC38 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
}

.ec-drawerRole .ec-categoryNaviRole__lists > li > ul > li {
    padding-right: 0 !important;
    margin-right: 0 !important;
    background: #fafdfb !important;
    border: 1px solid #e8f5e9 !important;
    border-radius: 4px !important;
}

.ec-drawerRole .ec-categoryNaviRole__lists > li > ul > li > a {
    display: flex !important;
    align-items: center !important;
    padding: 10px 14px !important;
    font-size: 14px !important;
    border-radius: 4px !important;
    border: none !important;
    color: #555 !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
    background: transparent !important;
}

.ec-drawerRole .ec-categoryNaviRole__lists > li > ul > li > a::before {
    content: '○' !important;
    font-size: 6px !important;
    color: #23AC38 !important;
    margin-right: 10px !important;
    flex-shrink: 0 !important;
    position: static !important;
    transform: none !important;
    width: auto !important;
    height: auto !important;
    background: none !important;
    border-radius: 0 !important;
}

.ec-drawerRole .ec-categoryNaviRole__lists > li > ul > li > a:hover,
.ec-drawerRole .ec-categoryNaviRole__lists > li > ul > li > a:active {
    background: #e8f5e9 !important;
    color: #23AC38 !important;
}

/* ドロワー第3階層 */
.ec-drawerRole .ec-categoryNaviRole__lists > li > ul > li > ul {
    position: static !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    box-shadow: none !important;
    min-width: 100% !important;
    padding: 6px 6px 6px 16px !important;
    border-radius: 0 !important;
    margin-left: 0 !important;
    list-style: none !important;
    background: #fff !important;
    border-left: 2px solid #81c784 !important;
    margin-top: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
}

.ec-drawerRole .ec-categoryNaviRole__lists > li > ul > li > ul > li {
    padding-right: 0 !important;
    margin-right: 0 !important;
    background: #f5faf6 !important;
    border: 1px solid #e8f5e9 !important;
    border-radius: 4px !important;
}

.ec-drawerRole .ec-categoryNaviRole__lists > li > ul > li > ul > li > a {
    display: flex !important;
    align-items: center !important;
    padding: 9px 12px !important;
    font-size: 13px !important;
    border-radius: 4px !important;
    border: none !important;
    color: #666 !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
    background: transparent !important;
}

.ec-drawerRole .ec-categoryNaviRole__lists > li > ul > li > ul > li > a::before {
    content: '−' !important;
    font-size: 10px !important;
    color: #81c784 !important;
    margin-right: 8px !important;
    flex-shrink: 0 !important;
    position: static !important;
    transform: none !important;
    width: auto !important;
    height: auto !important;
    background: none !important;
    border-radius: 0 !important;
}

.ec-drawerRole .ec-categoryNaviRole__lists > li > ul > li > ul > li > a:hover,
.ec-drawerRole .ec-categoryNaviRole__lists > li > ul > li > ul > li > a:active {
    background: #e8f5e9 !important;
    color: #23AC38 !important;
}

/* ドロワー第4階層 */
.ec-drawerRole .ec-categoryNaviRole__lists > li > ul > li > ul > li > ul {
    position: static !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    box-shadow: none !important;
    min-width: 100% !important;
    padding: 4px 4px 4px 12px !important;
    border-radius: 0 !important;
    margin-left: 0 !important;
    list-style: none !important;
    background: #fff !important;
    border-left: 2px solid #a5d6a7 !important;
    margin-top: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
}

.ec-drawerRole .ec-categoryNaviRole__lists > li > ul > li > ul > li > ul > li {
    background: #f0f7f1 !important;
    border: 1px solid #e8f5e9 !important;
    border-radius: 4px !important;
}

.ec-drawerRole .ec-categoryNaviRole__lists > li > ul > li > ul > li > ul > li > a {
    display: flex !important;
    align-items: center !important;
    padding: 8px 10px !important;
    font-size: 12px !important;
    border-radius: 4px !important;
    border: none !important;
    color: #777 !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
    background: transparent !important;
}

.ec-drawerRole .ec-categoryNaviRole__lists > li > ul > li > ul > li > ul > li > a::before {
    content: '·' !important;
    font-size: 14px !important;
    color: #a5d6a7 !important;
    margin-right: 6px !important;
    flex-shrink: 0 !important;
    position: static !important;
    transform: none !important;
    width: auto !important;
    height: auto !important;
    background: none !important;
    border-radius: 0 !important;
}

.ec-drawerRole .ec-categoryNaviRole__lists > li > ul > li > ul > li > ul > li > a:hover,
.ec-drawerRole .ec-categoryNaviRole__lists > li > ul > li > ul > li > ul > li > a:active {
    background: #e8f5e9 !important;
    color: #23AC38 !important;
}

/* ドロワー内矢印非表示 */
.ec-drawerRole .ec-categoryNaviRole__lists li:has(> ul) > a::after {
    display: none !important;
    content: none !important;
}

/* ドロワー下部メニュー */
.ec-drawerRole .ec-drawerRole__nav {
    background: #fff !important;
    padding: 16px !important;
    border-top: 2px solid #f0f9f1 !important;
    margin-top: auto !important;
}

.ec-drawerRole .ec-drawerRole__nav ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    background: #fff !important;
}

.ec-drawerRole .ec-drawerRole__nav li {
    background: #f8fdf9 !important;
    border: 1px solid #e8f5e9 !important;
    border-radius: 4px !important;
}

.ec-drawerRole .ec-drawerRole__nav a {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 14px 16px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #333 !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
    background: transparent !important;
    border-radius: 4px !important;
}

.ec-drawerRole .ec-drawerRole__nav a i,
.ec-drawerRole .ec-drawerRole__nav a .fas,
.ec-drawerRole .ec-drawerRole__nav a .fa {
    color: #23AC38 !important;
    font-size: 16px !important;
    width: 20px !important;
    text-align: center !important;
}

.ec-drawerRole .ec-drawerRole__nav a:hover,
.ec-drawerRole .ec-drawerRole__nav a:active {
    background: #e8f5e9 !important;
    color: #23AC38 !important;
}


/* ============================================
   BLOCK 5: レスポンシブ（SP対応）
============================================ */
@media (max-width: 768px) {
    body {
        padding-top: 60px !important;
    }
    
    .ec-headerRole {
        height: 60px !important;
        padding: 0 12px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
    }
    
    /* ロゴ中央配置 */
    .ec-headerRole .ec-headerTitle {
        position: absolute !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        margin: 0 !important;
        font-size: 14px !important;
        text-align: center !important;
    }
    
    .ec-headerRole .ec-headerTitle a {
        font-size: 14px !important;
        white-space: nowrap !important;
    }
    
    /* PC用ナビ非表示 */
    .ec-headerRole .ec-categoryNaviRole,
    .ec-headerRole .ec-headerNav {
        display: none !important;
    }
    
    /* SPナビ表示（左側） */
    .ec-headerRole__navSP {
        display: flex !important;
        align-items: center !important;
        order: -1 !important;
        margin-right: 0 !important;
        flex-shrink: 0 !important;
        position: static !important;
    }
    
    .ec-headerNavSP {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 40px !important;
        height: 40px !important;
        background: #f0f9f1 !important;
        border-radius: 8px !important;
        cursor: pointer !important;
        transition: all 0.3s ease !important;
        border: 1px solid #e0f0e3 !important;
    }
    
    .ec-headerNavSP:hover,
    .ec-headerNavSP:active {
        background: #e0f0e3 !important;
    }
    
    .ec-headerNavSP i,
    .ec-headerNavSP .fas,
    .ec-headerNavSP .fa,
    .ec-headerNavSP .fa-bars {
        display: block !important;
        font-size: 18px !important;
        color: #23AC38 !important;
        line-height: 1 !important;
    }
    
    /* カートナビ（右側） */
    .ec-headerRole__cart {
        margin-left: auto !important;
        flex-shrink: 0 !important;
        position: static !important;
    }
    
    .ec-cartNavi {
        padding: 8px 12px !important;
        border-radius: 8px !important;
        gap: 6px !important;
        min-width: auto !important;
        max-width: 90px !important;
    }
    
    .ec-cartNavi__icon {
        width: 22px !important;
        height: 22px !important;
        position: relative !important;
    }
    
    .ec-cartNavi__icon img {
        width: 20px !important;
        height: 20px !important;
    }
    
    .ec-cartNavi__price {
        display: none !important;
    }
    
    .ec-cartNavi__badge {
        min-width: 18px !important;
        height: 18px !important;
        font-size: 10px !important;
        top: -8px !important;
        right: -8px !important;
        left: auto !important;
        padding: 0 4px !important;
        background: #fff !important;
        color: #23AC38 !important;
        border: 2px solid #23AC38 !important;
        box-shadow: none !important;
    }
    
    .ec-headerRole .ec-headerNaviRole {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        margin: 0 !important;
        width: auto !important;
    }
}