/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Jul 08 2026 | 12:07:42 */
/* ============================================================
 *  香LIG「おすすめ記事一覧」ページ専用スタイル v3.2
 *  ファイル名: kaolig-picks.css
 *  最終更新: 2026-05-06
 *
 *  ■ デザインコンセプト
 *    "Discover" — 索引としての機能美と Editorial × Modern の融合
 *
 *  ■ 修正履歴
 *    v3.2: 人気ブランドTOP5クイックナビ（kp-top5-nav）追加
 *    v3.1: スマホ2カラム時のブランド名折り返し修正
 *          セクション見出しが3行になる問題を修正
 *          ボタン表示の安定化
 *
 *  ■ 影響範囲
 *    すべて .kaolig-picks 配下にスコープ済み
 * ============================================================ */


/* ============================================================
   ベーススコープ & CSS変数
   ============================================================ */
.kaolig-picks {
  font-family: 'Noto Sans JP', sans-serif;
  background: #faf8f3;
  color: #0a0a0a;
  line-height: 1.7;
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;

  --kp-bg:         #faf8f3;
  --kp-bg-warm:    #f5f1e8;
  --kp-paper:      #ffffff;
  --kp-ink:        #0a0a0a;
  --kp-ink-soft:   #2a2a28;
  --kp-ink-mid:    #4a4a47;
  --kp-ink-faint:  #6e6e6a;
  --kp-line:       #e2dfd5;
  --kp-line-soft:  #ede9dd;
  --kp-sand:       #efe9d9;
  --kp-dark:       #14110d;

  --kp-tone-warm:       #fdf3eb;
  --kp-tone-warm-deep:  #f5d9c0;
  --kp-tone-cool:       #ecf2fa;
  --kp-tone-cool-deep:  #c5d8ee;
  --kp-tone-sand:       #f4ecdb;
  --kp-tone-sand-deep:  #e0cfa9;
  --kp-tone-stone:      #e8e6df;
  --kp-tone-stone-deep: #c2bfb4;

  --kp-morning-1: #fef4e8;
  --kp-morning-2: #fbe2c4;
  --kp-day-1:     #f4f0e6;
  --kp-day-2:     #e8dec7;
  --kp-evening-1: #f8e3d0;
  --kp-evening-2: #e8b896;
  --kp-night-1:   #e8edf5;
  --kp-night-2:   #b8c5da;

  --kp-pink-50:     #fbeaf0;
  --kp-pink-200:    #efb8cd;
  --kp-blue-50:     #e6f1fb;
  --kp-blue-200:    #abc8e8;
  --kp-tag-popular: #c45c7d;
  --kp-tag-japan:   #8a3a3a;
  --kp-tag-classic: #5d6b8a;
  --kp-tag-new:     #4a7a4a;

  --kp-serif:    'Noto Serif JP', serif;
  --kp-sans:     'Noto Sans JP', sans-serif;
  --kp-en:       'Cormorant Garamond', serif;
  --kp-ease:     cubic-bezier(0.22, 1, 0.36, 1);
  --kp-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

.kaolig-picks *,
.kaolig-picks *::before,
.kaolig-picks *::after { box-sizing: border-box; }
.kaolig-picks p  { margin: 0; }
.kaolig-picks h1,
.kaolig-picks h2,
.kaolig-picks h3 { margin: 0; font-weight: 400; }
.kaolig-picks a  { color: inherit; text-decoration: none; }
.kaolig-picks img { max-width: 100%; display: block; }
.kaolig-picks ul,
.kaolig-picks ol { list-style: none; padding: 0; margin: 0; }


/* ============================================================
   HERO
   ============================================================ */
.kaolig-picks .kp-hero {
  position: relative;
  padding: 96px 24px 88px;
  text-align: center;
  overflow: hidden;
  background: var(--kp-bg);
  contain: layout paint;
}
.kaolig-picks .kp-hero-bg {
  position: absolute; inset: 0;
  pointer-events: none; z-index: 0; overflow: hidden;
}
.kaolig-picks .kp-hero-orb {
  position: absolute; border-radius: 50%; opacity: 0.5;
  animation: kp-orb-float 22s ease-in-out infinite;
  will-change: transform;
}
.kaolig-picks .kp-hero-orb-pink {
  width: 480px; height: 480px; top: -10%; left: -15%;
  background: radial-gradient(circle at 35% 35%,
    rgba(247,213,224,.55) 0%, rgba(247,213,224,.15) 45%, transparent 70%);
}
.kaolig-picks .kp-hero-orb-blue {
  width: 540px; height: 540px; bottom: -15%; right: -12%;
  background: radial-gradient(circle at 50% 50%,
    rgba(208,227,244,.5) 0%, rgba(208,227,244,.14) 45%, transparent 70%);
  animation-delay: -11s; animation-duration: 26s;
}
@keyframes kp-orb-float {
  0%,100% { transform: translate3d(0,0,0) scale(1); }
  33%     { transform: translate3d(24px,-18px,0) scale(1.05); }
  66%     { transform: translate3d(-14px,22px,0) scale(0.97); }
}
.kaolig-picks .kp-hero > * { position: relative; z-index: 1; }

.kaolig-picks .kp-hero-vertical {
  position: absolute; top: 50%; left: 18px;
  transform: translateY(-50%) rotate(180deg);
  writing-mode: vertical-rl;
  font-family: var(--kp-en); font-style: italic;
  font-size: 10px; letter-spacing: .4em; color: var(--kp-ink-faint);
  margin: 0; z-index: 2;
}
.kaolig-picks .kp-hero-eyebrow {
  font-family: var(--kp-en); font-style: italic;
  font-size: 11px; letter-spacing: .4em; color: var(--kp-ink-faint);
  margin: 0 0 24px; text-transform: uppercase;
}
.kaolig-picks .kp-hero-title {
  display: block; margin: 0 0 36px;
}
.kaolig-picks .kp-hero-title-jp {
  display: block;
  font-family: var(--kp-serif); font-weight: 200;
  font-size: clamp(32px,7vw,60px); letter-spacing: .06em;
  line-height: 1.3; color: var(--kp-ink);
}
.kaolig-picks .kp-hero-title-en {
  display: block;
  font-family: var(--kp-en); font-style: italic; font-weight: 300;
  font-size: clamp(20px,4vw,32px); letter-spacing: .06em;
  line-height: 1; color: var(--kp-ink-mid);
  position: relative; padding-top: 20px; margin-top: 8px;
}
.kaolig-picks .kp-hero-title-en::before {
  content: ''; position: absolute; top: 0; left: 50%;
  transform: translateX(-50%); width: 32px; height: 1px;
  background: linear-gradient(90deg, var(--kp-pink-200), var(--kp-blue-200));
  opacity: .7;
}
.kaolig-picks .kp-hero-statement {
  font-family: var(--kp-serif); font-weight: 300;
  font-size: 14px; line-height: 2.2; color: var(--kp-ink-soft);
  letter-spacing: .06em; max-width: 540px; margin: 0 auto 56px;
}

/* ジャンプメニュー */
.kaolig-picks .kp-hero-jump {
  display: flex; flex-direction: column; gap: 12px;
  max-width: 540px; margin: 0 auto;
}
.kaolig-picks .kp-jump-btn {
  display: grid; grid-template-columns: auto 1fr auto;
  align-items: center; gap: 16px;
  padding: 22px 28px; background: var(--kp-paper);
  border: 1px solid var(--kp-line); text-align: left;
  transition: all .4s var(--kp-ease);
  position: relative; overflow: hidden;
}
.kaolig-picks .kp-jump-btn::before {
  content: ''; position: absolute; inset: 0;
  background: var(--kp-ink); transform: translateX(-101%);
  transition: transform .4s var(--kp-ease); z-index: 0;
}
.kaolig-picks .kp-jump-btn > * { position: relative; z-index: 1; }
.kaolig-picks .kp-jump-btn:hover::before { transform: translateX(0); }
.kaolig-picks .kp-jump-btn:hover { color: #f5f3ed; border-color: var(--kp-ink); }
.kaolig-picks .kp-jump-num {
  font-family: var(--kp-en); font-style: italic;
  font-size: 11px; letter-spacing: .32em; opacity: .6;
}
.kaolig-picks .kp-jump-label-jp {
  font-family: var(--kp-serif); font-size: 14px;
  letter-spacing: .08em; font-weight: 400;
}
.kaolig-picks .kp-jump-label-en {
  display: none; font-family: var(--kp-en); font-style: italic;
  font-size: 13px; letter-spacing: .18em; opacity: .6;
}


/* ============================================================
   SECTION COMMON
   ============================================================ */
.kaolig-picks .kp-section {
  padding: 100px 24px; position: relative; contain: layout;
}
.kaolig-picks .kp-section-alt {
  background: var(--kp-paper);
  border-top: 1px solid var(--kp-line);
  border-bottom: 1px solid var(--kp-line);
}
.kaolig-picks .kp-section-header {
  text-align: center; margin: 0 auto 40px; max-width: 800px;
}
.kaolig-picks .kp-section-num {
  font-family: var(--kp-en); font-style: italic;
  font-size: 11px; letter-spacing: .4em; color: var(--kp-ink-faint);
  margin: 0 0 24px; text-transform: uppercase;
}
.kaolig-picks .kp-section-title {
  font-family: var(--kp-serif); font-weight: 200;
  font-size: clamp(28px,5.5vw,48px); letter-spacing: .04em;
  line-height: 1.3; color: var(--kp-ink); margin: 0 0 20px;
}
.kaolig-picks .kp-title-line { display: block; }
.kaolig-picks .kp-title-italic {
  font-family: var(--kp-en); font-style: italic; font-weight: 300;
  letter-spacing: .02em; color: var(--kp-ink-mid);
}
.kaolig-picks .kp-section-en {
  font-family: var(--kp-en); font-style: italic;
  font-size: 13px; letter-spacing: .32em; color: var(--kp-ink-faint);
  margin: 0; text-transform: uppercase;
  position: relative; display: inline-block; padding: 0 16px;
}
.kaolig-picks .kp-section-en::before,
.kaolig-picks .kp-section-en::after {
  content: ''; position: absolute; top: 50%; width: 24px; height: 1px;
  background: var(--kp-line);
}
.kaolig-picks .kp-section-en::before { right: 100%; }
.kaolig-picks .kp-section-en::after  { left:  100%; }
.kaolig-picks .kp-section-lead {
  font-family: var(--kp-serif); font-weight: 300;
  font-size: 13px; line-height: 2.1;
  text-align: center !important; color: var(--kp-ink-soft);
  max-width: 580px; margin: 0 auto 56px; letter-spacing: .05em;
}


/* ============================================================
   BRAND GRID（旧バージョン互換）
   ============================================================ */
.kaolig-picks .kp-brand-grid {
  max-width: 1200px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr; gap: 12px;
}
.kaolig-picks .kp-brand-card {
  position: relative; padding: 28px 24px;
  border: 1px solid var(--kp-line); background: var(--kp-paper);
  display: flex; flex-direction: column; gap: 12px;
  transition: transform .4s var(--kp-ease), box-shadow .4s var(--kp-ease);
  overflow: hidden;
}
.kaolig-picks .kp-brand-card::before {
  content: ''; position: absolute; inset: 0;
  opacity: .65; z-index: 0; pointer-events: none;
  transition: opacity .4s var(--kp-ease);
}
.kaolig-picks .kp-brand-card > * { position: relative; z-index: 1; }
.kaolig-picks .kp-brand-card:hover { transform: translateY(-4px); box-shadow: 0 22px 48px -22px rgba(0,0,0,.18); }
.kaolig-picks .kp-brand-card:hover::before { opacity: .85; }

.kaolig-picks .kp-brand-rank {
  font-family: var(--kp-en); font-style: italic;
  font-size: 11px; letter-spacing: .32em; color: var(--kp-ink-faint); text-transform: uppercase;
}
.kaolig-picks .kp-brand-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.kaolig-picks .kp-brand-tag {
  font-family: var(--kp-en); font-style: italic;
  font-size: 9px; letter-spacing: .2em; padding: 3px 9px;
  border-radius: 100px; background: rgba(255,255,255,.7);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  text-transform: uppercase; font-weight: 500;
}
.kaolig-picks .kp-tag-popular { color: var(--kp-tag-popular); }
.kaolig-picks .kp-tag-japan   { color: var(--kp-tag-japan);   }
.kaolig-picks .kp-tag-classic { color: var(--kp-tag-classic); }
.kaolig-picks .kp-tag-new     { color: var(--kp-tag-new);     }

.kaolig-picks .kp-brand-name {
  font-family: var(--kp-en); font-style: italic; font-weight: 300;
  font-size: clamp(28px,5vw,44px); letter-spacing: .02em;
  line-height: 1.05; color: var(--kp-ink); margin: 8px 0;
}
.kaolig-picks .kp-brand-name-sub {
  font-size: .55em; display: block; margin-top: 4px;
  letter-spacing: .18em; color: var(--kp-ink-mid);
}
.kaolig-picks .kp-brand-desc {
  font-family: var(--kp-serif); font-weight: 300;
  font-size: 12px; line-height: 1.95; color: var(--kp-ink-soft);
  letter-spacing: .04em; margin-top: auto;
}
.kaolig-picks .kp-brand-link {
  font-family: var(--kp-en); font-style: italic;
  font-size: 11px; letter-spacing: .18em; color: var(--kp-ink);
  margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--kp-line-soft);
  transition: letter-spacing .3s var(--kp-ease);
}
.kaolig-picks .kp-brand-card:hover .kp-brand-link { letter-spacing: .24em; }

.kaolig-picks .kp-brand-large { min-height: 280px; padding: 36px 32px; }
.kaolig-picks .kp-brand-medium { min-height: 220px; }
.kaolig-picks .kp-brand-small {
  min-height: 140px; padding: 20px 22px;
  flex-direction: row; align-items: center; gap: 16px; flex-wrap: wrap;
}
.kaolig-picks .kp-brand-small .kp-brand-rank { flex: 0 0 100%; }
.kaolig-picks .kp-brand-small .kp-brand-name { font-size: clamp(20px,4vw,28px); margin: 4px 0; flex: 1; }
.kaolig-picks .kp-brand-small .kp-brand-link { margin-top: 0; padding-top: 0; border-top: none; }


/* ============================================================
   SCENE GRID
   ============================================================ */
.kaolig-picks .kp-timeline {
  max-width: 800px; margin: 0 auto 48px;
  display: flex; align-items: center; gap: 8px; padding: 0 8px;
}
.kaolig-picks .kp-timeline-mark {
  font-family: var(--kp-en); font-style: italic;
  font-size: 10px; letter-spacing: .28em; color: var(--kp-ink-faint);
  text-transform: uppercase; white-space: nowrap;
}
.kaolig-picks .kp-timeline-line {
  flex: 1; height: 1px;
  background: linear-gradient(90deg,
    var(--kp-morning-2) 0%, var(--kp-day-2) 33%,
    var(--kp-evening-2) 66%, var(--kp-night-2) 100%);
  opacity: .5;
}

.kaolig-picks .kp-scene-grid {
  max-width: 1200px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr; gap: 12px;
}
.kaolig-picks .kp-scene-card {
  position: relative; padding: 32px 26px;
  border: 1px solid var(--kp-line);
  display: flex; flex-direction: column; gap: 8px; min-height: 200px;
  transition: transform .4s var(--kp-ease), box-shadow .4s var(--kp-ease);
  overflow: hidden;
}
.kaolig-picks .kp-scene-card::before {
  content: ''; position: absolute; inset: 0; z-index: 0;
  opacity: .7; transition: opacity .4s var(--kp-ease);
}
.kaolig-picks .kp-scene-card > * { position: relative; z-index: 1; }
.kaolig-picks .kp-scene-card:hover { transform: translateY(-4px); box-shadow: 0 22px 48px -22px rgba(0,0,0,.18); }
.kaolig-picks .kp-scene-card:hover::before { opacity: .9; }

.kaolig-picks .kp-scene-morning::before { background: linear-gradient(135deg, var(--kp-morning-1) 0%, var(--kp-morning-2) 100%); }
.kaolig-picks .kp-scene-day::before     { background: linear-gradient(135deg, var(--kp-day-1)     0%, var(--kp-day-2)     100%); }
.kaolig-picks .kp-scene-evening::before { background: linear-gradient(135deg, var(--kp-evening-1) 0%, var(--kp-evening-2) 100%); }
.kaolig-picks .kp-scene-night::before   { background: linear-gradient(135deg, var(--kp-night-1)   0%, var(--kp-night-2)   100%); }

.kaolig-picks .kp-scene-time {
  font-family: var(--kp-en); font-style: italic; font-weight: 300;
  font-size: 28px; letter-spacing: .04em; line-height: 1;
  color: var(--kp-ink); opacity: .55; margin-bottom: 4px;
}
.kaolig-picks .kp-scene-title {
  font-family: var(--kp-serif); font-weight: 400;
  font-size: 19px; letter-spacing: .06em; line-height: 1.4; color: var(--kp-ink); margin: 0;
}
.kaolig-picks .kp-scene-en {
  font-family: var(--kp-en); font-style: italic;
  font-size: 11px; letter-spacing: .22em; color: var(--kp-ink-mid); margin: 0; text-transform: uppercase;
}
.kaolig-picks .kp-scene-desc {
  font-family: var(--kp-serif); font-weight: 300;
  font-size: 11px; line-height: 1.95; color: var(--kp-ink-soft);
  letter-spacing: .04em; margin: 8px 0 0;
}
.kaolig-picks .kp-scene-arrow {
  font-family: var(--kp-en); font-style: italic;
  font-size: 18px; color: var(--kp-ink); margin-top: auto; align-self: flex-end;
  transition: transform .3s var(--kp-ease);
}
.kaolig-picks .kp-scene-card:hover .kp-scene-arrow { transform: translateX(6px); }
.kaolig-picks .kp-scene-night .kp-scene-title { color: var(--kp-ink); }


/* ============================================================
   EDITOR'S PICKS
   ============================================================ */
.kaolig-picks .kp-editor-section {
  background: var(--kp-bg-warm);
  content-visibility: auto; contain-intrinsic-size: auto 800px;
}
.kaolig-picks .kp-editor-grid {
  max-width: 1200px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr; gap: 16px;
}
.kaolig-picks .kp-editor-card {
  background: var(--kp-paper); border: 1px solid var(--kp-line);
  padding: 36px 32px 32px;
  position: relative; display: flex; flex-direction: column; gap: 16px;
  transition: transform .4s var(--kp-ease), box-shadow .4s var(--kp-ease);
}
.kaolig-picks .kp-editor-card::before {
  content: ''; position: absolute; top: -1px; left: -1px;
  width: 48px; height: 48px;
  border-top: 1px solid var(--kp-pink-200); border-left: 1px solid var(--kp-pink-200);
}
.kaolig-picks .kp-editor-card::after {
  content: ''; position: absolute; bottom: -1px; right: -1px;
  width: 48px; height: 48px;
  border-bottom: 1px solid var(--kp-blue-200); border-right: 1px solid var(--kp-blue-200);
}
.kaolig-picks .kp-editor-card:hover { transform: translateY(-3px); box-shadow: 0 18px 40px -22px rgba(0,0,0,.16); }
.kaolig-picks .kp-editor-card-gift::before { border-top-color: var(--kp-blue-200); border-left-color: var(--kp-blue-200); }
.kaolig-picks .kp-editor-card-gift::after  { border-bottom-color: var(--kp-pink-200); border-right-color: var(--kp-pink-200); }
.kaolig-picks .kp-editor-card-gift .kp-editor-comment { border-left-color: var(--kp-blue-200); }

.kaolig-picks .kp-editor-num {
  font-family: var(--kp-en); font-style: italic;
  font-size: 11px; letter-spacing: .32em; color: var(--kp-ink-faint);
  text-transform: uppercase; display: flex; align-items: center; gap: 12px;
}
.kaolig-picks .kp-editor-num::after {
  content: ''; flex: 1; height: 1px; background: var(--kp-line-soft);
}
.kaolig-picks .kp-editor-tag {
  font-family: var(--kp-en); font-style: italic;
  font-size: 11px; letter-spacing: .32em; color: var(--kp-ink-faint);
  margin: 0; text-transform: uppercase;
}
.kaolig-picks .kp-editor-card-title {
  font-family: var(--kp-serif); font-weight: 400;
  font-size: 22px; letter-spacing: .06em; line-height: 1.4; color: var(--kp-ink); margin: 0;
}
.kaolig-picks .kp-editor-link {
  display: flex; flex-direction: column; gap: 16px;
  padding-top: 16px; border-top: 1px solid var(--kp-line-soft); margin-top: 8px;
}
.kaolig-picks .kp-editor-article-title {
  font-family: var(--kp-serif); font-weight: 400;
  font-size: 14px; line-height: 1.7; color: var(--kp-ink); letter-spacing: .03em; margin: 0;
}
.kaolig-picks .kp-editor-comment {
  font-family: var(--kp-sans); font-weight: 300;
  font-size: 12px; line-height: 1.95; color: var(--kp-ink-soft); letter-spacing: .03em;
  margin: 0; padding: 14px 16px; background: var(--kp-bg); border-left: 2px solid var(--kp-pink-200);
}
.kaolig-picks .kp-editor-comment-label {
  display: block; font-family: var(--kp-serif); font-weight: 500;
  font-size: 10px; letter-spacing: .18em; color: var(--kp-ink); margin-bottom: 6px;
}
.kaolig-picks .kp-editor-cta {
  font-family: var(--kp-en); font-style: italic;
  font-size: 12px; letter-spacing: .22em; color: var(--kp-ink);
  margin-top: 4px; transition: letter-spacing .3s var(--kp-ease);
}
.kaolig-picks .kp-editor-card:hover .kp-editor-cta { letter-spacing: .3em; }


/* ============================================================
   CTA
   ============================================================ */
.kaolig-picks .kp-cta-section {
  position: relative; padding: 96px 24px; text-align: center;
  background: var(--kp-dark); color: #f5f3ed; overflow: hidden;
}
.kaolig-picks .kp-cta-bg {
  position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(ellipse at 25% 30%, rgba(247,213,224,.08) 0%, transparent 50%),
    radial-gradient(ellipse at 75% 70%, rgba(208,227,244,.08) 0%, transparent 50%);
}
.kaolig-picks .kp-cta-section > * { position: relative; z-index: 1; }
.kaolig-picks .kp-cta-section .kp-section-num { color: rgba(245,243,237,.5); }
.kaolig-picks .kp-cta-title {
  font-family: var(--kp-serif); font-weight: 200;
  font-size: clamp(28px,5.5vw,48px); letter-spacing: .04em;
  line-height: 1.3; color: #f5f3ed; margin: 0 0 24px;
}
.kaolig-picks .kp-cta-title .kp-title-italic {
  font-family: var(--kp-en); font-style: italic; font-weight: 300; color: rgba(245,243,237,.7);
}
.kaolig-picks .kp-cta-lead {
  font-family: var(--kp-serif); font-weight: 300;
  font-size: 13px; line-height: 2.1; color: rgba(245,243,237,.75);
  letter-spacing: .05em; margin: 0 auto 48px; max-width: 580px;
}
.kaolig-picks .kp-cta-buttons {
  display: flex; flex-direction: column; gap: 12px;
  max-width: 520px; margin: 0 auto;
}
.kaolig-picks .kp-cta-btn {
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px 28px; border: 1px solid rgba(245,243,237,.2);
  background: transparent; color: #f5f3ed; text-decoration: none;
  transition: all .4s var(--kp-ease); position: relative; overflow: hidden;
}
.kaolig-picks .kp-cta-btn::before {
  content: ''; position: absolute; inset: 0; background: #f5f3ed;
  transform: translateX(-101%); transition: transform .4s var(--kp-ease); z-index: 0;
}
.kaolig-picks .kp-cta-btn > * { position: relative; z-index: 1; }
.kaolig-picks .kp-cta-btn:hover::before { transform: translateX(0); }
.kaolig-picks .kp-cta-btn:hover { color: var(--kp-dark); }
.kaolig-picks .kp-cta-btn-label { font-family: var(--kp-serif); font-size: 14px; letter-spacing: .08em; font-weight: 400; }
.kaolig-picks .kp-cta-btn-arrow { font-family: var(--kp-en); font-style: italic; font-size: 18px; transition: transform .4s var(--kp-ease); }
.kaolig-picks .kp-cta-btn:hover .kp-cta-btn-arrow { transform: translateX(6px); }
.kaolig-picks .kp-cta-primary { background: #f5f3ed; color: var(--kp-dark); border-color: #f5f3ed; }
.kaolig-picks .kp-cta-primary::before { background: var(--kp-pink-200); transform: translateX(0); opacity: 0; }
.kaolig-picks .kp-cta-primary:hover::before { opacity: 1; }
.kaolig-picks .kp-cta-primary:hover { color: var(--kp-dark); }


/* ============================================================
   リアルタイム検索ボックス
   ============================================================ */
.kaolig-picks .kp-brand-search-wrap {
  max-width: 540px; margin: 0 auto 20px; position: relative;
}
.kaolig-picks .kp-brand-search {
  width: 100%; padding: 14px 48px 14px 20px;
  font-family: var(--kp-serif); font-size: 13px; letter-spacing: .06em;
  color: var(--kp-ink); background: var(--kp-paper);
  border: 1px solid var(--kp-line); border-radius: 0; outline: none;
  transition: border-color .2s; -webkit-appearance: none;
}
.kaolig-picks .kp-brand-search::placeholder {
  font-family: var(--kp-en); font-style: italic;
  letter-spacing: .18em; color: var(--kp-ink-faint); font-size: 12px;
}
.kaolig-picks .kp-brand-search:focus { border-color: var(--kp-ink); }
.kaolig-picks .kp-search-ico {
  position: absolute; right: 16px; top: 50%; transform: translateY(-50%);
  font-family: var(--kp-en); font-style: italic; font-size: 14px;
  color: var(--kp-ink-faint); pointer-events: none;
}
.kaolig-picks .kp-brand-count {
  font-family: var(--kp-en); font-style: italic;
  font-size: 10px; letter-spacing: .3em; color: var(--kp-ink-faint);
  text-align: center; margin-bottom: 16px; text-transform: uppercase;
  min-height: 16px; transition: opacity .2s;
}
.kaolig-picks .kp-no-result {
  display: none; grid-column: 1/-1;
  text-align: center; padding: 40px 20px;
  font-family: var(--kp-en); font-style: italic;
  font-size: 14px; letter-spacing: .2em; color: var(--kp-ink-faint);
}


/* ============================================================
   ブランドフィルタータブ
   ============================================================ */
.kaolig-picks .kp-bfilter {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-bottom: 32px; justify-content: center;
}
.kaolig-picks .kp-bfilter-btn {
  font-family: var(--kp-en); font-style: italic;
  font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
  padding: 7px 18px; border: 1px solid var(--kp-line);
  background: var(--kp-paper); color: var(--kp-ink-faint);
  cursor: pointer; transition: background .25s var(--kp-ease), color .25s, border-color .25s;
  outline: none; -webkit-tap-highlight-color: transparent;
}
.kaolig-picks .kp-bfilter-btn.active,
.kaolig-picks .kp-bfilter-btn:hover {
  background: var(--kp-ink); color: #f5f3ed; border-color: var(--kp-ink);
}
.kaolig-picks .kp-brand-item { transition: opacity .3s, transform .3s; }
.kaolig-picks .kp-brand-item.hidden { display: none; }


/* ============================================================
   ブランドカードラッパー（v3版）
   ============================================================ */
.kaolig-picks .kp-brand-card-wrap {
  position: relative;
  padding: 20px 20px 0;
  border: 1px solid var(--kp-line);
  background: var(--kp-paper);
  display: flex; flex-direction: column; gap: 10px;
  transition: box-shadow .4s var(--kp-ease), transform .4s var(--kp-ease);
  overflow: hidden;
}
.kaolig-picks .kp-brand-card-wrap::before {
  content: ''; position: absolute; inset: 0;
  opacity: .55; z-index: 0; pointer-events: none;
  transition: opacity .4s var(--kp-ease);
}
.kaolig-picks .kp-brand-card-wrap:hover { box-shadow: 0 18px 44px -20px rgba(0,0,0,.14); transform: translateY(-2px); }
.kaolig-picks .kp-brand-card-wrap:hover::before { opacity: .82; }
.kaolig-picks .kp-brand-card-wrap > * { position: relative; z-index: 1; }

.kaolig-picks .kp-bname-jp {
  font-family: var(--kp-serif); font-size: 13px; font-weight: 400;
  letter-spacing: .06em; color: var(--kp-ink-faint); display: block; margin-bottom: 2px;
}


/* ============================================================
   2ボタン行
   ============================================================ */
.kaolig-picks .kp-brand-btns {
  display: grid; grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--kp-line); margin-top: auto;
}
.kaolig-picks .kp-brand-btn-rank,
.kaolig-picks .kp-brand-btn-report,
.kaolig-picks .kp-brand-btn-soon {
  display: flex; align-items: center; justify-content: center; gap: 5px;
  height: 42px; text-decoration: none;
  position: relative; overflow: hidden; transition: background .28s var(--kp-ease);
}
.kaolig-picks .kp-brand-btn-rank {
  background: var(--kp-bg-warm); border-right: 1px solid var(--kp-line); color: var(--kp-ink-mid);
}
.kaolig-picks .kp-brand-btn-rank:hover { background: var(--kp-ink); color: #f5f3ed; }
.kaolig-picks .kp-brand-btn-rank svg { transition: stroke .28s; }
.kaolig-picks .kp-brand-btn-rank:hover svg { stroke: #f5f3ed; }
.kaolig-picks .kp-brand-btn-report { background: var(--kp-paper); color: var(--kp-ink-mid); }
.kaolig-picks .kp-brand-btn-report:hover { background: var(--kp-ink); color: #f5f3ed; }
.kaolig-picks .kp-brand-btn-report svg { transition: stroke .28s; }
.kaolig-picks .kp-brand-btn-report:hover svg { stroke: #f5f3ed; }
.kaolig-picks .kp-brand-btn-soon {
  background: var(--kp-paper); color: var(--kp-line); cursor: default; user-select: none;
}
.kaolig-picks .kp-btn-lbl {
  font-family: var(--kp-en); font-style: italic;
  font-size: 9px; letter-spacing: .18em; text-transform: uppercase; line-height: 1;
}


/* ============================================================
   トーン背景（カードラッパー用）
   ============================================================ */
.kaolig-picks .kp-brand-tone-warm::before  { background: radial-gradient(ellipse at 30% 20%, var(--kp-tone-warm)  0%, transparent 60%), radial-gradient(ellipse at 80% 80%, var(--kp-tone-warm-deep)  0%, transparent 50%); }
.kaolig-picks .kp-brand-tone-cool::before  { background: radial-gradient(ellipse at 70% 20%, var(--kp-tone-cool)  0%, transparent 60%), radial-gradient(ellipse at 20% 80%, var(--kp-tone-cool-deep)  0%, transparent 50%); }
.kaolig-picks .kp-brand-tone-sand::before  { background: radial-gradient(ellipse at 50% 30%, var(--kp-tone-sand)  0%, transparent 60%), radial-gradient(ellipse at 30% 80%, var(--kp-tone-sand-deep)  0%, transparent 50%); }
.kaolig-picks .kp-brand-tone-stone::before { background: radial-gradient(ellipse at 30% 30%, var(--kp-tone-stone) 0%, transparent 60%), radial-gradient(ellipse at 70% 80%, var(--kp-tone-stone-deep) 0%, transparent 50%); }


/* ============================================================
   性別・年代ランキング
   ============================================================ */
.kaolig-picks .kp-gender-section { background: var(--kp-bg-warm); }

.kaolig-picks .kp-gender-tabs {
  display: flex; gap: 1px; background: var(--kp-line);
  max-width: 400px; margin: 0 auto 32px;
}
.kaolig-picks .kp-gender-tab {
  flex: 1; padding: 12px 8px; border: none; background: var(--kp-paper);
  font-family: var(--kp-en); font-style: italic;
  font-size: 12px; letter-spacing: .2em; color: var(--kp-ink-faint);
  cursor: pointer; text-align: center; transition: background .2s, color .2s; outline: none;
}
.kaolig-picks .kp-gender-tab.active { background: var(--kp-ink); color: #f5f3ed; }

.kaolig-picks .kp-gender-panel { display: none; }
.kaolig-picks .kp-gender-panel.active { display: block; animation: kp-fadein .35s ease; }
@keyframes kp-fadein { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }

.kaolig-picks .kp-age-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 20px;
}
.kaolig-picks .kp-age-card {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 20px; background: var(--kp-paper); border: 1px solid var(--kp-line);
  text-decoration: none; transition: background .3s var(--kp-ease), color .3s;
  position: relative; overflow: hidden;
}
.kaolig-picks .kp-age-card::before {
  content: ''; position: absolute; inset: 0; background: var(--kp-ink);
  transform: translateX(-101%); transition: transform .4s var(--kp-ease); z-index: 0;
}
.kaolig-picks .kp-age-card:hover::before { transform: translateX(0); }
.kaolig-picks .kp-age-card:hover { color: #f5f3ed; }
.kaolig-picks .kp-age-card > * { position: relative; z-index: 1; }
.kaolig-picks .kp-age-num {
  font-family: var(--kp-en); font-style: italic; font-size: 32px; font-weight: 200;
  letter-spacing: .02em; color: var(--kp-ink); line-height: 1; transition: color .3s;
}
.kaolig-picks .kp-age-card:hover .kp-age-num { color: rgba(245,243,237,.9); }
.kaolig-picks .kp-age-label {
  font-family: var(--kp-serif); font-size: 12px; font-weight: 400; letter-spacing: .06em;
  color: var(--kp-ink-soft); display: block; margin-top: 2px; transition: color .3s;
}
.kaolig-picks .kp-age-card:hover .kp-age-label { color: rgba(245,243,237,.7); }
.kaolig-picks .kp-age-arr {
  font-family: var(--kp-en); font-style: italic; font-size: 18px;
  color: var(--kp-ink-faint); transition: transform .3s var(--kp-ease), color .3s;
}
.kaolig-picks .kp-age-card:hover .kp-age-arr { transform: translateX(4px); color: #f5f3ed; }

.kaolig-picks .kp-special-grid { display: flex; flex-direction: column; gap: 10px; }
.kaolig-picks .kp-special-card {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; padding: 18px 22px; background: var(--kp-paper);
  border: 1px solid var(--kp-line); text-decoration: none;
  transition: background .3s var(--kp-ease), color .3s;
  position: relative; overflow: hidden;
}
.kaolig-picks .kp-special-card::before {
  content: ''; position: absolute; inset: 0; background: var(--kp-ink);
  transform: translateX(-101%); transition: transform .4s var(--kp-ease); z-index: 0;
}
.kaolig-picks .kp-special-card:hover::before { transform: translateX(0); }
.kaolig-picks .kp-special-card:hover { color: #f5f3ed; }
.kaolig-picks .kp-special-card > * { position: relative; z-index: 1; }
.kaolig-picks .kp-special-label {
  font-family: var(--kp-serif); font-size: 13.5px; font-weight: 400;
  letter-spacing: .06em; color: var(--kp-ink); transition: color .3s;
}
.kaolig-picks .kp-special-card:hover .kp-special-label { color: #f5f3ed; }
.kaolig-picks .kp-special-sub {
  font-family: var(--kp-en); font-style: italic; font-size: 10px;
  letter-spacing: .2em; color: var(--kp-ink-faint); display: block; margin-top: 2px; transition: color .3s;
}
.kaolig-picks .kp-special-card:hover .kp-special-sub { color: rgba(245,243,237,.6); }
.kaolig-picks .kp-special-arr {
  font-family: var(--kp-en); font-style: italic; font-size: 20px;
  color: var(--kp-ink-faint); flex-shrink: 0; transition: transform .35s var(--kp-ease), color .3s;
}
.kaolig-picks .kp-special-card:hover .kp-special-arr { transform: translateX(5px); color: #f5f3ed; }

.kaolig-picks .kp-soon-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--kp-en); font-style: italic;
  font-size: 10px; letter-spacing: .28em; color: var(--kp-ink-faint);
  border: 1px solid var(--kp-line); padding: 4px 12px;
  text-transform: uppercase; align-self: flex-start;
}
.kaolig-picks .kp-editor-card-soon { opacity: .6; pointer-events: none; }


/* ============================================================
   シーン全一覧リンク
   ============================================================ */
.kaolig-picks .kp-scene-all-link {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 14px; padding: 18px 24px; background: var(--kp-paper);
  border: 1px solid var(--kp-line); text-decoration: none;
  position: relative; overflow: hidden; transition: color .3s;
}
.kaolig-picks .kp-scene-all-link::before {
  content: ''; position: absolute; inset: 0; background: var(--kp-ink);
  transform: translateX(-101%); transition: transform .4s var(--kp-ease); z-index: 0;
}
.kaolig-picks .kp-scene-all-link:hover::before { transform: translateX(0); }
.kaolig-picks .kp-scene-all-link:hover { color: #f5f3ed; }
.kaolig-picks .kp-scene-all-link > * { position: relative; z-index: 1; }
.kaolig-picks .kp-scene-all-label { font-family: var(--kp-serif); font-size: 14px; font-weight: 400; letter-spacing: .06em; }
.kaolig-picks .kp-scene-all-sub {
  font-family: var(--kp-en); font-style: italic; font-size: 10.5px; letter-spacing: .18em;
  color: var(--kp-ink-faint); display: block; margin-top: 2px;
}
.kaolig-picks .kp-scene-all-link:hover .kp-scene-all-sub { color: rgba(245,243,237,.6); }
.kaolig-picks .kp-scene-all-arr {
  font-family: var(--kp-en); font-style: italic; font-size: 20px;
  color: var(--kp-ink-faint); transition: transform .35s var(--kp-ease), color .3s;
}
.kaolig-picks .kp-scene-all-link:hover .kp-scene-all-arr { transform: translateX(5px); color: #f5f3ed; }


/* ============================================================
   ブランドグリッド v3（均等2カラム基本）
   ============================================================ */
.kaolig-picks .kp-brand-grid-v3 {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 10px; max-width: 1200px; margin: 0 auto;
}


/* ============================================================
   TABLET（640px以上）
   ============================================================ */
@media (min-width: 640px) {
  .kaolig-picks .kp-hero { padding: 128px 40px 112px; }
  .kaolig-picks .kp-hero-statement { font-size: 15px; }
  .kaolig-picks .kp-hero-jump { flex-direction: row; max-width: 720px; }
  .kaolig-picks .kp-jump-btn {
    flex: 1; grid-template-columns: 1fr;
    gap: 8px; padding: 28px; text-align: center; justify-items: center;
  }
  .kaolig-picks .kp-jump-label-en { display: block; }
  .kaolig-picks .kp-section { padding: 128px 40px; }
  .kaolig-picks .kp-section-header { margin-bottom: 56px; }
  .kaolig-picks .kp-brand-grid {
    grid-template-columns: repeat(6, 1fr);
    grid-auto-rows: minmax(200px, auto); gap: 14px;
  }
  .kaolig-picks .kp-brand-large  { grid-column: span 3; grid-row: span 2; min-height: 360px; }
  .kaolig-picks .kp-brand-medium { grid-column: span 2; }
  .kaolig-picks .kp-brand-small  {
    grid-column: span 2; flex-direction: column; align-items: flex-start;
    min-height: 160px; padding: 24px 22px;
  }
  .kaolig-picks .kp-brand-small .kp-brand-rank { flex: none; }
  .kaolig-picks .kp-brand-small .kp-brand-name { flex: none; margin: auto 0; }
  .kaolig-picks .kp-scene-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .kaolig-picks .kp-editor-grid { grid-template-columns: repeat(2, 1fr); gap: 18px; }
  .kaolig-picks .kp-cta-buttons { flex-direction: row; max-width: 720px; }
  .kaolig-picks .kp-cta-btn { flex: 1; }
  .kaolig-picks .kp-brand-grid-v3 { grid-template-columns: repeat(3, 1fr); }
  .kaolig-picks .kp-age-grid { grid-template-columns: repeat(3, 1fr); }
}


/* ============================================================
   DESKTOP（1024px以上）
   ============================================================ */
@media (min-width: 1024px) {
  .kaolig-picks .kp-hero { padding: 160px 48px 128px; }
  .kaolig-picks .kp-hero-vertical { left: 32px; font-size: 11px; }
  .kaolig-picks .kp-section { padding: 160px 48px; }
  .kaolig-picks .kp-brand-grid { gap: 16px; }
  .kaolig-picks .kp-brand-large  { min-height: 420px; padding: 44px 40px; }
  .kaolig-picks .kp-brand-medium { min-height: 240px; }
  .kaolig-picks .kp-scene-grid { grid-template-columns: repeat(5, 1fr); gap: 14px; }
  .kaolig-picks .kp-editor-grid { grid-template-columns: repeat(4, 1fr); gap: 18px; }
  .kaolig-picks .kp-editor-card { padding: 32px 28px 28px; }
  .kaolig-picks .kp-editor-card-title { font-size: 19px; }
  .kaolig-picks .kp-brand-grid-v3 { grid-template-columns: repeat(4, 1fr); gap: 12px; }
  .kaolig-picks .kp-age-grid { grid-template-columns: repeat(5, 1fr); }
}


/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .kaolig-picks *,
  .kaolig-picks *::before,
  .kaolig-picks *::after {
    animation-duration: 0.01ms !important; transition-duration: 0.01ms !important;
  }
  .kaolig-picks .kp-hero-orb { animation: none !important; }
}


/* ============================================================
   スマホ表示修正パッチ（max-width: 639px）
   ============================================================ */
@media (max-width: 639px) {

  /* ① セクション見出し：3行 → 2行に修正 */
  .kaolig-picks .kp-section-title {
    font-size: 21px;
    letter-spacing: 0.025em;
    line-height: 1.4;
  }

  /* ② ブランドカード折り返し修正 */
  .kaolig-picks .kp-brand-grid-v3 .kp-brand-card-wrap {
    padding: 13px 13px 0;
    gap: 6px;
  }
  .kaolig-picks .kp-brand-grid-v3 .kp-brand-name {
    font-size: 18px;
    letter-spacing: 0.01em;
    margin-bottom: 3px;
  }
  .kaolig-picks .kp-brand-grid-v3 .kp-brand-name-sub {
    font-size: 0.48em;
    letter-spacing: 0.1em;
    margin-top: 2px;
  }
  .kaolig-picks .kp-brand-grid-v3 .kp-bname-jp {
    font-size: 11px;
    margin-bottom: 1px;
  }
  .kaolig-picks .kp-brand-grid-v3 .kp-brand-rank {
    font-size: 9px;
    letter-spacing: 0.2em;
  }
  .kaolig-picks .kp-brand-grid-v3 .kp-brand-desc {
    font-size: 10px;
    line-height: 1.72;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* ③ ボタンエリア調整 */
  .kaolig-picks .kp-brand-grid-v3 .kp-brand-btn-rank,
  .kaolig-picks .kp-brand-grid-v3 .kp-brand-btn-report,
  .kaolig-picks .kp-brand-grid-v3 .kp-brand-btn-soon {
    height: 36px;
    gap: 4px;
  }
  .kaolig-picks .kp-brand-grid-v3 .kp-btn-lbl {
    font-size: 7.5px;
    letter-spacing: 0.12em;
  }
  .kaolig-picks .kp-brand-grid-v3 .kp-brand-btn-rank svg,
  .kaolig-picks .kp-brand-grid-v3 .kp-brand-btn-report svg,
  .kaolig-picks .kp-brand-grid-v3 .kp-brand-btn-soon svg {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
  }
  .kaolig-picks .kp-brand-grid-v3 { gap: 8px; }
  .kaolig-picks .kp-bfilter { gap: 5px; }
  .kaolig-picks .kp-bfilter-btn {
    padding: 7px 12px;
    font-size: 10.5px;
    letter-spacing: 0.1em;
  }
}


/* ============================================================
 *  人気ブランドTOP5 クイックナビ v2.0
 *  ■ デザインコンセプト
 *    "Maison Editorial" — ダークパネル×大斜体数字×白塗りホバー
 * ============================================================ */

/* ── ラッパー ─────────────────────────────────────────── */
.kaolig-picks .kp-top5-nav {
  background: var(--kp-dark);
  border: 1px solid rgba(255,255,255,.06);
  overflow: hidden;
  margin-bottom: 32px;
  position: relative;
  contain: layout style;
}

/* 左のグラデーションライン */
.kaolig-picks .kp-top5-nav::before {
  content: '';
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 2px;
  background: linear-gradient(
    180deg,
    var(--kp-pink-200)   0%,
    var(--kp-blue-200)  50%,
    var(--kp-pink-200) 100%
  );
  opacity: .6;
  z-index: 1;
}


/* ── ヘッダー ─────────────────────────────────────────── */
.kaolig-picks .kp-top5-header {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  padding: 28px 28px 24px 32px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.kaolig-picks .kp-top5-header-left { flex-shrink: 0; }
.kaolig-picks .kp-top5-eyebrow {
  display: block;
  font-family: var(--kp-en);
  font-style: italic;
  font-size: 10px;
  letter-spacing: .4em;
  color: rgba(245,243,237,.35);
  text-transform: uppercase;
  margin-bottom: 6px;
  white-space: nowrap;
}
.kaolig-picks .kp-top5-headline {
  font-family: var(--kp-en);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(22px, 4vw, 30px);
  line-height: 1.15;
  letter-spacing: .04em;
  color: #f5f3ed;
  margin: 0;
}
.kaolig-picks .kp-top5-header-desc {
  font-family: var(--kp-serif);
  font-weight: 300;
  font-size: 11.5px;
  line-height: 1.9;
  letter-spacing: .05em;
  color: rgba(245,243,237,.45);
  margin: 0;
  padding-top: 4px;
  text-align: justify;
}


/* ── リスト ───────────────────────────────────────────── */
.kaolig-picks .kp-top5-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.kaolig-picks .kp-top5-item {
  position: relative;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.kaolig-picks .kp-top5-item:last-child { border-bottom: none; }

/* 各リンク行 */
.kaolig-picks .kp-top5-link {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 0;
  text-decoration: none;
  color: #f5f3ed;
  position: relative;
  overflow: hidden;
  min-height: 64px;
  transition: color .35s var(--kp-ease);
}

/* ホバー：白塗り反転 */
.kaolig-picks .kp-top5-link::before {
  content: '';
  position: absolute;
  inset: 0;
  background: #f5f3ed;
  transform: translateX(-101%);
  transition: transform .42s var(--kp-ease);
  z-index: 0;
}
.kaolig-picks .kp-top5-link:hover::before { transform: translateX(0); }
.kaolig-picks .kp-top5-link:hover { color: var(--kp-dark); }
.kaolig-picks .kp-top5-link > * { position: relative; z-index: 1; }

/* 番号（大きな斜体） */
.kaolig-picks .kp-top5-num {
  font-family: var(--kp-en);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(36px, 6vw, 48px);
  line-height: 1;
  letter-spacing: -.01em;
  color: rgba(245,243,237,.18);
  flex-shrink: 0;
  width: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  transition: color .35s var(--kp-ease);
}
.kaolig-picks .kp-top5-link:hover .kp-top5-num { color: rgba(20,17,13,.2); }

/* 縦の区切り線 */
.kaolig-picks .kp-top5-num::after {
  content: '';
  position: absolute;
  left: 72px;
  top: 16px; bottom: 16px;
  width: 1px;
  background: rgba(255,255,255,.08);
  transition: background .35s;
}
.kaolig-picks .kp-top5-link:hover .kp-top5-num::after { background: rgba(20,17,13,.1); }

/* ブランド名エリア */
.kaolig-picks .kp-top5-brand {
  flex: 1;
  min-width: 0;
  padding: 16px 16px 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.kaolig-picks .kp-top5-brand-jp {
  display: block;
  font-family: var(--kp-serif);
  font-weight: 400;
  font-size: 15px;
  letter-spacing: .07em;
  line-height: 1.2;
  color: rgba(245,243,237,.92);
  transition: color .35s var(--kp-ease);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.kaolig-picks .kp-top5-link:hover .kp-top5-brand-jp { color: var(--kp-dark); }

.kaolig-picks .kp-top5-brand-en {
  display: block;
  font-family: var(--kp-en);
  font-style: italic;
  font-weight: 300;
  font-size: 10.5px;
  letter-spacing: .16em;
  color: rgba(245,243,237,.35);
  line-height: 1;
  transition: color .35s var(--kp-ease);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.kaolig-picks .kp-top5-link:hover .kp-top5-brand-en { color: rgba(20,17,13,.45); }

/* タグ群（スマホでは非表示） */
.kaolig-picks .kp-top5-meta {
  display: none;
  flex-shrink: 0;
  align-items: center;
  gap: 6px;
  padding-right: 4px;
}
.kaolig-picks .kp-top5-tag {
  font-family: var(--kp-en);
  font-style: italic;
  font-size: 9px;
  letter-spacing: .2em;
  text-transform: uppercase;
  padding: 3px 8px;
  border: 1px solid rgba(245,243,237,.15);
  color: rgba(245,243,237,.4);
  white-space: nowrap;
  transition: border-color .35s, color .35s;
}
.kaolig-picks .kp-top5-tag-origin {
  font-family: var(--kp-serif);
  font-style: normal;
  font-size: 10px;
  letter-spacing: .06em;
}
.kaolig-picks .kp-top5-link:hover .kp-top5-tag {
  border-color: rgba(20,17,13,.2);
  color: rgba(20,17,13,.5);
}

/* 矢印 */
.kaolig-picks .kp-top5-arr {
  font-family: var(--kp-en);
  font-style: italic;
  font-size: 18px;
  color: rgba(245,243,237,.3);
  flex-shrink: 0;
  padding: 0 22px 0 12px;
  align-self: stretch;
  display: flex;
  align-items: center;
  transition: transform .35s var(--kp-ease), color .35s;
}
.kaolig-picks .kp-top5-link:hover .kp-top5-arr {
  transform: translateX(4px);
  color: rgba(20,17,13,.5);
}


/* ── フッター ─────────────────────────────────────────── */
.kaolig-picks .kp-top5-footer {
  padding: 16px 28px 16px 32px;
  border-top: 1px solid rgba(255,255,255,.06);
  background: rgba(255,255,255,.025);
}
.kaolig-picks .kp-top5-all-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: rgba(245,243,237,.4);
  transition: color .3s var(--kp-ease);
}
.kaolig-picks .kp-top5-all-link:hover { color: rgba(245,243,237,.85); }
.kaolig-picks .kp-top5-all-text {
  font-family: var(--kp-en);
  font-style: italic;
  font-size: 10.5px;
  letter-spacing: .32em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: letter-spacing .3s var(--kp-ease);
}
.kaolig-picks .kp-top5-all-link:hover .kp-top5-all-text { letter-spacing: .4em; }
.kaolig-picks .kp-top5-all-line {
  flex: 1;
  height: 1px;
  background: rgba(245,243,237,.12);
  min-width: 24px;
  max-width: 80px;
}
.kaolig-picks .kp-top5-all-arr {
  font-family: var(--kp-en);
  font-style: italic;
  font-size: 14px;
  transition: transform .3s var(--kp-ease);
}
.kaolig-picks .kp-top5-all-link:hover .kp-top5-all-arr { transform: translateY(3px); }


/* ── TOP5 タブレット（640px以上） ────────────────────── */
@media (min-width: 640px) {
  .kaolig-picks .kp-top5-nav::before { width: 3px; }
  .kaolig-picks .kp-top5-header {
    padding: 32px 36px 28px 40px;
    gap: 32px;
    align-items: center;
  }
  .kaolig-picks .kp-top5-meta { display: flex; }
  .kaolig-picks .kp-top5-num {
    width: 88px;
    font-size: 48px;
  }
  .kaolig-picks .kp-top5-num::after { left: 88px; }
  .kaolig-picks .kp-top5-brand {
    padding: 18px 20px 18px 24px;
    flex-direction: row;
    align-items: baseline;
    gap: 12px;
  }
  .kaolig-picks .kp-top5-brand-jp { font-size: 16px; flex-shrink: 0; }
  .kaolig-picks .kp-top5-brand-en { font-size: 11px; flex: 1; min-width: 0; }
  .kaolig-picks .kp-top5-arr { padding: 0 28px 0 16px; font-size: 20px; }
  .kaolig-picks .kp-top5-footer { padding: 18px 36px 18px 40px; }
}

/* ── TOP5 デスクトップ（1024px以上） ─────────────────── */
@media (min-width: 1024px) {
  .kaolig-picks .kp-top5-header { padding: 36px 40px 32px 48px; }
  .kaolig-picks .kp-top5-num { width: 100px; font-size: 54px; }
  .kaolig-picks .kp-top5-num::after { left: 100px; }
  .kaolig-picks .kp-top5-brand { padding: 20px 24px 20px 28px; }
  .kaolig-picks .kp-top5-brand-jp { font-size: 17px; }
  .kaolig-picks .kp-top5-footer { padding: 20px 40px 20px 48px; }
}

/* ── TOP5 アクセシビリティ ───────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .kaolig-picks .kp-top5-link::before,
  .kaolig-picks .kp-top5-arr,
  .kaolig-picks .kp-top5-all-text,
  .kaolig-picks .kp-top5-all-arr { transition: none !important; }
}
.kaolig-picks .kp-top5-link:focus-visible {
  outline: 2px solid var(--kp-pink-200);
  outline-offset: -2px;
}
.kaolig-picks .kp-top5-all-link:focus-visible {
  outline: 2px solid rgba(245,243,237,.5);
  outline-offset: 3px;
}
/* ============================================================
 *  人気ブランドTOP5 リストスタイル（kp-br-*）
 *  v3.4 追加分
 * ============================================================ */

.kaolig-picks .kp-top5-hd {
  display: flex; align-items: center; gap: 14px; margin-bottom: 14px;
}
.kaolig-picks .kp-top5-hd-label {
  font-family: 'Cormorant Garamond', serif; font-style: italic;
  font-size: 10px; letter-spacing: .38em; color: var(--kp-ink-faint);
  text-transform: uppercase; white-space: nowrap;
}
.kaolig-picks .kp-top5-hd-rule {
  flex: 1; height: 1px; background: var(--kp-line);
}
.kaolig-picks .kp-top5-hd-sub {
  font-family: 'Cormorant Garamond', serif; font-style: italic;
  font-size: 10px; letter-spacing: .32em; color: var(--kp-ink-faint);
  text-transform: uppercase; white-space: nowrap;
}

/* ── リスト本体 ── */
.kaolig-picks .kp-br-list {
  background: var(--kp-paper); border: 1px solid var(--kp-line);
  overflow: hidden; margin-bottom: 0;
}
.kaolig-picks .kp-br-item {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 18px; text-decoration: none; color: inherit;
  border-bottom: 1px solid var(--kp-line-soft);
  transition: background .2s var(--kp-ease);
  -webkit-tap-highlight-color: transparent;
  position: relative; overflow: hidden;
}
.kaolig-picks .kp-br-item::before {
  content: ''; position: absolute; inset: 0;
  background: var(--kp-bg-warm); transform: translateX(-101%);
  transition: transform .35s var(--kp-ease); z-index: 0;
}
.kaolig-picks .kp-br-item:hover::before { transform: translateX(0); }
.kaolig-picks .kp-br-item > * { position: relative; z-index: 1; }
.kaolig-picks .kp-br-item:last-child { border-bottom: none; }

/* ── ランク番号 ── */
.kaolig-picks .kp-br-rank {
  font-family: 'Cormorant Garamond', serif; font-style: italic;
  font-size: 11px; letter-spacing: .3em; color: var(--kp-ink-faint);
  width: 36px; flex-shrink: 0; text-align: center;
}
.kaolig-picks .kp-br-item:nth-child(1) .kp-br-rank { font-size: 18px; color: var(--kp-ink-soft); }
.kaolig-picks .kp-br-item:nth-child(2) .kp-br-rank { font-size: 15px; color: var(--kp-ink-mid); }
.kaolig-picks .kp-br-item:nth-child(3) .kp-br-rank { font-size: 13px; color: var(--kp-ink-mid); }

/* ── アクセントライン ── */
.kaolig-picks .kp-br-accent { width: 2px; height: 36px; flex-shrink: 0; opacity: .7; }

/* ── ブランド情報 ── */
.kaolig-picks .kp-br-body { flex: 1; min-width: 0; }
.kaolig-picks .kp-br-name {
  font-family: 'Noto Serif JP', serif; font-size: 14px; font-weight: 400;
  letter-spacing: .06em; color: var(--kp-ink); display: block; margin-bottom: 1px;
}
.kaolig-picks .kp-br-en {
  font-family: 'Cormorant Garamond', serif; font-style: italic;
  font-size: 10px; color: var(--kp-ink-faint); letter-spacing: .16em;
  display: block; margin-bottom: 2px;
}
.kaolig-picks .kp-br-tag {
  font-size: 10.5px; color: var(--kp-ink-faint); letter-spacing: .04em;
}

/* ── 矢印 ── */
.kaolig-picks .kp-br-arr {
  font-family: 'Cormorant Garamond', serif; font-style: italic;
  font-size: 16px; color: var(--kp-ink-faint); flex-shrink: 0;
  transition: transform .3s var(--kp-ease);
}
.kaolig-picks .kp-br-item:hover .kp-br-arr { transform: translateX(4px); }

/* ── 全ブランドを見るリンク ── */
.kaolig-picks .kp-br-more {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--kp-paper); border: 1px solid var(--kp-line); border-top: none;
  padding: 14px 20px; text-decoration: none;
  transition: background .2s var(--kp-ease);
  -webkit-tap-highlight-color: transparent;
  position: relative; overflow: hidden;
}
.kaolig-picks .kp-br-more::before {
  content: ''; position: absolute; inset: 0; background: var(--kp-ink);
  transform: translateX(-101%); transition: transform .35s var(--kp-ease); z-index: 0;
}
.kaolig-picks .kp-br-more:hover::before { transform: translateX(0); }
.kaolig-picks .kp-br-more:hover { color: #f5f3ed; }
.kaolig-picks .kp-br-more > * { position: relative; z-index: 1; }

.kaolig-picks .kp-br-more-main {
  font-family: 'Noto Serif JP', serif; font-size: 13px; font-weight: 400;
  color: inherit; letter-spacing: .06em;
}
.kaolig-picks .kp-br-more-sub {
  font-family: 'Cormorant Garamond', serif; font-style: italic;
  font-size: 10.5px; color: var(--kp-ink-faint); letter-spacing: .12em;
  display: block; margin-top: 2px;
}
.kaolig-picks .kp-br-more:hover .kp-br-more-sub { color: rgba(245,243,237,.6); }

.kaolig-picks .kp-br-more-arr {
  font-family: 'Cormorant Garamond', serif; font-style: italic;
  font-size: 18px; color: var(--kp-ink-faint); flex-shrink: 0;
  transition: transform .3s var(--kp-ease);
}
.kaolig-picks .kp-br-more:hover .kp-br-more-arr {
  transform: translateX(4px); color: #f5f3ed;
}