/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Jul 08 2026 | 12:11:40 */
/* ============================================================
   香LIG ランキングCSS v2.0
   ファイル名: ranking.css
   ============================================================

   ■ v2.0 変更点（画像・CTA改善）

     IMAGE-FIX-1: .rank-img-box を 68×68 → 96×96px に拡大
       → PSIの「表示サイズ(95px)に対して1080pxを配信」という警告に対応。
         表示サイズを正直に大きくすることで視認性を改善。
         ファイルサイズ削減は ranking-image-fix.php（WordPress側）で実施。

     IMAGE-FIX-2: img に width/height 属性指定（CLS防止）
       → HTMLテンプレート側で width="96" height="96" を付与すること。

     IMAGE-FIX-3: .rank-img-col の幅を 88px → 118px に拡張
       → 画像が大きくなった分、左余白が詰まらないよう調整。

     CTA-FIX-1: .rank-cta ボタンを大きく・目立つデザインに変更
       → 従来の小さいピルボタンから、幅広のCTAに変更。
         右下固定ではなくカード下部全体に配置し、スマホでも押しやすく。

     PERF-1: transition: all → 個別プロパティ（既存バグ修正を維持）
     PERF-2: contain / will-change（既存バグ修正を維持）
     PERF-3: prefers-reduced-motion（既存バグ修正を維持）

   ■ このファイルに対応する作業
     → ranking-image-fix.php を functions.php に追加（必須）
     → HTMLテンプレートの <img> タグを修正（必須）

   ============================================================ */

.ranking-list {
  background: #f8f5f6;
  font-family: 'Hiragino Mincho ProN', 'Yu Mincho', serif;
  -webkit-text-size-adjust: 100%;
  color: #5c5260;
  padding: 20px 12px 40px;
  max-width: 720px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
  contain: layout style;
}

/* ── 見出し ───────────────────────────────────── */
.ranking-heading { text-align: center; margin-bottom: 24px; }
.ranking-heading-sub {
  font-size: 9.5px; font-weight: 700; letter-spacing: .22em;
  color: #c99aa8; text-transform: uppercase;
  font-family: 'Helvetica Neue', Arial, sans-serif;
  display: block; margin-bottom: 8px;
}
.ranking-main-title {
  font-size: clamp(16px, 4vw, 22px); font-weight: 800;
  color: #3a3038; letter-spacing: .04em; line-height: 1.5;
  margin: 0;
}

/* ── カード全体 ───────────────────────────────── */
.rank-card {
  background: #ffffff;
  border: 1px solid #ede4e9;
  border-radius: 14px;
  box-shadow: 0 3px 14px rgba(100,60,80,.05);
  overflow: hidden;
  display: flex;
  flex-direction: column; /* ★ 縦方向に変更（CTA下配置のため） */
  position: relative;
  transition: box-shadow .2s ease, transform .2s ease;
  will-change: transform;
}
@media (hover: hover) and (pointer: fine) {
  .rank-card:hover {
    box-shadow: 0 6px 22px rgba(100,60,80,.10);
    transform: translateY(-1px);
  }
}

/* カード上部（バッジ・画像・テキストの横並び） */
.rank-card-top {
  display: flex;
  flex-direction: row;
}

/* 1〜3位の左ライン色 */
.rank-card[data-rank="1"] { border-left: 3px solid #c9a86c; }
.rank-card[data-rank="2"] { border-left: 3px solid #a0a8b8; }
.rank-card[data-rank="3"] { border-left: 3px solid #b8956a; }

/* ── 左：順位バッジ列 ─────────────────────────── */
.rank-badge-col {
  flex-shrink: 0; width: 52px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: flex-start;
  padding: 16px 0 12px;
  background: #faf5f7;
  border-right: 1px solid #ede4e9;
}
.rank-num {
  font-size: 20px; font-weight: 800; line-height: 1;
  font-family: 'Helvetica Neue', Arial, sans-serif;
}
.rank-label {
  font-size: 8px; font-weight: 700; letter-spacing: .08em;
  font-family: 'Helvetica Neue', Arial, sans-serif;
  margin-top: 2px;
}
.rank-card[data-rank="1"] .rank-num,
.rank-card[data-rank="1"] .rank-label { color: #c9a86c; }
.rank-card[data-rank="2"] .rank-num,
.rank-card[data-rank="2"] .rank-label { color: #a0a8b8; }
.rank-card[data-rank="3"] .rank-num,
.rank-card[data-rank="3"] .rank-label { color: #b8956a; }
.rank-card:not([data-rank="1"]):not([data-rank="2"]):not([data-rank="3"]) .rank-num,
.rank-card:not([data-rank="1"]):not([data-rank="2"]):not([data-rank="3"]) .rank-label {
  color: #c99aa8;
}

/* ── 中：画像列 ───────────────────────────────── */
/*
 * ★ IMAGE-FIX-3：幅を 88px → 118px に拡張
 * 画像ボックスが 96px になったため、左右の余白を確保するために拡張。
 */
.rank-img-col {
  flex-shrink: 0; width: 118px;
  padding: 14px 11px;
  display: flex; align-items: flex-start; justify-content: center;
  padding-top: 16px;
}

/*
 * ★ IMAGE-FIX-1：68×68 → 96×96px に拡大
 *
 * 変更前：68px → デバイス2倍解像度で実測 95px → 元ファイル1080px（99%無駄）
 * 変更後：96px → デバイス2倍解像度で 192px → WordPress の medium_large（300px）で対応
 *
 * この CSS 変更だけでは画像ファイルサイズは減りません。
 * ranking-image-fix.php を必ず functions.php に追加してください。
 */
.rank-img-box {
  position: relative;
  width: 96px;            /* ★ 68 → 96 */
  height: 96px;           /* ★ 68 → 96 */
  border-radius: 12px;    /* ★ 10 → 12（大きくなった比率に合わせて調整） */
  overflow: hidden;
  background: #f4f0f3;
  border: 1px solid #ede4e9;
  /* CLS（レイアウトシフト）防止：aspect-ratio で高さを事前確保 */
  aspect-ratio: 1 / 1;
}
.rank-img-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* 画像の読み込み完了までスムーズなフェードイン */
  transition: opacity .3s ease;
}
.rank-img-box img[loading="lazy"] {
  /* 遅延読み込み中の背景色でガタつきを防止 */
  background-color: #f4f0f3;
}
.img-affil-link {
  position: absolute; inset: 0; z-index: 2; display: block;
}

/* ── 右：テキスト列 ───────────────────────────── */
.rank-info-col {
  flex: 1; padding: 14px 14px 12px 6px;
  display: flex; flex-direction: column;
  gap: 5px; min-width: 0;
}
.rank-brand {
  font-size: 9.5px; font-weight: 700; letter-spacing: .08em;
  color: #c99aa8; text-transform: uppercase;
  font-family: 'Helvetica Neue', Arial, sans-serif;
}
.rank-name {
  font-size: 13.5px; font-weight: 800;
  color: #3a3038; line-height: 1.45; letter-spacing: .02em;
  word-break: break-all;
}

/* ── タグ ─────────────────────────────────────── */
.rank-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 1px; }
.tag {
  display: inline-block; font-size: 9.5px; font-weight: 700;
  padding: 2px 7px; border-radius: 20px;
  font-family: 'Helvetica Neue', Arial, sans-serif;
  letter-spacing: .04em; white-space: nowrap;
}
.tag-age   { background: #f0eaf4; color: #a898c0; border: 1px solid #ddd4ec; }
.tag-scent { background: #f4eee8; color: #a07850; border: 1px solid #e0cfb8; }
.tag-scene { background: #faf5f7; color: #b87888; border: 1px solid #ede4e9; }

/* ── 価格 ─────────────────────────────────────── */
.rank-price {
  font-size: 14px; font-weight: 800; color: #3a3038;
  font-family: 'Helvetica Neue', Arial, sans-serif;
}
.rank-price-note {
  font-size: 10px; color: #8a7e8c;
  font-family: 'Helvetica Neue', Arial, sans-serif;
  margin-left: 4px; font-weight: 400;
}

/* ── 女性からの印象 ───────────────────────────── */
.rank-impression {
  font-size: 11.5px; color: #8a7e8c; line-height: 1.5;
}
.rank-impression strong { color: #b87888; font-weight: 700; }

/* ── CTA（詳しく調べてみる）ボタン ───────────────
 *
 * ★ CTA-FIX-1：カード下部を横断するCTAラインに変更
 *
 * 変更前：右下の小さなピルボタン（11.5px・目立たない）
 * 変更後：カード下部の横線の上に配置されたボタン
 *         → 右寄せで「次のアクションはここ」と明確に示す
 *
 * デザインの意図：
 * - カードのトーン（薔薇系）に合わせた色
 * - padding を大きくしてスマホでもタップしやすく
 * - ボーダーとアイコンで「クリックできる」ことを明示
 * ───────────────────────────────────────────── */
.rank-cta {
  /* カード下部の区切り線の上に配置 */
  border-top: 1px solid #ede4e9;
  padding: 10px 14px;
  display: flex;
  justify-content: flex-end; /* 右寄せ */
  align-items: center;
  background: #faf5f7;       /* バッジ列と同じ背景で視覚的なまとまりを作る */
}
.rank-cta a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;          /* ★ 11.5 → 12.5px（可読性向上） */
  font-weight: 700;
  color: #b87888;             /* ★ ローズ系でブランドカラーに統一 */
  text-decoration: none;
  font-family: 'Helvetica Neue', Arial, sans-serif;
  letter-spacing: .04em;
  /* ピルボタン */
  background: #ffffff;
  border: 1.5px solid #dbbac4;
  border-radius: 20px;
  padding: 8px 18px;          /* ★ 5px 12px → 8px 18px（タップエリア拡大） */
  transition: color .15s ease, background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
  box-shadow: 0 1px 4px rgba(184,120,136,.08);
}
@media (hover: hover) and (pointer: fine) {
  .rank-cta a:hover {
    color: #9a5868;
    border-color: #b87888;
    background: #fff5f7;
    box-shadow: 0 3px 10px rgba(184,120,136,.16);
  }
}
.rank-cta a:active {
  transform: scale(0.97);
}
.cta-arrow {
  font-style: normal;
  font-size: 11px;
  display: inline-block;
  /* アニメーションなし（シンプルに保つ） */
}

/* ── 注意書き ─────────────────────────────────── */
.ranking-note {
  font-size: 11px; color: #8a7e8c; line-height: 1.8;
  margin-top: 4px; padding: 10px 14px;
  background: #f4f0f3; border-radius: 8px;
  border-left: 2px solid #e0d0d8;
}

/* ── もっとみるボタン ─────────────────────────── */
.kaolig-more-btn {
  display: flex;
  justify-content: center;
  margin: 32px auto 0;
}
.kaolig-more-btn a,
.kaolig-more-btn button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'Helvetica Neue', Arial, 'Hiragino Sans', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .08em;
  color: #c99aa8;
  text-decoration: none;
  background: #ffffff;
  border: 1.5px solid #dbbac4;
  border-radius: 50px;
  padding: 10px 28px;
  cursor: pointer;
  transition: color .15s ease, background-color .15s ease, border-color .15s ease, box-shadow .2s ease;
  box-shadow: 0 2px 10px rgba(100,60,80,.04);
}
@media (hover: hover) and (pointer: fine) {
  .kaolig-more-btn a:hover,
  .kaolig-more-btn button:hover {
    color: #b87888;
    border-color: #b87888;
    background: #fff5f7;
    box-shadow: 0 4px 16px rgba(184,120,136,.12);
  }
}
.kaolig-more-btn a:active,
.kaolig-more-btn button:active {
  transform: translateY(1px);
  box-shadow: none;
}
.kaolig-more-btn .btn-arrow {
  font-style: normal;
  font-size: 11px;
  display: inline-block;
}

/* ── スマホ対応 ───────────────────────────────── */
@media (max-width: 480px) {
  .ranking-list { padding: 14px 8px 32px; }

  .rank-badge-col { width: 44px; }
  .rank-num { font-size: 17px; }

  /*
   * ★ スマホ：画像は 96 → 80px に縮小（画面幅に合わせて）
   * 80px × 2 DPR = 160px → WordPress thumbnail(150px)でギリギリ対応可
   * ranking-image-fix.php で kaori-thumb(200px) を追加すれば完璧
   */
  .rank-img-col { width: 100px; padding: 12px 8px; }
  .rank-img-box { width: 80px; height: 80px; }

  .rank-info-col { padding: 12px 10px 10px 4px; gap: 4px; }
  .rank-name { font-size: 12.5px; }
  .rank-price { font-size: 13px; }
  .tag { font-size: 9px; padding: 2px 6px; }

  /* CTA：スマホではやや小さく（でも押せる最低サイズを確保） */
  .rank-cta { padding: 8px 12px; }
  .rank-cta a {
    font-size: 11.5px;
    padding: 7px 14px;
  }

  .kaolig-more-btn a,
  .kaolig-more-btn button { font-size: 12px; padding: 9px 22px; }
}

/* ── prefers-reduced-motion ───────────────────── */
@media (prefers-reduced-motion: reduce) {
  .rank-card { transition: none; will-change: auto; }
  .rank-card:hover { transform: none; }
  .rank-img-box img { transition: none; }
  .rank-cta a { transition: none; }
  .kaolig-more-btn a,
  .kaolig-more-btn button { transition: none; }
}