/* ランキング枠の順位番号・王冠アイコンを非表示にする */
.__num {
  display: none !important;
}

/* ランキングの順位アイコン・数字の親要素ごと非表示にする */
.__icon {
  display: none !important;
}

/* サイドメニュー（aside.aside）全体をグレーにする */
aside.aside {
  background-color: #f5f5f5 !important; /* 背景色を薄いグレーに設定 */
  padding: 15px !important;              /* 内側に余白を作る */
  box-sizing: border-box !important;
}

/* サイドメニュー内部の個別ブロック（カテゴリ枠など）に白背景が入っている場合の上書き */
aside.aside .box,
aside.aside .panel,
aside.aside .widget,
aside.aside .side-box,
aside.aside section,
aside.aside div {
  background-color: transparent !important; /* 内部の白背景を透過させる */
}

/* 新しいボタンの色を直接指定する場合 */
.__custom-link a.__link.c-button {
  background-color: #333333 !important; /* ログインボタンと同じ背景色 */
  color: #ffffff !important;             /* 文字色（白） */
  border-color: #333333 !important;        /* 枠線 */
  display: block !important;
  text-align: center !important;
  padding: 10px 0 !important;
}

.__custom-link a.__link.c-button span {
  color: #ffffff !important;
}

/* --- ログインボタン（および追加したボタン）を黒背景・白文字にする --- */

/* 1. ボタン枠本体のスタイル変更 */
.__login-link a.__link.c-button,
.__login-link a.__link,
.__login-link .c-button {
  background-color: #000000 !important; /* 背景色：黒 */
  border-color: #000000 !important;     /* 枠線色：黒 */
  color: #ffffff !important;            /* 文字色：白 */
  transition: opacity 0.2s ease !important;
}

/* 2. ボタン内部の文字（span要素）のスタイル変更 */
.__login-link a.__link.c-button span,
.__login-link a.__link span,
.__login-link .c-button span {
  color: #ffffff !important;            /* 文字色：白 */
}

/* 3. マウスを乗せた時（ホバー時）の挙動（少し透過させてクリック感を出します） */
.__login-link a.__link.c-button:hover,
.__login-link a.__link:hover {
  background-color: #333333 !important; /* マウスオン時：ダークグレー */
  opacity: 0.85 !important;
}

/* --- ログインボタンおよび追加ボタンを楕円（ピル型）にする --- */

.__login-link a.__link.c-button,
.__login-link a.__link,
.__login-link .c-button,
.__custom-link a.__link.c-button {
  border-radius: 50px !important; /* 角丸を大きくして完全な楕円にする */
  overflow: hidden !important;
}

/* --- フッター全体の文字サイズを小さく調整 --- */

/* 1. ナビゲーションメニュー（会社概要・ご利用案内など）の文字 */
.footer .__nav ul li a {
  font-size: 11px !important; /* 標準より小さめに設定 */
}

/* 2. コピーライト（Copyright... / Powered by...）の文字 */
.footer .__copyright,
.footer .__copyright a {
  font-size: 10px !important; /* さらに一回り小さく調整 */
}

/* 3. 各メニュー間の余白も少し詰めてバランスを調整 */
.footer .__nav ul li {
  margin-bottom: 4px !important;
}

/* --- フッター全体のテキスト・メニューを中央揃えにする --- */

/* 1. フッター全体のテキスト揃えを中央にする */
footer.footer,
.footer {
  text-align: center !important;
}

/* 2. ナビゲーションメニュー（ul / li）を中央に寄せる */
.footer .__nav {
  text-align: center !important;
}

.footer .__nav ul {
  display: flex !important;
  justify-content: center !important; /* 横並び要素を中央に寄せる */
  flex-wrap: wrap !important;        /* 折り返しに対応 */
  padding-left: 0 !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}

/* 3. コピーライト部分の中央揃え */
.footer .__copyright {
  text-align: center !important;
}

/* --- PC用ヘッダーナビゲーションの文字を太くする --- */
.gnav-pc .__menu ul li a {
  font-weight: bold !important; /* 文字を太字にする */
  letter-spacing: 0.05em !important; /* 文字間隔をほんの少し広げて見やすく調整 */
}

/* --- ヘッダー全体を画面上部に追従・固定する --- */
header,
.header,
.__header {
  position: sticky !important;
  top: 0 !important;
  z-index: 999 !important;
  background-color: #ffffff !important;
  width: 100% !important;
}

/* --- サイドメニュー全体の文字サイズを小さくする --- */

/* 1. サイドメニュー内のリンクテキスト全般 */
aside a,
.aside a,
.sidebar a,
[class*="side"] a {
  font-size: 12px !important; /* 標準（14px前後）より小さめに調整 */
}

/* 2. カテゴリ一覧などのリスト項目テキスト */
aside ul li,
.aside ul li,
.sidebar ul li {
  font-size: 12px !important;
  line-height: 1.4 !important;
}

/* 3. サイドメニューの見出し（「商品カテゴリ」などのタイトル） */
aside .title,
aside h2,
aside h3,
.aside [class*="title"],
.aside [class*="heading"] {
  font-size: 13px !important; /* 見出しも少し小ぶりに調整 */
}

/* --- 「おすすめ」ラベルを「再入荷」に変更する --- */

/* 1. ラベル全体の表示設定（文字サイズ調整） */
.__label--recommend {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 2px 8px !important;
}

/* 2. 元の文字を消し、「再入荷」を表示する */
.__label--recommend span {
  font-size: 0 !important; /* 元の文字を非表示 */
}

.__label--recommend span::before {
  content: "再入荷" !important; /* 表示する文字 */
  font-size: 11px !important;   /* 文字サイズ */
  font-weight: bold !important;
  color: #FFFFFF !important;    /* 文字色（黒） */
}

/* --- 1. ページタイトルの見出し（H1）を「商品一覧」に変更 --- */
.c-heading .__title,
.c-h1,
h1.__h1 {
  font-size: 0 !important; /* 元の文字を非表示 */
}

.c-heading .__title::before,
.c-h1::before,
h1.__h1::before {
  content: "商品一覧" !important; /* 新しいタイトル */
  font-size: 24px !important;       /* 元の見出しサイズに合わせて調整 */
  font-weight: bold !important;
  color: #333333 !important;        /* 文字色 */
  display: block !important;
}

/* --- 2. パンくずリスト（HOME > おすすめ商品）の文字を変更 --- */
.c-breadcrumb ul li span {
  font-size: 0 !important; /* 元の文字を非表示 */
}

.c-breadcrumb ul li span::before {
  content: "商品一覧" !important; /* 新しいテキスト */
  font-size: 12px !important;       /* パンくずの文字サイズ */
  color: #666666 !important;
  display: inline-block !important;
}

/* --- TOPページの「すべてのおすすめ商品を見る」リンクのテキスト変更 --- */
.__more.c-more a[href*="status=recommend"] {
  font-size: 0 !important; /* 元の「すべてのおすすめ商品を見る」テキストを非表示 */
}

.__more.c-more a[href*="status=recommend"]::before {
  content: "▶︎すべての再入荷商品を見る" !important; /* 新しいテキスト */
  font-size: 14px !important;                     /* 元のリンク文字サイズに合わせて調整 */
  display: inline-block !important;
}

<script>
document.addEventListener('DOMContentLoaded', function() {
  // ロゴ部分のaタグから target="_blank" を除去する
  var logoLinks = document.querySelectorAll('header a, .header a, [class*="logo"] a');
  logoLinks.forEach(function(link) {
    if (link.getAttribute('target') === '_blank') {
      link.removeAttribute('target');
    }
  });
});
</script>

/* 1. 元のテキスト（おすすめ）を非表示化 */
.__item--recommend,
.__item--recommend span {
    font-size: 0 !important;
}

/* 2. li側の擬似要素を完全にクリア */
.__item--recommend::before,
.__item--recommend::after {
    content: "" !important;
    display: none !important;
}

/* 3. spanの ::before もクリア */
.__item--recommend span::before {
    content: "" !important;
    display: none !important;
}

/* 4. spanの ::after だけに「再入荷」を表示 */
.__item--recommend span::after {
    content: "再入荷" !important;
    font-size: 12px !important; /* 表示したい文字サイズ */
    color: #ffffff !important;   /* 文字色 */
}


/* 見出しブロック自体に擬似要素を追加 */
.__block--text .__heading::after {
  content: "（直送商品はエンドユーザー様のお届け先情報はこちらに入力ください）" !important;
  display: inline-block !important;
  font-size: 14px !important;
  color: #d9534f !important;
  font-weight: normal !important;
  margin-left: 8px !important;
}