/* MR.CHILL — グローバル補助 + レスポンシブ */

.mr-chill-site .hp-mobile-nav-toggle {
  color: #fff;
}

.mr-chill-site .hp-mobile-nav-sheet--dark {
  background: #0a0a0a;
  border-left: 1px solid #222;
}

.mr-chill-site .hp-mobile-nav-sheet--dark a {
  color: #eee;
  border-bottom-color: rgba(255, 255, 255, 0.08);
}

.mr-chill-site .hp-mobile-nav-sheet--dark a:active {
  background: rgba(57, 255, 20, 0.08);
  color: #39ff14;
}

.logo-image {
  display: inline-flex;
  align-items: center;
}

.mr-chill-logo-img {
  display: block;
  height: 38px;
  width: auto;
  max-width: min(48vw, 240px);
  object-fit: contain;
}

.weedfeed-item-wrap {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 8px;
}

.mr-chill-line-card {
  display: flex;
  flex-direction: column;
}

.mr-chill-line-card-link {
  display: block;
}

/* レスポンシブ（ヘッダースリム化 + 6ライン常時表示） */

@media (max-width: 768px) {
  .mr-chill-site-header .announcement-bar {
    padding: 5px 10px !important;
    font-size: 9px !important;
    letter-spacing: 0.12em !important;
    line-height: 1.4 !important;
  }

  .mr-chill-site-header .site-header {
    border-bottom-color: #1a1a1a;
  }

  .mr-chill-site-header .header-inner {
    height: 48px !important;
    min-height: 48px !important;
    max-height: 48px !important;
    padding: 0 14px !important;
    flex-wrap: nowrap !important;
    gap: 12px !important;
  }

  .mr-chill-site-header .logo-image {
    min-width: 0;
    flex: 0 1 auto;
  }

  .mr-chill-site-header .mr-chill-logo-img {
    height: 32px !important;
    max-width: 44vw !important;
  }

  .mr-chill-site-header .header-actions {
    display: none !important;
  }

  .mr-chill-site-header .main-nav {
    display: none !important;
  }

  .mr-chill-site-header .hp-mobile-nav-toggle {
    margin-left: auto;
    color: #fff;
  }

  .mr-chill-flow.image-flow {
    padding-top: 32px !important;
    padding-bottom: 24px !important;
  }

  .mr-chill-flow .image-flow-head {
    margin-bottom: 12px;
    padding: 0 16px;
  }

  .mr-chill-flow .image-flow-head h2 {
    font-size: clamp(20px, 5.5vw, 26px) !important;
  }
}

/* ── 6ライン：常時表示（モバイル=横スクロール / デスクトップ=3列グリッド） ── */
.mr-chill-flow.image-flow {
  min-height: auto !important;
  height: auto !important;
  overflow: visible;
  padding-top: 40px;
  padding-bottom: 48px;
}

.mr-chill-featured-section {
  padding-bottom: 64px !important;
  margin-bottom: 0;
  position: relative;
  z-index: 0;
  overflow: visible;
}

.mr-chill-line-showcase {
  padding: 0 0 8px;
  min-height: auto;
}

.mr-chill-line-showcase-hint {
  display: none;
  text-align: center;
  font-size: 11px;
  color: #666;
  letter-spacing: 0.08em;
  margin: 0 0 8px;
}

.mr-chill-line-showcase-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 20px 16px;
  align-items: stretch;
}

.mr-chill-line-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  border-radius: 14px;
  overflow: hidden;
  background: #111;
  border: 1px solid #222;
  text-decoration: none;
  color: inherit;
  min-height: 0;
}

.mr-chill-line-card-link {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  aspect-ratio: 3 / 2;
  min-height: clamp(200px, 22vw, 280px);
  background: #0a0a0a;
  overflow: hidden;
}

.mr-chill-line-card img {
  display: block;
  width: 100%;
  height: 100%;
  max-height: none;
  aspect-ratio: unset;
  object-fit: contain;
  object-position: center;
  background: #0a0a0a;
  padding: 2px 4px;
}

.mr-chill-line-card-meta {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
  padding: 14px 14px 16px;
  background: #111;
}

.mr-chill-line-card-label {
  display: block;
  font-family: 'Oswald', sans-serif;
  font-size: 17px;
  letter-spacing: 0.06em;
  color: #fff;
  margin: 0;
  line-height: 1.25;
}

.mr-chill-line-card-ingredient {
  display: block;
  font-size: 11px;
  color: #888;
  margin: 0;
  line-height: 1.5;
}

.mr-chill-line-card-tag {
  display: block;
  font-size: 12px;
  color: #39ff14;
  font-weight: 600;
  margin: 0;
  line-height: 1.5;
}

.mr-chill-line-card-tagline {
  display: block;
  font-size: 12px;
  color: #39ff14;
  line-height: 1.55;
  margin: 0;
}

.mr-chill-line-card-price {
  display: block;
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  margin: 2px 0 0;
}

.mr-chill-line-card-actions {
  margin-top: auto;
  padding-top: 10px;
}

.mr-chill-line-card-actions .buy-button-wrap {
  width: 100%;
}

.mr-chill-line-card-actions .btn-buy {
  width: 100%;
}

@media (max-width: 768px) {
  .mr-chill-line-showcase-hint {
    display: block;
  }

  .mr-chill-line-showcase-grid--golden {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    max-width: none;
    overflow: visible;
    padding: 0 12px 12px;
  }

  .mr-chill-line-card--golden {
    flex: none;
    width: 100%;
    scroll-snap-align: unset;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .mr-chill-line-showcase-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 760px;
    gap: 18px;
  }

  .mr-chill-line-card-link {
    min-height: 240px;
  }
}

@media (min-width: 1025px) {
  .mr-chill-line-card-link {
    min-height: 260px;
  }
}

/* ── スマホ：注目ライン横スクロール（コンパクト） ── */
@media (max-width: 768px) {
  .mr-chill-featured-section {
    padding-top: 36px !important;
    padding-bottom: 36px !important;
  }

  .weedfeed-premium {
    display: flex !important;
    grid-template-columns: unset !important;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    gap: 10px !important;
    padding: 0 16px 8px !important;
    scrollbar-width: none;
  }

  .weedfeed-premium::-webkit-scrollbar {
    display: none;
  }

  .weedfeed-item-wrap {
    flex: 0 0 min(42vw, 160px);
    scroll-snap-align: start;
    margin-bottom: 0;
    gap: 8px;
  }

  .mr-chill-motion .weedfeed-item {
    aspect-ratio: 3 / 4 !important;
    border-radius: 12px;
    border: 1px solid #222;
  }

  .mr-chill-motion .weedfeed-item img {
    object-fit: contain !important;
    filter: none !important;
    background: #0a0a0a;
  }

  .mr-chill-motion .weedfeed-label {
    padding: 10px 8px;
    font-size: 12px;
    letter-spacing: 0.04em;
  }

  .weedfeed-meta {
    gap: 6px;
  }

  .weedfeed-meta :global(.btn-buy) {
    padding: 8px 6px !important;
    font-size: 10px !important;
  }
}

/* ── 全ラインナップ（特集）スマホ ── */
@media (max-width: 768px) {
  #featuring.section,
  .featuring-section {
    padding-top: 32px !important;
    padding-bottom: 40px !important;
  }

  .featuring-section .featuring {
    flex-direction: column;
  }

  .featuring-section .featuring-img img {
    max-height: 280px;
    object-fit: contain;
    background: #0a0a0a;
  }

  .featuring-section .featuring-text {
    padding: 12px 16px 14px;
  }

  .featuring-section .product-story {
    margin-bottom: 8px !important;
  }

  .featuring-section .product-story-tagline {
    margin: 6px 0 6px !important;
    padding-top: 6px !important;
  }

  .featuring-section .product-story-intro,
  .featuring-section .product-story-paragraph {
    margin-bottom: 6px !important;
    line-height: 1.65 !important;
  }

  .featuring-section .product-story-recommended {
    margin-top: 8px !important;
    padding: 10px 12px !important;
  }

  .featuring-section .featuring-text .btn-primary {
    margin-top: 10px !important;
    padding-top: 12px !important;
  }

  .featuring-section .product-story-tagline {
    font-size: 14px;
  }

  .featuring-section .product-story-intro,
  .featuring-section .product-story-paragraph {
    font-size: 13px;
  }

  .pdp-grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
    padding: 0 16px 48px !important;
  }

  .product-story-closing {
    font-size: 13px;
  }
}

/* ── 今すぐ購入：ラグジュアリー（深みのあるプラムグラデ） ── */
.mr-chill-site .btn-primary.btn-buy,
.mr-chill-site button.btn-primary.btn-buy,
.mr-chill-site a.btn-primary.btn-buy {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: linear-gradient(
    135deg,
    #1a1024 0%,
    #342448 32%,
    #4f3a62 58%,
    #635274 82%,
    #756080 100%
  ) !important;
  color: #faf8fc !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  border-radius: 999px !important;
  padding: 15px 26px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  text-transform: none !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    inset 0 -1px 0 rgba(0, 0, 0, 0.25),
    0 10px 28px rgba(0, 0, 0, 0.45),
    0 2px 8px rgba(52, 36, 72, 0.3) !important;
  transition:
    filter 0.25s ease,
    transform 0.25s ease,
    box-shadow 0.25s ease,
    border-color 0.25s ease;
}

.mr-chill-site .btn-primary.btn-buy:hover:not(:disabled),
.mr-chill-site button.btn-primary.btn-buy:hover:not(:disabled),
.mr-chill-site a.btn-primary.btn-buy:hover {
  filter: brightness(1.06);
  transform: translateY(-1px);
  border-color: rgba(255, 255, 255, 0.24) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.26),
    inset 0 -1px 0 rgba(0, 0, 0, 0.2),
    0 14px 36px rgba(0, 0, 0, 0.52),
    0 4px 12px rgba(74, 58, 96, 0.35) !important;
}

.mr-chill-site .btn-header.outline.btn-buy,
.mr-chill-site button.btn-header.outline.btn-buy,
.mr-chill-site a.btn-header.outline.btn-buy {
  background: rgba(8, 8, 8, 0.88) !important;
  border: 1px solid rgba(255, 255, 255, 0.42) !important;
  color: #f0f0f0 !important;
  border-radius: 999px !important;
  padding: 15px 26px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  text-transform: none !important;
}

.mr-chill-site .btn-header.outline.btn-buy:hover:not(:disabled),
.mr-chill-site button.btn-header.outline.btn-buy:hover:not(:disabled),
.mr-chill-site a.btn-header.outline.btn-buy:hover {
  border-color: #fff !important;
  background: rgba(255, 255, 255, 0.1) !important;
  color: #fff !important;
}

.mr-chill-site .buy-button-wrap {
  width: 100%;
}

@media (max-width: 768px) {
  .mr-chill-site .btn-primary.btn-buy,
  .mr-chill-site button.btn-primary.btn-buy,
  .mr-chill-site a.btn-primary.btn-buy,
  .mr-chill-site .btn-header.outline.btn-buy,
  .mr-chill-site button.btn-header.outline.btn-buy,
  .mr-chill-site a.btn-header.outline.btn-buy {
    padding: 14px 18px !important;
    font-size: 13px !important;
    min-height: 48px;
  }

  .mr-chill-site .ranking-actions :global(.btn-buy),
  .mr-chill-site #ranking .mr-chill-ranking-detail-btn {
    font-size: 13px !important;
    padding: 12px 14px !important;
    white-space: nowrap !important;
    writing-mode: horizontal-tb !important;
  }
}

@media (max-width: 380px) {
  .mr-chill-site .catalog-buy-actions-compact {
    flex-direction: column !important;
  }
}

/* ── ランキング：画像・文字・ボタン配置 ── */
.mr-chill-site #ranking {
  overflow-x: clip;
  overflow-y: visible;
}

.mr-chill-site #ranking .mr-chill-ranking-card-main {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  gap: 12px !important;
  align-items: center !important;
  padding: 12px 12px 0 !important;
}

.mr-chill-site #ranking .mr-chill-ranking-visual {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  aspect-ratio: 5 / 4 !important;
  height: auto !important;
  min-height: 0 !important;
  border-radius: 10px;
  overflow: hidden;
  background: #0a0a0a;
}

.mr-chill-site #ranking .mr-chill-ranking-img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  padding: 0 !important;
  margin: 0 !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
}

.mr-chill-site #ranking .mr-chill-ranking-body h3 {
  font-size: 19px !important;
  line-height: 1.2 !important;
}

.mr-chill-site #ranking .mr-chill-ranking-body .ranking-tagline,
.mr-chill-site #ranking .mr-chill-ranking-body p[class*='tagline'] {
  font-size: 13px !important;
}

.mr-chill-site #ranking .mr-chill-ranking-body .product-ingredient-text {
  font-size: 12px !important;
  color: #999 !important;
}

.mr-chill-site #ranking .mr-chill-ranking-body blockquote {
  font-size: 12px !important;
  color: #aaa !important;
  line-height: 1.6 !important;
}

.mr-chill-site #ranking .mr-chill-ranking-actions {
  width: 100%;
  padding: 10px 12px 10px !important;
}

.mr-chill-site #ranking .mr-chill-ranking-buy-actions {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  gap: 10px !important;
  width: 100% !important;
  align-items: stretch !important;
}

.mr-chill-site #ranking .mr-chill-ranking-buy-actions .buy-button-wrap {
  flex: 1.15 1 0 !important;
  min-width: 0 !important;
  width: auto !important;
}

.mr-chill-site #ranking .mr-chill-ranking-buy-actions .mr-chill-ranking-detail-btn,
.mr-chill-site #ranking .mr-chill-ranking-buy-actions a.btn-header.outline.btn-buy {
  flex: 0.85 1 0 !important;
  min-width: 112px !important;
  max-width: none !important;
  width: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  white-space: nowrap !important;
  word-break: keep-all !important;
  writing-mode: horizontal-tb !important;
  text-orientation: mixed !important;
  min-height: 48px !important;
  padding: 12px 14px !important;
  font-size: 13px !important;
}

.mr-chill-site #ranking .mr-chill-ranking-buy-actions :global(.btn-primary.btn-buy) {
  width: 100% !important;
  min-height: 48px !important;
  white-space: nowrap !important;
}

@media (max-width: 390px) {
  .mr-chill-site #ranking .mr-chill-ranking-buy-actions {
    flex-direction: column !important;
  }

  .mr-chill-site #ranking .mr-chill-ranking-buy-actions .buy-button-wrap,
  .mr-chill-site #ranking .mr-chill-ranking-buy-actions .mr-chill-ranking-detail-btn,
  .mr-chill-site #ranking .mr-chill-ranking-buy-actions a.btn-header.outline.btn-buy {
    flex: 1 1 auto !important;
    width: 100% !important;
    min-width: 0 !important;
  }
}

/* ── 商品グリッド：画像サイズ・段落整列 ── */
.mr-chill-site .product-grid {
  gap: 18px;
  padding: 0 20px 48px;
}

.mr-chill-site .product-card {
  border-radius: 14px;
  overflow: hidden;
}

.mr-chill-site .product-img {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0a0a0a;
}

.mr-chill-site .product-img img {
  width: 100%;
  height: 100%;
  object-fit: contain !important;
  object-position: center;
  padding: 12px;
}

.mr-chill-site .product-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
}

.mr-chill-site .product-name {
  margin: 0;
  line-height: 1.25;
}

.mr-chill-site .product-footer {
  margin-top: auto;
  padding-top: 12px;
}

/* ══════════════════════════════════════
   スマホ総合対応（768px以下）
   ══════════════════════════════════════ */
@media (max-width: 768px) {
  .mr-chill-site {
    overflow-x: hidden;
    width: 100%;
    max-width: 100vw;
    padding-left: env(safe-area-inset-left, 0);
    padding-right: env(safe-area-inset-right, 0);
  }

  .mr-chill-site .section {
    padding-top: 36px;
    padding-bottom: 40px;
  }

  .mr-chill-site .section-header {
    padding: 0 16px !important;
    margin-bottom: 18px !important;
  }

  .mr-chill-site .section-title {
    font-size: clamp(22px, 6vw, 30px) !important;
    line-height: 1.3 !important;
  }

  .mr-chill-site .section-label {
    font-size: 10px !important;
    letter-spacing: 0.2em !important;
  }

  .mr-chill-site .section-subtitle {
    font-size: 13px !important;
    line-height: 1.6 !important;
  }

  /* フッター */
  .mr-chill-site .footer-inner {
    grid-template-columns: 1fr 1fr !important;
    gap: 20px 16px !important;
    padding: 0 16px !important;
  }

  .mr-chill-site .footer-brand {
    grid-column: 1 / -1;
  }

  .mr-chill-site .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding: 16px !important;
  }

  /* 商品一覧：2列グリッド */
  .mr-chill-site .product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
    padding: 0 16px 40px !important;
  }

  .mr-chill-site .product-body {
    padding: 12px !important;
    gap: 6px !important;
  }

  .mr-chill-site .product-name {
    font-size: 15px !important;
    line-height: 1.3 !important;
  }

  .mr-chill-site .product-series {
    font-size: 9px !important;
  }

  .mr-chill-site .product-price {
    font-size: 17px !important;
  }

  .mr-chill-site .product-footer {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding-top: 10px !important;
  }

  .mr-chill-site .product-footer .btn-shop {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 10px 8px;
    text-align: center;
  }

  /* カテゴリフィルター横スクロール */
  .mr-chill-site .cat-filter {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    padding: 0 16px 14px !important;
    gap: 8px;
    margin-bottom: 8px !important;
  }

  .mr-chill-site .cat-filter::-webkit-scrollbar {
    display: none;
  }

  .mr-chill-site .cat-btn {
    flex: 0 0 auto;
    scroll-snap-align: start;
    min-height: 44px;
    padding: 10px 14px !important;
  }

  /* 商品詳細 — 中央揃え */
  .mr-chill-site .mr-chill-pdp .page-hero {
    text-align: center !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .mr-chill-site .mr-chill-pdp .page-hero .section-label {
    text-transform: none !important;
  }

  .mr-chill-site .pdp-grid {
    padding: 0 16px 40px !important;
    gap: 20px !important;
    justify-items: center !important;
  }

  .mr-chill-site .pdp-img {
    position: static !important;
    top: auto !important;
    width: 100% !important;
    max-width: min(92vw, 420px) !important;
    max-height: none !important;
    margin: 0 auto !important;
    aspect-ratio: 1 !important;
  }

  .mr-chill-site .pdp-img img {
    object-fit: contain !important;
    background: #0a0a0a;
  }

  .mr-chill-site .pdp-info {
    width: 100% !important;
    max-width: min(92vw, 420px) !important;
    margin: 0 auto !important;
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }

  .mr-chill-site .pdp-info h1 {
    font-size: clamp(26px, 7.5vw, 38px) !important;
    line-height: 1.15 !important;
    text-align: center !important;
  }

  .mr-chill-site .pdp-price {
    font-size: 22px !important;
    margin: 12px 0 !important;
    text-align: center !important;
  }

  .mr-chill-site .pdp-info .product-story,
  .mr-chill-site .pdp-info .product-story-intro,
  .mr-chill-site .pdp-info .product-story-paragraph {
    text-align: left !important;
    width: 100% !important;
  }

  .mr-chill-site .product-story-intro,
  .mr-chill-site .product-story-paragraph {
    font-size: 14px !important;
    line-height: 1.75 !important;
  }

  /* ランキング・セット・レビュー 横はみ出し防止 */
  .mr-chill-site #ranking {
    overflow-x: clip;
    overflow-y: visible;
  }

  .mr-chill-site #sets,
  .mr-chill-site #reviews,
  .mr-chill-site #liquid-flow {
    overflow: hidden;
  }

  .mr-chill-site #sets .section-header,
  .mr-chill-site #ranking .section-header {
    padding: 0 16px !important;
  }

  /* ハンバーガー：タップ領域 */
  .mr-chill-site .hp-mobile-nav-toggle {
    min-width: 44px;
    min-height: 44px;
    margin-right: -6px;
  }

  .mr-chill-site .hp-mobile-nav-sheet a {
    min-height: 48px;
    display: flex;
    align-items: center;
  }

  /* iOS：入力ズーム防止 */
  .mr-chill-site select,
  .mr-chill-site input,
  .mr-chill-site textarea {
    font-size: 16px;
  }
}

/* 極小スマホ（〜480px） */
@media (max-width: 480px) {
  .mr-chill-site .product-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  .mr-chill-site .footer-inner {
    grid-template-columns: 1fr !important;
  }

  .mr-chill-site-header .announcement-bar {
    font-size: 8px !important;
    letter-spacing: 0.08em !important;
  }
}

/* ══════════════════════════════════════
   モバイル UX 総合ポリッシュ（2026-07-07）
   ══════════════════════════════════════ */
@media (max-width: 768px) {
  /* スクロール出現アニメ — 重なり・空白の原因を除去 */
  .mr-chill-site .hp-reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  /* セクション間の縦リズムを統一 */
  .mr-chill-site .section,
  .mr-chill-site .home-section {
    padding-top: 28px !important;
    padding-bottom: 32px !important;
  }

  .mr-chill-site .section-header {
    margin-bottom: 14px !important;
  }

  .mr-chill-site #liquid-flow.mr-chill-flow {
    padding-bottom: 20px !important;
  }

  .mr-chill-site #featuring {
    padding-top: 24px !important;
    padding-bottom: 28px !important;
  }

  .mr-chill-site #featuring .section-header {
    margin-bottom: 16px !important;
    padding: 0 16px !important;
  }

  .mr-chill-site .mr-chill-lineup-list {
    gap: 22px !important;
    padding: 0 16px 4px !important;
  }

  .mr-chill-site .mr-chill-lineup-card {
    gap: 10px !important;
    padding-bottom: 20px !important;
  }

  .mr-chill-site .mr-chill-lineup-visual {
    aspect-ratio: 4 / 5 !important;
    max-height: min(68vw, 360px) !important;
    border-radius: 10px !important;
  }

  .mr-chill-site .mr-chill-lineup-title {
    font-size: clamp(20px, 5.8vw, 26px) !important;
  }

  .mr-chill-site .mr-chill-lineup-price {
    font-size: clamp(22px, 6vw, 28px) !important;
  }

  .mr-chill-site .mr-chill-lineup-desc {
    font-size: 13px !important;
    -webkit-line-clamp: 2;
  }

  .mr-chill-site .mr-chill-lineup-actions {
    flex-direction: row !important;
    align-items: center !important;
    gap: 12px !important;
    margin-top: 6px !important;
    padding-top: 10px !important;
  }

  .mr-chill-site .mr-chill-lineup-detail-link {
    text-align: right;
    padding: 0;
  }

  .mr-chill-site .mr-chill-featuring-list {
    display: flex;
    flex-direction: column;
    gap: 16px !important;
    max-width: none;
    padding: 0 16px;
    margin-top: 0 !important;
    position: relative;
    z-index: 1;
  }

  .mr-chill-site .mr-chill-featuring-item {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    margin: 0 !important;
    padding: 0 !important;
    position: relative !important;
    top: auto !important;
    transform: none !important;
  }

  .mr-chill-site .mr-chill-featuring-item .featuring-img {
    order: 0;
    position: relative !important;
    z-index: 1;
    margin: 0 !important;
  }

  .mr-chill-site .mr-chill-featuring-item .featuring-text {
    order: 1;
    position: relative !important;
    z-index: 2;
    padding: 0 2px 4px !important;
  }

  .mr-chill-site .mr-chill-featuring-item .featuring-img {
    aspect-ratio: 4 / 3 !important;
    max-height: min(56vw, 280px);
    border-radius: 12px;
    overflow: hidden;
    background: #0a0a0a;
  }

  .mr-chill-site .mr-chill-featuring-item .featuring-img img {
    object-fit: contain !important;
    background: #0a0a0a;
  }

  .mr-chill-site .mr-chill-featuring-item .featuring-text h2 {
    font-size: clamp(22px, 6.5vw, 28px) !important;
    margin-bottom: 10px !important;
    line-height: 1.2 !important;
  }

  .mr-chill-site .mr-chill-featuring-item .featuring-text .btn-primary {
    width: 100%;
    justify-content: center;
    margin-top: 4px;
  }

  /* 商品画像マーキー — ヒーロー直下 */
  .mr-chill-site .mr-chill-product-marquee {
    padding: 4px 0 !important;
  }

  .mr-chill-site .mr-chill-product-marquee-card {
    height: 2.4cm !important;
    width: calc(2.4cm * 1.618) !important;
    max-width: calc(2.4cm * 1.618) !important;
  }

  .mr-chill-site .mr-chill-product-marquee-card img {
    height: calc(2.4cm - 11px) !important;
  }

  /* シーンナビ — 画像マーキー直下をスリム化 */
  .mr-chill-site .scene-nav {
    padding: 5px 12px 4px !important;
    border-bottom: 1px solid #1a1a1a;
  }

  .mr-chill-site .scene-nav-pill {
    min-height: 32px !important;
    padding: 5px 10px !important;
    font-size: 9px !important;
  }

  /* 旧テキストマーキー（非使用） */
  .mr-chill-site .mr-chill-marquee.hp-text-marquee {
    padding: 6px 0 !important;
  }

  .mr-chill-site .mr-chill-marquee .mr-chill-marquee-block > span,
  .mr-chill-site .mr-chill-marquee .mr-chill-marquee-block > a,
  .mr-chill-site .mr-chill-marquee .mr-chill-marquee-products {
    padding: 0 18px !important;
    font-size: 10px !important;
    letter-spacing: 0.14em !important;
  }

  .mr-chill-site .mr-chill-marquee-cta {
    padding: 4px 12px !important;
    font-size: 10px !important;
  }

  /* シーンナビ — ヒーロー直後の空白を詰める */
  .mr-chill-site .scene-nav {
    padding: 6px 14px 4px !important;
  }

  .mr-chill-site .scene-nav-pill {
    min-height: 36px !important;
    padding: 6px 12px !important;
    font-size: 10px !important;
  }

  /* 6ライン見出し — 縦積み・余白圧縮 */
  .mr-chill-site .mr-chill-flow .image-flow-head {
    position: relative;
    z-index: 3;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 4px !important;
    margin-bottom: 8px !important;
    padding: 0 16px !important;
  }

  .mr-chill-site .mr-chill-flow .image-flow-head h2 {
    font-size: clamp(20px, 5.8vw, 26px) !important;
    line-height: 1.15 !important;
    margin: 0 !important;
  }

  .mr-chill-site .mr-chill-flow .image-flow-head .section-label {
    font-size: 10px !important;
    margin: 0 !important;
  }

  .mr-chill-site .mr-chill-flow .image-flow-head .section-subtitle,
  .mr-chill-site .mr-chill-flow .image-flow-head p {
    margin: 0 !important;
    font-size: 11px !important;
    line-height: 1.4 !important;
    color: #777 !important;
    max-width: 100% !important;
  }

  .mr-chill-site .mr-chill-flow.image-flow,
  .mr-chill-site #liquid-flow.mr-chill-flow {
    padding-top: 14px !important;
    padding-bottom: 14px !important;
  }

  .mr-chill-site .mr-chill-line-showcase-hint {
    margin: 0 0 8px !important;
    padding: 0 12px;
    font-size: 10px !important;
    text-align: center;
    color: #666 !important;
  }

  /* 6ライン — 黄金比（高さ約3cm）コンパクトグリッド */
  .mr-chill-site .mr-chill-line-showcase-grid--golden {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    overflow: visible !important;
    padding: 0 12px 10px !important;
  }

  .mr-chill-site .mr-chill-line-card--golden {
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    height: 3cm !important;
    min-height: 3cm !important;
    max-height: 3cm !important;
    width: min(100%, calc(3cm * 1.618)) !important;
    max-width: 100% !important;
    aspect-ratio: 1.618 / 1 !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    justify-self: center;
  }

  .mr-chill-site .mr-chill-line-card--golden .mr-chill-line-card-link {
    flex: 0 0 38.2% !important;
    width: 38.2% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    border-right: 1px solid #1a1a1a;
  }

  .mr-chill-site .mr-chill-line-card--golden .mr-chill-line-card-link img {
    padding: 2px !important;
    object-fit: contain !important;
  }

  .mr-chill-site .mr-chill-line-card--golden .mr-chill-line-card-meta {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    justify-content: center !important;
    gap: 2px !important;
    padding: 4px 6px 4px !important;
  }

  .mr-chill-site .mr-chill-line-card--golden .mr-chill-line-card-label {
    font-size: 10px !important;
    line-height: 1.15 !important;
    letter-spacing: 0.03em !important;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  .mr-chill-site .mr-chill-line-card--golden .mr-chill-line-card-ingredient p {
    font-size: 8px !important;
    line-height: 1.2 !important;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .mr-chill-site .mr-chill-line-card--golden .mr-chill-line-card-ingredient .product-tags,
  .mr-chill-site .mr-chill-line-card--golden .mr-chill-line-card-tagline,
  .mr-chill-site .mr-chill-line-card--golden .mr-chill-line-card-rating {
    display: none !important;
  }

  .mr-chill-site .mr-chill-line-card--golden .mr-chill-line-card-price {
    font-size: 11px !important;
    font-weight: 700 !important;
    margin: 0 !important;
    line-height: 1.1 !important;
  }

  .mr-chill-site .mr-chill-line-card--golden .mr-chill-line-card-actions {
    margin-top: 2px !important;
    padding-top: 0 !important;
  }

  .mr-chill-site .mr-chill-line-card--golden .mr-chill-line-card-actions .btn-buy {
    min-height: 22px !important;
    padding: 3px 6px !important;
    font-size: 8px !important;
    letter-spacing: 0.04em !important;
    border-radius: 999px !important;
  }

  @media (max-width: 360px) {
    .mr-chill-site .mr-chill-line-showcase-grid--golden {
      grid-template-columns: 1fr !important;
      justify-items: center;
    }

    .mr-chill-site .mr-chill-line-card--golden {
      width: min(100%, calc(3cm * 1.618)) !important;
    }
  }

  .mr-chill-site .mr-chill-line-showcase {
    position: relative;
    z-index: 1;
  }

  /* ランキング — 縦積み + バッジをタイトル横に（2×2グリッド時は ranking-grid.css に委譲） */
  .mr-chill-site #ranking.mr-chill-ranking-flow ol.mr-chill-ranking-grid {
    gap: 3px !important;
    padding: 0 3px !important;
    max-width: none !important;
  }

  .mr-chill-site #ranking:not(.mr-chill-ranking-flow) ol,
  .mr-chill-site #ranking.mr-chill-ranking-flow ol:not(.mr-chill-ranking-grid) {
    gap: 12px !important;
    padding: 0 14px !important;
  }

  .mr-chill-site #ranking .ranking-card {
    display: flex;
    flex-direction: column;
  }

  .mr-chill-site #ranking .mr-chill-ranking-title-row {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 8px !important;
  }

  .mr-chill-site #ranking .mr-chill-ranking-title-row h3 {
    font-size: 17px !important;
    line-height: 1.25 !important;
    overflow: visible !important;
    white-space: normal !important;
  }

  .mr-chill-site #ranking .mr-chill-ranking-badge {
    position: static !important;
    margin: 0 !important;
    flex-shrink: 0;
  }

  .mr-chill-site #ranking .mr-chill-ranking-card-main {
    order: 1 !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    padding: 10px 12px 0 !important;
    align-items: stretch !important;
  }

  .mr-chill-site #ranking .mr-chill-ranking-actions {
    order: 2 !important;
    margin-top: 0 !important;
    padding: 10px 12px 12px !important;
  }

  .mr-chill-site #ranking .mr-chill-ranking-visual-wrap {
    width: 100%;
  }

  .mr-chill-site #ranking .mr-chill-ranking-rule {
    margin: 5px 0 !important;
    border-top-color: rgba(255, 255, 255, 0.1) !important;
  }

  .mr-chill-site #ranking .mr-chill-ranking-body {
    gap: 4px !important;
    padding-bottom: 4px;
  }

  .mr-chill-site #ranking .mr-chill-ranking-trust-micro,
  .mr-chill-site #ranking .ranking-trust-micro {
    margin: 6px 0 0 !important;
    font-size: 10px !important;
  }

  .mr-chill-site #ranking.mr-chill-ranking-flow .mr-chill-ranking-visual,
  .mr-chill-site #ranking.mr-chill-ranking-flow .mr-chill-ranking-visual--contain {
    aspect-ratio: 3 / 4 !important;
    min-height: 200px !important;
    max-height: none !important;
  }

  .mr-chill-site #ranking:not(.mr-chill-ranking-flow) .mr-chill-ranking-visual,
  .mr-chill-site #ranking.mr-chill-ranking-flow:not(:has(.mr-chill-ranking-grid)) .mr-chill-ranking-visual {
    aspect-ratio: 16 / 10 !important;
    max-height: min(52vw, 220px);
  }

  .mr-chill-site #ranking .mr-chill-ranking-zoom-btn {
    width: 38px;
    height: 38px;
  }

  .mr-chill-site #ranking .mr-chill-ranking-body h3 {
    font-size: 18px !important;
    line-height: 1.25 !important;
    overflow: visible;
    white-space: normal;
    word-break: normal;
  }

  .mr-chill-site #ranking .mr-chill-ranking-body blockquote {
    -webkit-line-clamp: 3;
    font-size: 11px !important;
    margin-top: 4px !important;
  }

  .mr-chill-site #ranking .ranking-shipping-strip {
    margin: 16px 14px 10px !important;
    padding: 12px 14px !important;
  }

  .mr-chill-site #ranking .ranking-cta-wrap {
    padding: 0 14px 4px !important;
  }

  .mr-chill-site .mr-chill-set-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    padding: 0 16px 4px !important;
    overflow: visible !important;
  }

  .mr-chill-site .mr-chill-set-card {
    width: 100% !important;
    min-height: 0 !important;
    grid-template-rows: minmax(160px, 38vw) auto !important;
  }

  .mr-chill-site .mr-chill-set-card .set-arrival-visual--photo,
  .mr-chill-site .mr-chill-set-card .set-arrival-visual {
    background: #141414 !important;
    min-height: 0 !important;
  }

  .mr-chill-site .mr-chill-set-card .set-arrival-visual--photo img {
    object-fit: contain !important;
    padding: 8px !important;
    background: #141414 !important;
  }

  .mr-chill-site .mr-chill-set-card .mr-chill-set-scene {
    font-size: 16px !important;
    line-height: 1.4 !important;
    word-break: keep-all;
    overflow-wrap: anywhere;
  }

  .mr-chill-site .mr-chill-set-card .mr-chill-set-body {
    text-align: left;
    padding: 14px 14px 16px !important;
  }

  /* 6ライン末尾と特集の間 — 余白圧縮 */

  /* ヒーロー — 初回1画面フル（下の6ラインはスクロール後） */
  .mr-chill-site .mr-chill-hero-firstscreen {
    min-height: 100svh !important;
    min-height: 100dvh !important;
    height: 100svh !important;
    height: 100dvh !important;
    max-height: none !important;
  }

  .mr-chill-site .mr-chill-hero-firstscreen .mr-chill-film-hero,
  .mr-chill-site .mr-chill-hero-firstscreen .mr-chill-film-hero .hero-cinema-slides,
  .mr-chill-site .mr-chill-hero-firstscreen .mr-chill-film-hero .hero-cinema-slide {
    min-height: 100% !important;
    height: 100% !important;
    max-height: none !important;
  }

  .mr-chill-site .mr-chill-hero-firstscreen .mr-chill-cinema-content {
    min-height: 100% !important;
    height: 100% !important;
    justify-content: center !important;
    padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .mr-chill-site .mr-chill-film-title-jp-text {
    font-size: clamp(20px, 5.2vw, 28px) !important;
  }

  .mr-chill-site .mr-chill-film-spec {
    color: rgba(255, 255, 255, 0.78) !important;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.8);
    margin-bottom: 14px !important;
  }

  /* ヒーロー入場アニメ — モバイルでも有効（hp-reveal とは別） */
  .mr-chill-site .mr-chill-film-hero.is-intro .mr-chill-intro-slide.active .mr-chill-film-eyebrow {
    animation: mrChillFilmFade 1.1s cubic-bezier(0.22, 1, 0.36, 1) 0.15s both !important;
  }

  .mr-chill-site .mr-chill-film-hero.is-intro .mr-chill-intro-slide.active .mr-chill-film-title-main {
    animation: mrChillFilmFade 1.25s cubic-bezier(0.22, 1, 0.36, 1) 0.35s both !important;
  }

  .mr-chill-site .mr-chill-film-hero.is-intro .mr-chill-intro-slide.active .mr-chill-film-title-jp,
  .mr-chill-site .mr-chill-film-hero.is-intro .mr-chill-intro-slide.active .mr-chill-film-title-jp-gradient {
    animation: mrChillFilmFade 1.35s cubic-bezier(0.22, 1, 0.36, 1) 0.58s both !important;
  }

  .mr-chill-site .mr-chill-film-hero.is-intro .mr-chill-intro-slide.active .mr-chill-film-title-jp-text {
    animation:
      mrChillFilmFade 1.35s cubic-bezier(0.22, 1, 0.36, 1) 0.58s both,
      mrChillTaglineShimmer 5s ease-in-out 1.2s infinite !important;
  }

  .mr-chill-site .mr-chill-film-hero.is-intro .mr-chill-intro-slide.active .mr-chill-film-spec {
    animation: mrChillFilmFade 1s cubic-bezier(0.22, 1, 0.36, 1) 0.72s both !important;
  }

  .mr-chill-site .mr-chill-film-hero.is-intro .mr-chill-intro-slide.active .mr-chill-hero-rating {
    animation: mrChillFilmFade 1s cubic-bezier(0.22, 1, 0.36, 1) 0.82s both !important;
  }

  .mr-chill-site .mr-chill-film-hero.is-intro .mr-chill-intro-slide.active .mr-chill-film-cta {
    animation: mrChillFilmFade 1s cubic-bezier(0.22, 1, 0.36, 1) 0.92s both !important;
  }
}

/* ���� PDP ���������i�S���E�f�X�N�g�b�v�܂ށj ���� */
.mr-chill-site .mr-chill-pdp .page-hero {
  text-align: center;
}

.mr-chill-site .mr-chill-pdp .page-hero .section-label {
  text-transform: none;
}

.mr-chill-site .mr-chill-pdp .pdp-grid {
  justify-items: center;
}

.mr-chill-site .mr-chill-pdp .pdp-img {
  width: 100%;
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
}

.mr-chill-site .mr-chill-pdp .pdp-info {
  width: 100%;
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.mr-chill-site .mr-chill-pdp .pdp-info h1,
.mr-chill-site .mr-chill-pdp .pdp-price {
  text-align: center;
  width: 100%;
}

/* PDP center + 1ml protection */
.mr-chill-site .mr-chill-pdp .page-hero {
  text-align: center;
}

.mr-chill-site .mr-chill-pdp .page-hero .section-label,
.mr-chill-site .product-series,
.mr-chill-site .product-series-label,
.mr-chill-site .product-series-volume,
.mr-chill-site .pdp-series,
.mr-chill-site .lineup-series,
.mr-chill-site .mr-chill-lineup-series,
.mr-chill-site .product-story-series {
  text-transform: none !important;
}

.mr-chill-site .mr-chill-pdp .pdp-grid {
  justify-items: center;
}

.mr-chill-site .mr-chill-pdp .pdp-img {
  width: 100%;
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
}

.mr-chill-site .mr-chill-pdp .pdp-info {
  width: 100%;
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.mr-chill-site .mr-chill-pdp .pdp-info h1,
.mr-chill-site .mr-chill-pdp .pdp-price {
  text-align: center;
  width: 100%;
}

.mr-chill-site .mr-chill-pdp .pdp-buy-actions {
  width: 100%;
  justify-content: center;
}

.mr-chill-site .mr-chill-pdp .pdp-rating {
  display: flex;
  justify-content: center;
  width: 100%;
}

.mr-chill-site .mr-chill-pdp .product-story {
  text-align: left;
  width: 100%;
}