@charset "utf-8";
/**
 * カニ通販おすすめ.com ｜ 配色スキン 5種
 *
 * @package kani-osusume
 * @version 1.2.0
 * @updated 2026-08-06
 */
/* =========================================================
   配色スキン（5種）
   ［外観 > カスタマイズ > サイト運営情報 > 配色］で切り替え
   body に skin-* クラスが付き、CSS変数を上書きします。
   ========================================================= */

/* =========================================================
   1. ICE ／ 氷室
   市場の氷の上。明るい寒色。ランキングサイトで暗色地が定番のなか、
   あえて明るく振ることで「広告っぽさ」から離れる。カニの朱が最も映える。
   ========================================================= */
body.skin-ice{
  --mv-scrim:231,238,241;
  --c-sumi:#111A1F;
  --c-navy:#1E3038;      /* ヘッダー・見出し帯 */
  --c-navy-2:#2C4652;
  --c-shu:#E03A20;
  --c-shu-d:#B32B14;
  --c-ice:#E7EEF1;
  --c-ice-2:#D2DFE5;
  --c-gold:#8C8375;
  --c-gray:#5E7180;
  --c-line:#C2D3DB;
  --shadow:0 1px 2px rgba(30,48,56,.05),0 10px 24px rgba(30,48,56,.10);
}
body.skin-ice .mv{background:#E7EEF1;color:var(--c-sumi)}
body.skin-ice .mv a{color:var(--c-sumi)}
body.skin-ice .mv .lead{color:#5E7180}
body.skin-ice .mv .kicker{background:#fff;border-color:var(--c-line);color:var(--c-navy)}
body.skin-ice .mv h1 .hl{background:var(--c-shu);color:#fff;padding:.02em .16em;border-radius:2px;
  -webkit-box-decoration-break:clone;box-decoration-break:clone}
body.skin-ice .mv-ice::before{background:radial-gradient(circle,rgba(120,178,208,.28),transparent 68%)}
body.skin-ice .mv-ice::after{background:radial-gradient(circle,rgba(224,58,32,.14),transparent 66%)}
body.skin-ice .mv__photo.is-empty{background:
  radial-gradient(110% 90% at 82% 10%,rgba(224,58,32,.16),transparent 60%),
  radial-gradient(90% 80% at 6% 94%,rgba(120,178,208,.34),transparent 62%),
  linear-gradient(160deg,#EDF3F5,#DEE9EE)}
body.skin-ice .mv-a__row{background:#fff;border:1px solid var(--c-line);border-radius:4px;box-shadow:none}
body.skin-ice .mv .mv-a__row:hover{box-shadow:0 6px 18px rgba(30,48,56,.14)}
body.skin-ice .mv-a__more a{color:var(--c-gray)}
body.skin-ice .fuda--3{background:#7F8B93}

/* =========================================================
   2. AUCTION ／ 夜の競り
   夜明け前の競り場。煤けた黒と、木札の金。
   贈答・高単価の文脈に向く。11〜12月に切り替える想定。
   ========================================================= */
body.skin-auction{
  --mv-scrim:23,19,15;
  --c-sumi:#EDE6DA;
  --c-navy:#17130F;
  --c-navy-2:#282019;
  --c-shu:#C8452A;
  --c-shu-d:#9C3320;
  --c-ice:#1C1712;
  --c-ice-2:#2A2219;
  --c-paper:#211B15;
  --c-gold:#C2A053;
  --c-gray:#9C9084;
  --c-line:#3B3128;
  --shadow:0 2px 4px rgba(0,0,0,.3),0 14px 30px rgba(0,0,0,.4);
}
body.skin-auction{background:#17130F}
body.skin-auction a{color:#E4D9C6}
body.skin-auction .mv{background:#17130F}
body.skin-auction .mv .lead{color:#B0A392}
body.skin-auction .mv .kicker{border-color:rgba(194,160,83,.5);color:#DCCB9F;background:rgba(194,160,83,.08)}
body.skin-auction .mv h1{font-family:var(--f-mincho);font-weight:700;letter-spacing:.04em}
body.skin-auction .mv h1 .hl{background:linear-gradient(transparent 54%,var(--c-gold) 54%,var(--c-gold) 80%,transparent 80%);color:#F5EEE0}
body.skin-auction .mv-ice::before{background:radial-gradient(circle,rgba(194,160,83,.20),transparent 68%)}
body.skin-auction .mv-ice::after{background:radial-gradient(circle,rgba(200,69,42,.26),transparent 66%)}
body.skin-auction .mv__photo.is-empty{background:
  radial-gradient(100% 80% at 76% 14%,rgba(200,69,42,.42),transparent 58%),
  radial-gradient(90% 70% at 10% 90%,rgba(194,160,83,.20),transparent 62%),
  linear-gradient(160deg,#1D1813,#17130F)}
body.skin-auction .mv-a__row{background:#211B15;border:1px solid rgba(194,160,83,.32);border-radius:3px}
body.skin-auction .mv .mv-a__row{color:#EDE6DA}
body.skin-auction .mv .mv-a__name{color:#F3ECDE}
body.skin-auction .mv .mv-a__meta{color:#9C9084}
body.skin-auction .mv .mv-a__price{color:var(--c-gold)}
body.skin-auction .mv .mv-a__price small{color:#8E8376}
body.skin-auction .fuda--2{background:#4A3D2E}
body.skin-auction .fuda--3{background:#6B5A3E}
body.skin-auction .entry,body.skin-auction .widget,body.skin-auction .pcard{background:#211B15;border-color:var(--c-line)}
body.skin-auction .site-header{border-bottom:1px solid rgba(194,160,83,.28)}

/* =========================================================
   3. ISO ／ 磯
   昆布と岩礁の深緑。北海道の海そのもの。
   食品比較サイトで緑地はほぼ無く、記憶に残りやすい。
   ========================================================= */
body.skin-iso{
  --mv-scrim:14,42,34;
  --c-sumi:#12211C;
  --c-navy:#0E2A22;
  --c-navy-2:#1A473A;
  --c-shu:#F04E23;
  --c-shu-d:#C13A15;
  --c-ice:#EAF0EC;
  --c-ice-2:#D5E2DA;
  --c-gold:#A88A3C;
  --c-gray:#5B6F66;
  --c-line:#C3D4CA;
}
body.skin-iso .mv{background:#0E2A22}
body.skin-iso .mv .lead{color:#A9C4B7}
body.skin-iso .mv .kicker{background:rgba(255,255,255,.08);border-color:rgba(169,196,183,.4)}
body.skin-iso .mv-ice::before{background:radial-gradient(circle,rgba(58,150,116,.34),transparent 68%)}
body.skin-iso .mv-ice::after{background:radial-gradient(circle,rgba(240,78,35,.24),transparent 66%)}
body.skin-iso .mv__photo.is-empty{background:
  radial-gradient(110% 90% at 80% 8%,rgba(240,78,35,.34),transparent 58%),
  radial-gradient(90% 80% at 4% 96%,rgba(58,150,116,.42),transparent 62%),
  linear-gradient(160deg,#103127,#0B211B)}
body.skin-iso .mv-a__row{background:#fff;border-radius:12px;border:0}
body.skin-iso .mv-a__more a{color:#A9C4B7}
body.skin-iso .fuda--2{background:#1A473A}
body.skin-iso .fuda--3{background:#7E9A8B}

/* =========================================================
   4. SHELL ／ 甲羅
   茹で上がった甲羅の色をそのまま地にする。最も食欲に近い。
   目立つが長文の可読性は落ちるため、記事本文は白地に切り替える。
   ========================================================= */
body.skin-shell{
  --mv-scrim:126,35,18;
  --c-sumi:#2A1109;
  --c-navy:#8E2B18;
  --c-navy-2:#A93A22;
  --c-shu:#E8541F;
  --c-shu-d:#B8380F;
  --c-ice:#FBF1E9;
  --c-ice-2:#F0DDCE;
  --c-gold:#E8B33C;
  --c-gray:#7C5E52;
  --c-line:#E3CDBE;
}
body.skin-shell .mv{background:linear-gradient(150deg,#A93A22,#7E2312 62%,#6A1B0D)}
body.skin-shell .mv .lead{color:#F2CDBB}
body.skin-shell .mv .kicker{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.35)}
body.skin-shell .mv h1 .hl{background:#FFCE4A;color:#3A1206;padding:.02em .16em;border-radius:3px;
  -webkit-box-decoration-break:clone;box-decoration-break:clone}
body.skin-shell .mv-ice::before{background:radial-gradient(circle,rgba(255,178,90,.26),transparent 68%)}
body.skin-shell .mv-ice::after{background:radial-gradient(circle,rgba(90,16,8,.5),transparent 66%)}
body.skin-shell .mv__photo.is-empty{background:
  radial-gradient(100% 80% at 78% 12%,rgba(255,176,84,.34),transparent 58%),
  linear-gradient(150deg,#A93A22,#7E2312 60%,#661A0C)}
body.skin-shell .mv-a__row{background:#FFF8F2;border:0;border-radius:6px}
body.skin-shell .mv .mv-a__price{color:#B8380F}
body.skin-shell .btn-primary{background:#FFCE4A;color:#40160A;box-shadow:0 4px 0 #C99A22}
body.skin-shell .btn-primary:hover{background:#F0BC33;color:#40160A;box-shadow:0 2px 0 #C99A22}
body.skin-shell .entry-content a.btn-primary{color:#40160A}
body.skin-shell .fuda{background:#B8380F}
body.skin-shell .fuda--2{background:#7C5E52}
body.skin-shell .fuda--3{background:#C99A22}

/* =========================================================
   5. STEEL ／ 鉄
   市場の作業台とコンテナ。無彩色の鉄に、蛍光の橙だけを差す。
   食品らしさは薄いが、データを扱うサイトとしての信頼感は最も高い。
   ========================================================= */
body.skin-steel{
  --mv-scrim:35,42,46;
  --c-sumi:#14181A;
  --c-navy:#232A2E;
  --c-navy-2:#39444A;
  --c-shu:#FF5A1F;
  --c-shu-d:#D8430E;
  --c-ice:#EFF1F2;
  --c-ice-2:#DDE1E3;
  --c-gold:#8A939A;
  --c-gray:#69737A;
  --c-line:#CBD2D6;
  --r:2px;
}
body.skin-steel .mv{background:#232A2E}
body.skin-steel .mv .lead{color:#A7B2B8}
body.skin-steel .mv .kicker{background:transparent;border-color:#5A666D;border-radius:0;color:#C6CFD4}
body.skin-steel .mv h1{letter-spacing:-.01em}
body.skin-steel .mv h1 .hl{background:var(--c-shu);color:#14181A;padding:.02em .14em;border-radius:0;
  -webkit-box-decoration-break:clone;box-decoration-break:clone}
body.skin-steel .mv-ice::before{background:radial-gradient(circle,rgba(120,140,150,.28),transparent 68%)}
body.skin-steel .mv-ice::after{background:radial-gradient(circle,rgba(255,90,31,.18),transparent 66%)}
body.skin-steel .mv__photo.is-empty{background:
  radial-gradient(100% 80% at 80% 10%,rgba(255,90,31,.22),transparent 58%),
  linear-gradient(160deg,#2A3236,#1B2124)}
/* カードは枠を持たず、罫線だけで区切る */
body.skin-steel .mv-a__top3{gap:0;background:#fff;border-radius:0}
body.skin-steel .mv-a__row{background:#fff;border:0;border-bottom:1px solid var(--c-line);border-radius:0;box-shadow:none;padding:.85rem 1rem}
body.skin-steel .mv-a__top3 .mv-a__row:last-of-type{border-bottom:0}
body.skin-steel .mv .mv-a__row:hover{background:#F6F8F9;box-shadow:none}
body.skin-steel .mv .mv-a__price{font-variant-numeric:tabular-nums}
body.skin-steel .fuda{clip-path:none;border-radius:0;width:36px;padding:.35rem 0}
body.skin-steel .mv-a__row .fuda{margin-top:0;width:36px}
body.skin-steel .fuda .no{font-size:1.35rem}
body.skin-steel .fuda--2{background:#4C575D}
body.skin-steel .fuda--3{background:#8A939A}
body.skin-steel .mv-a__more{margin:0;padding:.7rem 1rem;background:#fff;border-top:1px solid var(--c-line)}
body.skin-steel .mv .mv-a__more a{color:var(--c-gray)}
body.skin-steel .btn{border-radius:2px}
body.skin-steel .btn-primary{color:#14181A;box-shadow:0 3px 0 var(--c-shu-d)}
body.skin-steel .entry-content a.btn-primary{color:#14181A}