/* アリ特 トップ2列レイアウト（SSR版） */
#__colWrap{ display:flex; gap:24px; align-items:flex-start; margin-top:12px; }
#__colWrap .col{ flex:1; min-width:0; border-radius:6px; overflow:hidden; }
#__colWrap h3.colhead{ border-left:4px solid; margin:0 0 8px; font-size:18px; font-weight:800; padding:8px 14px; line-height:1.3; }
#__colWrap h3.colhead.sale{ border-left-color:#ff5a1f; }
#__colWrap h3.colhead.deal{ border-left-color:#2f8df0; }
/* dux の widget 見出しが付ける青い縦バー(::before, left:20px)が先頭文字に重なるため除去 */
#__colWrap h3.colhead::before, #__colWrap h3.colhead::after{ content:none !important; display:none !important; }
#__colWrap .colbody{ padding:0 16px; }
/* サムネは絶対配置・本文は padding-left で逃がす（float非依存＝Safari でもタイトルが画像に重ならない） */
#__colWrap article.excerpt{ width:100% !important; margin:0 !important; padding:14px 0 14px 120px !important; box-sizing:border-box; min-height:100px; overflow:hidden; position:relative; cursor:pointer; }
#__colWrap .focus{ position:absolute !important; left:0 !important; top:14px !important; float:none !important; width:108px !important; height:72px !important; margin:0 !important; border-radius:8px; overflow:hidden; }
#__colWrap .focus img{ width:108px !important; height:72px !important; object-fit:cover; margin:0 !important; }
#__colWrap header h2{ font-size:14px !important; line-height:1.45 !important; margin:0 0 4px !important; }
#__colWrap header h2 a{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
#__colWrap p.note{ display:none !important; }
#__colWrap .sticky-icon{ display:none !important; }

/* カードのジャンルタグ（タイトル直下・タップでタグページへ） */
#__colWrap .ex-tags{ display:flex; flex-wrap:wrap; gap:5px; margin:5px 0 1px; }
#__colWrap .ex-tag{ font-size:10px; line-height:1; padding:3px 8px; border-radius:999px; background:#eef0f6; color:#5b6472; text-decoration:none; white-space:nowrap; }
#__colWrap .ex-tag:active{ opacity:.65; }
html.darking #__colWrap .ex-tag{ background:#232b37; color:#9aa6b6; }
/* ジャンル別の淡い色分け（ライト） */
#__colWrap .ex-tag--blue{ background:#e8f0fe; color:#1b59b3; }
#__colWrap .ex-tag--purple{ background:#f1e9fd; color:#6e3fc0; }
#__colWrap .ex-tag--teal{ background:#e0f4f0; color:#0e7a6a; }
#__colWrap .ex-tag--indigo{ background:#e9ebfd; color:#3d49b5; }
#__colWrap .ex-tag--green{ background:#e7f6ea; color:#2c8a45; }
#__colWrap .ex-tag--amber{ background:#fbf0db; color:#976515; }
/* ジャンル別の色分け（ダーク） */
html.darking #__colWrap .ex-tag--blue{ background:#14253c; color:#7ea8e6; }
html.darking #__colWrap .ex-tag--purple{ background:#271a3e; color:#b794f0; }
html.darking #__colWrap .ex-tag--teal{ background:#103029; color:#5ec2b0; }
html.darking #__colWrap .ex-tag--indigo{ background:#1c2140; color:#8b95ff; }
html.darking #__colWrap .ex-tag--green{ background:#15301c; color:#6cc985; }
html.darking #__colWrap .ex-tag--amber{ background:#2e2410; color:#d9a955; }

/* ===== ヘッダーをすりガラス風（控えめな透明度＋ぼかし）。home専用CSS。
   ※position は dux 標準(nav_fixed)に任せる。独自 sticky を入れると iOS で二重追従し位置が動くため入れない。 ===== */
.header{ background:rgba(255,255,255,.85) !important;
  -webkit-backdrop-filter:saturate(160%) blur(12px); backdrop-filter:saturate(160%) blur(12px); }
.header .container{ background:transparent !important; }
html.darking .header{ background:rgba(18,22,28,.82) !important; }

/* タブ（PCでは非表示） */
#__colWrap .coltabs{ display:none; }

/* ===== スマホ：縦積み＋セグメント型タブ ===== */
@media (max-width:768px){
  #__colWrap{ flex-direction:column; gap:0; }
  /* DUX馴染みのピル型セグメント。ライト=明るいトラック/ダーク=暗いトラック、アクティブ=テーマカラー(#6473FA) */
  #__colWrap .coltabs{ display:flex; gap:4px; margin:0 8px 14px 16px; padding:4px; background:#eef0f6; border-radius:999px; }
  #__colWrap .coltabs .tab{ flex:1; padding:12px 8px; font-size:15px; font-weight:700; line-height:1.3; white-space:nowrap; border:none; border-radius:999px; background:transparent; color:#6b7280; cursor:pointer; -webkit-appearance:none; transition:background .18s ease,color .18s ease,box-shadow .18s ease; }
  #__colWrap .coltabs .tab.active{ background:#818cf8; color:#fff; box-shadow:0 2px 7px rgba(129,140,248,.4); }
  #__colWrap.show-L .colR{ display:none; }
  #__colWrap.show-R .colL{ display:none; }
  #__colWrap .col h3.colhead{ display:block; margin:0 16px 8px; font-size:16px; } /* スマホでも列タイトルを表示 */
  /* スマホのタイトルを少し大きく読みやすく */
  #__colWrap header h2{ font-size:15px !important; line-height:1.5 !important; }
  #__colWrap article.excerpt{ padding-left:128px !important; }
  #__colWrap .focus{ width:116px !important; height:78px !important; }
  #__colWrap .focus img{ width:116px !important; height:78px !important; }
  /* スマホは dux が .meta を position:absolute にし、タグ行と重なる。通常フローに戻して
     タグの下に流し、Like は右端へ寄せる */
  #__colWrap article.excerpt{ position:relative; }
  #__colWrap .meta{ position:static !important; margin-top:3px; overflow:hidden; }
  #__colWrap .meta .post-like{ float:right !important; margin-left:auto; }
}

/* サイドバー「特価商品」(dux widget-tops)：既定は height:220px 固定+overflow:hidden、
   navcontent は height:0 で pane が position:absolute(タブ切替用)のため、件数を増やしても
   5件でクリップされる。1タブ運用なので固定解除し全件を自然な高さで表示する（home専用CSS）。 */
.widget-tops{ height:auto !important; overflow:visible !important; }
.widget-tops .widget-navcontent{ height:auto !important; position:static !important; }
.widget-tops .widget-navcontent > .item{ position:static !important; }

/* ダークモード（dux は html.darking で判定）＝アクティブは暗めの抑えた色 */
html.darking #__colWrap .coltabs{ background:#161b24; }
html.darking #__colWrap .coltabs .tab{ background:transparent; color:#8b97a8; }
html.darking #__colWrap .coltabs .tab.active{ background:#3a4490; color:#e8ebff; box-shadow:none; }

/* ===== 特価商品 ジャンル絞り込み（スマホの特価タブのみ。表示制御はJS） ===== */
/* 右端に貼り付く縦書きタブ型ハンドル（色合いのみ調整：控えめグラデ＋ダーク対応） */
/* 細い縦長サイドタブ（テキスト縦書き）。幅は文字数で変わらず細いまま、長い名前は縦に伸びる */
#__genFab{ display:none; position:fixed; right:0; top:60%; transform:translateY(-50%); z-index:1200;
  box-sizing:border-box;
  width:32px; height:126px; /* 文字数に関わらず幅・高さ固定 */
  background:linear-gradient(135deg,#6e79ff 0%,#5862e6 100%); color:#fff; border:none; padding:10px 7px; border-radius:12px 0 0 12px;
  box-shadow:0 3px 12px rgba(60,68,144,.40); -webkit-appearance:none;
  flex-direction:column; align-items:flex-start; justify-content:center; gap:6px; font-size:11px; font-weight:700; letter-spacing:1px; line-height:1.05; }
#__genFab .__gsvg{ display:block; flex:0 0 auto; width:14px; height:14px; margin-left:1px; }
#__genFab span{ writing-mode:vertical-rl; text-orientation:mixed; max-height:100px; overflow:hidden; }
/* 絞り込み中：そのジャンル名を表示（白の細リングでアクティブを明示） */
#__genFab.on{ box-shadow:0 0 0 2px rgba(255,255,255,.45) inset, 0 4px 14px rgba(60,68,144,.45); }
@media (min-width:769px){ #__genFab{ display:none !important; } }
html.darking #__genFab{ background:linear-gradient(135deg,#4b56c4 0%,#3a4490 100%); box-shadow:0 4px 14px rgba(0,0,0,.45); }

/* 閉じている間は visibility:hidden で描画対象から外す（iOS Safariで全画面fixedが残り
   下部にグレー(body背景)が残る不具合の対策）。transitionの遅延でスライドは維持。 */
/* 高さは 100lvh(アドレスバー隠れ時の最大高さ)で下端まで覆い、展開中に下にbody背景の
   グレー帯が覗くのを防ぐ。lvh非対応は 100vh にフォールバック。 */
#__genOv{ position:fixed; top:0; left:0; right:0; height:100vh; height:100lvh; background:rgba(0,0,0,.5); z-index:1201; opacity:0; visibility:hidden; pointer-events:none; transition:opacity .2s, visibility 0s .2s; }
#__genOv.open{ opacity:1; visibility:visible; pointer-events:auto; transition:opacity .2s; }

#__genDrawer{ position:fixed; right:0; top:0; height:100vh; height:100lvh; width:76%; max-width:300px; z-index:1202;
  background:#ffffff; color:#1f2733; border-left:1px solid #e6e8ee; transform:translateX(103%); visibility:hidden;
  transition:transform .24s ease, visibility 0s .24s; display:flex; flex-direction:column; box-shadow:-6px 0 24px rgba(0,0,0,.25);
  -webkit-overflow-scrolling:touch; }
#__genDrawer.open{ transform:translateX(0); visibility:visible; transition:transform .24s ease; }
#__genDrawer .gdh{ padding:16px; border-bottom:1px solid #eceef3; display:flex; align-items:center; gap:9px; }
#__genDrawer .gdh b{ font-size:15px; flex:1; }
#__genDrawer .gdh button{ background:none; border:none; color:#9aa6b6; font-size:22px; line-height:1; padding:0 2px; }
#__genDrawer .gdl{ overflow-y:auto; flex:1; padding:6px 0; }
#__genDrawer .gdl a{ display:flex; align-items:center; justify-content:space-between; padding:12px 16px;
  color:#3a4350; text-decoration:none; font-size:14px; border-right:3px solid transparent; }
#__genDrawer .gdl a .n{ display:flex; align-items:center; gap:12px; }
#__genDrawer .gdl a .n .__gsvg{ color:#8a94a4; flex:0 0 auto; }
#__genDrawer .gdl a .c{ font-size:11px; color:#9aa6b6; }
#__genDrawer .gdl a.on{ background:rgba(100,115,250,.10); border-right-color:#6473fa; color:#3641a8; font-weight:800; }
#__genDrawer .gdl a.on .n .__gsvg{ color:#6473fa; }
#__genDrawer .gdf{ padding:12px 16px; border-top:1px solid #eceef3; }
#__genDrawer .gdf button{ width:100%; padding:12px; border-radius:10px; border:1px solid #e6e8ee; background:#f4f6fa; color:#3a4350; font-size:13px; font-weight:700; }

#__genChip{ margin:0 16px 8px; font-size:12px; color:#7a8493; display:none; align-items:center; gap:6px; }
#__genChip .g{ background:#6473fa; color:#fff; padding:4px 12px; border-radius:999px; font-weight:800; display:inline-flex; gap:7px; align-items:center; cursor:pointer; }
#__genmsg, .__genmsg{ padding:26px 16px; text-align:center; color:#8b97a8; font-size:13px; }

/* ジャンル絞り込み ダークモード（html.darking） */
html.darking #__genDrawer{ background:#171d27; color:#e7ecf3; border-left-color:#232b37; box-shadow:-6px 0 24px rgba(0,0,0,.5); }
html.darking #__genDrawer .gdh{ border-bottom-color:#232b37; }
html.darking #__genDrawer .gdh button{ color:#8b97a8; }
html.darking #__genDrawer .gdl a{ color:#cfd6e0; }
html.darking #__genDrawer .gdl a .n .__gsvg{ color:#9aa6b6; }
html.darking #__genDrawer .gdl a .c{ color:#8b97a8; }
html.darking #__genDrawer .gdl a.on{ background:rgba(100,115,250,.16); color:#fff; }
html.darking #__genDrawer .gdl a.on .n .__gsvg{ color:#8b95ff; }
html.darking #__genDrawer .gdf{ border-top-color:#232b37; }
html.darking #__genDrawer .gdf button{ background:#222a36; border-color:#232b37; color:#e7ecf3; }