/* ==========================================================================
   1. ロゴ・サブテキストの調整（追加部分）
   ========================================================================== */
/* ロゴ画像を半分程度のサイズに制限 */
.custom-logo {
    max-width: 650px !important; /* 元の350pxからさらに縮小 */
    height: auto;
    display: block;
    margin: 0 auto 5px;
}

/* ロゴ下の「ムラオカフーズダイレクト」を半分サイズ・薄い緑に */
.logo-subtext {
    display: block;
    text-align: center;
    font-size: 0.8rem !important; /* サイズを小さく */
    color: #88a68a !important;    /* 薄い緑系統 */
    font-weight: normal !important;
    letter-spacing: 0.2em;
    margin-top: 5px;
}

/* ロゴ周りの余白を最小限に */
.ec-headerRole__title {
    padding-top: 10px !important;
    padding-bottom: 5px !important;
}

/* ==========================================================================
   3. カテゴリーナビ：背景を消してボタンを目立たせる
   ========================================================================== */
.ec-categoryNaviRole {
    background-color: transparent !important; /* 背景の薄緑を削除 */
    border-top: none !important;
    border-bottom: 2px solid #2e7d32 !important; /* 下のラインだけ緑で残す */
    padding: 10px 0 !important;
    margin-top: 0 !important;
}

.ec-categoryNaviRole__item {
    background-color: transparent !important;
    margin: 5px 8px !important;
}

.ec-categoryNaviRole__link {
    display: block;
    padding: 8px 18px !important;
    background-color: #ffffff !important;
    color: #2e7d32 !important;
    border: 2px solid #2e7d32 !important;
    border-radius: 4px !important;
    font-weight: bold !important;
    text-decoration: none !important;
    transition: all 0.3s ease;
    box-shadow: 2px 2px 0px rgba(46, 125, 50, 0.1);
}

.ec-categoryNaviRole__link:hover {
    background-color: #2e7d32 !important;
    color: #ffffff !important;
}

/* ==========================================================================
   4. フッター・レスポンシブ
   ========================================================================== */
.ec-footerRole { background-color: #2e7d32 !important; color: #fff; }
.ec-footerRole a { color: #fff !important; }

@media screen and (max-width: 768px) {
    .custom-logo { max-width: 180px !important; }
    .ec-categoryNaviRole__link { padding: 6px 12px !important; font-size: 11px !important; }
}