/*
 * 推すメシ！！ 公開前デザイン調整 v2
 * 対象：トップの第一印象／ランキング／投稿・推すボタン
 * 既存機能と正式素材は変更しない。
 */

:root {
  --om-gold: #c9952d;
  --om-gold-light: #f4d277;
  --om-black: #22170e;
  --om-orange-deep: #db7000;
  --om-cream-rich: #fff1d8;
}

body {
  background:
    radial-gradient(circle at 8% 12%, rgba(245,138,7,.055), transparent 26rem),
    #fffdf8;
}

.osumeshi-hero {
  position: relative;
  isolation: isolate;
  border-color: rgba(201,149,45,.42) !important;
  background:
    radial-gradient(circle at 92% 8%, rgba(245,138,7,.18), transparent 31%),
    linear-gradient(135deg,#fffdf8 0%,#fff5e8 48%,#ffe4b7 100%) !important;
  box-shadow:
    0 18px 42px rgba(84,49,14,.12),
    inset 0 1px 0 rgba(255,255,255,.9) !important;
}

.osumeshi-hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: 250px;
  aspect-ratio: 1;
  right: -105px;
  top: -125px;
  border: 1px solid rgba(201,149,45,.28);
  border-radius: 50%;
  box-shadow: 0 0 0 22px rgba(255,255,255,.17);
}

.osumeshi-hero::after {
  content: "";
  position: absolute;
  z-index: 0;
  left: 20px;
  bottom: 18px;
  width: 44px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg,var(--om-orange),var(--om-gold-light));
  opacity: .85;
}

.osumeshi-hero > * {
  position: relative;
  z-index: 1;
}

.osumeshi-hero__title,
#ranking .om-heading h2 {
  font-family: "Yu Mincho","Hiragino Mincho ProN","Hiragino Mincho Pro",serif;
}

.osumeshi-hero__title {
  color: var(--om-black) !important;
  font-weight: 800 !important;
  letter-spacing: .045em !important;
  text-shadow: 0 1px 0 #fff;
}

.osumeshi-hero__description {
  color: #51351f !important;
}

.osumeshi-hero__photo-wrap {
  border-color: var(--om-gold) !important;
  box-shadow:
    0 14px 30px rgba(48,29,10,.2),
    0 0 0 5px rgba(255,255,255,.55) !important;
}

.osumeshi-hero__badge {
  top: 12px !important;
  left: 12px !important;
  padding: 9px 14px !important;
  color: #ffe393 !important;
  background: linear-gradient(135deg,#24180e,#080604) !important;
  border-color: var(--om-gold) !important;
  box-shadow: 0 5px 14px rgba(0,0,0,.32) !important;
  letter-spacing: .03em;
}

.osumeshi-hero__button,
.om-btn,
.main-nav .nav-post {
  background: linear-gradient(180deg,#ff9b18 0%,#f58a07 58%,#e77700 100%) !important;
  border-color: #cf6800 !important;
  color: #261606 !important;
  box-shadow:
    0 7px 16px rgba(205,101,0,.25),
    inset 0 1px 0 rgba(255,255,255,.48) !important;
  transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
}

.osumeshi-hero__button:hover,
.osumeshi-hero__button:focus,
.om-btn:hover,
.om-btn:focus,
.main-nav .nav-post:hover,
.main-nav .nav-post:focus {
  transform: translateY(-2px);
  filter: saturate(1.08);
  box-shadow:
    0 10px 20px rgba(205,101,0,.3),
    inset 0 1px 0 rgba(255,255,255,.5) !important;
}

.om-btn:active,
.osumeshi-hero__button:active {
  transform: translateY(0);
}

.om-btn:disabled {
  transform: none;
  filter: none;
  box-shadow: none !important;
}

#ranking {
  position: relative;
  padding: 24px 18px 26px;
  border: 1px solid rgba(201,149,45,.34);
  border-radius: 18px;
  background:
    linear-gradient(145deg,rgba(255,255,255,.88),rgba(255,241,216,.9)),
    #fff8ed;
  box-shadow: 0 14px 34px rgba(83,48,13,.09);
}

#ranking::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 22px;
  width: 72px;
  height: 4px;
  border-radius: 0 0 999px 999px;
  background: linear-gradient(90deg,var(--om-orange),var(--om-gold-light));
}

#ranking .om-eyebrow {
  color: #94530f;
}

#ranking .om-heading h2 {
  color: var(--om-black);
  font-weight: 800;
  letter-spacing: .025em;
}

#ranking .om-tabs {
  gap: 4px;
  padding: 4px;
  border: 1px solid #ead3ad;
  border-radius: 12px;
  background: rgba(255,255,255,.75);
}

#ranking .om-tabs a {
  border: 0;
  border-radius: 8px;
}

#ranking .om-tabs a[aria-current] {
  color: #2d1c0c;
  background: linear-gradient(180deg,#fff1cf,#ffd88a);
  box-shadow: 0 3px 9px rgba(137,78,13,.15);
}

#ranking .om-grid .om-card:first-child {
  border: 2px solid var(--om-gold);
  box-shadow:
    0 10px 24px rgba(104,62,13,.18),
    inset 0 0 0 1px rgba(255,255,255,.8);
  transform: translateY(-2px);
}

#ranking .om-grid .om-card:first-child .om-rank {
  width: 32px;
  height: 34px;
  color: #24180e;
  background: linear-gradient(135deg,#ffe69c,#c9952d);
  border-radius: 0 0 10px 0;
  text-shadow: 0 1px rgba(255,255,255,.45);
}

.om-card {
  border-color: #e5d2b4;
  box-shadow: 0 4px 14px rgba(70,42,15,.055);
}

.om-card-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow: inset 0 -34px 34px -34px rgba(24,13,4,.38);
}

.om-vote {
  padding: 18px;
  border: 1px solid #ecd4ae;
  border-radius: 14px;
  background: linear-gradient(135deg,#fffaf2,#fff0d6);
}

.om-vote .om-btn {
  min-width: 150px;
}

.om-step .om-actions .om-btn,
.om-narrow > .om-btn {
  min-width: 180px;
}

@media (max-width: 719px) {
  .osumeshi-hero {
    padding: 25px 16px 18px !important;
    border-radius: 18px !important;
  }

  .osumeshi-hero::after {
    display: none;
  }

  .osumeshi-hero__title {
    font-size: 28px !important;
  }

  .osumeshi-hero__button {
    width: min(100%,240px);
    min-height: 54px !important;
  }

  .osumeshi-hero__photo-wrap {
    border-radius: 12px !important;
    box-shadow:
      0 12px 24px rgba(48,29,10,.18),
      0 0 0 4px rgba(255,255,255,.52) !important;
  }

  #ranking {
    padding: 22px 12px 24px;
    border-radius: 16px;
  }

  #ranking .om-grid {
    gap: 7px;
  }

  #ranking .om-card-body {
    padding: 9px 6px;
  }

  .om-vote {
    align-items: stretch;
  }

  .om-vote .om-btn {
    flex: 1 1 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .osumeshi-hero__button,
  .om-btn,
  .main-nav .nav-post {
    transition: none;
  }
}