@charset "utf-8";
/**
 * カニ通販おすすめ.com ｜ メインビジュアル 5パターン
 *
 * @package kani-osusume
 * @version 1.2.0
 * @updated 2026-08-06
 */
/* =========================================================
   メインビジュアル 5パターン（A〜E）
   カスタマイザー［外観 > カスタマイズ > メインビジュアル］で切替
   ========================================================= */

/* 写真の差し込み口：どのパターンも --mv-img を差し替えるだけで写真が入る */
.mv{--mv-img:none}
.mv__photo{
  position:absolute;inset:0;z-index:0;
  background-image:var(--mv-img);background-size:cover;background-position:center;
}
.mv__photo::after{content:"";position:absolute;inset:0}

/* 写真未設定時のプレースホルダ（氷と甲羅の抽象） */
.mv__photo.is-empty{
  background:
    radial-gradient(120% 90% at 78% 12%,rgba(214,55,28,.55),transparent 58%),
    radial-gradient(100% 80% at 8% 92%,rgba(53,132,176,.55),transparent 60%),
    linear-gradient(160deg,#0E2436,#132C42 55%,#0B1E2E);
}

/* ============ A. 競り札型：TOP3を先に見せる ============ */
.mv-a .mv-inner{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(1.6rem,4vw,3.4rem);align-items:center}
.mv-a .mv__photo::after{background:linear-gradient(90deg,rgba(var(--mv-scrim),.94) 40%,rgba(var(--mv-scrim),.72))}
.mv-a__top3{display:grid;gap:.6rem}
.mv-a__row{
  display:grid;grid-template-columns:52px 1fr auto;align-items:center;gap:.9rem;
  background:rgba(255,255,255,.96);color:var(--c-sumi);border-radius:8px;padding:.7rem .9rem;
  box-shadow:0 6px 18px rgba(0,0,0,.24);
}
.mv-a__row .fuda{margin-top:-.7rem;width:52px}
.mv .mv-a__row{text-decoration:none;color:var(--c-sumi)}
.mv .mv-a__row:hover{color:var(--c-sumi);box-shadow:0 8px 22px rgba(0,0,0,.3)}
.mv .mv-a__row:hover .mv-a__name{color:var(--c-shu)}
.mv .mv-a__name{display:block;color:var(--c-sumi);font-family:var(--f-display);font-weight:900;font-size:.95rem;line-height:1.45;margin:0}
.mv .mv-a__meta{display:block;font-size:.74rem;color:var(--c-gray);margin:.25em 0 0;letter-spacing:.02em;line-height:1.5}
.mv .mv-a__price{display:block;font-family:var(--f-num);font-weight:600;color:var(--c-shu);font-size:1.1rem;white-space:nowrap;text-align:right}
.mv-a__price small{font-size:.62rem;color:var(--c-gray);display:block;text-align:right;letter-spacing:.08em}
.mv-a__more{text-align:right;font-size:.8rem;margin:.3rem 0 0}
.mv-a__more a{color:#CBDCE7;text-decoration:underline}

/* ============ B. 大判写真＋シズル：王道 ============ */
.mv-b{min-height:clamp(340px,56vh,520px);display:grid;align-items:end}
.mv-b .mv__photo::after{background:linear-gradient(180deg,rgba(var(--mv-scrim),.42) 0%,rgba(var(--mv-scrim),.22) 34%,rgba(var(--mv-scrim),.92) 100%)}
.mv-b .mv-inner{padding-bottom:clamp(1.8rem,5vw,3.2rem);text-align:center}
.mv-b h1{margin-inline:auto;max-width:16em}
.mv-b .lead{margin-inline:auto;text-align:center}
.mv-b__btns{display:flex;gap:.8rem;justify-content:center;flex-wrap:wrap}
.mv-b__stats{display:flex;justify-content:center;gap:clamp(1.2rem,4vw,3rem);margin-top:1.8rem;padding-top:1.4rem;border-top:1px solid rgba(255,255,255,.22)}
.mv-b__stats div{text-align:center}
.mv-b__stats b{display:block;font-family:var(--f-num);font-weight:600;font-size:1.6rem;color:#fff;line-height:1.1}
.mv-b__stats span{font-size:.7rem;color:#9FB6C6;letter-spacing:.1em}

/* ============ C. 比較表ファーストビュー：データ先出し ============ */
.mv-c{background:var(--c-ice);color:var(--c-sumi)}
.mv-c a{color:var(--c-navy-2)}
.mv-c .mv-inner{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(1.4rem,3.5vw,2.8rem);align-items:center;padding-block:clamp(1.8rem,5vw,3.2rem)}
.mv-c h1{color:var(--c-sumi);font-size:clamp(1.7rem,4.6vw,2.9rem)}
.mv-c h1 .hl{color:#fff;background:var(--c-shu);padding:.02em .16em;border-radius:2px;
  -webkit-box-decoration-break:clone;box-decoration-break:clone}
.mv-c .lead{color:var(--c-gray)}
.mv-c .kicker{background:#fff;border-color:var(--c-line);color:var(--c-navy)}
.mv-c__table{background:#fff;border:1px solid var(--c-line);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow)}
.mv-c__table table{width:100%;border-collapse:collapse;font-size:.82rem}
.mv-c__table th,.mv-c__table td{padding:.62em .7em;border-bottom:1px solid var(--c-line);text-align:center}
.mv-c__table thead th{background:var(--c-navy);color:#fff;font-family:var(--f-display);font-size:.76rem}
.mv-c__table tbody th{text-align:left;font-weight:700;font-size:.8rem;white-space:nowrap}
.mv-c__table .cell-num{font-family:var(--f-num);font-weight:500}
.mv-c__table .is-best{color:var(--c-shu);font-weight:700}
.mv-c__cap{display:flex;align-items:center;gap:.5em;padding:.6em .9em;background:var(--c-navy);color:#fff;font-size:.74rem;letter-spacing:.08em;font-family:var(--f-num)}
.mv-c__cap b{color:#FFD9CE}

/* ============ D. 診断分岐型：用途から入る ============ */
.mv-d .mv__photo::after{background:linear-gradient(180deg,rgba(var(--mv-scrim),.86),rgba(var(--mv-scrim),.94))}
.mv-d .mv-inner{text-align:center}
.mv-d h1{margin-inline:auto;max-width:15em}
.mv-d .lead{margin-inline:auto;text-align:center;margin-bottom:2rem}
.mv-d__choices{display:grid;grid-template-columns:repeat(4,1fr);gap:.8rem;max-width:860px;margin-inline:auto}
.mv-d__choice{
  display:flex;flex-direction:column;gap:.35rem;align-items:center;justify-content:center;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.3);border-radius:10px;
  padding:1.1rem .7rem;color:#fff;text-decoration:none;transition:background .16s ease,transform .16s ease;
}
.mv-d__choice:hover{background:var(--c-shu);border-color:var(--c-shu);color:#fff;transform:translateY(-3px)}
.mv-d__choice b{font-family:var(--f-display);font-size:1rem;line-height:1.4}
.mv-d__choice span{font-size:.72rem;color:#B9CDDA;letter-spacing:.04em}
.mv-d__choice:hover span{color:#FFE2DA}
.mv-d__foot{margin-top:1.6rem;font-size:.78rem;color:#9FB6C6}
.mv-d__foot a{color:#fff;text-decoration:underline}

/* ============ E. 縦組みエディトリアル：贈答・高級路線 ============ */
.mv-e{background:#0B1E2E}
.mv-e .mv-inner{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(240px,44%);
  gap:clamp(1.4rem,4vw,3rem);align-items:stretch;
}
.mv-e__frame{position:relative;border:1px solid rgba(169,132,60,.55);border-radius:4px;overflow:hidden;min-height:clamp(300px,46vh,440px)}
.mv-e__frame .ph{position:absolute;inset:0;background-image:var(--mv-img);background-size:cover;background-position:center}
.mv-e__frame .ph.is-empty{background:
  radial-gradient(90% 70% at 30% 20%,rgba(214,55,28,.5),transparent 60%),
  linear-gradient(200deg,#123049,#0B1E2E)}
.mv-e__seal{
  position:absolute;left:1rem;bottom:1rem;font-family:var(--f-mincho);font-size:.78rem;letter-spacing:.24em;
  color:#F0E3C8;background:rgba(11,30,46,.82);border:1px solid rgba(169,132,60,.6);padding:.5em .9em;
}
.mv-e__type{
  display:flex;flex-direction:row-reverse;justify-content:flex-start;align-items:flex-start;
  gap:clamp(.9rem,2.4vw,1.8rem);
}
/* 縦組みは自動折り返しに頼らず、1行＝1要素で組む（折り返し位置を編集者が決められる） */
.mv-e h1{
  display:flex;flex-direction:row-reverse;align-items:flex-start;gap:.42em;
  font-family:var(--f-mincho);font-weight:700;margin:0;
  font-size:clamp(1.45rem,3.4vw,2.2rem);
}
.mv-e h1 .ln{writing-mode:vertical-rl;white-space:nowrap;line-height:1.1;letter-spacing:.1em}
.mv-e__side{display:flex;flex-direction:row-reverse;align-items:flex-start;gap:.9em;margin:0}
.mv-e__side .ln{writing-mode:vertical-rl;white-space:nowrap;font-family:var(--f-mincho);font-size:.82rem;letter-spacing:.16em;color:#B9CDDA;line-height:1.1}
.mv-e h1 .accent{color:#D9A64B}
.mv-e__btns{align-self:flex-end;display:flex;flex-direction:column;gap:.7rem}
.mv-e .btn-primary{background:var(--c-gold);box-shadow:0 4px 0 #7E6229}
.mv-e .btn-primary:hover{background:#8E6E31;box-shadow:0 2px 0 #7E6229}

/* ---------- MV レスポンシブ ---------- */
@media (max-width:900px){
  .mv-a .mv-inner,.mv-c .mv-inner{grid-template-columns:1fr}
  .mv-d__choices{grid-template-columns:repeat(2,1fr)}
  .mv-e .mv-inner{grid-template-columns:1fr}
  .mv-e__type{height:auto}
  .mv-e__frame{min-height:180px;order:-1}
  .mv-e h1{flex-direction:column;gap:.15em}
  .mv-e h1 .ln{writing-mode:horizontal-tb;letter-spacing:.04em;line-height:1.5}
  .mv-e__side{flex-direction:column;gap:.1em}
  .mv-e__side .ln{writing-mode:horizontal-tb;letter-spacing:.02em;line-height:1.9}
  .mv-e__type{flex-direction:column;gap:.8rem}
  .mv-e__btns{align-self:stretch;flex-direction:row;flex-wrap:wrap}
}
@media (max-width:520px){
  .mv-a__row{grid-template-columns:42px 1fr auto;gap:0 .6rem;padding:.6rem .7rem}
  .mv-a__row .fuda{width:42px;margin-top:-.6rem}
  .mv .mv-a__name{font-size:.84rem}
  .mv .mv-a__meta{font-size:.68rem}
  .mv .mv-a__price{font-size:.92rem}
  .mv .mv-a__price small{font-size:.56rem}
  .mv-b__stats{gap:1rem}
  .mv-b__stats b{font-size:1.25rem}
}