/* home-sections-mod.css — TOPページ専用の追加リデザインスタイル(ヒーロー以降)。
   items-v2-mod.css と同じ方針: 既存の .smfix-* クラスには一切触れず、
   新規の修飾クラス(--v2)のみを追加する。他ページ・common.cssは変更しない。
   対象: ITEMS / HOW TO SELL / REASON / MESSAGE / VOICE / FAQ / SHOP INFO / CTA */

/* ============================================================
   共通: セクション背景に淡いドットグリッドを敷く(ヒーローの装飾と呼応)
   ============================================================ */
.smfix-sec--dotgrid { position: relative; }
.smfix-sec--dotgrid::before {
  content: "";
  position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(16,1,105,.09) 1.5px, transparent 1.5px);
  background-size: 24px 24px;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 16%, #000 84%, transparent);
          mask-image: linear-gradient(180deg, transparent, #000 16%, #000 84%, transparent);
}
.smfix-sec--dotgrid > .smfix-wrap { position: relative; z-index: 1; }

/* ============================================================
   ITEMS: 品目タイル。角丸カード化+アイコンを紺のカプセルに収め、
   ホバーでゴールドの上辺ラインが伸びる。
   ============================================================ */
.smfix-item.smfix-item--v2 {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  background: linear-gradient(180deg, #fff 0%, var(--sm-paper) 100%);
}
.smfix-item.smfix-item--v2::before {
  content: "";
  position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: linear-gradient(90deg, var(--sm-gold), var(--sm-gold-bright));
  transform: scaleX(0); transform-origin: left;
  transition: transform .35s ease;
}
a.smfix-item.smfix-item--v2:hover::before,
a.smfix-item.smfix-item--v2:focus-visible::before { transform: scaleX(1); }
.smfix-item.smfix-item--v2 .smfix-item-ico {
  width: 50px; height: 50px; padding: 11px; box-sizing: border-box;
  background: var(--sm-navy); color: var(--sm-gold-bright);
  border-radius: 999px;
  transition: background .3s ease, color .3s ease;
}
a.smfix-item.smfix-item--v2:hover .smfix-item-ico,
a.smfix-item.smfix-item--v2:focus-visible .smfix-item-ico {
  background: var(--sm-gold); color: #22160a;
}
@media (max-width: 640px) {
  .smfix-item.smfix-item--v2 .smfix-item-ico { width: 42px; height: 42px; padding: 9px; }
}

/* ============================================================
   HOW TO SELL: バッジを写真に重ねるチケット風カード
   (PICK UPの smfix-card-v2-num と同じ「番号を写真に重ねる」語彙で統一)
   ============================================================ */
.smfix-way.smfix-way--v2 {
  position: relative;
  border: 1px solid var(--sm-line);
  border-radius: 20px;
}
.smfix-way.smfix-way--v2 .smfix-way-img { border-radius: 0; }
.smfix-way.smfix-way--v2 .smfix-way-head {
  position: absolute; top: 14px; left: 14px; z-index: 2;
  background: rgba(16,1,105,.82);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  border-radius: 999px; padding: .5rem 1.1rem .5rem .9rem;
  font-size: 1rem;
}
.smfix-way.smfix-way--v2::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0; height: 4px; width: 0%;
  background: linear-gradient(90deg, var(--sm-gold), var(--sm-gold-bright));
  transition: width .45s cubic-bezier(.2,.8,.2,1);
}
.smfix-way.smfix-way--v2:hover::after,
.smfix-way.smfix-way--v2:focus-visible::after { width: 100%; }

/* HOW TO SELL: 催事買取カード非表示に伴い2カラム化(TOPページのみ) */
.smfix-ways.smfix-ways--2col { grid-template-columns: repeat(2, minmax(0,1fr)); }
@media (max-width: 640px) {
  .smfix-ways.smfix-ways--2col { grid-template-columns: 1fr; }
}

/* ============================================================
   REASON: カードグリッドをやめ、二分割の横並びリストへ(紺背景に白の罫線)
   ============================================================ */
.smfix-reasons.smfix-reasons--v2 {
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 0;
  border-top: 1px solid rgba(255,255,255,.16);
}
.smfix-reasons.smfix-reasons--v2 .smfix-reason {
  display: grid; grid-template-columns: auto 1fr; column-gap: 1.1rem; row-gap: .35rem;
  text-align: left; background: transparent; border: 0; border-radius: 0;
  box-shadow: none;
  padding: 1.6rem 1.5rem;
  border-bottom: 1px solid rgba(255,255,255,.16);
}
.smfix-reasons.smfix-reasons--v2 .smfix-reason:nth-child(odd) {
  border-right: 1px solid rgba(255,255,255,.16);
}
.smfix-reasons.smfix-reasons--v2 .smfix-reason-n { margin: 0; grid-column: 1; grid-row: 1 / 3; align-self: start; }
.smfix-reasons.smfix-reasons--v2 .smfix-reason h3 { grid-column: 2; grid-row: 1; }
.smfix-reasons.smfix-reasons--v2 .smfix-reason p { grid-column: 2; grid-row: 2; }
@media (max-width: 640px) {
  .smfix-reasons.smfix-reasons--v2 { grid-template-columns: 1fr; }
  .smfix-reasons.smfix-reasons--v2 .smfix-reason:nth-child(odd) { border-right: 0; }
}

/* ============================================================
   MESSAGE: 写真の角に六角形バッジを重ね、ヒーローの装飾語彙と揃える
   ============================================================ */
.smfix-media.smfix-media--v2 .smfix-media-fig { position: relative; }
.smfix-media.smfix-media--v2 .smfix-media-fig::after {
  content: "";
  position: absolute; right: -16px; bottom: -16px; z-index: 2;
  width: 60px; height: 56px;
  background: var(--sm-gold);
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
  box-shadow: 0 10px 22px rgba(150,115,31,.35);
}
@media (max-width: 640px) {
  .smfix-media.smfix-media--v2 .smfix-media-fig::after { width: 44px; height: 41px; right: -10px; bottom: -10px; }
}

/* ============================================================
   VOICE: 評価パネルをグラデーション縁取り+グラデーション数字のスポットライト風に
   ============================================================ */
.smfix-rating.smfix-rating--v2 {
  position: relative; border: none;
  background: linear-gradient(180deg, #fff, var(--sm-paper));
  padding: 2.1rem 2.2rem;
}
.smfix-rating.smfix-rating--v2::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 2px;
  background: linear-gradient(135deg, var(--sm-gold-bright), var(--sm-gold));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none;
}
.smfix-rating.smfix-rating--v2 .big {
  font-size: 3.6rem;
  background: linear-gradient(135deg, var(--sm-navy), var(--sm-navy-soft));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
@media (max-width: 640px) {
  .smfix-rating.smfix-rating--v2 { padding: 1.6rem 1.4rem; }
  .smfix-rating.smfix-rating--v2 .big { font-size: 2.8rem; }
}

/* ============================================================
   FAQ: 2カラム化(デスクトップ)。各行の高さは揃えない。
   ============================================================ */
.smfix-faq.smfix-faq--v2 {
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: .9rem 1.1rem;
  align-items: start;
}
@media (max-width: 860px) {
  .smfix-faq.smfix-faq--v2 { grid-template-columns: 1fr; }
}

/* ============================================================
   SHOP INFO: 縞模様(ゼブラ)+アイコンカプセルで表らしさを補強。
   列構成(9.5rem/1fr)は変えない(2列組にすると長い住所・営業時間が
   極端に折り返されるため、実測のうえ不採用)。
   ============================================================ */
.smfix-dl.smfix-dl--v2 dt,
.smfix-dl.smfix-dl--v2 dd { padding-left: .9rem; padding-right: .9rem; }
.smfix-dl.smfix-dl--v2 > :nth-child(8n+1),
.smfix-dl.smfix-dl--v2 > :nth-child(8n+2),
.smfix-dl.smfix-dl--v2 > :nth-child(8n+5),
.smfix-dl.smfix-dl--v2 > :nth-child(8n+6) { background: var(--sm-paper); }
.smfix-dl.smfix-dl--v2 dt .smfix-hex {
  display: inline-grid; place-items: center;
  width: 1.5em; height: 1.4em; font-size: .85em;
  background: var(--sm-navy); color: var(--sm-gold-bright);
}

/* ============================================================
   CTA: ヒーローと同じ光暈(オーブ)装飾を重ねて統一感を出す
   ============================================================ */
.smfix-cta.smfix-cta--v2 { overflow: hidden; }
.smfix-cta.smfix-cta--v2::before {
  content: "";
  position: absolute; left: 50%; top: -32%; transform: translateX(-50%);
  width: 60vw; height: 60vw; max-width: 640px; max-height: 640px;
  background: radial-gradient(circle, rgba(200,162,74,.22), transparent 65%);
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .smfix-item.smfix-item--v2::before,
  .smfix-way.smfix-way--v2::after,
  .smfix-item.smfix-item--v2 .smfix-item-ico { transition: none !important; }
}