@charset "utf-8";
/* ============================================================
   main-category-fix.css
   #main-category 配下で「全称リセット」に潰されるコンポーネントを復旧する

   【原因】common.css に次の全称リセットがある：
     #wrapper #contents #main-column #main-category * { margin:0; padding:0; ... }
   セレクタの強さは ID 4個。対する .btn の定義は
     #wrapper #contents #main-column .btn   （ID 3個 + クラス1個）
   CSS は ID の数を先に比べるため 4 > 3 でリセットが勝ち、
   ボタンの padding:18px 30px が padding:0 に潰される
   ＝「いつの間にか余白が無くなり窮屈になったボタン」の正体。

   【対処】本ファイルは ID 4個 + クラス1個（＝リセットより強い）で本来値を戻す。
   既存のクラス名・定義は一切変更しないため、他ページへの影響は無い
   （このファイルを読み込んだページでのみ効く）。

   【恒久対処】本来は scss/_components.scss の .btn を #main-category まで
   スコープさせるのが筋。SCSS のビルド環境（Compass→Dart Sass）復旧後に反映する。
   ============================================================ */

/* ------------------------------------------------------------
   1. ボタン：padding が 0 に潰れる問題
   ------------------------------------------------------------ */
#wrapper #contents #main-column #main-category .btn,
#wrapper #contents #main-column #main-category .btn-base,
#wrapper #contents #main-column #main-category .btn-blue,
#wrapper #contents #main-column #main-category .btn-orange,
#wrapper #contents #main-column #main-category .btn-green,
#wrapper #contents #main-column #main-category .btn-red,
#wrapper #contents #main-column #main-category .btn-gray-dark {
  padding: 18px 30px 18px 24px;
}

/* 文字は 14px だとやや小さいので 15px に。
   ※本ファイルは .btn を ID4個で指定するため、common.css 側の
   .btn-small(12px) / .btn-large(16px) を巻き込んで潰してしまう。
   そのため下でサイズ修飾子の font-size も同じ強さで指定し直している */
#wrapper #contents #main-column #main-category .btn,
#wrapper #contents #main-column #main-category .btn-base,
#wrapper #contents #main-column #main-category .btn-blue,
#wrapper #contents #main-column #main-category .btn-orange,
#wrapper #contents #main-column #main-category .btn-green,
#wrapper #contents #main-column #main-category .btn-red,
#wrapper #contents #main-column #main-category .btn-gray-dark {
  font-size: 15px;
}

/* サイズ修飾子は基本ボタンより後に置き、上書きさせる */
#wrapper #contents #main-column #main-category .btn-small {
  padding: 8px 16px;
  font-size: 13px;
}

#wrapper #contents #main-column #main-category .btn-large {
  padding: 16px 32px;
  font-size: 17px;
}

/* ------------------------------------------------------------
   1-2. ホバー挙動を抑制する

   common.css のホバーは同時に5つ効いており過剰だった：
     ① transform:translateY(-1px)          … 1px 浮く
     ② box-shadow:0 4px 8px rgba(0,0,0,.15) … 影が落ちる
     ③ opacity:.7                          … 全体が薄くなる
     ④ background が少し濃くなる
     ⑤ border-color:#919191 → #ced4da       … 枠線が薄くなる

   特に⑤は「枠線が消える」ように見える正体。実際には消えておらず、
   ホバー後の背景(#e9ecef〜#dee2e6)とほぼ同じ明るさの色に変わるため
   輪郭が溶けて見えていた。

   ここでは①②③を止め、④の背景変化と⑤の枠線を
   「わずかに濃くなる」方向へ揃える。動きの合図を1系統に絞る狙い。
   ------------------------------------------------------------ */
#wrapper #contents #main-column #main-category .btn:hover,
#wrapper #contents #main-column #main-category .btn-base:hover,
#wrapper #contents #main-column #main-category .btn-blue:hover,
#wrapper #contents #main-column #main-category .btn-orange:hover,
#wrapper #contents #main-column #main-category .btn-green:hover,
#wrapper #contents #main-column #main-category .btn-red:hover,
#wrapper #contents #main-column #main-category .btn-gray-dark:hover {
  transform: none;
  box-shadow: none;
  opacity: 1;
}

/* btn-base は「ほんの少し沈む」だけにする。枠線は消さず、むしろ少し濃く */
#wrapper #contents #main-column #main-category .btn-base:hover {
  background: linear-gradient(135deg, #eceef0 0%, #dfe3e6 100%);
  border-color: #6f6f6f;
}

/* 押した瞬間だけは反応が分かるよう、ごくわずかに沈ませる */
#wrapper #contents #main-column #main-category .btn:active,
#wrapper #contents #main-column #main-category .btn-base:active {
  transform: translateY(1px);
  box-shadow: none;
}

/* 矢印付き（btn-base 等）は右端に ::after が絶対配置されるため、
   文字と矢印が重ならないよう右側だけ余白を厚くする */
#wrapper #contents #main-column #main-category .btn-base {
  padding-right: 34px;
}

/* ------------------------------------------------------------
   2. ico-list（.sub-ranking 配下）：padding / font-size の定義が欠落
   common.css には .ranking-section 版（padding:5px 0・font-size:11px あり）と
   .sub-ranking 版（margin と border-radius のみ）の2系統があり、
   後者は padding をリセットに奪われて色帯が潰れる。欠けている分だけ補う。
   ------------------------------------------------------------ */
#wrapper #contents #main-column #main-category .sub-ranking .ranking-in .ranking-box .ico-list {
  padding: 0;
  list-style: none;
}

#wrapper #contents #main-column #main-category .sub-ranking .ranking-in .ranking-box .ico-list li {
  padding: 4px 2px;
  font-size: 11px;
  line-height: 1.3;
  list-style-type: none;
}

/* ------------------------------------------------------------
   3. 【暫定ユーティリティ】画像の最大高さ u-max-h-{px}

   _utilities_atomic.scss には .u-max-h-36 / .u-max-h-44 しか無く、
   「製品写真の背を少し抑える」程度の 100〜300px 級の指定ができない。
   本来は scss/_utilities_atomic.scss に足すべきものだが、
   SCSS のビルド環境（Compass→Dart Sass）が停止中のため暫定でここに置く。

   ★ビルド復旧後：この節をそのまま _utilities_atomic.scss へ移し、本節は削除する。
     クラス名は変えないため、HTML 側の書き換えは一切不要。

   幅は自動で追従するので縦横比は崩れない。値を変えたいときは
   HTML のクラス名の数字を差し替えるだけでよい（例 u-max-h-200 → u-max-h-240）。
   ------------------------------------------------------------ */
/* ------------------------------------------------------------
   3-2.【暫定ユーティリティ】.grid-cols-2-sm2（PC 2列 / SP も 2列のまま）

   common.css の .grid-cols-2 は 767px 以下で 1 列に崩れる仕様。
   一方 SP でも 2 列を保つ組み合わせは .grid-cols-4-sm2（PC4/SP2）と
   .grid-cols-3-sm2（PC3/SP2）しか用意されておらず、
   「PC 2列・SP 2列」だけが穴になっている。同じ命名規則で補う。

   ★ビルド復旧後：scss/_responsive.scss の grid セクションへ移し、本節は削除する。
     クラス名は変えないため HTML の書き換えは不要。
   ------------------------------------------------------------ */
.grid.grid-cols-2-sm2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media only screen and (max-width: 767px) {
  .grid.grid-cols-2-sm2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.u-max-h-160 { max-height: 160px !important; width: auto !important; }
.u-max-h-180 { max-height: 180px !important; width: auto !important; }
.u-max-h-200 { max-height: 200px !important; width: auto !important; }
.u-max-h-220 { max-height: 220px !important; width: auto !important; }
.u-max-h-240 { max-height: 240px !important; width: auto !important; }

/* ランキング枠は width:19% と狭いため、SP では文字をさらに詰める */
@media only screen and (max-width: 767px) {
  #wrapper #contents #main-column #main-category .sub-ranking .ranking-in .ranking-box .ico-list li {
    padding: 3px 1px;
    font-size: 10px;
  }

  /* ボタンも SP では左右余白を控えめに（横幅を食い過ぎないように） */
  #wrapper #contents #main-column #main-category .btn,
  #wrapper #contents #main-column #main-category .btn-base,
  #wrapper #contents #main-column #main-category .btn-blue,
  #wrapper #contents #main-column #main-category .btn-orange,
  #wrapper #contents #main-column #main-category .btn-green,
  #wrapper #contents #main-column #main-category .btn-red,
  #wrapper #contents #main-column #main-category .btn-gray-dark {
    padding: 14px 20px 14px 16px;
  }

  #wrapper #contents #main-column #main-category .btn-base {
    padding-right: 28px;
  }
}