/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Oct 16 2026 | 16:14:06 */
/* ============================================================
   【軽量版】統合CSS ③ ランキング一覧ページ（/ranking/）専用
   2026-10-17 作成：28974「統合カスタムCSS（25ファイル統合版）」を
   使用状況で整理・分割した軽量版。固定ページ /ranking/ だけで読み込む（ランキング記事には出さない）。
   元に戻す：このシリーズ（【軽量版】で始まる8件）を無効化し、
   28974 を有効化する。
   ============================================================ */
.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 ul,
.kaolig-picks ol { list-style: none; padding: 0; margin: 0; }
.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;
}
.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;
}
.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;
}
.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-japan   { color: var(--kp-tag-japan);   }
.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-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); }
.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; }
.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; }
.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;
}
.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; }
.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-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; }
.kaolig-picks .kp-brand-grid-v3 {
display: grid; grid-template-columns: 1fr 1fr;
gap: 10px; max-width: 1200px; margin: 0 auto;
}
@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-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); }
}
@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-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); }
}
@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; }
}
@media (max-width: 639px){
.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;
}
}
.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;
}