/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Jul 09 2026 | 00:37:43 */
/* ===== source: 28799.css ===== */
/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Jul 08 2026 | 12:07:10 */
/* ===== 香LIG 全パーツ共通CSS【0】アンケート調査ブロック（接頭辞: ksvy） ===== */
.ksvy-cover{font-family:'Noto Sans JP',sans-serif;max-width:720px;margin:28px auto 14px;color:#2b2320;border:1px solid #d8cabb;border-radius:8px;overflow:hidden;}
.ksvy-cover *{box-sizing:border-box;}
.ksvy-cover-top{padding:20px 22px 16px;background:linear-gradient(100deg,#fff,#fbf3f4);}
.ksvy-cover-kicker{font-size:11px;letter-spacing:.14em;color:#b08a48;font-weight:700;margin-bottom:6px;}
.ksvy-cover-ttl{font-size:19px;font-weight:700;line-height:1.5;margin:0;}
.ksvy-cover-ttl b{color:#7d3a4a;}
.ksvy-cover-meta{display:flex;flex-wrap:wrap;border-top:1px solid #e6ddd4;}
.ksvy-cover-meta div{flex:1 1 33%;padding:11px 14px;border-right:1px solid #f1ebe3;}
.ksvy-cover-meta div:last-child{border-right:none;}
.ksvy-cover-meta span{display:block;font-size:10px;letter-spacing:.1em;color:#b08a48;font-weight:700;margin-bottom:3px;}
.ksvy-cover-meta strong{font-weight:500;font-size:13px;line-height:1.5;}
@media(max-width:480px){.ksvy-cover-meta div{flex:1 1 50%;}}

.ksvy{font-family:'Noto Sans JP',sans-serif;max-width:720px;margin:28px auto;color:#2b2320;line-height:1.85;}
.ksvy *{box-sizing:border-box;}
.ksvy-head{display:flex;align-items:center;gap:12px;padding:14px 18px;background:linear-gradient(100deg,#fff,#fbf3f4);border:1px solid #e6ddd4;border-bottom:none;border-radius:8px 8px 0 0;}
.ksvy-no{flex-shrink:0;width:44px;height:44px;border-radius:50%;background:#7d3a4a;color:#fff;font-weight:700;display:flex;align-items:center;justify-content:center;font-size:12px;text-align:center;line-height:1.2;}
.ksvy-q{font-size:16px;font-weight:700;line-height:1.4;}
.ksvy-type{font-size:11px;color:#b08a48;font-weight:700;letter-spacing:.08em;}
.ksvy-body{border:1px solid #e6ddd4;border-radius:0 0 8px 8px;padding:20px 18px;background:#fff;}
.ksvy-lead{margin:0 0 14px;font-size:14px;line-height:1.95;color:#5a4f49;}
.ksvy-lead b,.ksvy-point b{color:#2b2320;}
.ksvy-bar{display:grid;grid-template-columns:9.5em 1fr 3.8em;align-items:center;gap:10px;margin:9px 0;font-size:13px;}
.ksvy-track{background:#f0e8e0;border-radius:7px;height:15px;overflow:hidden;}
.ksvy-fill{display:block;height:100%;border-radius:7px;background:linear-gradient(90deg,#9c5462,#7d3a4a);}
.ksvy-fill.is-top{background:linear-gradient(90deg,#b08a48,#caa05a);}
.ksvy-val{text-align:right;font-weight:700;}
.ksvy-point{margin:14px 0 0;padding:11px 14px;background:#faf6ee;border-radius:8px;font-size:13px;line-height:1.85;color:#5a4f49;}
.ksvy-point b{color:#7d3a4a;}
.ksvy-cross{margin:18px 0 0;}
.ksvy-cross-ttl{font-size:12px;font-weight:700;color:#7d3a4a;margin:0 0 8px;padding-left:9px;border-left:3px solid #b08a48;}
.ksvy-table{width:100%;border-collapse:collapse;font-size:12px;}
.ksvy-table th,.ksvy-table td{padding:6px 5px;text-align:center;border-bottom:1px solid #f1ebe3;}
.ksvy-table th{background:#fbf6f1;color:#5a4f49;font-size:10.5px;font-weight:700;}
.ksvy-table th:first-child,.ksvy-table td:first-child{text-align:left;}
.ksvy-table td.ov{background:#f6f1ec;font-weight:700;}
.ksvy-table td.hi{background:#fbeef0;color:#7d3a4a;font-weight:700;}
.ksvy-note{margin:12px 0 0;font-size:10.5px;color:#a99;line-height:1.7;}
@media(max-width:480px){.ksvy-bar{grid-template-columns:1fr auto;}.ksvy-bar .ksvy-track{grid-column:1/-1;order:3;}.ksvy-table{font-size:11px;}.ksvy-table th,.ksvy-table td{padding:5px 3px;}}

/* ===== source: 26838.css ===== */
/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Jul 08 2026 | 22:15:45 */
/* ================================================
   香LIG | 香水の早見表 v2.0
   CSS — WPCode「CSS スニペット」に貼付
   表示条件: 早見表ページのみ
   最終更新: 2026-05-05

   v2.0 変更点:
     nv-wrap（香りの三層構造）を全面リデザイン
     ・旧: 3枚スタックカード（モバイルでベースが見えない）
     ・新: 3列インジケーターストリップ + 1枚動的カード
     ヘッダーの時間表示折り返し・見切れを修正
   ================================================

   Google Fonts は functions.php の wp_enqueue_style() で読み込み推奨
   ================================================ */

/* ────────────────────────────────────────────────
   DESIGN TOKENS
──────────────────────────────────────────────── */
:root {
  --c:#FAF7F2; --iv:#F3EDE4; --gold:#A07850; --glt:#C4A882;
  --gpl:#EDE1CF; --ink:#2C2318; --mid:#5C4E38; --soft:#9A8A72;
  --bdr:#DDD0BC; --wh:#FDFAF6; --dk:#1A1208; --dkm:#241A0E;

  --top:#C85820; --topb:#FEF2EA; --topbr:rgba(200,88,32,.18);
  --mdn:#2E6E46; --mdnb:#E6F5ED; --mdnbr:rgba(46,110,70,.18);
  --bas:#2A4878; --basb:#E8EFF8; --basbr:rgba(42,72,120,.18);

  /* nv-wrap 専用 */
  --nv-top:     #C85820;
  --nv-mid:     #2E6E46;
  --nv-base:    #2A4878;
  --nv-gold:    #A07850;
  --nv-glt:     #C4A882;
  --nv-dk:      #1A1208;
  --nv-iv:      #F3EDE4;
  --nv-gpl:     #EDE1CF;
  --nv-bdr:     #DDD0BC;
  --nv-wh:      #FDFAF6;
  --nv-mid-ink: #5C4E38;
  --nv-ink:     #2C2318;
  --nv-soft:    #9A8A72;

  --bnav:64px;
}

body {
  font-family:'Noto Sans JP',sans-serif;
  background:var(--c); color:var(--ink);
  font-size:14px; line-height:1.7;
  -webkit-font-smoothing:antialiased;
  padding-bottom:calc(var(--bnav) + 24px);
}

/* ────────────────────────────────────────────────
   HERO
──────────────────────────────────────────────── */
.hero {
  background:var(--dk); padding:40px 20px 32px;
  position:relative; overflow:hidden;
}
.hero::after {
  content:''; position:absolute; bottom:-60px; left:50%;
  transform:translateX(-50%); width:300px; height:120px;
  background:radial-gradient(ellipse,rgba(160,120,80,.22) 0%,transparent 70%);
  pointer-events:none;
}
.hero-eyebrow {
  display:inline-flex; align-items:center; gap:6px;
  font-family:'Cormorant Garamond',serif; font-style:italic;
  font-size:10.5px; letter-spacing:.22em; color:var(--glt);
  margin-bottom:14px; opacity:.85;
}
.hero h1 {
  font-family:'Noto Serif JP',serif;
  font-size:clamp(22px,5.5vw,32px); font-weight:400;
  letter-spacing:.1em; color:rgba(255,255,255,.94);
  line-height:1.3; margin-bottom:6px;
}
.hero-sub {
  font-size:12px; color:rgba(255,255,255,.38);
  letter-spacing:.06em; margin-bottom:8px;
}
.ks-updated {
  font-size:11px; color:rgba(255,255,255,.38);
  letter-spacing:.06em; margin-bottom:20px;
  display:flex; align-items:center; gap:5px;
}
.ks-updated span { color:rgba(196,168,130,.6); }

.qj { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.qj-a {
  background:rgba(255,255,255,.06); border:1px solid rgba(196,168,130,.2);
  border-radius:10px; padding:11px 12px;
  display:flex; align-items:flex-start; gap:9px;
  text-decoration:none; transition:background .16s;
  -webkit-tap-highlight-color:transparent;
}
.qj-a:active { background:rgba(196,168,130,.18); }
.qj-ico  { font-size:20px; flex-shrink:0; line-height:1; margin-top:1px; }
.qj-txt  { display:flex; flex-direction:column; gap:2px; }
.qj-main { font-size:12.5px; font-weight:500; color:rgba(255,255,255,.88); letter-spacing:.03em; line-height:1.3; }
.qj-sub  { font-size:10.5px; color:rgba(255,255,255,.36); letter-spacing:.04em; }

.hero-sensitive-btn {
  display:flex; align-items:center; gap:10px; margin-top:10px;
  background:rgba(46,110,70,.16); border:1px solid rgba(46,110,70,.32);
  border-radius:10px; padding:12px 15px; text-decoration:none;
  transition:background .18s; -webkit-tap-highlight-color:transparent;
  position:relative; overflow:hidden;
}
.hero-sensitive-btn:active { background:rgba(46,110,70,.28); }
.hero-sensitive-btn::after {
  content:''; position:absolute; right:14px; top:50%; width:6px; height:6px;
  border-right:1.5px solid rgba(180,230,200,.5);
  border-top:1.5px solid rgba(180,230,200,.5);
  transform:translateY(-50%) rotate(45deg);
}
.hsb-ico  { font-size:22px; flex-shrink:0; }
.hsb-txt  { display:flex; flex-direction:column; gap:2px; }
.hsb-main { font-size:13px; font-weight:500; color:rgba(255,255,255,.88); letter-spacing:.03em; line-height:1.3; }
.hsb-sub  { font-size:11px; color:rgba(180,230,200,.58); letter-spacing:.04em; }

/* ────────────────────────────────────────────────
   EEAT 監修者バッジ
──────────────────────────────────────────────── */
.ks-supervisor {
  display:flex; align-items:flex-start; gap:14px;
  background:var(--wh); border:1px solid var(--bdr);
  border-left:3px solid var(--gold);
  border-radius:10px; padding:14px 16px; margin:20px 20px 0;
}
.ks-sv-avatar {
  width:46px; height:46px; border-radius:50%;
  background:var(--gpl); display:flex; align-items:center;
  justify-content:center; font-size:22px; flex-shrink:0; overflow:hidden;
}
.ks-sv-avatar img { width:100%; height:100%; object-fit:cover; border-radius:50%; display:block; }

.ks-sv-role  {
  font-size:9px; letter-spacing:.22em; color:var(--gold);
  font-family:'Cormorant Garamond',serif; font-style:italic;
  text-transform:uppercase; display:block; margin-bottom:3px;
}
.ks-sv-name  { font-family:'Noto Serif JP',serif; font-size:14px; font-weight:400; letter-spacing:.08em; color:var(--ink); margin-bottom:4px; }
.ks-sv-cred  { font-size:11px; color:var(--mid); line-height:1.6; letter-spacing:.02em; }
.ks-sv-cred strong { color:var(--ink); font-weight:500; }
.ks-sv-tags  { display:flex; flex-wrap:wrap; gap:4px; margin-top:6px; }
.ks-sv-tag   { font-size:10px; background:var(--gpl); color:var(--gold); border-radius:3px; padding:2px 8px; letter-spacing:.04em; }

/* ────────────────────────────────────────────────
   SECTION SHELL
──────────────────────────────────────────────── */
.sec    { padding:36px 20px 0; }
.sec-hd { display:flex; align-items:flex-start; gap:12px; margin-bottom:18px; }
.sec-num {
  font-family:'Cormorant Garamond',serif; font-style:italic;
  font-size:44px; font-weight:300; line-height:.85;
  color:var(--gpl); flex-shrink:0; margin-top:4px;
}
.sec-meta  { padding-top:2px; }
.sec-en    {
  font-size:9px; letter-spacing:.26em; color:var(--gold);
  font-family:'Cormorant Garamond',serif; font-style:italic;
  text-transform:uppercase; display:block; margin-bottom:3px;
}
.sec-title {
  font-family:'Noto Serif JP',serif;
  font-size:18px; font-weight:400; letter-spacing:.09em; color:var(--ink);
}

.ka {
  background:var(--dk); border-radius:12px; padding:14px 16px; margin-bottom:18px;
  position:relative; overflow:hidden;
}
.ka::before {
  content:''; position:absolute; inset:0 0 auto 0; height:2px;
  background:linear-gradient(90deg,var(--glt),var(--gold),var(--glt));
}
.ka-lbl  {
  font-size:9px; letter-spacing:.22em; color:var(--glt);
  font-family:'Cormorant Garamond',serif; font-style:italic;
  text-transform:uppercase; display:block; margin-bottom:7px; opacity:.75;
}
.ka-text { font-size:14px; font-weight:500; color:rgba(255,255,255,.9); line-height:1.6; letter-spacing:.02em; }
.ka-text em { font-style:normal; color:var(--glt); }

.divider { height:1px; background:linear-gradient(90deg,transparent,var(--bdr),transparent); margin:24px 20px 0; }

/* ════════════════════════════════════════════════
   NV-WRAP v2: 香りの三層構造チャート（完全リデザイン）
   ── 旧: 3枚スタックカード（ベースが隠れる）
   ── 新: 3列インジケーター + 1枚動的カード
   ════════════════════════════════════════════════ */

/* ── コンテナ ── */

/* ── ヘッダー ──────────────────────────────────── */

/* 時間ボックス：圧縮不可 + 折り返し禁止（Bug修正） */

.nv-time-val {
  font-family: 'Cormorant Garamond', serif;
  font-size: 20px;         /* 26px → 20px: "3時間20分"が1行に収まる */
  font-weight: 300;
  line-height: 1;
  color: #fff;
  letter-spacing: 0.02em;
  white-space: nowrap;     /* 折り返し禁止（Bug修正） */
  transition: color .3s;
}

/* 支配ノート表示：縮小可能でオーバーフロー防止（Bug修正） */

@keyframes nv-ring-pulse {
  0%   { box-shadow: 0 0 0 2px rgba(255,255,255,.3); }
  50%  { box-shadow: 0 0 0 6px rgba(255,255,255,.0);  }
  100% { box-shadow: 0 0 0 2px rgba(255,255,255,.3); }
}
.nv-active-label {
  font-family: 'Noto Serif JP', serif;
  font-size: 12px; font-weight: 400;
  color: rgba(255,255,255,.88); letter-spacing: .06em;
  transition: color .4s;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* "が支配的な時間帯" → スマホでは非表示（スペース節約） */

/* ── チャート ── */

.nv-chart-wrap canvas {
  display: block; width: 100%; height: 130px;
  cursor: crosshair; touch-action: none;
}

/* ── 時間軸ラベル ── */

.nv-axis span {
  font-size: 9.5px; color: rgba(255,255,255,.28);
  letter-spacing: .04em;
  font-family: 'Cormorant Garamond', serif; font-style: italic;
}

/* ── コントロール ── */

.nv-play-btn {
  flex-shrink: 0; display: flex; align-items: center; gap: 5px;
  padding: 8px 14px; border-radius: 20px;
  border: 1.5px solid var(--nv-gold); background: transparent;
  color: var(--nv-gold); font-size: 12px;
  font-family: 'Noto Sans JP', sans-serif; letter-spacing: .06em;
  cursor: pointer; transition: background .18s, color .18s;
  -webkit-tap-highlight-color: transparent;
}

.nv-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--nv-gold); box-shadow: 0 0 0 3px rgba(160,120,80,.2);
  cursor: grab; transition: box-shadow .15s;
}

/* ── 3列インジケーターストリップ（NEW）── */

.nv-strip-label {
  font-family: 'Cormorant Garamond', serif; font-style: italic;
  font-size: 9.5px; letter-spacing: .2em; color: var(--nv-soft);
  display: block; margin-bottom: 3px;
}

.nv-strip-pct {
  font-size: 10px; color: var(--nv-soft);
  font-variant-numeric: tabular-nums;
  font-family: 'Cormorant Garamond', serif; letter-spacing: .05em;
}

/* ── 1枚動的カード（NEW）── */

@keyframes nv-card-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

.nv-sc-en   {
  font-family: 'Cormorant Garamond', serif; font-style: italic;
  font-size: 10px; letter-spacing: .18em; display: block; margin-bottom: 2px;
}
.nv-sc-jp   {
  font-family: 'Noto Serif JP', serif;
  font-size: 15px; font-weight: 400; letter-spacing: .07em;
  color: var(--nv-ink); line-height: 1.3;
}

/* ノートタイプ別カラー */

/* PC: 余裕があるので "が支配的な時間帯" を復活 */
@media (min-width: 580px) {
  
  
  
  
  
}

/* ────────────────────────────────────────────────
   01 NOTE STRUCTURE（既存の .notes .stip ブロック）
──────────────────────────────────────────────── */
.notes { display:flex; flex-direction:column; gap:8px; margin-bottom:16px; }
.note  { border-radius:12px; padding:16px 15px; display:flex; gap:14px; align-items:flex-start; }
.note-top { background:var(--topb); border:1px solid var(--topbr); }
.note-mid { background:var(--mdnb); border:1px solid var(--mdnbr); }
.note-bas { background:var(--basb); border:1px solid var(--basbr); }
.note-left { display:flex; flex-direction:column; align-items:center; gap:4px; flex-shrink:0; width:46px; }
.note-ico  { width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:18px; }
.note-top .note-ico { background:rgba(200,88,32,.12); }
.note-mid .note-ico { background:rgba(46,110,70,.12);  }
.note-bas .note-ico { background:rgba(42,72,120,.12);  }
.note-time { font-size:9.5px; font-weight:500; text-align:center; line-height:1.3; letter-spacing:.03em; }
.note-top .note-time { color:var(--top); }
.note-mid .note-time { color:var(--mdn); }
.note-bas .note-time { color:var(--bas); }
.note-en { font-family:'Cormorant Garamond',serif; font-style:italic; font-size:10px; letter-spacing:.18em; display:block; margin-bottom:2px; }
.note-top .note-en { color:var(--top); }
.note-mid .note-en { color:var(--mdn); }
.note-bas .note-en { color:var(--bas); }
.note-jp { font-family:'Noto Serif JP',serif; font-size:16px; font-weight:400; letter-spacing:.07em; margin-bottom:5px; }
.note-top .note-jp { color:#A04018; }
.note-mid .note-jp { color:#1E5A36; }
.note-bas .note-jp { color:#1E3868; }
.note-desc { font-size:12px; color:var(--mid); line-height:1.8; letter-spacing:.02em; margin-bottom:7px; }
.note-desc strong { color:var(--ink); font-weight:500; }
.note-tags { display:flex; flex-wrap:wrap; gap:4px; }
.tag  { font-size:10px; padding:2px 9px; border-radius:20px; letter-spacing:.04em; }
.note-top .tag { background:rgba(200,88,32,.1); color:var(--top); }
.note-mid .tag { background:rgba(46,110,70,.1);  color:var(--mdn); }
.note-bas .tag { background:rgba(42,72,120,.1);  color:var(--bas); }
.stip { background:var(--wh); border:1px solid var(--bdr); border-left:3px solid var(--gold); border-radius:0 10px 10px 0; padding:14px; margin-bottom:0; display:flex; gap:10px; }
.stip-ico   { font-size:20px; flex-shrink:0; margin-top:1px; }
.stip-title { font-size:12.5px; font-weight:500; letter-spacing:.03em; color:var(--ink); margin-bottom:4px; }
.stip-text  { font-size:12px; color:var(--mid); line-height:1.8; letter-spacing:.02em; }
.stip-text strong { color:var(--ink); font-weight:500; }

/* ────────────────────────────────────────────────
   02 CONCENTRATION
──────────────────────────────────────────────── */
.conc-scroll { overflow-x:auto; margin:0 -20px; padding:0 20px 12px; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
.conc-scroll::-webkit-scrollbar { display:none; }
.conc-row { display:flex; gap:10px; width:max-content; }
.cc { width:136px; flex-shrink:0; background:var(--wh); border:1.5px solid var(--bdr); border-radius:12px; padding:16px 14px; position:relative; }
.cc.rec { border-color:var(--gold); }
.cc.rec::after { content:'定番'; position:absolute; top:-1px; right:14px; background:var(--gold); color:#fff; font-size:9px; letter-spacing:.1em; padding:2px 8px; border-radius:0 0 5px 5px; }
.cc-abbr { font-family:'Cormorant Garamond',serif; font-style:italic; font-size:20px; font-weight:300; color:var(--gold); letter-spacing:.06em; display:block; margin-bottom:2px; }
.cc-jp   { font-family:'Noto Serif JP',serif; font-size:11px; font-weight:400; letter-spacing:.07em; color:var(--ink); margin-bottom:8px; }
.cc-pct  { font-size:28px; font-weight:700; letter-spacing:-.02em; color:var(--ink); line-height:1; margin-bottom:1px; }
.cc-unit { font-size:10px; color:var(--soft); letter-spacing:.06em; margin-bottom:8px; }
.cc-bar  { height:4px; background:var(--gpl); border-radius:2px; margin-bottom:9px; overflow:hidden; }
.cc-bar-f { height:100%; border-radius:2px; background:linear-gradient(90deg,var(--glt),var(--gold)); }
.cc-dur  { font-size:12px; color:var(--mid); line-height:1.5; letter-spacing:.02em; }
.cc-dur strong { font-size:14px; font-weight:700; color:var(--ink); display:block; }
.conc-hint { font-size:10.5px; color:var(--soft); letter-spacing:.04em; margin-bottom:14px; padding-left:2px; }
.dec { background:var(--iv); border:1px solid var(--bdr); border-radius:10px; padding:14px; margin-bottom:0; }
.dec-ttl  { font-size:11px; color:var(--gold); letter-spacing:.12em; font-family:'Cormorant Garamond',serif; font-style:italic; display:block; margin-bottom:11px; }
.dec-cols { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.dec-col  { background:var(--wh); border:1px solid var(--bdr); border-radius:8px; padding:11px 12px; }
.dec-col-ttl { font-size:12px; font-weight:500; color:var(--ink); letter-spacing:.04em; margin-bottom:7px; display:flex; align-items:center; gap:5px; }
.dec-list { display:flex; flex-direction:column; gap:5px; }
.dec-li   { font-size:11.5px; color:var(--mid); letter-spacing:.02em; display:flex; align-items:flex-start; gap:4px; line-height:1.45; }
.dec-li::before { content:'→'; color:var(--glt); flex-shrink:0; font-size:10px; margin-top:2px; }

/* ────────────────────────────────────────────────
   03 FAMILY
──────────────────────────────────────────────── */
.ffilter { display:flex; gap:6px; overflow-x:auto; padding-bottom:10px; margin-bottom:14px; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
.ffilter::-webkit-scrollbar { display:none; }
.ff { font-size:11.5px; padding:6px 15px; border-radius:20px; border:1px solid var(--bdr); background:var(--wh); color:var(--mid); cursor:pointer; white-space:nowrap; flex-shrink:0; transition:all .15s; letter-spacing:.04em; outline:none; -webkit-tap-highlight-color:transparent; }
.ff.on, .ff:active { background:var(--gold); color:#fff; border-color:var(--gold); }
.fgrid { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:0; }
.fc { background:var(--wh); border:1px solid var(--bdr); border-radius:10px; padding:13px 12px; transition:border-color .16s, opacity .22s; }
.fc.dim { opacity:.28; pointer-events:none; }
.fc-top  { display:flex; align-items:center; gap:8px; margin-bottom:6px; }
.fc-ico  { font-size:22px; }
.fc-name { font-family:'Noto Serif JP',serif; font-size:13px; font-weight:400; letter-spacing:.07em; color:var(--ink); }
.fc-en   { font-family:'Cormorant Garamond',serif; font-style:italic; font-size:10px; color:var(--glt); letter-spacing:.1em; display:block; margin-top:1px; }
.fc-desc { font-size:11.5px; color:var(--mid); line-height:1.65; letter-spacing:.02em; margin-bottom:7px; }
.fc-moods { display:flex; flex-wrap:wrap; gap:4px; margin-bottom:5px; }
.fc-mood  { font-size:9.5px; background:var(--iv); border-radius:20px; padding:2px 7px; color:var(--soft); letter-spacing:.04em; }
.fc-ex    { font-size:10px; color:var(--gold); letter-spacing:.04em; }

/* ────────────────────────────────────────────────
   04 TERMS
──────────────────────────────────────────────── */
.tsearch { display:flex; align-items:center; gap:8px; background:var(--wh); border:1.5px solid var(--bdr); border-radius:8px; padding:0 14px; transition:border-color .2s; margin-bottom:14px; }
.tsearch:focus-within { border-color:var(--gold); }
.tsearch input { flex:1; padding:11px 0; font-family:'Noto Sans JP',sans-serif; font-size:13px; color:var(--ink); background:none; border:none; outline:none; letter-spacing:.04em; }
.tsearch input::placeholder { color:var(--soft); }
.tsearch-ico { font-size:14px; color:var(--glt); }
.tcards { display:flex; flex-direction:column; gap:8px; margin-bottom:0; }
.tc     { background:var(--wh); border:1px solid var(--bdr); border-radius:10px; overflow:hidden; }
.tc.hide { display:none; }
.tc-inner { padding:13px 14px; }
.tc-hd    { display:flex; align-items:flex-start; justify-content:space-between; gap:8px; margin-bottom:8px; }
.tc-jp    { font-family:'Noto Serif JP',serif; font-size:15px; font-weight:400; letter-spacing:.07em; color:var(--ink); }
.tc-en    { font-family:'Cormorant Garamond',serif; font-style:italic; font-size:10.5px; color:var(--glt); letter-spacing:.12em; }
.tc-badge { font-size:9.5px; background:var(--gpl); color:var(--gold); border-radius:3px; padding:2px 8px; letter-spacing:.06em; white-space:nowrap; flex-shrink:0; align-self:flex-start; margin-top:2px; }
.tc-ans   { font-size:13px; font-weight:500; color:var(--ink); line-height:1.55; padding:9px 12px; background:var(--iv); border-radius:6px; margin-bottom:8px; letter-spacing:.03em; }
.tc-detail { font-size:12px; color:var(--mid); line-height:1.82; letter-spacing:.02em; }
.tc-tip   { font-size:11.5px; color:var(--gold); letter-spacing:.03em; margin-top:8px; display:flex; align-items:flex-start; gap:5px; line-height:1.55; }
.tc-tip-ico { flex-shrink:0; }

/* ────────────────────────────────────────────────
   05 HOW TO WEAR — do/don't
──────────────────────────────────────────────── */
.dodont { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:14px; }
.dd-col { border-radius:10px; padding:13px 12px; }
.dd-do  { background:var(--mdnb); border:1px solid var(--mdnbr); }
.dd-dn  { background:var(--topb); border:1px solid var(--topbr); }
.dd-ttl { font-size:13px; font-weight:500; letter-spacing:.05em; margin-bottom:9px; display:flex; align-items:center; gap:5px; }
.dd-do .dd-ttl { color:var(--mdn); }
.dd-dn .dd-ttl { color:var(--top); }
.dd-items { display:flex; flex-direction:column; gap:6px; }
.dd-item  { font-size:12px; color:var(--mid); line-height:1.5; letter-spacing:.02em; display:flex; gap:5px; align-items:flex-start; }
.dd-do .dd-item::before { content:'✓'; color:var(--mdn); flex-shrink:0; font-weight:700; font-size:11px; margin-top:1px; }
.dd-dn .dd-item::before { content:'✗'; color:var(--top); flex-shrink:0; font-weight:700; font-size:11px; margin-top:1px; }
.dd-item strong { color:var(--ink); font-weight:500; }

/* ────────────────────────────────────────────────
   05 パルスポイント インタラクティブ
──────────────────────────────────────────────── */

.pp-modes    { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:18px; }
.pp-mode-btn {
  flex:1; min-width:calc(50% - 4px); padding:10px 8px; border-radius:10px;
  border:1.5px solid var(--bdr); background:var(--wh);
  cursor:pointer; text-align:center; transition:border-color .18s, background .18s;
  outline:none; -webkit-tap-highlight-color:transparent;
}
.pp-mode-btn.active { border-color:var(--gold); background:var(--iv); }
.pp-mode-btn-ico  { font-size:20px; display:block; margin-bottom:3px; line-height:1; }
.pp-mode-btn-name { font-size:12px; font-weight:500; color:var(--ink); letter-spacing:.04em; display:block; margin-bottom:2px; }
.pp-mode-btn.active .pp-mode-btn-name { color:var(--gold); }
.pp-mode-btn-sub  { font-size:10px; color:var(--soft); letter-spacing:.03em; line-height:1.4; display:block; }

.pp-svg-wrap  { flex-shrink:0; width:130px; position:relative; }

.pp-bd { fill:rgba(237,225,207,.18); stroke:rgba(160,120,80,.35); stroke-width:1.4; stroke-linejoin:round; stroke-linecap:round; }

.pp-dot.pp-inactive .dot-core { fill:var(--gpl); stroke:var(--bdr); opacity:.35; }

.pp-dot.pp-active .dot-core   { fill:rgba(160,120,80,.55); stroke:var(--glt); }

.pp-dot.pp-best .dot-ring     { opacity:.65; stroke-width:2; animation:pp-pulse 1.3s ease-out infinite; transform-origin:center; transform-box:fill-box; }
@keyframes pp-pulse {
  0%   { transform:scale(1);   opacity:.65; }
  100% { transform:scale(2.4); opacity:0;   }
}

.pp-mode-title { font-family:'Noto Serif JP',serif; font-size:14.5px; font-weight:400; letter-spacing:.08em; color:var(--ink); margin-bottom:6px; line-height:1.4; }
.pp-mode-desc  { font-size:11.5px; color:var(--mid); line-height:1.75; letter-spacing:.02em; margin-bottom:12px; padding:8px 10px; background:var(--iv); border-radius:6px; border-left:2px solid var(--gold); }

.pp-point-item  { display:flex; align-items:flex-start; gap:8px; opacity:0; transform:translateX(-8px); transition:opacity .3s ease, transform .3s ease; }

.pp-point-dot-badge { width:10px; height:10px; border-radius:50%; background:rgba(160,120,80,.5); flex-shrink:0; margin-top:4px; box-shadow:0 0 0 2px var(--gpl); }
.pp-point-item.best-point .pp-point-dot-badge { background:var(--gold); box-shadow:0 0 0 2px rgba(160,120,80,.25), 0 0 6px rgba(160,120,80,.35); }
.pp-point-name { font-size:12.5px; font-weight:500; color:var(--ink); letter-spacing:.04em; display:block; margin-bottom:1px; }

.pp-point-note { font-size:11px; color:var(--mid); line-height:1.55; letter-spacing:.02em; }
.pp-amount-hint { margin-top:12px; padding:10px 12px; background:var(--dk); border-radius:8px; font-size:11.5px; color:rgba(196,168,130,.85); letter-spacing:.03em; line-height:1.65; position:relative; overflow:hidden; }
.pp-amount-hint::before { content:''; position:absolute; inset:0 0 auto 0; height:1.5px; background:linear-gradient(90deg,var(--glt),var(--gold),var(--glt)); }
.pp-amount-hint strong { color:var(--glt); font-weight:500; }
.pp-special-row { display:flex; align-items:flex-start; gap:8px; opacity:0; transform:translateX(-8px); transition:opacity .3s ease, transform .3s ease; }

.pp-special-ico { font-size:18px; flex-shrink:0; margin-top:1px; line-height:1; }

/* ────────────────────────────────────────────────
   05b SALES TIPS
──────────────────────────────────────────────── */
.salestip-head { display:flex; align-items:center; gap:10px; background:var(--dk); border-radius:10px; padding:13px 15px; margin-bottom:12px; }
.salestip-head-ico { font-size:22px; flex-shrink:0; }
.salestip-head-txt { font-size:13px; font-weight:500; color:rgba(255,255,255,.88); letter-spacing:.04em; }
.salestip-head-sub { font-size:11px; color:rgba(255,255,255,.38); letter-spacing:.04em; margin-top:2px; }
.stips { display:flex; flex-direction:column; gap:10px; }
.stip-card { background:var(--wh); border:1px solid var(--bdr); border-radius:10px; overflow:hidden; }
.stip-card-bar   { height:3px; }
.stip-card-inner { padding:13px 14px; }
.stip-card-num   { font-family:'Cormorant Garamond',serif; font-style:italic; font-size:11px; letter-spacing:.18em; color:var(--gold); display:block; margin-bottom:6px; text-transform:uppercase; }
.stip-card-title { font-family:'Noto Serif JP',serif; font-size:14.5px; font-weight:400; letter-spacing:.07em; color:var(--ink); margin-bottom:7px; }
.stip-card-body  { font-size:12.5px; color:var(--mid); line-height:1.85; letter-spacing:.02em; }
.stip-card-body strong { color:var(--ink); font-weight:500; }
.stip-card-tip   { margin-top:9px; font-size:12px; color:var(--gold); letter-spacing:.03em; display:flex; align-items:flex-start; gap:5px; line-height:1.55; }

/* ────────────────────────────────────────────────
   05c LIGHT FRAGRANCE
──────────────────────────────────────────────── */
.lf-intro { background:var(--iv); border:1px solid var(--bdr); border-radius:10px; padding:14px 15px; margin-bottom:14px; display:flex; gap:10px; align-items:flex-start; }
.lf-intro-ico  { font-size:22px; flex-shrink:0; margin-top:1px; }
.lf-intro-body { font-size:12.5px; color:var(--mid); line-height:1.85; letter-spacing:.02em; }
.lf-intro-body strong { color:var(--ink); font-weight:500; }
.lftabs { display:flex; gap:7px; margin-bottom:12px; }
.lftab  { flex:1; padding:10px 6px; border-radius:8px; border:1.5px solid var(--bdr); background:var(--wh); text-align:center; cursor:pointer; transition:all .16s; outline:none; -webkit-tap-highlight-color:transparent; }
.lftab.on { border-color:var(--gold); background:var(--iv); }
.lftab-ico  { font-size:22px; display:block; margin-bottom:4px; }
.lftab-name { font-size:11.5px; font-weight:500; color:var(--ink); letter-spacing:.04em; margin-bottom:1px; }
.lftab.on .lftab-name { color:var(--gold); }
.lftab-sub  { font-size:10px; color:var(--soft); letter-spacing:.03em; }

.lf-cards { display:flex; flex-direction:column; gap:10px; margin-bottom:0; }
.lfc { background:var(--wh); border:1px solid var(--bdr); border-radius:10px; padding:14px; display:grid; grid-template-columns:44px 1fr; gap:12px; align-items:flex-start; }
.lfc-ico   { width:42px; height:42px; border-radius:50%; background:var(--iv); border:1px solid var(--gpl); display:flex; align-items:center; justify-content:center; font-size:20px; flex-shrink:0; }
.lfc-brand { font-size:10px; color:var(--gold); letter-spacing:.1em; font-family:'Cormorant Garamond',serif; font-style:italic; display:block; margin-bottom:2px; }
.lfc-name  { font-family:'Noto Serif JP',serif; font-size:14px; font-weight:400; letter-spacing:.07em; color:var(--ink); margin-bottom:5px; }
.lfc-desc  { font-size:12px; color:var(--mid); line-height:1.8; letter-spacing:.02em; margin-bottom:6px; }

.lfc-tag   { font-size:10px; background:var(--iv); border:1px solid var(--gpl); border-radius:20px; padding:2px 8px; color:var(--soft); letter-spacing:.04em; }
.lfc-why   { font-size:11.5px; color:var(--gold); letter-spacing:.03em; margin-top:7px; display:flex; align-items:flex-start; gap:4px; line-height:1.5; }
.lfc-why::before { content:'◎'; flex-shrink:0; font-size:10px; margin-top:2px; }
.lf-howto      { background:var(--mdnb); border:1px solid var(--mdnbr); border-radius:8px; padding:12px 13px; margin-top:12px; }
.lf-howto-ttl  { font-size:12px; font-weight:500; color:var(--mdn); letter-spacing:.05em; margin-bottom:7px; display:flex; align-items:center; gap:5px; }
.lf-howto-list { display:flex; flex-direction:column; gap:5px; }
.lf-howto-i    { font-size:12px; color:var(--mid); letter-spacing:.02em; display:flex; gap:5px; align-items:flex-start; line-height:1.5; }
.lf-howto-i::before { content:'→'; color:var(--mdn); flex-shrink:0; font-size:10px; margin-top:2px; }

/* ────────────────────────────────────────────────
   06 STORAGE
──────────────────────────────────────────────── */
.sg      { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:0; }
.sg-col  { border-radius:10px; padding:14px 13px; }
.sg-ok   { background:var(--mdnb); border:1px solid var(--mdnbr); }
.sg-ng   { background:var(--topb); border:1px solid var(--topbr); }
.sg-ico  { font-size:26px; display:block; margin-bottom:6px; }
.sg-lbl  { font-size:10px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; margin-bottom:7px; }
.sg-ok .sg-lbl { color:var(--mdn); }
.sg-ng .sg-lbl { color:var(--top); }
.sg-items { display:flex; flex-direction:column; gap:5px; }
.sg-i     { font-size:12px; color:var(--mid); line-height:1.5; letter-spacing:.02em; display:flex; gap:5px; align-items:flex-start; }
.sg-ok .sg-i::before { content:'○'; color:var(--mdn); flex-shrink:0; font-size:10px; margin-top:1px; }
.sg-ng .sg-i::before { content:'×'; color:var(--top); flex-shrink:0; font-size:10px; margin-top:1px; }

/* ────────────────────────────────────────────────
   CITE / BOTTOM NAV / SCROLL REVEAL
──────────────────────────────────────────────── */
.cite { margin:28px 20px 0; background:var(--wh); border:1px solid var(--bdr); border-top:3px solid var(--gold); border-radius:0 0 8px 8px; padding:16px 18px; position:relative; }
.cite::before { content:'参考文献'; position:absolute; top:-1px; left:14px; background:var(--gold); color:#fff; font-size:9px; letter-spacing:.15em; padding:2px 10px; }
.cite ul   { list-style:none; display:flex; flex-direction:column; gap:5px; margin-top:8px; }
.cite li   { list-style:none !important; font-size:11.5px; color:var(--mid); letter-spacing:.02em; display:flex; gap:7px; align-items:flex-start; }

.cd        { width:13px; height:13px; border-radius:50%; background:var(--gpl); display:flex; align-items:center; justify-content:center; flex-shrink:0; margin-top:2px; }
.cd::after { content:''; width:4px; height:4px; border-radius:50%; background:var(--gold); }
.cite-notice { margin-top:14px; padding-top:12px; border-top:1px solid var(--gpl); font-size:11px; color:var(--soft); letter-spacing:.05em; text-align:center; font-family:'Cormorant Garamond',serif; font-style:italic; }

.bnav {
  position:fixed; bottom:0; left:0; right:0; height:var(--bnav);
  background:rgba(250,247,242,.95); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-top:1px solid var(--bdr); display:flex; align-items:center;
  justify-content:space-around; padding:0 8px; z-index:999;
}
.nb  { flex:1; max-width:68px; display:flex; flex-direction:column; align-items:center; gap:3px; padding:7px 4px; cursor:pointer; text-decoration:none; background:none; border:none; border-radius:10px; transition:background .15s; outline:none; -webkit-tap-highlight-color:transparent; }
.nb:active, .nb.on { background:var(--gpl); }
.nb-ico  { font-size:21px; line-height:1; }
.nb-lbl  { font-size:9px; color:var(--soft); letter-spacing:.06em; }
.nb.on .nb-lbl { color:var(--gold); font-weight:500; }

.rv    { opacity:0; transform:translateY(14px); transition:opacity .55s ease, transform .55s ease; }

/* ────────────────────────────────────────────────
   RESPONSIVE (PC: 580px+)
──────────────────────────────────────────────── */
@media (min-width:580px) {
  .qj    { grid-template-columns:repeat(4,1fr); }
  .fgrid { grid-template-columns:repeat(3,1fr); }
  .sec   { padding:40px 28px 0; }
  
  
  
  .pp-svg-wrap  { width:150px; }
}

/* ===== source: 26766.css ===== */
/******* 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;
}

/* ===== source: 26710.css ===== */
/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Jul 08 2026 | 22:17:02 */
/* ================================================
   香LIG | トップページ v3.7（bfcache修正統合版）
   CSS — WPCode「CSS スニペット」を丸ごとこれに置き換え
   最終更新: 2026-05-06

   ※ kl-top-page-v36.css + kl-top-bfcache-fix.css を統合済み
      WPCodeのCSS スニペット「kl-top-page.css」の内容を
      このファイルで完全に置き換えてください。
   ================================================ */

/* ────────────────────────────────────────────────
   DESIGN TOKENS
──────────────────────────────────────────────── */
:root {
  --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-pink-50:    #fbeaf0;
  --kp-pink-200:   #efb8cd;
  --kp-blue-50:    #e6f1fb;
  --kp-blue-200:   #abc8e8;
  --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);
  --c:    #faf8f3;
  --iv:   #f5f1e8;
  --gold: #9a7848;
  --glt:  #c4a882;
  --gpl:  #ede9dd;
  --ink:  #0a0a0a;
  --mid:  #4a4a47;
  --soft: #6e6e6a;
  --bdr:  #e2dfd5;
  --wh:   #ffffff;
  --dk:   #14110d;
  --top:  #C85820;
  --mdn:  #2E6E46;
  --bas:  #2A4878;
  --nv-top:     #C85820;
  --nv-mid:     #2E6E46;
  --nv-base:    #2A4878;
  --nv-gold:    #A07850;
  --nv-glt:     #C4A882;
  --nv-dk:      #1A1208;
  --nv-iv:      #F3EDE4;
  --nv-gpl:     #EDE1CF;
  --nv-bdr:     #DDD0BC;
  --nv-wh:      #FDFAF6;
  --nv-mid-ink: #5C4E38;
  --nv-ink:     #2C2318;
  --nv-soft:    #9A8A72;
  --bnav:       64px;
}

html { scroll-behavior: smooth; }

body {
  font-family: var(--kp-sans);
  background: var(--kp-bg);
  color: var(--kp-ink);
  font-size: 14px;
  line-height: 1.7;
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  padding-bottom: calc(var(--bnav) + 24px);
}

/* ════════════════════════════════════════════════
   HERO
   v3.7 修正: contain: layout paint を削除
   → bfcache 復元時のレンダリングブロックを解消
   ════════════════════════════════════════════════ */
.kl-hero {
  background: var(--kp-bg);
  padding: 0;
  position: relative;
  overflow: hidden;
  /* ★ contain: layout paint → 削除（bfcache Bug4修正） */
  isolation: isolate;
}

/* ソフトオーブ背景 */
.kl-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 480px 480px at -10% -5%,
      rgba(247,213,224,.5) 0%, rgba(247,213,224,.15) 45%, transparent 70%),
    radial-gradient(ellipse 540px 540px at 110% 105%,
      rgba(208,227,244,.45) 0%, rgba(208,227,244,.12) 45%, transparent 70%);
  pointer-events: none;
  z-index: 0;
  /* ★ bfcache 復元後もアニメーションを確実に動かす */
  animation: kl-orb-float 22s ease-in-out infinite;
  animation-play-state: running;
  animation-fill-mode: both;
}
@keyframes kl-orb-float {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  33%       { transform: translate3d(14px, -10px, 0) scale(1.03); }
  66%       { transform: translate3d(-10px, 14px, 0) scale(.98); }
}

.kl-hero-inner {
  position: relative;
  z-index: 1;
  padding: 64px 24px 40px;
}

/* ── ブランドブロック ── */
.kl-brand-block { margin-bottom: 40px; }

.kl-brand-en {
  font-family: var(--kp-en);
  font-style: italic;
  font-size: 10px;
  letter-spacing: .4em;
  color: var(--kp-ink-faint);
  display: block;
  margin-bottom: 16px;
  text-transform: uppercase;
}

.kl-brand-name-row {
  display: flex;
  align-items: flex-start;
  gap: 2px;
  margin-bottom: 20px;
}

.kl-brand-kanji {
  font-family: var(--kp-serif);
  font-size: clamp(56px, 14vw, 80px);
  font-weight: 200;
  color: var(--kp-ink);
  letter-spacing: -.02em;
  line-height: .88;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

.kl-brand-ruby-txt {
  font-family: var(--kp-sans);
  font-size: 9px;
  letter-spacing: .38em;
  color: var(--kp-ink-faint);
  font-weight: 300;
  display: block;
  padding-left: 2px;
}

.kl-brand-lig-wrap {
  font-family: var(--kp-en);
  font-size: clamp(48px, 12vw, 70px);
  font-weight: 300;
  color: var(--kp-ink);
  letter-spacing: -.01em;
  line-height: 1;
  padding-top: 10px;
}

.kl-brand-tagline {
  font-family: var(--kp-serif);
  font-size: clamp(15px, 3.8vw, 22px);
  font-weight: 200;
  color: var(--kp-ink-soft);
  letter-spacing: .1em;
  line-height: 1.5;
  margin-bottom: 6px;
}

.kl-brand-desc {
  font-family: var(--kp-en);
  font-style: italic;
  font-size: 13px;
  color: var(--kp-ink-faint);
  letter-spacing: .12em;
  line-height: 1.7;
}

/* ── タイプ選択プロンプト ── */
.kl-type-prompt-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.kl-type-line {
  flex: 1;
  height: 1px;
  background: var(--kp-line);
}

.kl-type-text {
  font-family: var(--kp-en);
  font-style: italic;
  font-size: 11px;
  color: var(--kp-ink-faint);
  letter-spacing: .28em;
  white-space: nowrap;
  flex-shrink: 0;
  text-transform: uppercase;
}

/* ── ブランチリスト ── */
.kl-branch-list {
  background: var(--kp-paper);
  border: 1px solid var(--kp-line);
  overflow: hidden;
  margin-bottom: 20px;
}

.kl-bc-row {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border: none;
  border-bottom: 1px solid var(--kp-line-soft);
  background: var(--kp-paper);
  cursor: pointer;
  text-align: left;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  transition: background .3s var(--kp-ease);
  position: relative;
  overflow: hidden;
}
.kl-bc-row:last-child { border-bottom: none; }
.kl-bc-row::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--kp-ink);
  transform: translateX(-101%);
  transition: transform .4s var(--kp-ease);
  z-index: 0;
}
.kl-bc-row:hover::before,
.kl-bc-row:active::before { transform: translateX(0); }
.kl-bc-row > * { position: relative; z-index: 1; }
.kl-bc-row.kl-selected { background: var(--kp-bg-warm); }
.kl-bc-row:hover .kl-bc-title,
.kl-bc-row:hover .kl-bc-tag,
.kl-bc-row:hover .kl-bc-arr { color: rgba(245,243,237,.9); }

.kl-bc-accent { width: 2px; height: 40px; flex-shrink: 0; opacity: .8; }
.kl-bc-body { flex: 1; min-width: 0; }
.kl-bc-title {
  font-family: var(--kp-serif);
  font-size: 13.5px;
  font-weight: 400;
  color: var(--kp-ink);
  letter-spacing: .05em;
  display: block;
  margin-bottom: 2px;
  transition: color .3s;
}
.kl-bc-tag {
  font-family: var(--kp-en);
  font-style: italic;
  font-size: 10.5px;
  color: var(--kp-ink-faint);
  letter-spacing: .16em;
  transition: color .3s;
}
.kl-bc-arr {
  font-family: var(--kp-en);
  font-style: italic;
  font-size: 20px;
  color: var(--kp-ink-faint);
  flex-shrink: 0;
  transition: transform .3s var(--kp-ease), color .3s;
}
.kl-bc-row:hover .kl-bc-arr { transform: translateX(4px); }

/* ── EEAT ストリップ ── */
.kl-hero-eeat {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0;
  padding-top: 16px;
  border-top: 1px solid var(--kp-line);
}
.kl-hero-eeat-item {
  display: flex;
  align-items: center;
  gap: 5px;
  font-family: var(--kp-en);
  font-style: italic;
  font-size: 10px;
  color: var(--kp-ink-faint);
  letter-spacing: .18em;
  padding: 4px 14px;
  border-right: 1px solid var(--kp-line);
  text-transform: uppercase;
}
.kl-hero-eeat-item:last-child { border-right: none; }
.kl-hero-eeat-ico { font-size: 11px; }

/* ── パスバッジ行 ── */
.kl-path-badge-row {
  display: none;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px 0;
}
.kl-path-badge-row.show { display: flex; }
.kl-path-badge {
  font-family: var(--kp-en);
  font-style: italic;
  font-size: 11px;
  color: var(--kp-ink-faint);
  letter-spacing: .2em;
  display: flex;
  align-items: center;
  gap: 6px;
}
.kl-path-badge::before { content: '—'; opacity: .5; }
.kl-path-reset {
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--kp-en);
  font-style: italic;
  font-size: 11px;
  color: var(--kp-ink-faint);
  letter-spacing: .18em;
  padding: 4px 0;
  display: flex;
  align-items: center;
  gap: 4px;
  transition: color .2s;
  -webkit-tap-highlight-color: transparent;
}
.kl-path-reset:hover { color: var(--kp-ink); }

/* ── パスコンテンツ表示制御 ── */
.kl-path-content         { display: none; }
.kl-path-content.kl-show { display: block; animation: kl-fadein .48s cubic-bezier(.2,0,.2,1); }
.kl-after                { display: none; }
.kl-after.kl-show        { display: block; animation: kl-fadein .5s cubic-bezier(.2,0,.2,1) .1s both; }

@keyframes kl-fadein {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

/* ════════════════════════════════════════════════
   SECTION SHELL
   ════════════════════════════════════════════════ */
.sec { padding: 64px 24px 0; }
.sec-hd { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 28px; }
.sec-num { font-family: var(--kp-en); font-style: italic; font-size: 11px; letter-spacing: .4em; color: var(--kp-ink-faint); flex-shrink: 0; margin-top: 6px; text-transform: uppercase; }
.sec-meta { padding-top: 0; }
.sec-en { font-family: var(--kp-en); font-style: italic; font-size: 11px; letter-spacing: .32em; color: var(--kp-ink-faint); text-transform: uppercase; display: block; margin-bottom: 4px; }
.sec-title { font-family: var(--kp-serif); font-size: clamp(22px,5vw,32px); font-weight: 200; letter-spacing: .06em; color: var(--kp-ink); line-height: 1.35; }

.ka { background: var(--kp-dark); padding: 24px 26px; margin-bottom: 24px; position: relative; overflow: hidden; }
.ka::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 1px; background: linear-gradient(90deg, var(--kp-pink-200), var(--kp-blue-200)); opacity: .55; }
.ka-lbl { font-family: var(--kp-en); font-style: italic; font-size: 10px; letter-spacing: .3em; color: rgba(245,243,237,.45); text-transform: uppercase; display: block; margin-bottom: 8px; }
.ka-text { font-family: var(--kp-serif); font-size: 14px; font-weight: 300; color: rgba(245,243,237,.88); line-height: 1.7; letter-spacing: .04em; }
.ka-text em { font-style: normal; color: var(--kp-pink-200); }

.divider { height: 1px; background: var(--kp-line); margin: 48px 24px 0; }

/* ════════════════════════════════════════════════
   パルスポイント
   ════════════════════════════════════════════════ */
.pp-widget { margin-bottom: 0; }
.pp-modes  { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.pp-mode-btn { flex: 1; min-width: calc(50% - 4px); padding: 12px 8px; border-radius: 0; border: 1px solid var(--kp-line); background: var(--kp-paper); cursor: pointer; text-align: center; transition: border-color .2s, background .2s; outline: none; -webkit-tap-highlight-color: transparent; }
.pp-mode-btn.active { border-color: var(--kp-ink); background: var(--kp-bg-warm); }
.pp-mode-btn-ico  { font-size: 18px; display: block; margin-bottom: 4px; line-height: 1; }
.pp-mode-btn-name { font-family: var(--kp-serif); font-size: 11.5px; font-weight: 400; color: var(--kp-ink); letter-spacing: .04em; display: block; margin-bottom: 2px; }
.pp-mode-btn-sub  { font-family: var(--kp-en); font-style: italic; font-size: 10px; color: var(--kp-ink-faint); letter-spacing: .1em; line-height: 1.4; display: block; }
.pp-body-wrap { display: flex; gap: 16px; align-items: flex-start; }
.pp-svg-wrap  { flex-shrink: 0; width: 120px; }
.pp-svg-wrap svg { width: 100%; height: auto; display: block; }
.pp-bd { fill: rgba(237,233,221,.35); stroke: rgba(154,120,72,.3); stroke-width: 1.2; stroke-linejoin: round; stroke-linecap: round; }
.pp-dot { cursor: pointer; }
.pp-dot .dot-ring { fill: none; stroke: var(--gold); stroke-width: 1.5; opacity: 0; transform-origin: center; transform-box: fill-box; }
.pp-dot .dot-core { fill: var(--gpl); stroke: var(--bdr); stroke-width: 1; transition: fill .25s, stroke .25s; }
.pp-dot.pp-inactive .dot-core { fill: var(--gpl); stroke: var(--bdr); opacity: .3; }
.pp-dot.pp-inactive .dot-ring { opacity: 0; }
.pp-dot.pp-active .dot-core   { fill: rgba(154,120,72,.45); stroke: var(--glt); }
.pp-dot.pp-active .dot-ring   { opacity: .4; animation: pp-pulse 1.8s ease-out infinite; transform-origin: center; transform-box: fill-box; }
.pp-dot.pp-best .dot-core     { fill: var(--gold); stroke: #fff; stroke-width: 1.5; }
.pp-dot.pp-best .dot-ring     { opacity: .6; stroke-width: 2; animation: pp-pulse 1.3s ease-out infinite; transform-origin: center; transform-box: fill-box; }
@keyframes pp-pulse { 0%{transform:scale(1);opacity:.6} 100%{transform:scale(2.4);opacity:0} }
.pp-info-panel { flex: 1; min-width: 0; }
.pp-mode-title { font-family: var(--kp-serif); font-size: 14px; font-weight: 400; letter-spacing: .06em; color: var(--kp-ink); margin-bottom: 8px; line-height: 1.4; }
.pp-mode-desc  { font-family: var(--kp-sans); font-size: 11.5px; color: var(--kp-ink-soft); line-height: 1.8; letter-spacing: .02em; margin-bottom: 14px; padding: 10px 12px; background: var(--kp-bg-warm); border-left: 2px solid var(--kp-line); }
.pp-point-list { display: flex; flex-direction: column; gap: 8px; }
.pp-point-item { display: flex; align-items: flex-start; gap: 8px; opacity: 0; transform: translateX(-6px); transition: opacity .3s ease, transform .3s ease; }
.pp-point-item.visible { opacity: 1; transform: none; }
.pp-point-dot-badge { width: 8px; height: 8px; border-radius: 50%; background: rgba(154,120,72,.45); flex-shrink: 0; margin-top: 5px; box-shadow: 0 0 0 2px var(--kp-line); }
.pp-point-item.best-point .pp-point-dot-badge { background: var(--gold); box-shadow: 0 0 0 2px rgba(154,120,72,.2), 0 0 5px rgba(154,120,72,.3); }
.pp-point-name { font-family: var(--kp-serif); font-size: 12px; font-weight: 400; color: var(--kp-ink); letter-spacing: .04em; display: block; margin-bottom: 1px; }
.pp-point-item.best-point .pp-point-name { color: var(--gold); }
.pp-point-note { font-size: 11px; color: var(--kp-ink-mid); line-height: 1.55; letter-spacing: .02em; }
.pp-amount-hint { margin-top: 12px; padding: 10px 12px; background: var(--kp-dark); font-size: 11.5px; color: rgba(245,243,237,.7); letter-spacing: .03em; line-height: 1.65; position: relative; overflow: hidden; }
.pp-amount-hint::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 1px; background: linear-gradient(90deg, var(--kp-pink-200), var(--kp-blue-200)); opacity: .5; }
.pp-amount-hint strong { color: rgba(245,243,237,.9); font-weight: 400; }
.pp-special-row { display: flex; align-items: flex-start; gap: 8px; opacity: 0; transform: translateX(-6px); transition: opacity .3s ease, transform .3s ease; }
.pp-special-row.visible { opacity: 1; transform: none; }
.pp-special-ico { font-size: 16px; flex-shrink: 0; margin-top: 1px; line-height: 1; }

/* ════════════════════════════════════════════════
   苦手路線 タブ
   ════════════════════════════════════════════════ */
.lf-intro { background: var(--kp-bg-warm); border: 1px solid var(--kp-line); border-left: 2px solid var(--kp-pink-200); padding: 16px 18px; margin-bottom: 20px; display: flex; gap: 10px; align-items: flex-start; }
.lf-intro-ico  { font-size: 18px; flex-shrink: 0; margin-top: 2px; }
.lf-intro-body { font-size: 12.5px; color: var(--kp-ink-soft); line-height: 1.85; letter-spacing: .03em; }
.lf-intro-body strong { color: var(--kp-ink); font-weight: 500; }
.lftabs { display: flex; gap: 1px; margin-bottom: 16px; background: var(--kp-line); }
.lftab  { flex: 1; padding: 12px 8px; border: none; background: var(--kp-paper); text-align: center; cursor: pointer; transition: background .18s; outline: none; -webkit-tap-highlight-color: transparent; }
.lftab.on { background: var(--kp-bg-warm); }
.lftab-ico  { font-size: 18px; display: block; margin-bottom: 4px; }
.lftab-name { font-family: var(--kp-serif); font-size: 11.5px; font-weight: 400; color: var(--kp-ink); letter-spacing: .04em; margin-bottom: 1px; }
.lftab-sub  { font-family: var(--kp-en); font-style: italic; font-size: 10px; color: var(--kp-ink-faint); letter-spacing: .1em; }
.lf-panel      { display: none; }
.lf-panel.show { display: block; }
.lf-cards { display: flex; flex-direction: column; gap: 1px; background: var(--kp-line); margin-bottom: 0; }
.lfc { background: var(--kp-paper); padding: 16px 18px; display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: flex-start; }
.lfc-ico   { width: 40px; height: 40px; border: 1px solid var(--kp-line); background: var(--kp-bg-warm); display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; }
.lfc-brand { font-family: var(--kp-en); font-style: italic; font-size: 10px; color: var(--kp-ink-faint); letter-spacing: .2em; display: block; margin-bottom: 2px; }
.lfc-name  { font-family: var(--kp-serif); font-size: 13.5px; font-weight: 400; letter-spacing: .06em; color: var(--kp-ink); margin-bottom: 6px; }
.lfc-desc  { font-size: 12px; color: var(--kp-ink-soft); line-height: 1.8; letter-spacing: .02em; margin-bottom: 6px; }
.lfc-tags  { display: flex; flex-wrap: wrap; gap: 4px; }
.lfc-tag   { font-family: var(--kp-en); font-style: italic; font-size: 9.5px; background: var(--kp-bg-warm); border: 1px solid var(--kp-line); padding: 2px 8px; color: var(--kp-ink-faint); letter-spacing: .12em; }
.lfc-why   { font-size: 11.5px; color: var(--kp-ink-mid); letter-spacing: .03em; margin-top: 6px; padding-left: 10px; border-left: 1.5px solid var(--kp-pink-200); line-height: 1.55; }
.lf-howto      { background: var(--kp-bg-warm); border: 1px solid var(--kp-line); padding: 14px 16px; margin-top: 12px; }
.lf-howto-ttl  { font-family: var(--kp-serif); font-size: 12px; font-weight: 400; color: var(--kp-ink); letter-spacing: .06em; margin-bottom: 8px; }
.lf-howto-list { display: flex; flex-direction: column; gap: 6px; }
.lf-howto-i    { font-size: 12px; color: var(--kp-ink-soft); letter-spacing: .02em; display: flex; gap: 6px; align-items: flex-start; line-height: 1.55; }
.lf-howto-i::before { content: '—'; color: var(--kp-ink-faint); flex-shrink: 0; font-family: var(--kp-en); font-style: italic; font-size: 11px; margin-top: 1px; }

/* ════════════════════════════════════════════════
   人気ブランドランキング
   ════════════════════════════════════════════════ */
.br-list { background: var(--kp-paper); border: 1px solid var(--kp-line); overflow: hidden; margin-bottom: 12px; }
.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; }
.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; }
.br-item:hover::before { transform: translateX(0); }
.br-item > * { position: relative; z-index: 1; }
.br-item:last-child { border-bottom: none; }
.br-rank { font-family: var(--kp-en); font-style: italic; font-size: 11px; letter-spacing: .3em; color: var(--kp-ink-faint); width: 36px; flex-shrink: 0; text-align: center; }
.br-item:nth-child(1) .br-rank { font-size: 18px; color: var(--kp-ink-soft); }
.br-item:nth-child(2) .br-rank { font-size: 15px; color: var(--kp-ink-mid); }
.br-item:nth-child(3) .br-rank { font-size: 13px; color: var(--kp-ink-mid); }
.br-accent { width: 2px; height: 36px; flex-shrink: 0; opacity: .7; }
.br-body   { flex: 1; min-width: 0; }
.br-name   { font-family: var(--kp-serif); font-size: 14px; font-weight: 400; letter-spacing: .06em; color: var(--kp-ink); display: block; margin-bottom: 1px; }
.br-en     { font-family: var(--kp-en); font-style: italic; font-size: 10px; color: var(--kp-ink-faint); letter-spacing: .16em; display: block; margin-bottom: 2px; }
.br-tag    { font-size: 10.5px; color: var(--kp-ink-faint); letter-spacing: .04em; font-family: var(--kp-sans); }
.br-arr    { font-family: var(--kp-en); font-style: italic; font-size: 16px; color: var(--kp-ink-faint); flex-shrink: 0; transition: transform .3s var(--kp-ease); }
.br-item:hover .br-arr { transform: translateX(4px); }
.br-more { display: flex; align-items: center; justify-content: space-between; background: var(--kp-paper); border: 1px solid var(--kp-line); padding: 16px 20px; text-decoration: none; transition: background .2s var(--kp-ease); -webkit-tap-highlight-color: transparent; position: relative; overflow: hidden; }
.br-more::before { content: ''; position: absolute; inset: 0; background: var(--kp-ink); transform: translateX(-101%); transition: transform .35s var(--kp-ease); z-index: 0; }
.br-more:hover::before { transform: translateX(0); }
.br-more:hover { color: #f5f3ed; }
.br-more > * { position: relative; z-index: 1; }
.br-more-main  { font-family: var(--kp-serif); font-size: 13.5px; font-weight: 400; color: inherit; letter-spacing: .06em; }
.br-more-sub   { font-family: var(--kp-en); font-style: italic; font-size: 10.5px; color: var(--kp-ink-faint); letter-spacing: .12em; display: block; margin-top: 2px; }
.br-more:hover .br-more-sub { color: rgba(245,243,237,.6); }
.br-more-arr   { font-family: var(--kp-en); font-style: italic; font-size: 18px; color: var(--kp-ink-faint); flex-shrink: 0; transition: transform .3s var(--kp-ease); }
.br-more:hover .br-more-arr { transform: translateX(4px); color: #f5f3ed; }

/* ════════════════════════════════════════════════
   コンテンツナビ
   ════════════════════════════════════════════════ */
.kl-cnav-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 1px; background: var(--kp-line); border: 1px solid var(--kp-line); overflow: hidden; }
.kl-cnav-card { background: var(--kp-paper); padding: 20px 16px; display: flex; flex-direction: column; gap: 6px; text-decoration: none; min-height: 96px; transition: background .2s var(--kp-ease); -webkit-tap-highlight-color: transparent; position: relative; overflow: hidden; }
.kl-cnav-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; }
.kl-cnav-card.fn::before { background: linear-gradient(90deg, var(--kp-pink-200), var(--kp-blue-200)); }
.kl-cnav-card.ee::before { background: var(--kp-line); }
.kl-cnav-card:hover { background: var(--kp-bg-warm); }
.kl-cnav-card-ico  { font-size: 22px; line-height: 1; margin-bottom: 4px; }
.kl-cnav-card-main { font-family: var(--kp-serif); font-size: 13px; font-weight: 400; letter-spacing: .04em; color: var(--kp-ink); line-height: 1.45; }
.kl-cnav-card-sub  { font-family: var(--kp-en); font-style: italic; font-size: 10px; color: var(--kp-ink-faint); letter-spacing: .12em; line-height: 1.4; }
.kl-cnav-card-arr  { font-family: var(--kp-en); font-style: italic; font-size: 14px; color: var(--kp-ink-faint); margin-top: auto; padding-top: 8px; align-self: flex-end; }

/* ════════════════════════════════════════════════
   EEAT 監修者・CITE・ボトムナビ・スクロールリビール
   ════════════════════════════════════════════════ */
.ks-supervisor { display: flex; align-items: flex-start; gap: 16px; background: var(--kp-paper); border: 1px solid var(--kp-line); border-left: 2px solid var(--kp-pink-200); padding: 20px 22px; }
.ks-sv-avatar  { width: 44px; height: 44px; border: 1px solid var(--kp-line); background: var(--kp-bg-warm); display: flex; align-items: center; justify-content: center; flex-shrink: 0; overflow: hidden; }
.ks-sv-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ks-sv-body    { flex: 1; }
.ks-sv-role    { font-family: var(--kp-en); font-style: italic; font-size: 10px; letter-spacing: .28em; color: var(--kp-ink-faint); text-transform: uppercase; display: block; margin-bottom: 4px; }
.ks-sv-name    { font-family: var(--kp-serif); font-size: 14px; font-weight: 400; letter-spacing: .08em; color: var(--kp-ink); margin-bottom: 5px; }
.ks-sv-cred    { font-size: 11px; color: var(--kp-ink-soft); line-height: 1.7; letter-spacing: .02em; }
.ks-sv-cred strong { color: var(--kp-ink); font-weight: 500; }
.ks-sv-tags    { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.ks-sv-tag     { font-family: var(--kp-en); font-style: italic; font-size: 9.5px; background: var(--kp-bg-warm); border: 1px solid var(--kp-line); padding: 2px 9px; color: var(--kp-ink-faint); letter-spacing: .1em; }

.cite { margin: 32px 24px 0; background: var(--kp-paper); border: 1px solid var(--kp-line); border-top: 1px solid var(--kp-ink); padding: 20px 22px; position: relative; }
.cite::before { content: 'References'; position: absolute; top: -1px; left: 16px; background: var(--kp-ink); color: var(--kp-bg); font-family: var(--kp-en); font-style: italic; font-size: 9px; letter-spacing: .22em; padding: 3px 12px; }
.cite ul   { list-style: none; display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
.cite li   { list-style: none !important; font-size: 11.5px; color: var(--kp-ink-soft); letter-spacing: .02em; display: flex; gap: 8px; align-items: flex-start; }

.cd        { width: 12px; height: 12px; border: 1px solid var(--kp-line); background: var(--kp-bg-warm); display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 2px; }
.cd::after { content: ''; width: 4px; height: 4px; background: var(--kp-ink-faint); }
.cite-notice { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--kp-line); font-family: var(--kp-en); font-style: italic; font-size: 10px; color: var(--kp-ink-faint); letter-spacing: .14em; text-align: center; }

.bnav { position: fixed; bottom: 0; left: 0; right: 0; height: var(--bnav); background: rgba(250,248,243,.96); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-top: 1px solid var(--kp-line); display: flex; align-items: center; justify-content: space-around; padding: 0 8px; z-index: 999; }
.nb  { flex: 1; max-width: 72px; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 7px 4px; cursor: pointer; text-decoration: none; background: none; border: none; transition: background .15s; outline: none; -webkit-tap-highlight-color: transparent; }
.nb:active, .nb.on { background: var(--kp-bg-warm); }
.nb-ico { font-size: 20px; line-height: 1; }
.nb-lbl { font-family: var(--kp-en); font-style: italic; font-size: 9px; color: var(--kp-ink-faint); letter-spacing: .1em; }
.nb.on .nb-lbl { color: var(--kp-ink); }

/* ★ bfcache 復元後の transition を短縮して違和感を減らす */
.rv    { opacity: 0; transform: translateY(14px); transition: opacity .4s ease, transform .4s ease; }
.rv.in { opacity: 1; transform: none; }

/* ════════════════════════════════════════════════
   苦手路線 関連記事リスト
   ════════════════════════════════════════════════ */
.lf-related { margin-top: 16px; background: var(--kp-paper); border: 1px solid var(--kp-line); overflow: hidden; }
.lf-related-hd { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-bottom: 1px solid var(--kp-line); background: var(--kp-bg-warm); }
.lf-related-en { font-family: var(--kp-en); font-style: italic; font-size: 10px; letter-spacing: .28em; color: var(--kp-ink-faint); text-transform: uppercase; }
.lf-related-jp { font-family: var(--kp-serif); font-size: 11px; font-weight: 400; letter-spacing: .08em; color: var(--kp-ink-mid); }
.lf-related-list { display: flex; flex-direction: column; }
.lf-rel-item { display: flex; align-items: center; gap: 12px; padding: 13px 16px; text-decoration: none; border-bottom: 1px solid var(--kp-line-soft); transition: background .2s var(--kp-ease); position: relative; overflow: hidden; }
.lf-rel-item::before { content: ''; position: absolute; inset: 0; background: var(--kp-bg-warm); transform: translateX(-101%); transition: transform .35s var(--kp-ease); z-index: 0; }
.lf-rel-item:hover::before { transform: translateX(0); }
.lf-rel-item > * { position: relative; z-index: 1; }
.lf-rel-item:last-child { border-bottom: none; }
.lf-rel-ico  { font-size: 18px; flex-shrink: 0; width: 34px; height: 34px; border: 1px solid var(--kp-line); background: var(--kp-bg-warm); display: flex; align-items: center; justify-content: center; }
.lf-rel-body { flex: 1; min-width: 0; }
.lf-rel-title { font-family: var(--kp-serif); font-size: 12.5px; font-weight: 400; letter-spacing: .04em; color: var(--kp-ink); display: block; margin-bottom: 2px; line-height: 1.45; }
.lf-rel-tag   { font-family: var(--kp-en); font-style: italic; font-size: 10px; letter-spacing: .14em; color: var(--kp-ink-faint); }
.lf-rel-arr   { font-family: var(--kp-en); font-style: italic; font-size: 18px; color: var(--kp-ink-faint); flex-shrink: 0; transition: transform .3s var(--kp-ease); }
.lf-rel-item:hover .lf-rel-arr { transform: translateX(3px); }

/* ════════════════════════════════════════════════
   NV-WRAP: 香りの三層構造チャート v2
   ════════════════════════════════════════════════ */
.nv-wrap { background: var(--nv-wh); border: 1px solid var(--nv-bdr); border-radius: 14px; overflow: hidden; margin-bottom: 16px; }
.nv-header { background: var(--nv-dk); padding: 14px 16px 12px; display: flex; align-items: center; justify-content: space-between; gap: 12px; position: relative; }
.nv-header::after { content: ''; position: absolute; inset: 0 0 auto 0; height: 2px; background: linear-gradient(90deg, var(--nv-glt), var(--nv-gold), var(--nv-glt)); }

/* nv-header Bug修正: 時間折り返し & 見切れ防止 */
.nv-time-box { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.nv-time-ico { font-size: 12px; opacity: .45; flex-shrink: 0; }
.nv-time-val { font-family: var(--kp-en); font-size: 20px; font-weight: 300; line-height: 1; color: #fff; letter-spacing: .02em; white-space: nowrap; transition: color .3s; }
.nv-time-sub { font-size: 11px; color: rgba(255,255,255,.35); letter-spacing: .08em; white-space: nowrap; flex-shrink: 0; }
.nv-active-wrap { display: flex; align-items: center; gap: 6px; flex-shrink: 1; min-width: 0; overflow: hidden; }
.nv-active-ring { width: 10px; height: 10px; border-radius: 50%; background: var(--nv-top); flex-shrink: 0; animation: nv-ring-pulse 1.8s ease-out infinite; transition: background .4s, box-shadow .4s; }
@keyframes nv-ring-pulse { 0%{box-shadow:0 0 0 2px rgba(255,255,255,.3)} 50%{box-shadow:0 0 0 6px rgba(255,255,255,0)} 100%{box-shadow:0 0 0 2px rgba(255,255,255,.3)} }
.nv-active-label { font-family: var(--kp-serif); font-size: 12px; font-weight: 400; color: rgba(255,255,255,.88); letter-spacing: .06em; transition: color .4s; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nv-active-sub { display: none; }

.nv-chart-wrap   { background: var(--nv-dk); }
.nv-chart-wrap canvas { display: block; width: 100%; height: 120px; cursor: crosshair; touch-action: none; }
.nv-axis { background: var(--nv-dk); display: flex; justify-content: space-between; padding: 0 4px 10px; }
.nv-axis span { font-size: 9.5px; color: rgba(255,255,255,.28); letter-spacing: .04em; font-family: var(--kp-en); font-style: italic; }
.nv-controls { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: var(--nv-iv); border-top: 1px solid var(--nv-gpl); }
.nv-play-btn { flex-shrink: 0; display: flex; align-items: center; gap: 5px; padding: 8px 14px; border-radius: 20px; border: 1.5px solid var(--nv-gold); background: transparent; color: var(--nv-gold); font-size: 12px; font-family: var(--kp-sans); letter-spacing: .06em; cursor: pointer; transition: background .18s, color .18s; -webkit-tap-highlight-color: transparent; }
.nv-play-btn:hover, .nv-play-btn.playing { background: var(--nv-gold); color: #fff; }
#nv-play-ico { font-size: 10px; }
.nv-slider-wrap { flex: 1; }
.nv-slider { -webkit-appearance: none; appearance: none; width: 100%; height: 4px; border-radius: 2px; background: var(--nv-gpl); outline: none; cursor: pointer; }
.nv-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%; background: var(--nv-gold); box-shadow: 0 0 0 3px rgba(160,120,80,.2); cursor: grab; }
.nv-slider::-webkit-slider-thumb:active { cursor: grabbing; box-shadow: 0 0 0 6px rgba(160,120,80,.2); }
.nv-slider::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; border: none; background: var(--nv-gold); cursor: grab; }
.nv-note-strip { display: flex; border-top: 1px solid var(--nv-gpl); background: var(--nv-iv); }
.nv-strip-item { flex: 1; padding: 10px 10px 10px 12px; display: flex; align-items: center; gap: 8px; border-right: 1px solid var(--nv-gpl); transition: background .3s ease; cursor: pointer; }
.nv-strip-item:last-child { border-right: none; }
.nv-strip-item.nv-strip-dominant { background: var(--nv-wh); }
.nv-strip-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; transition: transform .3s ease, box-shadow .3s ease; }
.nv-strip-item.nv-strip-dominant .nv-strip-dot { transform: scale(1.3); }
.nv-strip-top  .nv-strip-dot { background: var(--nv-top);  box-shadow: 0 0 0 2px rgba(200,88,32,.15); }
.nv-strip-mid  .nv-strip-dot { background: var(--nv-mid);  box-shadow: 0 0 0 2px rgba(46,110,70,.15); }
.nv-strip-base .nv-strip-dot { background: var(--nv-base); box-shadow: 0 0 0 2px rgba(42,72,120,.15); }
.nv-strip-item.nv-strip-dominant.nv-strip-top  .nv-strip-dot { box-shadow: 0 0 0 3px rgba(200,88,32,.3); }
.nv-strip-item.nv-strip-dominant.nv-strip-mid  .nv-strip-dot { box-shadow: 0 0 0 3px rgba(46,110,70,.3); }
.nv-strip-item.nv-strip-dominant.nv-strip-base .nv-strip-dot { box-shadow: 0 0 0 3px rgba(42,72,120,.3); }
.nv-strip-body { flex: 1; min-width: 0; }
.nv-strip-label { font-family: var(--kp-en); font-style: italic; font-size: 9.5px; letter-spacing: .2em; color: var(--nv-soft); display: block; margin-bottom: 3px; }
.nv-strip-item.nv-strip-dominant .nv-strip-label { color: var(--nv-ink); }
.nv-strip-bar  { height: 3px; background: var(--nv-gpl); border-radius: 2px; overflow: hidden; margin-bottom: 3px; }
.nv-strip-fill { height: 100%; border-radius: 2px; transition: width .18s ease-out; width: 0%; }
.nv-strip-top  .nv-strip-fill { background: var(--nv-top); }
.nv-strip-mid  .nv-strip-fill { background: var(--nv-mid); }
.nv-strip-base .nv-strip-fill { background: var(--nv-base); }
.nv-strip-pct  { font-size: 10px; color: var(--nv-soft); font-variant-numeric: tabular-nums; font-family: var(--kp-en); letter-spacing: .05em; }
.nv-strip-item.nv-strip-dominant .nv-strip-pct { color: var(--nv-ink); font-weight: 500; }
.nv-single-card { border-top: 1px solid var(--nv-bdr); min-height: 160px; position: relative; }
.nv-sc-inner { padding: 16px; animation: nv-card-in .32s cubic-bezier(.22,1,.36,1); }
@keyframes nv-card-in { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:none} }
.nv-sc-head  { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 10px; }
.nv-sc-ico   { font-size: 22px; line-height: 1; flex-shrink: 0; margin-top: 2px; }
.nv-sc-meta  { flex: 1; min-width: 0; }
.nv-sc-en    { font-family: var(--kp-en); font-style: italic; font-size: 10px; letter-spacing: .18em; display: block; margin-bottom: 2px; }
.nv-sc-jp    { font-family: var(--kp-serif); font-size: 15px; font-weight: 400; letter-spacing: .07em; color: var(--nv-ink); line-height: 1.3; }
.nv-sc-badge { font-size: 10px; padding: 3px 9px; border-radius: 20px; white-space: nowrap; letter-spacing: .04em; flex-shrink: 0; align-self: flex-start; }
.nv-sc-msg   { font-size: 12px; color: var(--nv-mid-ink); line-height: 1.8; letter-spacing: .02em; margin-bottom: 10px; }
.nv-sc-msg strong { color: var(--nv-ink); font-weight: 500; }
.nv-sc-tags  { display: flex; flex-wrap: wrap; gap: 4px; }
.nv-sc-tags span { font-size: 10px; padding: 2px 8px; border-radius: 20px; letter-spacing: .04em; }
.nv-sc-top  .nv-sc-en    { color: var(--nv-top); }
.nv-sc-top  .nv-sc-badge { background: rgba(200,88,32,.1);  color: var(--nv-top); }
.nv-sc-top  .nv-sc-tags span { background: rgba(200,88,32,.1); color: var(--nv-top); }
.nv-sc-mid  .nv-sc-en    { color: var(--nv-mid); }
.nv-sc-mid  .nv-sc-badge { background: rgba(46,110,70,.1);  color: var(--nv-mid); }
.nv-sc-mid  .nv-sc-tags span { background: rgba(46,110,70,.1); color: var(--nv-mid); }
.nv-sc-base .nv-sc-en    { color: var(--nv-base); }
.nv-sc-base .nv-sc-badge { background: rgba(42,72,120,.1); color: var(--nv-base); }
.nv-sc-base .nv-sc-tags span { background: rgba(42,72,120,.1); color: var(--nv-base); }

/* ════════════════════════════════════════════════
   RESPONSIVE (PC: 580px+)
   ════════════════════════════════════════════════ */
@media (min-width: 580px) {
  .sec { padding: 80px 40px 0; }
  .pp-modes { flex-wrap: nowrap; }
  .pp-mode-btn { min-width: 0; }
  .pp-body-wrap { gap: 24px; }
  .pp-svg-wrap  { width: 140px; }
  .kl-cnav-grid { grid-template-columns: repeat(3, 1fr); }
  .nv-chart-wrap canvas { height: 140px; }
  /* PC: nv-header を元のサイズに戻す */
  .nv-time-val     { font-size: 24px; letter-spacing: .04em; }
  .nv-time-ico     { font-size: 14px; opacity: .5; }
  .nv-active-label { font-size: 13px; }
  .nv-active-sub   { display: inline; font-size: 10px; color: rgba(255,255,255,.32); letter-spacing: .05em; }
  .nv-active-wrap  { flex-shrink: 0; overflow: visible; }
}

/* ===== source: 26707.css ===== */
/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Jul 08 2026 | 12:08:31 */
/**
 * ============================================================
 *  香LIG「私たちについて」ページ専用スタイル v3 (Editorial × Modern)
 *  ファイル名: kaolig-about.css
 * ============================================================
 *
 *  ■ デザインコンセプト
 *    雑誌の伝統と現代Webの新しさを融合した、洗練された読み物。
 *    
 *    KEY ELEMENTS:
 *    ・超大型ディスプレイタイポグラフィ（Hero ~120px）
 *    ・章番号 (Chapter 01〜04) で構造化
 *    ・編集長は大型カード、3人は横並びで階層を表現
 *    ・KTAA/YMAA をブランドエンブレムとして昇格
 *    ・水彩オーブの微妙な動き
 *    ・縦書きラベル、モノグラム
 *
 *  ■ 影響範囲
 *    すべて .kaolig-about 配下にスコープ済み。既存ページに影響なし。
 *
 *  ■ パフォーマンス
 *    ・GPUに優しい transform/opacity アニメのみ
 *    ・content-visibility:auto で下部セクションを遅延描画
 *    ・will-change を必要箇所のみに限定
 * ============================================================ */


/* ====================================================
   ベーススコープ
   ==================================================== */
.kaolig-about {
  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;

  --ka-bg: #faf8f3;
  --ka-bg-warm: #f5f1e8;
  --ka-paper: #ffffff;
  --ka-ink: #0a0a0a;
  --ka-ink-soft: #2a2a28;
  --ka-ink-mid: #4a4a47;
  --ka-ink-faint: #6e6e6a;
  --ka-line: #e2dfd5;
  --ka-line-soft: #ede9dd;
  --ka-sand: #efe9d9;
  --ka-dark: #14110d;
  --ka-pink-50: #fbeaf0;
  --ka-pink-100: #f7d5e0;
  --ka-pink-200: #efb8cd;
  --ka-blue-50: #e6f1fb;
  --ka-blue-100: #d0e3f4;
  --ka-blue-200: #abc8e8;
  --ka-serif: 'Noto Serif JP', serif;
  --ka-sans: 'Noto Sans JP', sans-serif;
  --ka-en: 'Cormorant Garamond', serif;
  --ka-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ka-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

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

.kaolig-about .ka-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}


/* ====================================================
   HERO（超大型タイポグラフィ + モノグラム）
   ==================================================== */
.kaolig-about .ka-hero {
  position: relative;
  min-height: 100svh;
  padding: 80px 24px 64px;
  text-align: center;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: var(--ka-bg);
  contain: layout paint;
}

/* 背景の水彩オーブ（GPU加速・軽量） */
.kaolig-about .ka-hero-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
.kaolig-about .ka-hero-orb {
  position: absolute;
  border-radius: 50%;
  opacity: 0.55;
  animation: ka-orb-float 20s ease-in-out infinite;
  will-change: transform;
}
.kaolig-about .ka-hero-orb-pink {
  width: 460px;
  height: 460px;
  top: -8%;
  left: -12%;
  background: radial-gradient(circle at 35% 35%,
    rgba(247, 213, 224, 0.6) 0%,
    rgba(247, 213, 224, 0.18) 45%,
    transparent 70%);
}
.kaolig-about .ka-hero-orb-blue {
  width: 520px;
  height: 520px;
  bottom: -12%;
  right: -10%;
  background: radial-gradient(circle at 50% 50%,
    rgba(208, 227, 244, 0.55) 0%,
    rgba(208, 227, 244, 0.16) 45%,
    transparent 70%);
  animation-delay: -10s;
  animation-duration: 24s;
}

@keyframes ka-orb-float {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  33%      { transform: translate3d(20px, -16px, 0) scale(1.05); }
  66%      { transform: translate3d(-12px, 20px, 0) scale(0.97); }
}

.kaolig-about .ka-hero > * { position: relative; z-index: 1; }

/* 縦書きラベル */
.kaolig-about .ka-hero-vertical {
  position: absolute;
  top: 50%;
  left: 18px;
  transform: translateY(-50%) rotate(180deg);
  writing-mode: vertical-rl;
  font-family: var(--ka-en);
  font-style: italic;
  font-size: 10px;
  letter-spacing: 0.4em;
  color: var(--ka-ink-faint);
  margin: 0;
  z-index: 2;
}

/* ブランドロゴ */
.kaolig-about .ka-hero-monogram {
  width: 64px;
  height: 64px;
  margin: 0 auto 32px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.kaolig-about .ka-hero-monogram::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid var(--ka-line);
  opacity: 0.7;
}
.kaolig-about .ka-hero-monogram img {
  width: 72%;
  height: 72%;
  object-fit: contain;
  display: block;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.kaolig-about .ka-hero-eyebrow {
  font-family: var(--ka-en);
  font-style: italic;
  font-size: 11px;
  letter-spacing: 0.4em;
  color: var(--ka-ink-faint);
  margin: 0 0 32px;
  text-transform: uppercase;
}

/* 超大型ディスプレイタイトル */
.kaolig-about .ka-hero-title {
  display: block;
  margin: 0 0 40px;
}
.kaolig-about .ka-hero-title-jp {
  display: block;
  font-family: var(--ka-serif);
  font-weight: 200;
  font-size: clamp(72px, 18vw, 180px);
  letter-spacing: 0.08em;
  line-height: 0.95;
  color: var(--ka-ink);
  margin-bottom: 18px;
}
.kaolig-about .ka-hero-title-en {
  display: block;
  font-family: var(--ka-en);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(18px, 4.5vw, 32px);
  letter-spacing: 0.06em;
  line-height: 1;
  color: var(--ka-ink-mid);
  position: relative;
  padding-top: 18px;
}
.kaolig-about .ka-hero-title-en::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 32px;
  height: 1px;
  background: linear-gradient(90deg, var(--ka-pink-200), var(--ka-blue-200));
  opacity: 0.7;
}

.kaolig-about .ka-hero-statement {
  font-family: var(--ka-serif);
  font-weight: 300;
  font-size: 14px;
  line-height: 2.2;
  color: var(--ka-ink-soft);
  letter-spacing: 0.06em;
  max-width: 540px;
  margin: 0 auto;
}

/* スクロールインジケーター */
.kaolig-about .ka-hero-scroll {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.kaolig-about .ka-hero-scroll span {
  font-family: var(--ka-en);
  font-style: italic;
  font-size: 10px;
  letter-spacing: 0.32em;
  color: var(--ka-ink-faint);
  text-transform: uppercase;
}
.kaolig-about .ka-hero-scroll-line {
  width: 1px;
  height: 48px;
  background: linear-gradient(180deg, var(--ka-ink-faint) 0%, transparent 100%);
  position: relative;
  overflow: hidden;
}
.kaolig-about .ka-hero-scroll-line::after {
  content: '';
  position: absolute;
  top: -30%;
  left: 0;
  width: 100%;
  height: 30%;
  background: var(--ka-ink);
  animation: ka-scroll-tick 2.4s var(--ka-ease-out) infinite;
}
@keyframes ka-scroll-tick {
  0%   { transform: translateY(0); opacity: 0; }
  20%  { opacity: 1; }
  100% { transform: translateY(380%); opacity: 0; }
}


/* ====================================================
   NUMBERS（信頼の数字 - 横長帯）
   ==================================================== */
.kaolig-about .ka-numbers-section {
  padding: 64px 24px;
  background: var(--ka-paper);
  border-top: 1px solid var(--ka-line);
  border-bottom: 1px solid var(--ka-line);
  contain: layout;
}
.kaolig-about .ka-numbers {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 48px 24px;
}
.kaolig-about .ka-number {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  position: relative;
}
.kaolig-about .ka-number-label {
  font-family: var(--ka-en);
  font-style: italic;
  font-size: 11px;
  letter-spacing: 0.32em;
  color: var(--ka-ink-faint);
  text-transform: uppercase;
}
.kaolig-about .ka-number-value {
  font-family: var(--ka-en);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(56px, 10vw, 92px);
  letter-spacing: -0.01em;
  line-height: 0.9;
  color: var(--ka-ink);
}
.kaolig-about .ka-number-value sub {
  display: inline-block;
  vertical-align: top;
  font-size: 0.4em;
  margin-left: 4px;
  margin-top: 0.3em;
  color: var(--ka-ink-faint);
  font-style: italic;
}
.kaolig-about .ka-number-desc {
  font-family: var(--ka-serif);
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--ka-ink-soft);
  margin-top: 4px;
}


/* ====================================================
   SECTION COMMON
   ==================================================== */
.kaolig-about .ka-section {
  padding: 100px 24px;
  position: relative;
  contain: layout;
}
.kaolig-about .ka-section-dark {
  background: var(--ka-dark);
  color: #f5f3ed;
}
.kaolig-about .ka-section-dark::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
  max-width: 600px;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(247, 213, 224, 0.4) 30%,
    rgba(208, 227, 244, 0.4) 70%,
    transparent 100%);
}

/* セクションヘッダー */
.kaolig-about .ka-section-header {
  text-align: center;
  margin: 0 auto 56px;
  max-width: 800px;
}
.kaolig-about .ka-section-num {
  font-family: var(--ka-en);
  font-style: italic;
  font-size: 11px;
  letter-spacing: 0.4em;
  color: var(--ka-ink-faint);
  margin: 0 0 24px;
  text-transform: uppercase;
}
.kaolig-about .ka-section-num.ka-on-dark { color: rgba(245, 243, 237, 0.55); }

.kaolig-about .ka-section-title {
  font-family: var(--ka-serif);
  font-weight: 200;
  font-size: clamp(32px, 6vw, 56px);
  letter-spacing: 0.04em;
  line-height: 1.25;
  color: var(--ka-ink);
  margin: 0 0 24px;
}
.kaolig-about .ka-section-title.ka-on-dark { color: #f5f3ed; }
.kaolig-about .ka-title-line {
  display: block;
}
.kaolig-about .ka-title-italic {
  font-family: var(--ka-en);
  font-style: italic;
  font-weight: 300;
  letter-spacing: 0.02em;
  color: var(--ka-ink-mid);
}
.kaolig-about .ka-title-italic.ka-on-dark,
.kaolig-about .ka-section-title.ka-on-dark .ka-title-italic { color: rgba(245, 243, 237, 0.7); }

.kaolig-about .ka-section-en {
  font-family: var(--ka-en);
  font-style: italic;
  font-size: 13px;
  letter-spacing: 0.32em;
  color: var(--ka-ink-faint);
  margin: 0;
  text-transform: uppercase;
  position: relative;
  display: inline-block;
  padding: 0 16px;
}
.kaolig-about .ka-section-en.ka-on-dark { color: rgba(245, 243, 237, 0.5); }
.kaolig-about .ka-section-en::before,
.kaolig-about .ka-section-en::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 24px;
  height: 1px;
  background: var(--ka-line);
}
.kaolig-about .ka-section-dark .ka-section-en::before,
.kaolig-about .ka-section-dark .ka-section-en::after {
  background: rgba(245, 243, 237, 0.2);
}
.kaolig-about .ka-section-en::before { right: 100%; }
.kaolig-about .ka-section-en::after  { left: 100%; }

.kaolig-about .ka-section-lead {
  font-family: var(--ka-serif);
  font-weight: 300;
  font-size: 13px;
  line-height: 2.1;
  text-align: center !important;
  color: var(--ka-ink-soft);
  max-width: 580px;
  margin: 0 auto 64px;
  letter-spacing: 0.05em;
}


/* ====================================================
   PROSE（章本文）
   ==================================================== */
.kaolig-about .ka-prose {
  max-width: 640px;
  margin: 0 auto;
  font-family: var(--ka-serif);
  font-weight: 300;
  font-size: 15px;
  line-height: 2.25;
  color: var(--ka-ink-soft);
  letter-spacing: 0.04em;
}
.kaolig-about .ka-prose p { margin: 0 0 1.6em; }
.kaolig-about .ka-prose-dark { color: rgba(245, 243, 237, 0.78); }

/* ドロップキャップ */
.kaolig-about .ka-prose > p:first-of-type::first-letter {
  font-family: var(--ka-serif);
  font-size: 56px;
  font-weight: 200;
  float: left;
  line-height: 1;
  margin: 6px 12px 0 0;
  color: var(--ka-ink);
  letter-spacing: -0.02em;
}
.kaolig-about .ka-prose-dark > p:first-of-type::first-letter { color: #f5f3ed; }

/* プルクオート */
.kaolig-about .ka-pullquote {
  font-family: var(--ka-serif);
  font-weight: 300;
  font-size: clamp(20px, 3.4vw, 28px);
  text-align: center;
  padding: 36px 16px;
  margin: 56px auto;
  color: var(--ka-ink);
  letter-spacing: 0.06em;
  line-height: 1.7;
  border: none;
  position: relative;
  max-width: 720px;
  border-top: 1px solid var(--ka-line);
  border-bottom: 1px solid var(--ka-line);
}
.kaolig-about .ka-pullquote-dark {
  color: #f5f3ed;
  border-top-color: rgba(245, 243, 237, 0.18);
  border-bottom-color: rgba(245, 243, 237, 0.18);
}
.kaolig-about .ka-pullquote-mark {
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--ka-bg);
  padding: 0 16px;
  font-family: var(--ka-en);
  font-style: italic;
  font-size: 28px;
  color: var(--ka-pink-200);
  line-height: 1;
}
.kaolig-about .ka-pullquote-dark .ka-pullquote-mark {
  background: var(--ka-dark);
  color: var(--ka-pink-100);
}
.kaolig-about .ka-pullquote-text {
  display: block;
}

/* 強調プロース */
.kaolig-about .ka-prose-emphasis {
  font-family: var(--ka-serif);
  font-weight: 400;
  font-size: clamp(18px, 2.5vw, 22px);
  line-height: 1.85;
  color: var(--ka-ink) !important;
  letter-spacing: 0.06em;
  text-align: center;
  margin: 48px 0 !important;
  position: relative;
  padding: 32px 0;
}
.kaolig-about .ka-prose-emphasis.ka-on-dark { color: #f5f3ed !important; }
.kaolig-about .ka-prose-emphasis-mark {
  display: block;
  width: 24px;
  height: 1px;
  background: var(--ka-ink);
  margin: 0 auto 24px;
}
.kaolig-about .ka-prose-emphasis.ka-on-dark .ka-prose-emphasis-mark { background: #f5f3ed; }


/* ====================================================
   THE PEOPLE（編集長 + チーム3名）
   ==================================================== */
.kaolig-about .ka-people-section {
  background: var(--ka-bg);
  content-visibility: auto;
  contain-intrinsic-size: auto 1400px;
}

/* === 編集長（大型カード） === */
.kaolig-about .ka-leader {
  max-width: 1080px;
  margin: 0 auto 80px;
  display: flex;
  flex-direction: column;
  gap: 40px;
  align-items: center;
  background: var(--ka-paper);
  padding: 48px 32px;
  border: 1px solid var(--ka-line);
  position: relative;
}
.kaolig-about .ka-leader::before {
  content: '';
  position: absolute;
  top: -1px;
  left: -1px;
  width: 64px;
  height: 64px;
  border-top: 1px solid var(--ka-pink-200);
  border-left: 1px solid var(--ka-pink-200);
}
.kaolig-about .ka-leader::after {
  content: '';
  position: absolute;
  bottom: -1px;
  right: -1px;
  width: 64px;
  height: 64px;
  border-bottom: 1px solid var(--ka-blue-200);
  border-right: 1px solid var(--ka-blue-200);
}

.kaolig-about .ka-leader-photo {
  width: 220px;
  height: 220px;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid var(--ka-line);
  background: linear-gradient(135deg, var(--ka-bg) 0%, var(--ka-sand) 100%);
  flex-shrink: 0;
  position: relative;
}
.kaolig-about .ka-leader-photo::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1px solid var(--ka-line-soft);
  pointer-events: none;
}
.kaolig-about .ka-leader-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.kaolig-about .ka-leader-info {
  flex: 1;
  text-align: center;
  max-width: 540px;
}
.kaolig-about .ka-leader-tag {
  font-family: var(--ka-en);
  font-style: italic;
  font-size: 11px;
  letter-spacing: 0.4em;
  color: var(--ka-ink-faint);
  margin: 0 0 16px;
  text-transform: uppercase;
}
.kaolig-about .ka-leader-name {
  margin: 0 0 8px;
}
.kaolig-about .ka-leader-name-jp {
  display: block;
  font-family: var(--ka-serif);
  font-weight: 300;
  font-size: clamp(28px, 4.5vw, 38px);
  letter-spacing: 0.08em;
  line-height: 1.2;
  color: var(--ka-ink);
}
.kaolig-about .ka-leader-name-en {
  display: block;
  font-family: var(--ka-en);
  font-style: italic;
  font-weight: 300;
  font-size: 14px;
  letter-spacing: 0.2em;
  color: var(--ka-ink-faint);
  margin-top: 6px;
}
.kaolig-about .ka-leader-role {
  font-family: var(--ka-serif);
  font-size: 12px;
  font-weight: 300;
  letter-spacing: 0.16em;
  color: var(--ka-ink-soft);
  margin: 24px 0;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--ka-line-soft);
}
.kaolig-about .ka-leader-bio {
  font-family: var(--ka-sans);
  font-weight: 300;
  font-size: 13px;
  line-height: 2.05;
  color: var(--ka-ink-soft);
  letter-spacing: 0.03em;
  text-align: left;
}
.kaolig-about .ka-leader-bio p { margin: 0 0 1.4em; }
.kaolig-about .ka-leader-bio p:last-child { margin-bottom: 0; }

/* 資格チップ（編集長） */
.kaolig-about .ka-credentials-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--ka-line-soft);
}
.kaolig-about .ka-cred-chip {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  padding: 8px 14px;
  border: 1px solid var(--ka-line);
  background: var(--ka-bg);
  min-width: 64px;
  transition: transform 0.3s var(--ka-ease), border-color 0.3s var(--ka-ease);
}
.kaolig-about .ka-cred-chip:hover {
  transform: translateY(-2px);
  border-color: var(--ka-ink-soft);
}
.kaolig-about .ka-cred-chip-en {
  font-family: var(--ka-en);
  font-style: italic;
  font-weight: 400;
  font-size: 14px;
  letter-spacing: 0.18em;
  color: var(--ka-ink);
  line-height: 1;
}
.kaolig-about .ka-cred-chip-jp {
  font-family: var(--ka-sans);
  font-size: 9px;
  letter-spacing: 0.12em;
  color: var(--ka-ink-faint);
  margin-top: 4px;
}
.kaolig-about .ka-cred-chip-text {
  flex-direction: row;
  padding: 8px 14px;
}
.kaolig-about .ka-cred-chip-text .ka-cred-chip-jp {
  margin-top: 0;
  font-size: 11px;
}

/* === チーム区切り === */
.kaolig-about .ka-team-divider {
  max-width: 1080px;
  margin: 0 auto 40px;
  display: flex;
  align-items: center;
  gap: 16px;
}
.kaolig-about .ka-team-divider::before,
.kaolig-about .ka-team-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--ka-line);
}
.kaolig-about .ka-team-divider-label {
  font-family: var(--ka-en);
  font-style: italic;
  font-size: 11px;
  letter-spacing: 0.4em;
  color: var(--ka-ink-faint);
  text-transform: uppercase;
}

/* === チーム3名グリッド === */
.kaolig-about .ka-team-grid {
  max-width: 1080px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.kaolig-about .ka-member {
  background: var(--ka-paper);
  border: 1px solid var(--ka-line);
  padding: 36px 28px 32px;
  text-align: center;
  transition: transform 0.4s var(--ka-ease), box-shadow 0.4s var(--ka-ease);
  position: relative;
}
.kaolig-about .ka-member:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px -22px rgba(0,0,0,0.16);
}
.kaolig-about .ka-member-photo {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid var(--ka-line);
  background: linear-gradient(135deg, var(--ka-bg) 0%, var(--ka-sand) 100%);
  margin: 0 auto 24px;
}
.kaolig-about .ka-member-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.kaolig-about .ka-member-tag {
  font-family: var(--ka-en);
  font-style: italic;
  font-size: 10px;
  letter-spacing: 0.4em;
  color: var(--ka-ink-faint);
  margin: 0 0 12px;
  text-transform: uppercase;
}
.kaolig-about .ka-member-name {
  font-family: var(--ka-serif);
  font-weight: 400;
  font-size: 20px;
  letter-spacing: 0.1em;
  color: var(--ka-ink);
  margin: 0 0 4px;
  line-height: 1.3;
}
.kaolig-about .ka-member-en {
  font-family: var(--ka-en);
  font-style: italic;
  font-size: 12px;
  letter-spacing: 0.16em;
  color: var(--ka-ink-faint);
  margin: 0 0 16px;
}
.kaolig-about .ka-member-role {
  font-family: var(--ka-serif);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--ka-ink-soft);
  margin: 0 0 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--ka-line-soft);
}
.kaolig-about .ka-member-bio {
  font-family: var(--ka-sans);
  font-weight: 300;
  font-size: 12px;
  line-height: 2;
  color: var(--ka-ink-soft);
  letter-spacing: 0.03em;
  text-align: left;
}
.kaolig-about .ka-member-bio p { margin: 0 0 1em; }
.kaolig-about .ka-member-bio p:last-child { margin-bottom: 0; }
.kaolig-about .ka-member-quote {
  font-family: var(--ka-serif) !important;
  font-weight: 400 !important;
  font-size: 14px !important;
  line-height: 1.7 !important;
  color: var(--ka-ink) !important;
  letter-spacing: 0.04em !important;
  padding: 12px 0 12px 14px !important;
  border-left: 2px solid var(--ka-pink-200) !important;
  margin: 0 0 1.2em !important;
}


/* ====================================================
   COMPLIANCE（KTAA/YMAA バッジ）
   ==================================================== */
.kaolig-about .ka-compliance-section {
  background: var(--ka-paper);
  content-visibility: auto;
  contain-intrinsic-size: auto 800px;
}
.kaolig-about .ka-compliance-grid {
  max-width: 1080px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 48px;
  align-items: center;
  border: 1px solid var(--ka-line);
  padding: 40px 28px;
  background: var(--ka-bg);
  position: relative;
}
.kaolig-about .ka-compliance-grid::before {
  content: '';
  position: absolute;
  top: -1px;
  right: 32px;
  width: 80px;
  height: 1px;
  background: var(--ka-bg);
}

.kaolig-about .ka-compliance-text {
  font-family: var(--ka-sans);
  font-weight: 300;
  font-size: 13px;
  line-height: 2.05;
  color: var(--ka-ink-soft);
  letter-spacing: 0.03em;
  max-width: 580px;
}
.kaolig-about .ka-compliance-text p { margin: 0 0 1.4em; }
.kaolig-about .ka-compliance-text p:last-child { margin: 0; }
.kaolig-about .ka-compliance-text strong {
  font-family: var(--ka-serif);
  font-weight: 500;
  color: var(--ka-ink);
  letter-spacing: 0.06em;
  padding: 0 2px;
}

/* バッジ：KTAA/YMAA ロゴ */
.kaolig-about .ka-compliance-badges {
  display: flex;
  gap: 24px;
  align-items: center;
  justify-content: center;
}
.kaolig-about .ka-badge {
  display: block;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: var(--ka-paper);
  padding: 12px;
  border: 1px solid var(--ka-line);
  transition: transform 0.4s var(--ka-ease), box-shadow 0.4s var(--ka-ease);
  position: relative;
}
.kaolig-about .ka-badge::before {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 1px solid var(--ka-line-soft);
  pointer-events: none;
}
.kaolig-about .ka-badge:hover {
  transform: translateY(-4px) scale(1.03);
  box-shadow: 0 18px 40px -20px rgba(0,0,0,0.18);
}
.kaolig-about .ka-badge img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}


/* ====================================================
   COMPANY INFO（会社情報）
   ==================================================== */
.kaolig-about .ka-company-section {
  background: var(--ka-bg-warm);
  content-visibility: auto;
  contain-intrinsic-size: auto 800px;
}
.kaolig-about .ka-company-info {
  max-width: 800px;
  margin: 0 auto;
  display: grid;
  gap: 0;
  border-top: 1px solid var(--ka-line);
}
.kaolig-about .ka-company-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  padding: 24px 0;
  border-bottom: 1px solid var(--ka-line);
  transition: background 0.3s var(--ka-ease);
}
.kaolig-about .ka-company-row:hover {
  background: rgba(255,255,255,0.4);
}
.kaolig-about .ka-company-row dt {
  font-family: var(--ka-en);
  font-style: italic;
  font-size: 11px;
  letter-spacing: 0.32em;
  color: var(--ka-ink-faint);
  text-transform: uppercase;
}
.kaolig-about .ka-company-row dd {
  font-family: var(--ka-serif);
  font-size: 15px;
  margin: 0;
  color: var(--ka-ink);
  letter-spacing: 0.04em;
  line-height: 1.85;
}
.kaolig-about .ka-company-sub {
  font-family: var(--ka-sans);
  font-size: 11px;
  color: var(--ka-ink-faint);
  margin-left: 8px;
  letter-spacing: 0.04em;
  font-weight: 400;
}
.kaolig-about .ka-company-row time {
  font-family: var(--ka-en);
  font-style: italic;
  font-size: 18px;
  letter-spacing: 0.08em;
}
.kaolig-about .ka-company-row a {
  color: var(--ka-ink);
  border-bottom: 1px solid var(--ka-line);
  transition: border-color 0.3s var(--ka-ease);
}
.kaolig-about .ka-company-row a:hover { border-color: var(--ka-ink); }


/* ====================================================
   CTA
   ==================================================== */
.kaolig-about .ka-cta-section {
  position: relative;
  padding: 96px 24px;
  text-align: center;
  background: var(--ka-dark);
  color: #f5f3ed;
  overflow: hidden;
}
.kaolig-about .ka-cta-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(ellipse at 25% 30%,
      rgba(247, 213, 224, 0.08) 0%,
      transparent 50%),
    radial-gradient(ellipse at 75% 70%,
      rgba(208, 227, 244, 0.08) 0%,
      transparent 50%);
}
.kaolig-about .ka-cta-section > * { position: relative; z-index: 1; }

.kaolig-about .ka-cta-section .ka-section-num {
  color: rgba(245, 243, 237, 0.5);
}
.kaolig-about .ka-cta-title {
  font-family: var(--ka-serif);
  font-weight: 200;
  font-size: clamp(32px, 6vw, 56px);
  letter-spacing: 0.04em;
  line-height: 1.25;
  color: #f5f3ed;
  margin: 0 0 24px;
}
.kaolig-about .ka-cta-title .ka-title-italic {
  font-family: var(--ka-en);
  font-style: italic;
  font-weight: 300;
  color: rgba(245, 243, 237, 0.7);
}
.kaolig-about .ka-cta-lead {
  font-family: var(--ka-serif);
  font-weight: 300;
  font-size: 13px;
  line-height: 2.1;
  color: rgba(245, 243, 237, 0.75);
  letter-spacing: 0.05em;
  margin: 0 auto 48px;
  max-width: 580px;
}

.kaolig-about .ka-cta-buttons {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 520px;
  margin: 0 auto;
}
.kaolig-about .ka-cta-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 28px;
  border: 1px solid rgba(245, 243, 237, 0.2);
  background: transparent;
  color: #f5f3ed;
  text-decoration: none;
  transition: all 0.4s var(--ka-ease);
  position: relative;
  overflow: hidden;
}
.kaolig-about .ka-cta-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: #f5f3ed;
  transform: translateX(-101%);
  transition: transform 0.4s var(--ka-ease);
  z-index: 0;
}
.kaolig-about .ka-cta-btn > * { position: relative; z-index: 1; }
.kaolig-about .ka-cta-btn:hover::before { transform: translateX(0); }
.kaolig-about .ka-cta-btn:hover { color: var(--ka-dark); }
.kaolig-about .ka-cta-btn-label {
  font-family: var(--ka-serif);
  font-size: 14px;
  letter-spacing: 0.08em;
  font-weight: 400;
}
.kaolig-about .ka-cta-btn-arrow {
  font-family: var(--ka-en);
  font-style: italic;
  font-size: 18px;
  transition: transform 0.4s var(--ka-ease);
}
.kaolig-about .ka-cta-btn:hover .ka-cta-btn-arrow {
  transform: translateX(6px);
}

.kaolig-about .ka-cta-primary {
  background: #f5f3ed;
  color: var(--ka-dark);
  border-color: #f5f3ed;
}
.kaolig-about .ka-cta-primary::before {
  background: var(--ka-pink-200);
  transform: translateX(0);
  opacity: 0;
}
.kaolig-about .ka-cta-primary:hover::before { opacity: 1; }
.kaolig-about .ka-cta-primary:hover { color: var(--ka-dark); }


/* ====================================================
   TABLET
   ==================================================== */
@media (min-width: 640px) {
  .kaolig-about .ka-hero {
    padding: 100px 40px 80px;
  }
  .kaolig-about .ka-hero-monogram {
    width: 76px;
    height: 76px;
  }
  .kaolig-about .ka-hero-statement {
    font-size: 15px;
  }

  .kaolig-about .ka-numbers-section { padding: 88px 40px; }
  .kaolig-about .ka-numbers {
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
  }
  .kaolig-about .ka-number {
    padding-right: 32px;
    border-right: 1px solid var(--ka-line);
  }
  .kaolig-about .ka-number:last-child { border-right: none; padding-right: 0; }

  .kaolig-about .ka-section { padding: 128px 40px; }
  .kaolig-about .ka-section-header { margin-bottom: 72px; }

  .kaolig-about .ka-prose {
    font-size: 16px;
    line-height: 2.35;
  }
  .kaolig-about .ka-prose > p:first-of-type::first-letter { font-size: 64px; }

  /* Leader: 横並び */
  .kaolig-about .ka-leader {
    flex-direction: row;
    align-items: stretch;
    padding: 56px 48px;
    gap: 56px;
  }
  .kaolig-about .ka-leader-info { text-align: left; }
  .kaolig-about .ka-leader-photo {
    width: 240px;
    height: 240px;
  }
  .kaolig-about .ka-credentials-row {
    justify-content: flex-start;
  }

  /* Team: 3カラム */
  .kaolig-about .ka-team-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
  }

  /* Compliance: 横並び */
  .kaolig-about .ka-compliance-grid {
    flex-direction: row;
    gap: 56px;
    padding: 56px 48px;
    text-align: left;
  }
  .kaolig-about .ka-compliance-text { flex: 1.4; }
  .kaolig-about .ka-compliance-badges {
    flex-direction: column;
    flex-shrink: 0;
    align-self: center;
  }

  .kaolig-about .ka-company-row {
    grid-template-columns: 220px 1fr;
    gap: 32px;
    align-items: baseline;
  }

  .kaolig-about .ka-cta-buttons {
    flex-direction: row;
    max-width: 720px;
  }
  .kaolig-about .ka-cta-btn { flex: 1; }
}


/* ====================================================
   DESKTOP
   ==================================================== */
@media (min-width: 1024px) {
  .kaolig-about .ka-hero {
    padding: 120px 48px 100px;
  }
  .kaolig-about .ka-hero-vertical {
    left: 32px;
    font-size: 11px;
  }

  .kaolig-about .ka-section { padding: 160px 48px; }

  .kaolig-about .ka-prose {
    font-size: 17px;
    line-height: 2.4;
    max-width: 700px;
  }
  .kaolig-about .ka-prose > p:first-of-type::first-letter {
    font-size: 76px;
    margin-right: 14px;
  }

  /* Leader photo を更に大きく */
  .kaolig-about .ka-leader {
    padding: 64px 72px;
    gap: 72px;
  }
  .kaolig-about .ka-leader-photo {
    width: 280px;
    height: 280px;
  }

  .kaolig-about .ka-member-photo {
    width: 160px;
    height: 160px;
  }

  /* Compliance: 横並びでよりゆとり */
  .kaolig-about .ka-compliance-badges {
    flex-direction: row;
  }
  .kaolig-about .ka-badge {
    width: 140px;
    height: 140px;
  }
}


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

/* ===== source: 26704.css ===== */
/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Jul 08 2026 | 12:08:41 */
/* ================================================
   香LIG | SNSシェアボタン ブランドデザイン v4
   CSS — WPCode「CSS スニペット」に貼付
   タイトル: CSS | 全ページ共通 | SNSシェアボタン ブランドデザイン
   表示条件: サイト全体
   最終更新: 2026-05-04
   ================================================ */

/* ────────────────────────────────────────────────
   コンテナ
──────────────────────────────────────────────── */
.sns-btn.sns-dif,
.sns-btn-dif {
  background: #FDFAF6 !important;
  border: 1px solid #DDD0BC !important;
  border-top: 2px solid #A07850 !important;
  border-radius: 0 0 12px 12px !important;
  padding: 24px 20px 20px !important;
  margin: 36px 0 !important;
  position: relative !important;
  box-shadow: 0 4px 20px rgba(44, 35, 24, .06) !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

/* 上部 "Share" バッジ */
.sns-btn.sns-dif::before,
.sns-btn-dif::before {
  content: 'Share' !important;
  position: absolute !important;
  top: -1px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  background: #A07850 !important;
  color: #FDFAF6 !important;
  font-family: 'Cormorant Garamond', 'Times New Roman', serif !important;
  font-style: italic !important;
  font-size: 10px !important;
  font-weight: 300 !important;
  letter-spacing: .38em !important;
  padding: 3px 20px 3px 24px !important;
  line-height: 1.4 !important;
  white-space: nowrap !important;
  pointer-events: none !important;
  z-index: 2 !important;
}

/* ────────────────────────────────────────────────
   既存タイトルを非表示
──────────────────────────────────────────────── */
.sns-btn.sns-dif .sns-btn__title,
.sns-btn-dif .sns-btn__title,
.sns-btn.sns-dif .dfont,
.sns-btn.sns-dif .sns-btn__title * {
  display: none !important;
}

/* ────────────────────────────────────────────────
   テキストラベルを全サイズで非表示
──────────────────────────────────────────────── */
.sns-btn.sns-dif ul li a .share_txt,
.sns-btn-dif ul li a .share_txt,
.sns-btn.sns-dif ul li a span,
.sns-btn-dif ul li a span,
.sns-btn.sns-dif .sns-btn__item a span,
.sns-btn-dif .sns-btn__item a span {
  display: none !important;
}

/* ────────────────────────────────────────────────
   ボタンリスト
──────────────────────────────────────────────── */
.sns-btn.sns-dif ul,
.sns-btn-dif ul {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 12px !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.sns-btn.sns-dif ul li,
.sns-btn-dif ul li {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  background: transparent !important;
  flex-shrink: 0 !important;
}

/* ────────────────────────────────────────────────
   ボタン本体：アイコンのみ正方形
   SangoのCSSが width:55px を強制するのを上書き
──────────────────────────────────────────────── */
.sns-btn.sns-dif ul li a,
.sns-btn-dif ul li a,
.sns-btn.sns-dif .sns-btn__item a,
.sns-btn-dif .sns-btn__item a {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  max-width: 44px !important;
  max-height: 44px !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 10px !important;
  background: #F3EDE4 !important;
  border: 1px solid #DDD0BC !important;
  color: #5C4E38 !important;
  box-shadow: none !important;
  outline: none !important;
  text-decoration: none !important;
  -webkit-tap-highlight-color: transparent !important;
  transition: background .18s ease, border-color .18s ease, transform .18s ease, box-shadow .18s ease !important;
  cursor: pointer !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

.sns-btn.sns-dif ul li a:hover,
.sns-btn-dif ul li a:hover {
  background: #EDE1CF !important;
  border-color: #A07850 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px rgba(160, 120, 80, .2) !important;
}

/* ────────────────────────────────────────────────
   アイコン画像
   Sangoの 32px・margin: 11px auto を完全上書き
──────────────────────────────────────────────── */
.sns-btn.sns-dif ul li a img,
.sns-btn-dif ul li a img,
.sns-btn.sns-dif .sns-btn__item a img,
.sns-btn-dif .sns-btn__item a img,
.sns-dif .sns-btn__item img {
  display: block !important;
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  max-width: 20px !important;
  min-height: 20px !important;
  max-height: 20px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 3px !important;
  box-shadow: none !important;
  outline: none !important;
  object-fit: contain !important;
  flex-shrink: 0 !important;
}

/* ────────────────────────────────────────────────
   Sangoの赤点線アウトライン除去
──────────────────────────────────────────────── */
body .sns-btn.sns-dif a img,
body .sns-btn.sns-dif a[rel] img {
  outline: none !important;
  border: none !important;
}

/* ────────────────────────────────────────────────
   プラットフォーム別 ホバーカラー
──────────────────────────────────────────────── */
.sns-btn.sns-dif ul li.tw a:hover {
  background: #EEEEEC !important;
  border-color: #888 !important;
}
.sns-btn.sns-dif ul li.fb a:hover {
  background: #EBF0FA !important;
  border-color: #7A90CC !important;
}
.sns-btn.sns-dif ul li.hatebu a:hover {
  background: #EBF0FA !important;
  border-color: #6680BB !important;
}
.sns-btn.sns-dif ul li.line a:hover {
  background: #EAFAEA !important;
  border-color: #4AAA4A !important;
}

/* ===== source: 26703.css ===== */
/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Jul 08 2026 | 12:09:11 */
/* ================================================
   香LIG | アロマオイル完全ガイド
   CSS — WPCode「CSS スニペット」に貼付
   タイトル: CSS | アロマガイド | 精油カード・検索・シーンフィルター
   表示条件: 固定ページ → アロマオイルガイド のみ
   最終更新: 2026-05-04
   ================================================ */

:root {
  --cream:#FAF7F2; --ivory:#F3EDE4; --gold:#A07850; --gold-lt:#C4A882;
  --gold-pale:#EDE1CF; --ink:#2C2318; --ink-mid:#5C4E38; --ink-soft:#8A7860;
  --border:#DDD0BC; --white:#FDFAF6; --dark:#1A1208;
  /* scene colors */
  --sc-relax:#8B7355; --sc-focus:#5A7A6B; --sc-refresh:#6B7FA0;
  --sc-sleep:#5B4F7A; --sc-morning:#A06040; --sc-romantic:#8B4562;
  --sc-meditate:#6B5B45; --sc-purify:#4A7A6A; --sc-uplift:#8A6B2A;
}

*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }

body {
  font-family:'Noto Sans JP',sans-serif;
  background:var(--cream); color:var(--ink);
  line-height:1.85; font-size:15px;
  -webkit-font-smoothing:antialiased;
}

.ag-pg {
  max-width:900px; margin:0 auto;
  padding:0 20px 100px;
}

/* ────────────────────────────────────────────────
   HERO
──────────────────────────────────────────────── */
.hero {
  background:var(--dark);
  border-radius:0 0 14px 14px;
  padding:60px 28px 52px;
  text-align:center;
  position:relative; overflow:hidden;
  margin:0 -20px 48px;
}
.hero::before {
  content:'';
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse 60% 50% at 50% 110%, rgba(160,120,80,.18) 0%, transparent 60%),
    radial-gradient(1.5px 1.5px at 20% 25%, rgba(196,168,130,.5) 0%, transparent 100%),
    radial-gradient(1px 1px at 55% 15%, rgba(255,255,255,.2) 0%, transparent 100%),
    radial-gradient(1px 1px at 82% 38%, rgba(196,168,130,.35) 0%, transparent 100%),
    radial-gradient(2px 2px at 38% 70%, rgba(196,168,130,.25) 0%, transparent 100%);
  pointer-events:none;
}
.hero-en {
  font-family:'Cormorant Garamond',serif; font-size:11px; font-style:italic;
  letter-spacing:.34em; color:var(--gold-lt); text-transform:uppercase;
  display:block; margin-bottom:14px; position:relative;
}
.hero h1 {
  font-family:'Noto Serif JP',serif;
  font-size:clamp(18px,4vw,28px); font-weight:400;
  letter-spacing:.14em; color:rgba(255,255,255,.92);
  line-height:1.5; position:relative; margin-bottom:10px;
}
.hero-sub {
  font-size:13px; color:rgba(255,255,255,.46);
  letter-spacing:.04em; line-height:1.85; position:relative; margin-bottom:28px;
}
.hero-stats { display:flex; justify-content:center; gap:28px; flex-wrap:wrap; position:relative; }
.hero-stat { text-align:center; }
.hero-stat-num {
  font-family:'Cormorant Garamond',serif; font-size:28px; font-weight:300;
  color:var(--gold-lt); line-height:1; display:block;
}
.hero-stat-label { font-size:10px; color:rgba(255,255,255,.35); letter-spacing:.1em; margin-top:3px; }

/* ────────────────────────────────────────────────
   EEAT: 監修者バッジ
──────────────────────────────────────────────── */
.ag-supervisor {
  display:flex; align-items:flex-start; gap:14px;
  background:var(--white); border:1px solid var(--border);
  border-left:3px solid var(--gold);
  border-radius:10px; padding:14px 16px;
  margin-bottom:24px;
}
.ag-sv-avatar {
  width:46px; height:46px; border-radius:50%;
  background:var(--gold-pale); display:flex; align-items:center;
  justify-content:center; font-size:22px; flex-shrink:0; overflow:hidden;
}
.ag-sv-avatar img {
  width:100%; height:100%; object-fit:cover; border-radius:50%; display:block;
}
.ag-sv-body { flex:1; }
.ag-sv-role {
  font-size:9px; letter-spacing:.22em; color:var(--gold);
  font-family:'Cormorant Garamond',serif; font-style:italic;
  text-transform:uppercase; display:block; margin-bottom:3px;
}
.ag-sv-name {
  font-family:'Noto Serif JP',serif;
  font-size:14px; font-weight:400; letter-spacing:.08em; color:var(--ink); margin-bottom:4px;
}
.ag-sv-cred { font-size:11px; color:var(--ink-mid); line-height:1.6; letter-spacing:.02em; }
.ag-sv-cred strong { color:var(--ink); font-weight:500; }
.ag-sv-tags { display:flex; flex-wrap:wrap; gap:4px; margin-top:6px; }
.ag-sv-tag {
  font-size:10px; background:var(--gold-pale); color:var(--gold);
  border-radius:3px; padding:2px 8px; letter-spacing:.04em;
}

/* EEAT: 更新日 */
.ag-updated {
  font-size:11px; color:var(--ink-soft);
  letter-spacing:.06em; margin-bottom:24px;
  display:flex; align-items:center; gap:5px;
}
.ag-updated span { color:var(--gold); }

/* ────────────────────────────────────────────────
   DISCLAIMER
──────────────────────────────────────────────── */
.disclaimer {
  background:var(--ivory); border:1px solid var(--border);
  border-left:3px solid var(--gold);
  border-radius:0 8px 8px 0;
  padding:16px 20px; margin-bottom:24px; position:relative;
}
.disclaimer::before {
  content:'📋 免責・表示について';
  display:block; font-size:11px; color:var(--gold);
  letter-spacing:.1em; font-family:'Cormorant Garamond',serif; font-style:italic; margin-bottom:8px;
}
.disclaimer p { font-size:12.5px; color:var(--ink-mid); line-height:1.85; letter-spacing:.03em; }
.disclaimer strong { color:var(--ink); font-weight:500; }

/* ────────────────────────────────────────────────
   SEARCH
──────────────────────────────────────────────── */
.search-wrap { margin-bottom:28px; }
.search-inner {
  display:flex; align-items:center;
  background:var(--white); border:1.5px solid var(--border);
  border-radius:8px; padding:0 16px; transition:border-color .2s;
}
.search-inner:focus-within { border-color:var(--gold); }
.search-inner input {
  width:100%; padding:13px 12px;
  font-family:'Noto Sans JP',sans-serif; font-size:13.5px; color:var(--ink);
  background:none; border:none; outline:none; letter-spacing:.05em;
}
.search-inner input::placeholder { color:var(--ink-soft); }
.search-icon { color:var(--gold-lt); font-size:14px; flex-shrink:0; }
.search-count { font-family:'Cormorant Garamond',serif; font-style:italic; font-size:12px; color:var(--gold-lt); flex-shrink:0; }

/* ────────────────────────────────────────────────
   SCENE TABS
──────────────────────────────────────────────── */
.scene-wrap { margin-bottom:36px; }
.scene-label {
  font-size:11px; color:var(--ink-soft); letter-spacing:.1em; margin-bottom:12px;
  display:block; font-family:'Cormorant Garamond',serif; font-style:italic;
}
.scene-tabs { display:flex; flex-wrap:wrap; gap:6px; }
.scene-btn {
  font-size:12px; letter-spacing:.06em; padding:6px 14px;
  border-radius:20px; border:1px solid var(--border);
  background:var(--white); cursor:pointer;
  font-family:'Noto Sans JP',sans-serif;
  transition:all .18s; color:var(--ink-mid);
  display:flex; align-items:center; gap:5px; outline:none;
  -webkit-tap-highlight-color:transparent;
}
.scene-btn.active, .scene-btn:hover { color:#fff; border-color:transparent; }
.scene-btn[data-scene="all"].active  { background:var(--gold); }
.scene-btn[data-scene="relax"].active,    .scene-btn[data-scene="relax"]:hover    { background:var(--sc-relax); }
.scene-btn[data-scene="focus"].active,    .scene-btn[data-scene="focus"]:hover    { background:var(--sc-focus); }
.scene-btn[data-scene="refresh"].active,  .scene-btn[data-scene="refresh"]:hover  { background:var(--sc-refresh); }
.scene-btn[data-scene="sleep"].active,    .scene-btn[data-scene="sleep"]:hover    { background:var(--sc-sleep); }
.scene-btn[data-scene="morning"].active,  .scene-btn[data-scene="morning"]:hover  { background:var(--sc-morning); }
.scene-btn[data-scene="romantic"].active, .scene-btn[data-scene="romantic"]:hover { background:var(--sc-romantic); }
.scene-btn[data-scene="meditate"].active, .scene-btn[data-scene="meditate"]:hover { background:var(--sc-meditate); }
.scene-btn[data-scene="purify"].active,   .scene-btn[data-scene="purify"]:hover   { background:var(--sc-purify); }
.scene-btn[data-scene="uplift"].active,   .scene-btn[data-scene="uplift"]:hover   { background:var(--sc-uplift); }

/* ────────────────────────────────────────────────
   CATEGORY SECTION
──────────────────────────────────────────────── */
.cat-section { margin-bottom:56px; }
.cat-section.cat-hidden { display:none; }

.cat-head {
  display:flex; align-items:center; gap:14px;
  margin-bottom:20px; padding-bottom:14px; border-bottom:1px solid var(--border);
}
.cat-icon { font-size:22px; flex-shrink:0; }
.cat-title { font-family:'Noto Serif JP',serif; font-size:17px; font-weight:400; letter-spacing:.1em; color:var(--ink); }
.cat-en { font-family:'Cormorant Garamond',serif; font-style:italic; font-size:11px; color:var(--gold); letter-spacing:.2em; display:block; margin-bottom:2px; }
.cat-count { font-family:'Cormorant Garamond',serif; font-style:italic; font-size:12px; color:var(--gold-lt); margin-left:auto; }

/* ────────────────────────────────────────────────
   OIL LIST & ITEM
──────────────────────────────────────────────── */
.oil-list {
  display:flex; flex-direction:column; gap:1px;
  background:var(--border); border:1px solid var(--border);
  border-radius:10px; overflow:hidden;
}
.oil-item { background:var(--white); }
.oil-item.hidden { display:none; }
.oil-item.scene-active { background:#FFFDF8; }

/* ── oil-trigger ── */
.oil-trigger {
  width:100%; text-align:left;
  display:grid; grid-template-columns:56px 1fr auto;
  align-items:center; gap:12px; padding:15px 18px;
  background:none; border:none; cursor:pointer;
  transition:background .15s; outline:none;
}
.oil-trigger:hover { background:var(--ivory); }
.oil-trigger:focus-visible { outline:2px solid var(--gold); outline-offset:-2px; }

.oil-emoji-wrap {
  width:44px; height:44px; border-radius:50%;
  background:var(--ivory); border:1px solid var(--gold-pale);
  display:flex; align-items:center; justify-content:center;
  font-size:20px; flex-shrink:0;
}
.oil-item.scene-active .oil-emoji-wrap { background:var(--gold-pale); }

.oil-left { display:flex; flex-direction:column; gap:3px; }
.oil-name-jp { font-family:'Noto Serif JP',serif; font-size:15px; font-weight:400; letter-spacing:.08em; color:var(--ink); line-height:1.2; }
.oil-name-en { font-family:'Cormorant Garamond',serif; font-style:italic; font-size:12px; color:var(--gold-lt); letter-spacing:.12em; }
.oil-meta { display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-top:2px; }
.oil-type-tag { font-size:10px; padding:2px 8px; border-radius:3px; letter-spacing:.05em; font-family:'Noto Sans JP',sans-serif; }
.oil-scene-tags { display:flex; gap:4px; flex-wrap:wrap; }
.oil-scene-tag { font-size:10px; padding:2px 8px; border-radius:20px; letter-spacing:.04em; font-family:'Noto Sans JP',sans-serif; color:#fff; }

.oil-arrow { width:24px; height:24px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.oil-arrow svg { width:14px; height:14px; stroke:var(--gold-lt); transition:transform .28s cubic-bezier(.4,0,.2,1); }
.oil-item.open .oil-arrow svg { transform:rotate(180deg); }

/* ── oil-body アコーディオン ── */
.oil-body { overflow:hidden; max-height:0; transition:max-height .38s cubic-bezier(.4,0,.2,1); }
.oil-body-inner { padding:0 18px 20px; border-top:1px solid var(--gold-pale); margin:0 18px; }

.oil-detail-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; padding-top:16px; margin-bottom:14px; }
.oil-detail-card { background:var(--ivory); border-radius:6px; padding:12px 14px; }
.oil-detail-card-label { font-size:10px; color:var(--gold); letter-spacing:.18em; font-family:'Cormorant Garamond',serif; font-style:italic; text-transform:uppercase; display:block; margin-bottom:5px; }
.oil-detail-card p { font-size:12.5px; color:var(--ink-mid); line-height:1.8; letter-spacing:.03em; }
.oil-detail-card strong { color:var(--ink); font-weight:500; }

.oil-full-width { background:var(--ivory); border-radius:6px; padding:12px 14px; margin-bottom:12px; }
.oil-full-width-label { font-size:10px; color:var(--gold); letter-spacing:.18em; font-family:'Cormorant Garamond',serif; font-style:italic; text-transform:uppercase; display:block; margin-bottom:6px; }

.oil-scenes { display:flex; flex-wrap:wrap; gap:7px; margin-bottom:12px; }
.oil-scene-box { display:flex; align-items:center; gap:6px; background:var(--white); border:1px solid var(--border); border-radius:6px; padding:8px 12px; font-size:12px; color:var(--ink-mid); letter-spacing:.04em; }
.oil-scene-box-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }

.scent-profile { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:12px; }
.scent-chip { font-size:11px; background:var(--gold-pale); color:var(--gold); border-radius:3px; padding:3px 10px; letter-spacing:.06em; }

.oil-caution {
  background:rgba(160,120,80,.06); border:1px solid var(--gold-pale);
  border-left:3px solid var(--gold-lt);
  border-radius:0 6px 6px 0;
  padding:10px 14px; font-size:12px; color:var(--ink-soft); line-height:1.8; letter-spacing:.03em;
}
.oil-caution::before {
  content:'⚠️ 使用上の注意 ';
  font-size:11px; color:var(--gold); letter-spacing:.1em; display:block; margin-bottom:4px;
}

.blend-tip { background:var(--white); border:1px solid var(--border); border-left:3px solid var(--gold-lt); border-radius:0 6px 6px 0; padding:12px 14px; margin-bottom:12px; }
.blend-tip-label { font-size:10px; color:var(--gold); letter-spacing:.18em; font-family:'Cormorant Garamond',serif; font-style:italic; text-transform:uppercase; display:block; margin-bottom:5px; }
.blend-tip p { font-size:12px; color:var(--ink-mid); line-height:1.8; letter-spacing:.03em; }

/* ────────────────────────────────────────────────
   EVIDENCE BANNER
──────────────────────────────────────────────── */
.ev-banner {
  background:var(--ivory); border:1.5px solid var(--gold-pale); border-left:4px solid var(--gold);
  border-radius:0 10px 10px 0; padding:18px 22px; margin-bottom:32px;
  display:flex; align-items:center; gap:16px;
  text-decoration:none; color:inherit;
  transition:box-shadow .22s, border-color .22s; position:relative; overflow:hidden;
}
.ev-banner:hover { box-shadow:0 4px 18px rgba(160,120,80,.12); border-color:var(--gold); }
.ev-banner-icon { font-size:28px; flex-shrink:0; }
.ev-banner-body { flex:1; }
.ev-banner-label {
  font-size:10px; letter-spacing:.22em; color:var(--gold-lt);
  font-family:'Cormorant Garamond',serif; font-style:italic;
  text-transform:uppercase; display:block; margin-bottom:3px; opacity:.8;
}
.ev-banner-title {
  font-family:'Noto Serif JP',serif; font-size:14px; font-weight:400;
  letter-spacing:.09em; color:var(--ink); margin-bottom:3px;
}
.ev-banner-sub  { font-size:12px; color:var(--ink-soft); letter-spacing:.04em; }
.ev-banner-arrow { font-size:16px; color:var(--gold-lt); flex-shrink:0; }

/* ────────────────────────────────────────────────
   EVIDENCE INLINE LINK
   ★ FIX: align-items を flex-start に変更してレイアウト崩れを修正
──────────────────────────────────────────────── */
.ev-inline-link {
  display:flex; align-items:flex-start; gap:10px;
  background:rgba(74,122,90,.06); border:1px solid #90C0A0;
  border-radius:6px; padding:12px 14px; margin-bottom:12px;
  text-decoration:none; color:var(--ink-mid);
  font-size:12.5px; letter-spacing:.04em; transition:background .15s;
  line-height:1.6;
}
.ev-inline-link:hover { background:rgba(74,122,90,.12); }
.ev-inline-link-icon {
  font-size:16px; flex-shrink:0;
  padding-top:1px; line-height:1;
}
.ev-inline-link span {
  flex:1;
  line-height:1.65;
}
.ev-inline-link span strong { color:#4A7A5A; font-weight:600; }
.ev-inline-link-arrow {
  font-size:13px; color:#4A7A5A; flex-shrink:0;
  padding-top:2px; line-height:1;
}

/* ────────────────────────────────────────────────
   CAUTION ICONS
──────────────────────────────────────────────── */
.caution-icons { display:flex; flex-wrap:wrap; gap:5px; margin-bottom:8px; }
.ci { display:inline-flex; align-items:center; gap:4px; font-size:11px; padding:3px 9px; border-radius:20px; letter-spacing:.04em; font-family:'Noto Sans JP',sans-serif; font-weight:500; }
.ci-pregnant { background:#FAEAEA; color:#A03030; border:1px solid #EAACAC; }
.ci-baby     { background:#FEF8E0; color:#B06010; border:1px solid #F0D080; }
.ci-pet      { background:#E8F5E8; color:#2A6A2A; border:1px solid #90C090; }
.ci-sun      { background:#FEF3E0; color:#B07010; border:1px solid #E8C870; }
.ci-medicine { background:#EAEAF8; color:#404090; border:1px solid #A0A0D0; }
.ci-dilute   { background:var(--ivory); color:var(--gold); border:1px solid var(--gold-pale); }

/* ────────────────────────────────────────────────
   SAFETY SECTION
   ★ FIX: テキスト透明度を改善（.42 → .78、タイトルは .95）
──────────────────────────────────────────────── */
.safety-section {
  background:var(--dark); border-radius:12px; padding:32px 28px;
  margin-bottom:48px; position:relative; overflow:hidden;
}
.safety-section::before {
  content:''; position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg,var(--gold-lt),var(--gold),var(--gold-lt));
}
.safety-en {
  font-family:'Cormorant Garamond',serif; font-style:italic; font-size:10px;
  letter-spacing:.26em; color:var(--gold-lt); text-transform:uppercase;
  display:block; margin-bottom:8px; opacity:.8;
}
.safety-title {
  font-family:'Noto Serif JP',serif; font-size:17px; font-weight:400;
  letter-spacing:.1em; color:rgba(255,255,255,.95); margin-bottom:20px;
}
.safety-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.safety-card {
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.12);
  border-radius:10px; padding:18px 18px 16px;
}
/* ★ FIX: アイコンを大きく */
.safety-card-icon { font-size:26px; margin-bottom:10px; display:block; }
/* ★ FIX: タイトル色を .82 → .95 に */
.safety-card-title {
  font-family:'Noto Serif JP',serif; font-size:13.5px; font-weight:400;
  letter-spacing:.07em; color:rgba(255,255,255,.95); margin-bottom:8px;
}
/* ★ FIX: 本文色を .42 → .78 に */
.safety-card p {
  font-size:12.5px; color:rgba(255,255,255,.78);
  line-height:1.9; letter-spacing:.03em;
}

/* ────────────────────────────────────────────────
   BLEND GUIDE
──────────────────────────────────────────────── */
.blend-section { margin-bottom:48px; }
.blend-head { display:flex; align-items:center; gap:14px; margin-bottom:20px; padding-bottom:14px; border-bottom:1px solid var(--border); }
.blend-sec-num { font-family:'Cormorant Garamond',serif; font-size:32px; font-weight:300; font-style:italic; color:var(--gold-pale); line-height:1; }
.blend-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.blend-card { background:var(--white); border:1px solid var(--border); border-radius:8px; padding:16px; display:flex; flex-direction:column; gap:8px; }
.blend-card-title { font-family:'Noto Serif JP',serif; font-size:13px; font-weight:400; letter-spacing:.08em; color:var(--ink); }
.blend-card-oils { display:flex; flex-wrap:wrap; gap:5px; }
.blend-card-oil { font-size:11px; background:var(--ivory); border:1px solid var(--gold-pale); border-radius:3px; padding:2px 8px; color:var(--ink-mid); letter-spacing:.04em; }
.blend-card-note { font-size:11.5px; color:var(--ink-soft); line-height:1.7; letter-spacing:.03em; }

/* ────────────────────────────────────────────────
   CITATION
──────────────────────────────────────────────── */
.cite {
  margin-top:52px; background:var(--white); border:1px solid var(--border);
  border-top:3px solid var(--gold); border-radius:0 0 8px 8px;
  padding:20px 24px; position:relative;
}
.cite::before {
  content:'参考文献'; position:absolute; top:-1px; left:18px;
  background:var(--gold); color:#fff; font-size:10px;
  letter-spacing:.15em; padding:3px 12px;
}
.cite ul { list-style:none; margin-top:10px; display:flex; flex-direction:column; gap:6px; }
.cite li { list-style:none !important; display:flex; align-items:flex-start; gap:8px; font-size:12.5px; color:var(--ink-mid); letter-spacing:.03em; }
.cite li::before { content:none !important; }
.cite-dot { width:15px; height:15px; border-radius:50%; background:var(--gold-pale); display:flex; align-items:center; justify-content:center; flex-shrink:0; margin-top:3px; }
.cite-dot::after { content:''; width:5px; height:5px; border-radius:50%; background:var(--gold); }

/* ────────────────────────────────────────────────
   NO RESULT
──────────────────────────────────────────────── */
.no-result {
  text-align:center; padding:40px;
  font-family:'Cormorant Garamond',serif; font-style:italic;
  font-size:15px; color:var(--ink-soft); letter-spacing:.1em; display:none;
}

/* ────────────────────────────────────────────────
   SCROLL REVEAL
──────────────────────────────────────────────── */
.cat-section { opacity:0; transform:translateY(16px); transition:opacity .55s ease, transform .55s ease; }
.cat-section.visible { opacity:1; transform:none; }

/* ────────────────────────────────────────────────
   RESPONSIVE
──────────────────────────────────────────────── */
@media (max-width:580px) {
  .blend-cards { grid-template-columns:1fr; }
  .safety-grid { grid-template-columns:1fr; }
  .oil-detail-grid { grid-template-columns:1fr; }
}
@media (max-width:600px) {
  .oil-trigger { padding:12px 14px; grid-template-columns:44px 1fr auto; }
  .oil-body-inner { margin:0 12px; padding:0 0 16px; }
  .safety-section { padding:24px 18px; }
  .safety-card { padding:14px; }
}

/* ===== source: 26699.css ===== */
/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Jul 08 2026 | 12:09:41 */
/* ============================================================
   kaori_sitemap.css v4 — ライトクリームテーマ
   背景を明るくして視認性・コントラストを根本改善
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;1,300;1,400&display=swap');

/* ── Design tokens（ライトテーマ） ── */
:root {
  --klg-bg0:   #FAF7F2;   /* メイン背景：温かみのあるオフホワイト */
  --klg-bg1:   #F2EDE4;   /* サブ背景：少し濃いクリーム */
  --klg-bg2:   #EDE5D8;   /* アクセント背景 */
  --klg-gold:  #7A5428;   /* ゴールド（暗め→黒背景でなくなるので暗く） */
  --klg-glt:   #5C3D18;   /* テキストゴールド（濃いブラウン） */
  --klg-ink:   #1A1208;   /* メインテキスト */
  --klg-ink2:  #3C2C18;   /* サブテキスト */
  --klg-ink3:  #6A5438;   /* 薄めテキスト */
  --klg-wh:    #FDFAF6;
  --klg-bdr:   rgba(120,84,40,.18);
  --klg-cat1:  #B05818;   /* ガイド：バーント オレンジ */
  --klg-cat2:  #4838A0;   /* ナレッジ：ディープパープル */
  --klg-cat3:  #286848;   /* アバウト：フォレストグリーン */
}

/* ── Reset ── */
#klgsm-root,
#klgsm-root * { box-sizing: border-box; -webkit-font-smoothing: antialiased; }
#klgsm-root a { text-decoration: none !important; color: inherit; }
#klgsm-root ul, #klgsm-root ol { margin: 0 !important; padding: 0 !important; list-style: none !important; }
#klgsm-root p { margin: 0 !important; }

/* ── Wrapper ── */
#klgsm-root {
  font-family: 'Noto Sans JP', 'Hiragino Sans', sans-serif;
  background: var(--klg-bg0) !important;
  color: var(--klg-ink);
  overflow-x: hidden;
  max-width: 100%;
}

/* ── Hero ── */
#klgsm-root .klgsm-hero {
  background: var(--klg-bg1) !important;
  padding: 48px 20px 28px;
  text-align: center;
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--klg-bdr);
}
#klgsm-root .klgsm-hero::after {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 80% 55% at 50% 0%,
    rgba(160,100,40,.06) 0%, transparent 68%);
  pointer-events: none; z-index: 0;
}
#klgsm-root .klgsm-eyebrow {
  font-family: 'Cormorant Garamond', serif !important;
  font-style: italic; font-size: 11px !important;
  letter-spacing: .4em;
  color: var(--klg-ink3) !important;
  text-transform: uppercase;
  margin-bottom: 14px !important;
  position: relative; z-index: 1;
}
#klgsm-root .klgsm-h1 {
  font-family: 'Noto Serif JP', serif !important;
  font-size: clamp(22px, 6vw, 36px) !important;
  font-weight: 300 !important; letter-spacing: .1em;
  color: var(--klg-ink) !important;
  line-height: 1.28 !important;
  margin: 0 0 12px !important; padding: 0 !important; border: none !important;
  position: relative; z-index: 1;
}
#klgsm-root .klgsm-h1::before,
#klgsm-root .klgsm-h1::after { display: none !important; }
#klgsm-root .klgsm-h1-en {
  font-family: 'Cormorant Garamond', serif !important;
  font-style: italic; font-size: .58em; letter-spacing: .14em;
  color: var(--klg-glt) !important; display: block; margin-bottom: 6px;
}
#klgsm-root .klgsm-sub {
  font-size: 12px !important;
  color: var(--klg-ink3) !important;
  letter-spacing: .08em; position: relative; z-index: 1;
}

/* ── EEAT ── */
#klgsm-root .klgsm-eeat {
  background: var(--klg-bg2) !important;
  padding: 18px 20px;
  border-top: 1px solid var(--klg-bdr);
  border-bottom: 1px solid var(--klg-bdr);
}
#klgsm-root .klgsm-sv {
  display: flex; align-items: flex-start; gap: 14px; margin-bottom: 12px;
}
#klgsm-root .klgsm-avatar {
  width: 48px !important; height: 48px !important;
  border-radius: 50% !important; object-fit: cover;
  border: 1.5px solid rgba(120,84,40,.3) !important;
  flex-shrink: 0; float: none !important;
}
#klgsm-root .klgsm-sv-body { flex: 1; }
#klgsm-root .klgsm-role {
  display: block;
  font-family: 'Cormorant Garamond', serif !important;
  font-style: italic; font-size: 9px !important; letter-spacing: .22em;
  color: var(--klg-gold) !important;
  text-transform: uppercase; margin-bottom: 3px !important;
}
#klgsm-root .klgsm-sname {
  display: block;
  font-family: 'Noto Serif JP', serif !important;
  font-size: 14px !important; font-weight: 400 !important;
  letter-spacing: .07em;
  color: var(--klg-ink) !important;
  margin-bottom: 4px !important;
}
#klgsm-root .klgsm-bio {
  font-size: 11.5px !important;
  color: var(--klg-ink2) !important;
  line-height: 1.65 !important;
}
#klgsm-root .klgsm-bio strong {
  color: var(--klg-ink) !important; font-weight: 600;
}
#klgsm-root .klgsm-pills {
  display: flex; flex-wrap: wrap; gap: 6px;
}
#klgsm-root .klgsm-pills li {
  font-size: 10.5px !important;
  background: rgba(120,84,40,.08) !important;
  color: var(--klg-glt) !important;
  border: 1px solid rgba(120,84,40,.25) !important;
  border-radius: 20px !important; padding: 3px 11px !important;
  letter-spacing: .05em; list-style: none !important;
}

/* ── Shelves ── */
#klgsm-root .klgsm-shelves {
  background: var(--klg-bg0) !important;
  padding-bottom: 16px;
}
#klgsm-root .klgsm-shelf {
  padding: 28px 20px 0; margin-bottom: 4px;
}
#klgsm-root .klgsm-shelf-hd {
  display: flex; align-items: center; gap: 12px; margin-bottom: 20px;
}
#klgsm-root .klgsm-shelf-badge {
  font-family: 'Cormorant Garamond', serif !important;
  font-style: italic; font-size: 9px !important;
  letter-spacing: .28em; text-transform: uppercase;
  padding: 3px 10px; border-radius: 2px;
  white-space: nowrap; flex-shrink: 0;
}
#klgsm-root .klgsm-shelf-name {
  font-family: 'Noto Serif JP', serif !important;
  font-size: 13px !important; font-weight: 300 !important;
  letter-spacing: .1em;
  color: var(--klg-ink2) !important;
  white-space: nowrap;
}
#klgsm-root .klgsm-shelf-line { flex: 1; height: 1px; }

/* shelf colors */
#klgsm-root .klgsm-s1 .klgsm-shelf-badge {
  color: #B05818 !important;
  background: rgba(176,88,24,.08) !important;
  border: 1px solid rgba(176,88,24,.28) !important;
}
#klgsm-root .klgsm-s1 .klgsm-shelf-line { background: rgba(176,88,24,.18) !important; }
#klgsm-root .klgsm-s2 .klgsm-shelf-badge {
  color: #4838A0 !important;
  background: rgba(72,56,160,.08) !important;
  border: 1px solid rgba(72,56,160,.28) !important;
}
#klgsm-root .klgsm-s2 .klgsm-shelf-line { background: rgba(72,56,160,.18) !important; }
#klgsm-root .klgsm-s3 .klgsm-shelf-badge {
  color: #286848 !important;
  background: rgba(40,104,72,.08) !important;
  border: 1px solid rgba(40,104,72,.28) !important;
}
#klgsm-root .klgsm-s3 .klgsm-shelf-line { background: rgba(40,104,72,.18) !important; }

/* ── Bottles ── */
#klgsm-root .klgsm-bottles {
  display: flex; align-items: flex-end; gap: 10px;
  overflow-x: auto; scrollbar-width: none;
  padding: 16px 12px 0; position: relative;
}
#klgsm-root .klgsm-bottles::-webkit-scrollbar { display: none; }
#klgsm-root .klgsm-btl {
  display: flex !important; flex-direction: column !important;
  align-items: center !important; text-decoration: none !important;
  flex-shrink: 0; cursor: pointer; position: relative;
  transition: transform .3s cubic-bezier(.34,1.56,.64,1);
  transform-origin: bottom center;
  background: transparent !important; border: none !important;
  padding: 0 !important; margin: 0 !important;
}
#klgsm-root .klgsm-btl:hover  { transform: translateY(-12px) scale(1.03); }
#klgsm-root .klgsm-btl:active { transform: translateY(-6px) scale(.98); }
#klgsm-root .klgsm-btl:hover .klgsm-glow { opacity: 1; }

#klgsm-root .klgsm-glow {
  position: absolute; bottom: 26px; width: 80%; height: 12px;
  border-radius: 50%;
  background: radial-gradient(ellipse, var(--klg-btl-c, #A07850) 0%, transparent 70%);
  opacity: 0; transition: opacity .3s; filter: blur(5px); pointer-events: none;
}
#klgsm-root .klgsm-cap {
  background: linear-gradient(180deg,#D4AC70,#A07850 50%,#7A5A2A) !important;
  border-radius: 2px 2px 0 0 !important;
  box-shadow: 0 2px 4px rgba(0,0,0,.2) !important; flex-shrink: 0;
}
#klgsm-root .klgsm-cap-tall  { height: 18px !important; border-radius: 2px !important; }
#klgsm-root .klgsm-cap-round { border-radius: 50% 50% 0 0 / 80% 80% 0 0 !important; }
#klgsm-root .klgsm-collar {
  height: 5px;
  background: linear-gradient(180deg,#8A6438,#5A3A18) !important; flex-shrink: 0;
}
#klgsm-root .klgsm-body {
  position: relative; overflow: hidden;
  border: 1px solid rgba(var(--klg-btl-r,160,120,80),.45) !important;
  background: rgba(var(--klg-btl-r,160,120,80),.18) !important;
  box-shadow:
    inset 0 0 18px rgba(var(--klg-btl-r,160,120,80),.14),
    0 2px 8px rgba(0,0,0,.12) !important;
}
#klgsm-root .klgsm-shine {
  position: absolute; top:5px; left:5px; width:28%; height:78%;
  border-radius: 50%;
  background: linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,.1)) !important;
}
#klgsm-root .klgsm-liquid {
  position: absolute; bottom:0; left:0; right:0; height:55%;
  background: linear-gradient(180deg,transparent,
    rgba(var(--klg-btl-r,160,120,80),.45) 35%,
    rgba(var(--klg-btl-r,160,120,80),.65)) !important;
  border-top: 1px solid rgba(var(--klg-btl-r,160,120,80),.35) !important;
}
#klgsm-root .klgsm-liquid::before {
  content: ''; position: absolute; top:-2px; left:12%; right:12%; height:4px;
  background: rgba(255,255,255,.25); border-radius: 50%; filter: blur(2px);
}

/* ボトル名 — ライト背景なので暗い文字 */
#klgsm-root .klgsm-bname {
  margin-top: 8px !important; font-size: 9px !important;
  color: var(--klg-ink3) !important;
  letter-spacing: .05em; line-height: 1.4; text-align: center;
  max-width: 62px; display: block !important;
  transition: color .2s; word-break: keep-all;
}
#klgsm-root .klgsm-btl:hover .klgsm-bname {
  color: var(--klg-ink) !important;
}

/* bottle colors */
#klgsm-root .c-amber { --klg-btl-c:#C87830; --klg-btl-r:200,120,48; }
#klgsm-root .c-honey { --klg-btl-c:#D4943C; --klg-btl-r:212,148,60; }
#klgsm-root .c-gold  { --klg-btl-c:#A07850; --klg-btl-r:160,120,80; }
#klgsm-root .c-toffee{ --klg-btl-c:#C89060; --klg-btl-r:200,144,96; }
#klgsm-root .c-warm  { --klg-btl-c:#985030; --klg-btl-r:152,80,48;  }
#klgsm-root .c-deep  { --klg-btl-c:#5848A0; --klg-btl-r:88,72,160;  }
#klgsm-root .c-violet{ --klg-btl-c:#6840A0; --klg-btl-r:104,64,160; }
#klgsm-root .c-indigo{ --klg-btl-c:#3A4880; --klg-btl-r:58,72,128;  }
#klgsm-root .c-lilac { --klg-btl-c:#8868B8; --klg-btl-r:136,104,184;}
#klgsm-root .c-forest{ --klg-btl-c:#3A7858; --klg-btl-r:58,120,88;  }
#klgsm-root .c-sage  { --klg-btl-c:#4A8068; --klg-btl-r:74,128,104; }
#klgsm-root .c-slate { --klg-btl-c:#385870; --klg-btl-r:56,88,112;  }
#klgsm-root .c-moss  { --klg-btl-c:#2A6048; --klg-btl-r:42,96,72;   }

/* ── Plank & Legs ── */
#klgsm-root .klgsm-plank {
  height: 13px;
  background: linear-gradient(180deg,#A06830 0%,#7A4A20 30%,#5A3010 65%,#3D1E08 100%) !important;
  box-shadow: 0 4px 12px rgba(0,0,0,.15), inset 0 1px 0 rgba(255,200,100,.3) !important;
  position: relative; overflow: hidden;
}
#klgsm-root .klgsm-plank::before {
  content: ''; position: absolute; inset: 0;
  background: repeating-linear-gradient(90deg,transparent,transparent 19px,rgba(0,0,0,.04) 20px);
}
#klgsm-root .klgsm-plank::after {
  content: ''; position: absolute; top:0; left:0; right:0; height:2px;
  background: linear-gradient(90deg,transparent,rgba(255,200,100,.35),transparent);
}
#klgsm-root .klgsm-legs { display:flex; justify-content:space-between; padding:0 22px; }
#klgsm-root .klgsm-legs span {
  display: block; width:11px; height:18px;
  background: linear-gradient(180deg,#7A4A20,#3D1E08) !important;
  border-radius: 0 0 2px 2px;
}

/* ── Legend ── */
#klgsm-root .klgsm-legend {
  background: var(--klg-bg1) !important;
  display: flex; flex-wrap: wrap; gap: 14px; justify-content: center;
  padding: 18px 20px 24px !important;
  border-bottom: 1px solid var(--klg-bdr) !important;
}
#klgsm-root .klgsm-legend li {
  display: flex; align-items: center; gap: 6px;
  font-size: 10px !important;
  color: var(--klg-ink2) !important;
  letter-spacing: .07em;
}
#klgsm-root .klgsm-ldot {
  display: inline-block; width:8px; height:8px; border-radius:50%; flex-shrink:0;
}
#klgsm-root .klgsm-l1 { background: #B05818 !important; }
#klgsm-root .klgsm-l2 { background: #4838A0 !important; }
#klgsm-root .klgsm-l3 { background: #286848 !important; }

/* ── Library ── */
#klgsm-root .klgsm-lib {
  background: var(--klg-bg1) !important;
  padding: 36px 20px 56px;
}
#klgsm-root .klgsm-lib-hd { text-align: center; margin-bottom: 24px; }
#klgsm-root .klgsm-lib-en {
  display: block;
  font-family: 'Cormorant Garamond', serif !important;
  font-style: italic; font-size: 10px !important; letter-spacing: .36em;
  color: var(--klg-ink3) !important;
  text-transform: uppercase; margin-bottom: 6px !important;
}
#klgsm-root .klgsm-h2 {
  font-family: 'Noto Serif JP', serif !important;
  font-size: 20px !important; font-weight: 300 !important;
  letter-spacing: .1em;
  color: var(--klg-ink) !important;
  margin: 0 !important; padding: 0 !important; border: none !important;
}
#klgsm-root .klgsm-h2::before,
#klgsm-root .klgsm-h2::after { display: none !important; }
#klgsm-root .klgsm-total {
  font-size: 13px !important;
  color: var(--klg-glt) !important;
  margin-left: 8px;
}

/* ── Tabs ── */
#klgsm-root .klgsm-tabs {
  display: flex; gap: 0;
  border-bottom: 1px solid var(--klg-bdr) !important;
  overflow-x: auto; scrollbar-width: none; margin-bottom: 24px;
}
#klgsm-root .klgsm-tabs::-webkit-scrollbar { display: none; }
#klgsm-root .klgsm-tab {
  font-family: 'Noto Sans JP', sans-serif !important;
  font-size: 11px !important; letter-spacing: .06em;
  color: var(--klg-ink3) !important;
  padding: 9px 14px 11px;
  border: none !important; background: transparent !important;
  cursor: pointer; white-space: nowrap;
  border-bottom: 2px solid transparent !important;
  margin-bottom: -1px;
  transition: color .18s, border-color .18s;
  outline: none; flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
  border-radius: 0 !important; box-shadow: none !important;
}
#klgsm-root .klgsm-tab:hover { color: var(--klg-ink2) !important; }
#klgsm-root .klgsm-tab.klgsm-on {
  color: var(--klg-glt) !important;
  border-bottom-color: var(--klg-gold) !important;
}
#klgsm-root .klgsm-cnt {
  font-size: 9px; color: var(--klg-ink3);
  margin-left: 3px;
}

/* ── Panels ── */
#klgsm-root .klgsm-panel { display: none; }
#klgsm-root .klgsm-panel.klgsm-on { display: block; }

/* ── Search ── */
#klgsm-root .klgsm-search-wrap { margin-bottom: 18px; }
#klgsm-root .klgsm-search {
  width: 100%;
  background: var(--klg-bg0) !important;
  border: 1px solid rgba(120,84,40,.25) !important;
  border-radius: 8px !important; padding: 9px 14px;
  font-size: 13px !important;
  color: var(--klg-ink) !important;
  outline: none; transition: border-color .18s;
  font-family: 'Noto Sans JP', sans-serif !important;
  box-shadow: none !important; -webkit-appearance: none;
}
#klgsm-root .klgsm-search::placeholder { color: var(--klg-ink3) !important; }
#klgsm-root .klgsm-search:focus { border-color: rgba(120,84,40,.5) !important; }

/* ── Category ── */
#klgsm-root .klgsm-cat { margin-bottom: 26px; }
#klgsm-root .klgsm-cat-hd {
  display: flex; align-items: center; gap: 8px; margin-bottom: 10px;
}
#klgsm-root .klgsm-cat-dot {
  width:4px; height:4px; border-radius:50%;
  background: var(--klg-gold) !important; flex-shrink:0;
}
#klgsm-root .klgsm-cat-lbl {
  font-family: 'Cormorant Garamond', serif !important;
  font-style: italic; font-size: 9.5px !important;
  letter-spacing: .22em;
  color: var(--klg-gold) !important;
  text-transform: uppercase; white-space: nowrap;
}
#klgsm-root .klgsm-cat-line {
  flex:1; height:1px; background: rgba(120,84,40,.15) !important;
}

/* ── Articles ── */
#klgsm-root .klgsm-art {
  display: flex !important; align-items: center !important;
  gap: 12px; padding: 10px 12px;
  text-decoration: none !important; border-radius: 7px;
  transition: background .15s;
  -webkit-tap-highlight-color: transparent;
  background: transparent !important;
}
#klgsm-root .klgsm-art:hover { background: rgba(120,84,40,.06) !important; }
#klgsm-root .klgsm-art[aria-hidden="true"] { display: none !important; }
#klgsm-root .klgsm-art-ico {
  font-size: 14px !important; flex-shrink:0; width:20px; text-align:center;
}
#klgsm-root .klgsm-art-txt {
  font-size: 12px !important;
  color: var(--klg-ink2) !important;
  letter-spacing: .04em; line-height: 1.55 !important; flex:1;
  transition: color .15s;
}
#klgsm-root .klgsm-art:hover .klgsm-art-txt { color: var(--klg-ink) !important; }
#klgsm-root .klgsm-art-arr {
  font-size: 14px !important;
  color: var(--klg-ink3) !important;
  flex-shrink:0; transition: color .15s, transform .15s;
}
#klgsm-root .klgsm-art:hover .klgsm-art-arr {
  color: var(--klg-gold) !important; transform: translateX(2px);
}
#klgsm-root .klgsm-noresult {
  padding: 28px 0; text-align: center;
  font-size: 13px !important;
  color: var(--klg-ink3) !important; letter-spacing: .06em;
}

/* ── Footer ── */
#klgsm-root .klgsm-footer {
  background: var(--klg-bg2) !important;
  text-align: center; padding: 24px 20px;
  font-family: 'Cormorant Garamond', serif !important;
  font-style: italic; font-size: 11px !important;
  letter-spacing: .18em;
  color: var(--klg-ink3) !important;
  border-top: 1px solid var(--klg-bdr) !important;
}

/* ── Responsive ── */
@media (min-width: 600px) {
  #klgsm-root .klgsm-bottles { gap: 14px; padding: 20px 20px 0; overflow-x: visible; }
  #klgsm-root .klgsm-bname { max-width: 76px; font-size: 9.5px !important; }
  #klgsm-root .klgsm-tab { font-size: 12px !important; }
  #klgsm-root .klgsm-lib { padding: 44px 28px 64px; }
  #klgsm-root .klgsm-sv { align-items: center; }
}
@media (prefers-reduced-motion: reduce) {
  #klgsm-root .klgsm-btl,
  #klgsm-root .klgsm-art-arr { transition: none !important; }
}

/* ===== source: 25582.css ===== */
/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Jul 08 2026 | 12:10:23 */
/* ============================================================
   香LIG SANGO/WordPress コントラスト修正パッチ v2（最終版）
   ファイル名: kaori-a11y-sango.css
   ============================================================

   ■ WPCodeへの追加方法
   WPCode > 新規スニペット追加 > CSS スニペット
   タイトル：「香LIG コントラスト修正（SANGO・WP固有）」

   ■ 修正一覧
   [1] ピンク背景見出し
   [2] 画像キャプション
   [3] SANGOブルー
   [4] 透明背景ボタン
   [5] SHAREラベル
   [6] 著者ボックステキスト
   [7] 著者SNSリンク（Instagram/Website）
   [8] 前の記事・次の記事ラベル ← 強化版（全SANGOパターン網羅）
   [9] フッター固定ボトムナビ
   [10] 目次ラベル
   [11] 記事本文リンク

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


/* ============================================================
   [1] SANGOカスタム見出し（ピンク系背景）
   ============================================================ */

.sgb-heading--type2 .sgb-heading__inner,
.sgb-heading__inner.sgb-heading--type2 {
    color: #3a3038 !important;
    -webkit-text-fill-color: #3a3038 !important;
}
[style*="background-color:#f9a8a8"] .sgb-heading__inner,
[style*="background-color:#ffa8"] .sgb-heading__inner {
    color: #3a3038 !important;
    -webkit-text-fill-color: #3a3038 !important;
}


/* ============================================================
   [1b] SANGOカスタム見出し type4（白テキスト on ラベンダー#c9cbe7）
   
   ★ 新規追加（Lighthouseレポート Doc8 より）
   
   HTML確認済み：
   <span class="sgb-heading__inner sgb-heading--type4"
         style="background-color:#c9cbe7;border-color:#c9cbe7;font-size:1.2em">
     <span class="sgb-heading__text" style="color:#ffffff">タイトル</span>
   </span>
   
   背景 #c9cbe7（薄ラベンダー）に白テキスト → 1.59:1（完全失敗）
   → #3a3038（ほぼ黒）に変更 → 7.94:1 ✓
   
   inline style の color:#ffffff を !important で上書きします。
   ============================================================ */

/* type4 見出しの背景色が #c9cbe7（ラベンダー）の場合 */
.sgb-heading--type4 .sgb-heading__text,
.sgb-heading--type4 > .sgb-heading__text,
.sgb-heading__inner.sgb-heading--type4 .sgb-heading__text {
    color: #3a3038 !important;
    -webkit-text-fill-color: #3a3038 !important;
}

/* type4 内の strong タグも同様に修正 */
.sgb-heading--type4 strong,
.sgb-heading__inner.sgb-heading--type4 strong {
    color: #3a3038 !important;
    -webkit-text-fill-color: #3a3038 !important;
}

/* inline style="color:#ffffff" の上書き（属性セレクタ） */
.sgb-heading--type4 [style*="color:#ffffff"],
.sgb-heading--type4 [style*="color: #ffffff"],
.sgb-heading--type4 [style*="color:white"],
.sgb-heading__inner[style*="background-color:#c9cbe7"] .sgb-heading__text,
[style*="background-color:#c9cbe7"] .sgb-heading__text,
[style*="background-color:#c9cbe7"] strong {
    color: #3a3038 !important;
    -webkit-text-fill-color: #3a3038 !important;
}


/* ============================================================
   [1c] SANGOカスタム見出し（style="color:gray" の上書き）
   
   ★ 新規追加（Lighthouseレポート Doc8 より）
   
   HTML確認済み：
   <span class="sgb-heading__text" style="color:gray">
     香水買う前に香りを試してみたい
   </span>
   
   gray = #808080 → 白背景で 3.95:1（WCAG AA 未達）
   → #5c5260（7.42:1）に変更
   
   inline style を !important で上書きします。
   ============================================================ */

.sgb-heading__text[style*="color:gray"],
.sgb-heading__text[style*="color: gray"],
.sgb-heading__text[style*="color:grey"],
.sgb-heading__text[style*="color: grey"] {
    color: #5c5260 !important;
    -webkit-text-fill-color: #5c5260 !important;
}


/* ============================================================
   [2] WordPressブロック 画像キャプション
   ============================================================ */

figcaption.wp-element-caption,
.wp-element-caption,
.wp-block-image figcaption,
figure figcaption {
    color: #5c5260 !important;
}


/* ============================================================
   [3] SANGOブルーカラー
   ============================================================ */

.has-sango-blue-color,
.has-inline-color.has-sango-blue-color {
    color: #0055aa !important;
}
mark.has-sango-blue-color {
    background-color: transparent !important;
    color: #0055aa !important;
}


/* ============================================================
   [4] SANGOノーマルボタン（transparent背景）
   ============================================================ */

.btn.normal,
a.btn.normal {
    color: #3a3038 !important;
    border-color: rgba(58, 48, 56, 0.4) !important;
}
@media (hover: hover) and (pointer: fine) {
    .btn.normal:hover,
    a.btn.normal:hover {
        color: #5c5260 !important;
        background-color: #f5f5f7 !important;
    }
}


/* ============================================================
   [5] SANGOシェアボタン タイトル
   ============================================================ */

.sns-btn__title,
.sns-btn__title.dfont {
    color: #5c5260 !important;
}


/* ============================================================
   [6] SANGO著者ボックス内テキスト
   ============================================================ */

.author-info .tb span:not([class]),
.author-info__inner .tb > span,
.author-info .tb p,
.tb .author-profile-text {
    color: #3a3038 !important;
}


/* ============================================================
   [7] 著者ボックス SNSリンク（Instagram / Website）
   ============================================================ */

.tb a.Instagram,
.author-info .tb a.Instagram {
    color: #8a3060 !important; /* 7.9:1 ✓ */
}
.tb a.Website,
.author-info .tb a.Website {
    color: #0055aa !important; /* 5.7:1 ✓ */
}
.tb a.Twitter, .tb a.X,
.author-info .tb a.Twitter {
    color: #005599 !important;
}
.tb a[class]:not(.Instagram):not(.Website):not(.Twitter):not(.X),
.author-info .tb a {
    color: #0055aa !important;
}


/* ============================================================
   [8] 前の記事・次の記事 ラベル
   
   ★ 強化版：SANGOの全バージョンで使われる可能性のある
     クラスパターンを完全網羅しています。
     CSSのセレクタが多い理由は「どのクラスが使われているか
     HTML を直接確認できないため」です。
   ============================================================ */

/*
 * ─────────────────────────────────────────────
 * グループA：SANGO固有クラス
 * ─────────────────────────────────────────────
 */
/* SANGO v1系 */
.prev-next > * > p,
.prev-next > p,
.prev-next p {
    color: #5c5260 !important;
}

/* SANGO v2系（最も多い） */
.prev-link > p,
.next-link > p,
.prev-link p,
.next-link p {
    color: #5c5260 !important;
}

/* SANGO pager（ページャー）系 */
.pager p,
.clearfix.pager p,
.entry-pager p,
#prev-next p {
    color: #5c5260 !important;
}

/* SANGO v3・カスタム系 */
.sng-prev > p, .sng-next > p,
.sng-prev p,  .sng-next p,
.sng-prev-next p,
.prev-next-link p,
.prev-next-post p {
    color: #5c5260 !important;
}

/* その他のナビ系 */
.post-navi p,
.post-nav-links p,
.post-nav p {
    color: #5c5260 !important;
}

/*
 * ─────────────────────────────────────────────
 * グループB：WordPress標準ナビゲーション
 * ─────────────────────────────────────────────
 */
.nav-previous p,
.nav-next p,
.post-navigation p,
.post-navigation .nav-label,
.navigation.post-navigation p {
    color: #5c5260 !important;
}

/*
 * ─────────────────────────────────────────────
 * グループC：属性部分一致（汎用・最終手段）
 *
 * "prev" や "next" を含むクラス名を持つ要素の
 * 直下の <p> を全てターゲットにします。
 * ─────────────────────────────────────────────
 */
[class*="prev"] > p,
[class*="next"] > p,
[class*="pager"] > p,
[class*="pager"] p,
[id*="prev-next"] p,
[id*="pager"] p {
    color: #5c5260 !important;
}

/*
 * ─────────────────────────────────────────────
 * グループD：記事エリア外の単独<p>ナビラベル
 *
 * Lighthouseが "body.wp-singular" 内の <p> として
 * 報告している。記事コンテンツ（#entry）の外側に
 * ある<p>で「前の記事」「次の記事」と書かれている。
 * ─────────────────────────────────────────────
 */
body.single-post article ~ * p,
body.single-post .entry-content ~ * p,
body.wp-singular article ~ * p,
body.wp-singular #entry ~ * p,
body.single-post #entry + * p,
body.wp-singular #entry + * p {
    color: #5c5260 !important;
}

/*
 * ─────────────────────────────────────────────
 * グループE：【核オプション】
 *
 * 上記全てが当たらない場合の最終手段。
 * single記事ページで、記事本文(.entry-content)外の
 * 単独<p>要素を全て対象にします。
 *
 * ※ 他の要素に影響が出る可能性がありますが、
 *   #5c5260は本文と同程度の読みやすい色なので
 *   視覚的な副作用は最小限です。
 * ─────────────────────────────────────────────
 */
body.single-post p:not(.entry-content p):not([class*="has-"]):not(.wp-block-paragraph),
body.wp-singular p:not(.entry-content p):not([class*="has-"]):not(.wp-block-paragraph) {
    color: #5c5260 !important;
}


/* ============================================================
   [9] フッター固定ボトムナビゲーション
       メニュー名：フッター固定メニュー（モバイル）
   
   URLエンコード: 「固定」= %e5%9b%ba%e5%ae%9a を利用した
   ピンポイントセレクタ ＋ SANGOクラス名の複数指定
   ============================================================ */

/* URLエンコードによるピンポイント指定 */
ul[id*="%e5%9b%ba%e5%ae%9a"] a,
ul[id*="%e5%9b%ba%e5%ae%9a"] > li > a {
    color: #3a3038 !important;
    font-weight: 600 !important;
}

/* SANGOのフッター固定ナビ（バージョン別） */
#sng-fixed-footer-nav a, #sng-sp-footer-nav a,
#footer-fixed-nav a,     .footer-fixed-nav a,
.sng-fixed-nav a,        .sp-footer-nav a,
.fixed-footer-menu a,    .fixed-sp-nav a,
.bottom-nav a,           .mobile-bottom-nav a,
#sng-bottom-nav a,       .sng-bottom-nav a {
    color: #3a3038 !important;
    font-weight: 600 !important;
}

/* footerタグ内のメニューリンク（汎用） */
footer .menu a,
footer .menu > li > a,
[class*="footer"][class*="nav"] .menu a,
[id*="footer"][id*="nav"] .menu a {
    color: #3a3038 !important;
}

@media (hover: hover) and (pointer: fine) {
    ul[id*="%e5%9b%ba%e5%ae%9a"] a:hover,
    .footer-fixed-nav a:hover { color: #5c5260 !important; }
}


/* ============================================================
   [10] 目次ラベル（label[for="drawer__input"]）
   ============================================================ */

label[for="drawer__input"] {
    color: #3a3038 !important;
    font-weight: 600 !important;
    cursor: pointer !important;
}
label[for="drawer__input"] i,
label[for="drawer__input"] span {
    color: inherit !important;
}
.drawer-menu a, .drawer-nav a, .sng-drawer a {
    color: #3a3038 !important;
}
@media (hover: hover) and (pointer: fine) {
    label[for="drawer__input"]:hover { color: #5c5260 !important; }
}


/* ============================================================
   [11] 記事本文内リンク
   ============================================================ */

.entry-content a:not([class]),
.entry-content a.inner-link,
.entry-content p a {
    color: #0055aa !important;
}
@media (hover: hover) and (pointer: fine) {
    .entry-content a:not([class]):hover,
    .entry-content a.inner-link:hover {
        color: #003d88 !important;
        text-decoration: underline !important;
    }
}


/* ============================================================
   共通：prefers-reduced-motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    .tb a, .btn.normal, .entry-content a { transition: none !important; }
}

/* ===== source: 25574.css ===== */
/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Jul 08 2026 | 12:10:35 */
/**
 * ============================================================
 * 【香LIG】静的スタイルシート v3.6
 * ファイル名: kaori-lig.css
 * ============================================================
 *
 * ■ セクション一覧
 *
 *   A. 目次タイトルの拡張デザイン
 *   B. シェアボタン（FAB）            ★ v3.6 セレクタ修正
 *   C. 著者プロフィールページ
 *   D. Apple風リスト（著者ページの記事一覧）
 *   E. 調査ポリシーボックス
 *   F. 記事末尾の著者・監修者カード
 *   G. パンくずリスト                 ★ v3.6 セレクタ修正（ol対応・FA5/6両対応）
 *   H. カテゴリー・タグエリア         ★ v3.6 セレクタ修正（div限定を解除）
 *   I. テーブルデザイン
 *   J. 口コミ比較ボックス
 *   K. 画像ポップアップ制御
 *   L. 公開日・更新日                 ★ v3.6 セレクタ修正（親クラス依存を解除・FA5/6両対応）
 *   M. ブロックグループ（ボタン配置）
 *
 * ■ WordPressへの適用方法
 *   外観 > カスタマイズ > 追加CSS にこのファイルの内容を貼り付け
 *
 * ============================================================ */


/* ============================================================
 *  A. 目次タイトルの拡張デザイン
 * ============================================================ */

.toc-text-wrap { display: flex; flex-direction: column; line-height: 1; }
.toc-main-title { font-weight: 700; }
.toc-sub-text   { font-size: 11px; opacity: .6; margin-top: 3px; }


/* ============================================================
 *  B. シェアボタン（FAB）
 *
 *  ★ v3.6 修正点：
 *    - [for="fab"] 属性セレクタを補助扱いに変更
 *    - label.fab-btn だけで確実に当たるよう優先セレクタを追加
 *    - body プレフィックスで詳細度を底上げ
 * ============================================================ */

/* メインセレクタ（属性なし・広め） */
body label.fab-btn,
body label.fab-btn[for="fab"] {
    position: relative !important;
    display: flex !important;
    margin: 16px auto 28px auto !important;
    width: max-content !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #86868b !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    letter-spacing: 0.08em !important;
    border: 1px solid #e5e5ea !important;
    padding: 6px 18px !important;
    border-radius: 20px !important;
    align-items: center !important;
    justify-content: center !important;
    height: auto !important;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease !important;
}
body label.fab-btn i,
body label.fab-btn[for="fab"] i {
    margin-right: 5px !important;
    font-size: 11px !important;
    /* アイコン色をテキストに合わせる */
    color: inherit !important;
    background: none !important;
    -webkit-text-fill-color: inherit !important;
}
@media (hover: hover) and (pointer: fine) {
    body label.fab-btn:hover,
    body label.fab-btn[for="fab"]:hover {
        background: #f9f5ff !important;
        color: #a855f7 !important;
        border-color: rgba(168, 85, 247, 0.3) !important;
        transform: translateY(-1px) !important;
    }
}
body label.fab-btn:active,
body label.fab-btn[for="fab"]:active {
    transform: scale(0.96) !important;
    background: #f5f5f7 !important;
}


/* ============================================================
 *  C. 著者プロフィールページ（/author/〇〇/）
 * ============================================================ */

.apple-profile-wrapper {
    font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue",
                 "Yu Gothic", YuGothic, sans-serif;
    color: #1d1d1f;
    margin-bottom: 60px;
}
.ap-bio-section {
    display: flex; gap: 30px; padding-bottom: 40px;
    border-bottom: 1px solid #e5e5e5; margin-bottom: 40px; align-items: flex-start;
}
.ap-avatar { flex-shrink: 0; width: 100px; height: 100px; }
.ap-avatar img {
    width: 100% !important; height: 100% !important; object-fit: cover;
    border-radius: 50%; border: 1px solid #e5e5e5;
    margin: 0; padding: 0; box-shadow: none; display: block;
}
.ap-bio-text { flex-grow: 1; }
.ap-name { font-size: 22px; font-weight: 700; margin: 0 0 12px; letter-spacing: .02em; line-height: 1.3; }
.ap-description { font-size: 14px; line-height: 1.8; color: #424245; margin: 0; }
.ap-features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.ap-feature-card {
    background: #fbfbfd; border: 1px solid #e5e5e5; border-radius: 12px;
    padding: 24px 14px; position: relative; transition: transform .2s;
}
.ap-feature-card:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,.05); }
.ap-number { display: block; font-size: 11px; font-weight: 600; color: #86868b; margin-bottom: 12px; }
.ap-text-group { display: flex; flex-direction: column; gap: 6px; }
.ap-feature-title { font-size: 15px; white-space: nowrap; letter-spacing: -.05em; font-weight: 700; margin: 0; line-height: 1.4; color: #1d1d1f; }
.ap-feature-subtitle { font-size: 12px; font-weight: 600; color: #424245; margin: 0 0 8px; line-height: 1.5; }
.ap-feature-desc { font-size: 13px; line-height: 1.7; color: #6e6e73; margin: 0; text-align: justify; }
@media (max-width: 768px) {
    .ap-bio-section { flex-direction: column; align-items: center; text-align: center; }
    .ap-features-grid { grid-template-columns: 1fr; }
    .ap-feature-title { white-space: normal; }
}


/* ============================================================
 *  D. Apple風リスト（著者ページの担当記事一覧）
 * ============================================================ */

.apple-list-container {
    border-top: 1px solid #e5e5e5;
    font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue",
                 "Yu Gothic", YuGothic, sans-serif;
}
.al-item {
    display: block; padding: 14px 20px 14px 0;
    border-bottom: 1px solid #e5e5e5; text-decoration: none !important;
    color: #1d1d1f; position: relative; transition: background-color 0.2s ease;
}
.al-item:hover .al-title { color: #0071e3; }
.al-item:hover .al-arrow::after { border-color: #0071e3; }
.al-meta { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; font-size: 11px; letter-spacing: 0.03em; color: #86868b; }
.al-label { font-weight: 600; padding: 1px 6px; border-radius: 4px; font-size: 10px; line-height: 1.4; }
.label-auth { color: #86868b; border: 1px solid #c7c7cc; }
.label-sup  { color: #bf4800; border: 1px solid #bf4800; background-color: rgba(191,72,0,.05); }
.al-title { font-size: 14px; font-weight: 400; line-height: 1.6; margin: 0; color: #1d1d1f; transition: color 0.2s; }
.al-arrow { position: absolute; right: 0; top: 50%; transform: translateY(-50%); }
.al-arrow::after {
    content: ''; display: block; width: 5px; height: 5px;
    border-top: 1px solid #c7c7cc; border-right: 1px solid #c7c7cc;
    transform: rotate(45deg); transition: border-color 0.2s;
}
@media (max-width: 768px) { .al-title { font-size: 13.5px; } }


/* ============================================================
 *  E. 調査ポリシーボックス（記事内ショートコード）
 * ============================================================ */

.aib-list { display: flex; flex-direction: column; gap: 24px; }
.aib-item { display: flex; gap: 16px; align-items: flex-start; }
.aib-thumb { width: 100px; height: 75px; flex-shrink: 0; border-radius: 6px; overflow: hidden; background: #f0f0f0; }
.aib-img-bg { width: 100%; height: 100%; background-size: cover; background-position: center; }
.aib-text-area { flex-grow: 1; display: flex; flex-direction: column; justify-content: flex-start; }
.aib-title-row { display: flex; align-items: center; gap: 8px; margin-bottom: 4px !important; }
.aib-num {
    flex-shrink: 0; width: 20px; height: 20px;
    background: linear-gradient(135deg, #a855f7, #ec4899, #f97316);
    color: #fff; font-size: 12px; font-weight: 700;
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    line-height: 1; margin: 0; box-shadow: 0 2px 4px rgba(236,72,153,.3);
}
.aib-title { font-size: 15px; font-weight: 700; color: #1d1d1f; margin: 0 !important; line-height: 1.4; }
.aib-desc  { font-size: 12px; color: #6e6e73; line-height: 1.6; margin: 0 !important; }
.apple-investigation-box {
    background: #ffffff; border: 1px solid #ebecf0; border-radius: 12px;
    margin: 30px 0; font-family: "Yu Gothic", YuGothic, sans-serif;
    box-shadow: 0 4px 12px rgba(0,0,0,.03); overflow: hidden; transition: all 0.3s ease;
}
.aib-summary {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 18px; background: #fbfbfd; cursor: pointer; list-style: none;
}
.aib-summary::-webkit-details-marker { display: none; }
.aib-header-content { display: flex; align-items: center; gap: 8px; }
.aib-icon { font-size: 16px; }
.aib-header-text { font-size: 14px; font-weight: 700; color: #1d1d1f; }
.aib-arrow::after {
    content: ''; display: block; width: 6px; height: 6px;
    border-right: 1.5px solid #86868b; border-bottom: 1.5px solid #86868b;
    transform: rotate(45deg); transition: transform 0.2s ease; margin-bottom: 2px;
}
.apple-investigation-box[open] .aib-arrow::after { transform: rotate(-135deg); }
.aib-content { padding: 20px 15px; background: #fff; border-top: 1px solid #ebecf0; animation: eibFadeIn 0.3s ease; }
.aib-lead { font-size: 13px; font-weight: 700; color: #1d1d1f; margin: 0 0 25px; line-height: 1.5; text-align: center; }
.aib-footer { margin-top: 30px; padding-top: 20px; border-top: 1px dashed #ebecf0; text-align: center; }
.aib-footer-text { font-size: 12px; font-weight: 600; color: #424245; margin: 0 0 12px; }
.aib-footer-images { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.aib-footer-img-bg { width: 100%; aspect-ratio: 3/2; background-size: cover; background-position: center; border-radius: 6px; background-color: #eee; }
@keyframes eibFadeIn { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: translateY(0); } }


/* ============================================================
 *  F. 記事末尾の著者・監修者カード
 * ============================================================ */

.author-info.pastel-bc {
    background: #ffffff !important; border: 1px solid rgba(0,0,0,.05) !important;
    border-radius: 24px !important; box-shadow: 0 8px 30px rgba(0,0,0,.04) !important;
    padding: 30px !important; margin-top: 40px !important; color: #1d1d1f !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                 "Helvetica Neue", Arial, sans-serif !important;
    position: relative !important; overflow: hidden !important; overflow: clip !important;
    contain: layout style !important;
}
.author-info.pastel-bc::before, .author-info.pastel-bc::after { display: none !important; }
.author-info__title {
    background: transparent !important; color: #1d1d1f !important;
    font-size: 18px !important; font-weight: 700 !important; border: none !important;
    padding: 0 !important; margin: 0 0 24px !important;
    display: flex !important; align-items: center !important;
}
.author-info__title i {
    color: #86868b !important; font-size: 20px !important; margin-right: 8px !important;
    background: none !important; padding: 0 !important; border-radius: 0 !important; box-shadow: none !important;
}
.author-info__inner { display: flex !important; align-items: flex-start !important; gap: 0 !important; }
.author-info__inner > .author-info__icon { margin-right: 24px !important; }
@supports (gap: 24px) {
    .author-info__inner { gap: 24px !important; }
    .author-info__inner > .author-info__icon { margin-right: 0 !important; }
}
.author-info__icon { flex-shrink: 0 !important; width: 80px !important; text-align: center !important; }
.author-info__icon img {
    width: 80px !important; height: 80px !important; border-radius: 50% !important;
    object-fit: cover !important; object-position: center top !important;
    box-shadow: 0 4px 12px rgba(0,0,0,.08) !important; border: 2px solid #fff !important;
    will-change: transform !important;
}
.author-info__name { margin-top: 12px !important; font-size: 15px !important; font-weight: 700 !important; line-height: 1.4 !important; color: #1d1d1f !important; }
.author-info__text {
    flex-grow: 1 !important; font-size: 14px !important; line-height: 1.8 !important;
    color: #424245 !important; margin: 0 !important;
    -webkit-font-smoothing: antialiased !important; -moz-osx-font-smoothing: grayscale !important;
}
.author-info__text a { color: #007aff !important; text-decoration: none !important; transition: color 0.15s ease !important; }
@media (hover: hover) and (pointer: fine) { .author-info__text a:hover { color: #0056cc !important; text-decoration: underline !important; } }
.author-info__text a:focus-visible { outline: 2px solid #007aff !important; outline-offset: 2px !important; border-radius: 3px !important; }
@media (prefers-reduced-motion: reduce) { .author-info__text a { transition: none !important; } }
@media (max-width: 768px) { .author-info.pastel-bc { padding: 24px !important; } }


/* ============================================================
 *  G. パンくずリスト
 *
 *  ★ v3.6 修正点：
 *    - ol を挟む構造（#breadcrumb ol li）に対応するセレクタを追加
 *    - Font Awesome 5・6 の両方に対応（font-family にv5を追加）
 *    - .breadcrumb クラスも念のため対象に含める
 * ============================================================ */

/* コンテナ全体 */
#breadcrumb,
nav.breadcrumb,
.breadcrumb {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding: 12px 0 !important;
    margin-bottom: 20px !important;
    overflow-x: auto !important;
    white-space: nowrap !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
    contain: layout style !important;
}
#breadcrumb::-webkit-scrollbar,
.breadcrumb::-webkit-scrollbar { display: none !important; }

/* ── ol があるケース / ないケース 両対応 */

/* li の基本設定 */
#breadcrumb li,
#breadcrumb ol li,
.breadcrumb li,
.breadcrumb ol li {
    display: inline-flex !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
    flex-shrink: 0 !important;
}
/* ol があってもフレックスが維持されるよう */
#breadcrumb ol,
.breadcrumb ol {
    display: inline-flex !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    flex-shrink: 0 !important;
}

/* リンクとテキスト（共通） */
#breadcrumb li a,
#breadcrumb ol li a,
#breadcrumb li span,
#breadcrumb ol li span,
.breadcrumb li a,
.breadcrumb ol li a {
    font-family:
        -apple-system, BlinkMacSystemFont,
        "Segoe UI", Roboto,
        "Helvetica Neue", "Yu Gothic", sans-serif !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #59595c !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    line-height: 1 !important;
    transition: color 0.15s ease, opacity 0.15s ease !important;
}
@media (hover: hover) and (pointer: fine) {
    #breadcrumb li a:hover,
    #breadcrumb ol li a:hover,
    .breadcrumb li a:hover { color: #1d1d1f !important; opacity: 0.8 !important; }
}

/* ホームアイコン（フラスコ）*/
#breadcrumb li:first-child > a,
#breadcrumb ol li:first-child > a,
.breadcrumb li:first-child > a { font-weight: 700 !important; }

#breadcrumb li:first-child > a::before,
#breadcrumb ol li:first-child > a::before,
.breadcrumb li:first-child > a::before {
    content: "\f0c3" !important;                         /* フラスコアイコン */
    /* ★ Font Awesome 5・6 両対応 */
    font-family: "Font Awesome 6 Free", "Font Awesome 5 Free" !important;
    font-weight: 900 !important;
    font-size: 15px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-right: 6px !important;
    background: linear-gradient(135deg, #a855f7, #ec4899, #f97316) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
    filter: drop-shadow(0 2px 4px rgba(236,72,153,.25)) !important;
}

/* 区切り矢印 */
#breadcrumb li::after,
#breadcrumb ol li::after,
.breadcrumb li::after {
    content: "\f054" !important;                         /* chevron-right */
    font-family: "Font Awesome 6 Free", "Font Awesome 5 Free" !important;
    font-weight: 900 !important;
    font-size: 10px !important;
    color: #8e8e93 !important;
    margin: 0 10px !important;
    display: inline-flex !important;
    align-items: center !important;
}
#breadcrumb li:last-child::after,
#breadcrumb ol li:last-child::after,
.breadcrumb li:last-child::after { display: none !important; content: none !important; }

@media (prefers-reduced-motion: reduce) {
    #breadcrumb li a, .breadcrumb li a { transition: none !important; }
}
@media only screen and (max-width: 480px) {
    #breadcrumb, .breadcrumb { padding: 12px 16px !important; }
}


/* ============================================================
 *  H. カテゴリー・タグエリア
 *
 *  ★ v3.6 修正点：
 *    - div.footer-meta → .footer-meta（要素限定を解除）
 *    - body プレフィックスで詳細度を補強
 * ============================================================ */

/* カード全体 */
body .footer-meta {
    background-color: #ffffff !important;
    border: 1px solid rgba(0,0,0,.05) !important;
    border-radius: 24px !important;
    box-shadow: 0 8px 30px rgba(0,0,0,.04) !important;
    padding: 30px !important;
    margin: 40px 0 !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                 "Helvetica Neue", "Yu Gothic", sans-serif !important;
    color: #1d1d1f !important;
    text-align: left !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    position: relative !important;
    overflow: hidden !important;
    overflow: clip !important;
}
/* グラデーション上線 */
body .footer-meta::before {
    content: "" !important;
    position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important;
    height: 3px !important;
    background: linear-gradient(90deg, #a855f7, #ec4899, #f97316) !important;
    pointer-events: none !important;
}

/* ラベル（カテゴリー / 利用シーン）*/
body .footer-meta .footer-meta-label {
    font-size: 0 !important;
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    width: 100% !important;
    margin-bottom: 8px !important;
    line-height: 0 !important;      /* ★ ゼロ幅の要素の高さ残留を防止 */
}
body .footer-meta .footer-meta-label::before {
    font-size: 11px !important;
    line-height: 1.4 !important;    /* ★ ラベルの高さを戻す */
    font-weight: 700 !important;
    letter-spacing: 0.06em !important;
    padding: 3px 10px !important;
    border-radius: 20px !important;
    margin-bottom: 10px !important;
    display: inline-block !important;
    background: linear-gradient(135deg, #a855f7, #ec4899) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
    box-shadow: inset 0 0 0 1px rgba(168,85,247,.3) !important;
}
body .footer-meta .footer-meta-label:nth-of-type(1)::before { content: "カテゴリー" !important; }
body .footer-meta .footer-meta-label:nth-of-type(2) { margin-top: 16px !important; }
body .footer-meta .footer-meta-label:nth-of-type(2)::before { content: "利用シーン" !important; }

/* タグチップ */
body .footer-meta a {
    display: inline-block !important;
    background: #f5f5f7 !important;
    color: #3c3c43 !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    padding: 6px 16px !important;
    border-radius: 999px !important;
    margin: 4px 6px 4px 0 !important;
    text-decoration: none !important;
    transition: background 0.2s, color 0.2s, transform 0.2s, box-shadow 0.2s !important;
    border: 1px solid transparent !important;
}
@media (hover: hover) and (pointer: fine) {
    body .footer-meta a:hover {
        background: rgba(168,85,247,.08) !important;
        color: #a855f7 !important;
        border-color: rgba(168,85,247,.25) !important;
        transform: translateY(-1px) !important;
        box-shadow: 0 4px 8px rgba(168,85,247,.12) !important;
    }
}
body .footer-meta a:active { transform: scale(0.97) !important; }
body .footer-meta a:focus-visible { outline: 2px solid #a855f7 !important; outline-offset: 2px !important; }
@media (max-width: 768px) {
    body .footer-meta { padding: 24px !important; }
    body .footer-meta a { font-size: 12px !important; padding: 5px 13px !important; }
}


/* ============================================================
 *  I. テーブルデザイン（Apple Style / Clean）
 * ============================================================ */

.entry-content table {
    width: 100% !important; border-collapse: separate !important; border-spacing: 0 !important;
    border: 1px solid rgba(0,0,0,.05) !important; border-radius: 16px !important;
    overflow: hidden !important; box-shadow: 0 4px 20px rgba(0,0,0,.03) !important;
    margin-bottom: 30px !important; font-size: 15px !important;
    background: #ffffff !important; contain: layout style !important;
}
.entry-content table th {
    background-color: #f5f5f7 !important; color: #1d1d1f !important; font-weight: 700 !important;
    padding: 16px 20px !important; text-align: left !important; border: none !important;
    border-bottom: 1px solid #e5e5ea !important; line-height: 1.7 !important; vertical-align: middle !important;
}
.entry-content table tbody th { white-space: nowrap !important; width: 25% !important; }
.entry-content table td {
    background-color: #ffffff !important; color: #424245 !important;
    padding: 16px 20px !important; border: none !important;
    border-bottom: 1px solid #e5e5ea !important; line-height: 1.7 !important; vertical-align: middle !important;
}
.entry-content table tr:last-child th,
.entry-content table tr:last-child td { border-bottom: none !important; }
.scrollable-table { border-radius: 16px !important; }
.scrollable-table::after { background: rgba(0,0,0,.4) !important; border-radius: 16px !important; }
.scroll-hint-text { font-weight: 700 !important; letter-spacing: 1px !important; }
@media (max-width: 768px) {
    .entry-content table { font-size: 14px !important; }
    .entry-content table th, .entry-content table td { padding: 14px !important; }
    .entry-content table tbody th { width: auto !important; white-space: normal !important; }
}


/* ============================================================
 *  J. 口コミ比較ボックス（Good/Bad ＋ 豆知識）
 * ============================================================ */

.wp-block-sgb-box.sng-box.box1 .wp-block-columns { gap: 30px !important; margin-bottom: 40px !important; }
@media (max-width: 768px) { .wp-block-sgb-box.sng-box.box1 .wp-block-columns { flex-direction: column !important; gap: 24px !important; } }
.wp-block-sgb-box.sng-box.box1 .wp-block-column {
    background-color: #ffffff !important; border-radius: 20px !important; padding: 0 !important;
    box-shadow: 0 10px 30px rgba(0,0,0,.05) !important; border: 1px solid #f0f0f5 !important;
    overflow: visible !important; position: relative !important; contain: layout style !important;
}
.wp-block-sgb-box.sng-box.box1 .sgb-heading {
    margin: 0 !important; padding: 20px 10px !important; border-radius: 20px 20px 0 0 !important;
    text-align: center !important; position: relative !important; display: flex !important;
    justify-content: center !important; align-items: center !important; background: none !important; border: none !important;
}
.wp-block-sgb-box.sng-box.box1 .sgb-heading__inner {
    background: transparent !important; border: none !important; box-shadow: none !important;
    padding: 0 !important; margin: 0 !important; display: inline-flex !important;
    align-items: center !important; justify-content: center !important;
    font-weight: 700 !important; color: #1d1d1f !important; font-size: 16px !important;
}
.wp-block-sgb-box.sng-box.box1 .sgb-heading__inner::after,
.wp-block-sgb-box.sng-box.box1 .sgb-heading::before { display: none !important; content: none !important; border: none !important; }
.wp-block-sgb-box.sng-box.box1 .sgb-heading::after {
    content: '' !important; position: absolute !important; bottom: -10px !important;
    left: 50% !important; transform: translateX(-50%) !important;
    width: 0 !important; height: 0 !important; border-style: solid !important;
    border-width: 10px 14px 0 14px !important; z-index: 10 !important;
}
.wp-block-sgb-box.sng-box.box1 .wp-block-column:first-child .sgb-heading { background-color: #eaf8ff !important; }
.wp-block-sgb-box.sng-box.box1 .wp-block-column:first-child .sgb-heading::after { border-color: #009ef3 transparent transparent transparent !important; }
.wp-block-sgb-box.sng-box.box1 .wp-block-column:first-child .sgb-heading__inner::before { content: '👍' !important; margin-right: 8px !important; font-size: 20px !important; display: inline-block !important; line-height: 1 !important; }
.wp-block-sgb-box.sng-box.box1 .wp-block-column:last-child .sgb-heading { background-color: #fff5f5 !important; }
.wp-block-sgb-box.sng-box.box1 .wp-block-column:last-child .sgb-heading::after { border-color: #ff8080 transparent transparent transparent !important; }
.wp-block-sgb-box.sng-box.box1 .wp-block-column:last-child .sgb-heading__inner::before { content: '🤔' !important; margin-right: 8px !important; font-size: 20px !important; display: inline-block !important; line-height: 1 !important; }
.wp-block-sgb-box.sng-box.box1 ul.wp-block-list { padding: 30px 24px 24px !important; margin: 0 !important; }
.wp-block-sgb-box.sng-box.box1 li {
    list-style: none !important; border-bottom: 1px dashed #e5e5ea !important;
    padding: 14px 0 14px 30px !important; font-size: 15px !important; color: #424245 !important;
    position: relative !important; line-height: 1.6 !important; margin: 0 !important;
}
.wp-block-sgb-box.sng-box.box1 li:last-child { border-bottom: none !important; }
.wp-block-sgb-box.sng-box.box1 li::before { display: none !important; }
.wp-block-sgb-box.sng-box.box1 li::after {
    content: '' !important; position: absolute !important; left: 4px !important; top: 26px !important;
    transform: translateY(-50%) !important; width: 8px !important; height: 8px !important;
    border-radius: 50% !important; background-color: #fff !important; border: 2px solid !important;
}
.wp-block-sgb-box.sng-box.box1 .wp-block-column:first-child li::after { border-color: #009ef3 !important; box-shadow: 0 0 0 2px rgba(0,158,243,.15) !important; }
.wp-block-sgb-box.sng-box.box1 .wp-block-column:last-child li::after { border-color: #ff8080 !important; box-shadow: 0 0 0 2px rgba(255,128,128,.15) !important; }

.wp-block-sgb-block-simple.sgb-box-simple {
    background: #ffffff !important; border: 1px solid rgba(0,0,0,.05) !important;
    border-radius: 24px !important; box-shadow: 0 16px 40px rgba(0,0,0,.08), 0 4px 12px rgba(0,0,0,.03) !important;
    padding: 0 !important; margin: 60px 0 !important; overflow: hidden !important; contain: layout style !important;
}
.wp-block-sgb-block-simple.sgb-box-simple .sgb-box-simple__title {
    background-color: #fff5f5 !important; color: #1d1d1f !important; padding: 20px 28px !important;
    font-size: 18px !important; font-weight: 700 !important; border: none !important;
    display: flex !important; align-items: center !important; border-bottom: 1px solid rgba(0,0,0,.03) !important;
}
.wp-block-sgb-block-simple.sgb-box-simple .sgb-box-simple__title i {
    color: #ff5e5e !important; margin-right: 12px !important; font-size: 20px !important;
    background: rgba(255,94,94,.1) !important; width: 36px !important; height: 36px !important;
    display: inline-flex !important; align-items: center !important; justify-content: center !important;
    border-radius: 50% !important; flex-shrink: 0 !important;
}
.wp-block-sgb-block-simple.sgb-box-simple .sgb-box-simple__body {
    border: none !important; background: transparent !important; padding: 32px 28px !important;
    color: #424245 !important; font-size: 15px !important; line-height: 1.8 !important;
}
.wp-block-sgb-block-simple.sgb-box-simple ul { margin: 0 !important; padding-left: 0 !important; }
.wp-block-sgb-block-simple.sgb-box-simple li { list-style: none !important; margin-bottom: 16px !important; padding-left: 36px !important; position: relative !important; font-weight: 500 !important; }
.wp-block-sgb-block-simple.sgb-box-simple li::before {
    content: '✓' !important; font-family: sans-serif !important; font-weight: 900 !important;
    position: absolute !important; left: 0 !important; top: 2px !important;
    background: linear-gradient(135deg, #7ad3e6 0%, #4facfe 100%) !important; color: #ffffff !important;
    font-size: 13px !important; width: 24px !important; height: 24px !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    border-radius: 50% !important; box-shadow: 0 4px 10px rgba(79,172,254,.3) !important; line-height: 1 !important;
}
@media (max-width: 768px) {
    .wp-block-sgb-block-simple.sgb-box-simple { margin: 40px 0 !important; border-radius: 20px !important; }
    .wp-block-sgb-block-simple.sgb-box-simple .sgb-box-simple__body { padding: 24px 20px !important; }
}


/* ============================================================
 *  K. 画像ポップアップ（拡大）制御
 * ============================================================ */

.mobile-trust-box img, .mtb-avatar img, .mtb-logo-img,
.apple-profile-wrapper img, .ap-avatar img,
.author_img img, .stb-avatar img {
    pointer-events: none !important;
    cursor: default !important;
    user-select: none !important;
}


/* ============================================================
 *  L. 公開日・更新日のデザイン
 *
 *  ★ v3.6 修正点：
 *    - 親クラスへの依存を撤廃（.entry-header の有無に関わらず動作）
 *    - time.pubdate / time.updated / .pubdate / .updated 全パターンを網羅
 *    - Font Awesome 5・6 の両方に対応
 *    - アニメーションは引き続き使用しない
 * ============================================================ */

/* ── コンテナ
 *    SANGOの .entry-meta は .entry-header 配下の場合と
 *    .article-header 配下の場合がある。両方対応。
 */
.entry-header .entry-meta,
.article-header .entry-meta,
.entry-meta {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 0 !important;
    margin-bottom: 12px !important;
    contain: layout style !important;
}
.entry-meta > * + * { margin-left: 16px !important; }
@supports (gap: 16px) {
    .entry-header .entry-meta,
    .article-header .entry-meta,
    .entry-meta { gap: 16px !important; }
    .entry-meta > * + * { margin-left: 0 !important; }
}

/* ── 日付タグ（time要素・spanなど全パターンを網羅） */
time.pubdate,
span.pubdate,
.pubdate,
time.updated,
span.updated,
.updated {
    display: inline-flex !important;
    align-items: center !important;
    font-family:
        -apple-system, BlinkMacSystemFont,
        "Segoe UI", Roboto,
        "Helvetica Neue", "Yu Gothic", sans-serif !important;
    font-size: 13px !important;
    color: #59595c !important;
    font-weight: 500 !important;
    letter-spacing: 0.02em !important;
    line-height: 1 !important;
    background: none !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
}

/* SANGOのデフォルトアイコンを非表示 */
.pubdate i, .updated i { display: none !important; }

/* ── グラデーションアイコン（::before）
 *    ★ Font Awesome 5・6 両対応
 *    ★ アニメーション・hover変化なし（静的デザインのみ）
 */
time.pubdate::before, span.pubdate::before, .pubdate::before,
time.updated::before, span.updated::before, .updated::before {
    display: inline-block !important;
    font-family: "Font Awesome 6 Free", "Font Awesome 5 Free" !important;
    font-weight: 900 !important;
    font-size: 13px !important;
    margin-right: 5px !important;
    /* ブランドグラデーション */
    background: linear-gradient(135deg, #a855f7, #ec4899, #f97316) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
    /* アニメーションなし */
    transition: none !important;
    will-change: auto !important;
}

/* 公開日アイコン：時計 */
time.pubdate::before, span.pubdate::before, .pubdate::before {
    content: "\f017" !important;  /* Clock */
}
/* 更新日アイコン：回転矢印 */
time.updated::before, span.updated::before, .updated::before {
    content: "\f021" !important;  /* Rotate */
}

/* アクセシビリティ：動きを減らす設定 */
@media (prefers-reduced-motion: reduce) {
    .pubdate::before, .updated::before {
        transition: none !important;
        will-change: auto !important;
    }
}


/* ============================================================
 *  M. ブロックグループ（ボタン配置）
 * ============================================================ */

.wp-block-sgb-custom-group {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0.75rem 1rem !important;
    justify-content: center !important;
    margin: 1rem 0 !important;
}
.wp-block-sgb-custom-group > * {
    flex: 1 1 0 !important;
    max-width: none !important;
    margin: 0 !important;
}
.wp-block-sgb-custom-group a {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    text-align: center !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    margin: 0 !important;
    padding: .8rem 1rem !important;
}
@media (min-width: 600px) {
    .wp-block-sgb-custom-group > * { min-width: 120px !important; }
}
@media (max-width: 600px) {
    .wp-block-sgb-custom-group { gap: 0.5rem !important; margin: 0.75rem 0 !important; }
    .wp-block-sgb-custom-group > * { flex: 1 1 100% !important; max-width: none !important; }
}


/* ============================================================
 *  お店訪問レポートカード（[field_report] ショートコード）
 *
 *  デザイン方針：「目立たないが、信頼性を象徴する」
 *  ── 公式記録・現地調査の証明として機能するシンプルな表示 ──
 *
 *  ⚠️ SANGO テーマが絵文字を <img> に変換するため、
 *     絵文字は使わず CSS ベースのラベルに変更済み。
 *  ⚠️ !important を多用しているのは、SANGO の CSS に
 *     負けないようにするため（意図的）。
 * ============================================================ */

/* ── カード全体 ──────────────────────────────────── */
.field-report-card {
    background: #ffffff !important;
    border: 1px solid #cfd8dc !important;
    border-top: 2px solid #455a64 !important; /* 上線でさりげない格式感 */
    border-radius: 4px !important;
    padding: 14px 18px !important;
    margin: 24px 0 !important;
    font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Yu Gothic", YuGothic, sans-serif !important;
    position: relative !important;
    overflow: visible !important;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06) !important;
    contain: layout style !important;
}

/* グラデーション上線は不使用 */
.field-report-card::before { display: none !important; }

/* ── ヘッダー行（ラベル + バッジ） ─────────────── */
.frc-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 10px !important;
    padding-bottom: 8px !important;
    border-bottom: 1px solid #eceff1 !important;
}

/* 「お店訪問レポート」ラベル */
.frc-label {
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    color: #78909c !important;
}

/* 「体験済み」バッジ */
.frc-badge-verified {
    font-size: 10px !important;
    font-weight: 700 !important;
    color: #455a64 !important;
    border: 1px solid #90a4ae !important;
    border-radius: 2px !important;
    padding: 1px 7px !important;
    background: none !important;
    letter-spacing: 0.03em !important;
}

/* ── ボディ（画像 + 情報） ───────────────────────── */
.frc-body {
    display: flex !important;
    align-items: flex-start !important;
    gap: 14px !important;
}

/* 店舗画像 */
.frc-image-wrap { flex-shrink: 0 !important; }
.frc-image {
    width: 90px !important;
    height: 68px !important;
    border-radius: 3px !important;
    background-size: cover !important;
    background-position: center !important;
    background-color: #eceff1 !important;
    border: 1px solid #cfd8dc !important;
}

/* 情報エリア */
.frc-info {
    flex: 1 !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
}

/* 店舗名 */
.frc-store-name {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #263238 !important;
    line-height: 1.4 !important;
    margin-bottom: 5px !important;
}

/* メタ情報（エリア・日付）*/
.frc-metas {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
}

.frc-meta {
    font-size: 12px !important;
    color: #546e7a !important;
    line-height: 1.5 !important;
    display: flex !important;
    align-items: baseline !important;
    gap: 6px !important;
}

/* 絵文字の代わりに CSS でラベルを生成 */
.frc-meta-area::before {
    content: "場所" !important;
    font-size: 9px !important;
    font-weight: 700 !important;
    color: #90a4ae !important;
    letter-spacing: 0.06em !important;
    flex-shrink: 0 !important;
    width: 24px !important;
    display: inline-block !important;
}

.frc-meta-date::before {
    content: "日時" !important;
    font-size: 9px !important;
    font-weight: 700 !important;
    color: #90a4ae !important;
    letter-spacing: 0.06em !important;
    flex-shrink: 0 !important;
    width: 24px !important;
    display: inline-block !important;
}

.frc-meta time {
    font-size: 12px !important;
    color: #546e7a !important;
}

/* Googleマップリンク */
.frc-map-link {
    display: inline-block !important;
    font-size: 11.5px !important;
    color: #546e7a !important;
    text-decoration: none !important;
    border-bottom: 1px solid #b0bec5 !important;
    padding-bottom: 1px !important;
    margin-top: 8px !important;
    transition: color 0.15s ease, border-color 0.15s ease !important;
}

@media (hover: hover) and (pointer: fine) {
    .frc-map-link:hover {
        color: #263238 !important;
        border-color: #546e7a !important;
    }
}

.frc-map-link:focus-visible {
    outline: 2px solid #455a64 !important;
    outline-offset: 2px !important;
}

/* スマホ */
@media (max-width: 480px) {
    .field-report-card { padding: 12px 14px !important; }
    .frc-image { width: 72px !important; height: 56px !important; }
    .frc-store-name { font-size: 13px !important; }
    .frc-meta { font-size: 11.5px !important; }
}

/* アクセシビリティ */
@media (prefers-reduced-motion: reduce) {
    .frc-map-link { transition: none !important; }
}

/* ===== source: 24759.css ===== */
/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Jul 08 2026 | 12:11:20 */
/* ============================================================
   香LIG 全パーツ共通CSS（完全版）
   WPCodeの「CSSコードの追加」にこれ1本だけ貼ってください
   タイトル：「香LIG 全パーツ共通CSS」

   【収録パーツ一覧】
   1. ピックアップカード       .pick-section
   2. 比較カード               .comp-section
   3. アコーディオンブロック   .trend-block
   4. PREPカード               .rcb-wrapper
   5. LINKカード（女性用）     .cil-wrapper
   6. LINKカード（男性用）     .cil-wrapper.cil-mens

   ※ ランキングカード（.ranking-list / .rank-* / .tag）は、
     CSSの二重定義を解消するため本ファイルから削除しました。
     ランキングのスタイルは「香LIG ランキングCSS v2.0（ranking.css）」が
     一元管理します。

   ■ 修正履歴
   ★ 二重定義の解消：ランキングカード（旧【1】）を本ファイルから削除し、
      ranking.css v2.0 に一本化。残りパーツの番号を 1〜6 に振り直し
   ★ Sango衝突の修正：キラキラ演出のクラス .sp → .trend-sp に変更
      （Sangoが .sp をレスポンシブ表示の切替に全体で使っているため）
      ※HTML側の <span class="sp"> も <span class="trend-sp"> に要変更
   ★ アクセシビリティ：prefers-reduced-motion で装飾アニメを止める
      共通ブロックを末尾に追加
   ============================================================ */


/* ============================================================
   【1】ピックアップカード
   ============================================================ */

.pick-section {
  max-width: 720px;
  margin: 0 auto;
  font-family: 'Hiragino Mincho ProN', 'Yu Mincho', serif;
  color: #5c5260;
}
.pick-heading { text-align: center; margin-bottom: 20px; }
.pick-heading-sub {
  display: block; font-size: 9.5px; font-weight: 700; letter-spacing: .22em;
  color: #c99aa8; text-transform: uppercase;
  font-family: 'Helvetica Neue', Arial, sans-serif; margin-bottom: 8px;
}
.pick-heading-lead {
  font-size: clamp(14px, 3.5vw, 17px); font-weight: 800;
  color: #3a3038; letter-spacing: .04em; line-height: 1.6; margin: 0;
}
.pick-lead {
  font-size: 13px; color: #5c5260; line-height: 2;
  margin-bottom: 22px; padding: 14px 16px;
  background: #faf5f7; border-radius: 10px; border-left: 2.5px solid #dbbac4;
}
.pick-list { display: flex; flex-direction: column; gap: 14px; margin-bottom: 8px; }
.pick-card {
  background: #ffffff; border: 1px solid #ede4e9; border-radius: 14px;
  box-shadow: 0 3px 14px rgba(100,60,80,.05); overflow: hidden;
  position: relative; transition: box-shadow .2s, transform .2s;
}
.pick-card:hover { box-shadow: 0 6px 22px rgba(100,60,80,.10); transform: translateY(-1px); }
.pick-card-top { display: flex; flex-direction: row; }
.pick-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;
}
.pick-num { font-size: 20px; font-weight: 800; line-height: 1; color: #b87888; font-family: 'Helvetica Neue', Arial, sans-serif; }
.pick-num-label { font-size: 8px; font-weight: 700; letter-spacing: .08em; color: #c99aa8; font-family: 'Helvetica Neue', Arial, sans-serif; margin-top: 2px; }
.pick-img-col { flex-shrink: 0; width: 88px; padding: 14px 10px; display: flex; align-items: center; justify-content: center; }
.pick-img-box { position: relative; width: 68px; height: 68px; border-radius: 10px; overflow: hidden; background: #f4f0f3; border: 1px solid #ede4e9; }
.pick-img-box img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 9px; }
.pick-affil-link { position: absolute; inset: 0; z-index: 2; border-radius: 9px; display: block; }
.pick-info-col { flex: 1; padding: 14px 14px 12px 6px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pick-brand { font-size: 9.5px; font-weight: 700; letter-spacing: .08em; color: #c99aa8; text-transform: uppercase; font-family: 'Helvetica Neue', Arial, sans-serif; }
.pick-name { font-size: 13.5px; font-weight: 800; color: #3a3038; line-height: 1.45; letter-spacing: .02em; word-break: break-all; }
.pick-buzz-tag {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 9.5px; font-weight: 700; padding: 2px 8px; border-radius: 20px;
  font-family: 'Helvetica Neue', Arial, sans-serif; letter-spacing: .03em;
  background: #fff0e8; color: #c07030; border: 1px solid #f0d8b8;
  margin-top: 2px; width: fit-content;
}
.pick-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
.pick-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; }
.pick-tag-scent { background: #f4eee8; color: #a07850; border: 1px solid #e0cfb8; }
.pick-tag-scene { background: #faf5f7; color: #b87888; border: 1px solid #ede4e9; }
.pick-price-row { display: flex; align-items: baseline; margin-top: 1px; }
.pick-price { font-size: 13.5px; font-weight: 800; color: #3a3038; font-family: 'Helvetica Neue', Arial, sans-serif; }
.pick-price-note { font-size: 10px; color: #8a7e8c; font-family: 'Helvetica Neue', Arial, sans-serif; margin-left: 4px; font-weight: 400; }
.pick-cta { margin-top: 4px; }
.pick-cta a {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11.5px; font-weight: 700; color: #c99aa8; text-decoration: none;
  font-family: 'Helvetica Neue', Arial, sans-serif; letter-spacing: .04em;
  border-bottom: 1px solid #dbbac4; padding-bottom: 1px;
  transition: color .15s, border-color .15s;
}
.pick-cta a:hover { color: #b87888; border-color: #b87888; }
.pick-card-bottom { border-top: 1px solid #ede4e9; }
.pick-bottom-row { display: flex; flex-direction: row; }
.pick-col-scene {
  flex: 1; padding: 12px 14px; background: #f4f0fb;
  border-right: 1px solid #ede4e9;
  display: flex; flex-direction: column; gap: 4px; min-width: 0;
}
.pick-col-scene-label {
  display: flex; align-items: center; gap: 4px;
  font-size: 9px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  font-family: 'Helvetica Neue', Arial, sans-serif; color: #7060a0; margin-bottom: 1px;
}
.pick-col-scene-text { font-size: 12px; color: #5c5260; line-height: 1.65; }
.pick-col-impression {
  flex: 1; padding: 12px 14px; background: #fdf4f7;
  display: flex; flex-direction: column; gap: 4px; min-width: 0;
}
.pick-col-impression-label {
  display: flex; align-items: center; gap: 4px;
  font-size: 9px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  font-family: 'Helvetica Neue', Arial, sans-serif; color: #b87888; margin-bottom: 1px;
}
.pick-col-impression-text { font-size: 12px; color: #5c5260; line-height: 1.65; }
.pick-col-impression-text strong { color: #b87888; font-weight: 700; }
.pick-price-disclaimer {
  font-size: 10.5px; color: #a09aa8; line-height: 1.9;
  margin-top: 6px; padding: 10px 8px;
  text-align: center;
  border-top: 1px dashed #e0d0d8;
  font-family: 'Helvetica Neue', Arial, sans-serif;
}

@media (max-width: 480px) {
  .pick-heading { margin-bottom: 14px; }
  .pick-heading-lead { font-size: 15px; line-height: 1.65; }
  .pick-lead { font-size: 12.5px; padding: 12px 13px; margin-bottom: 16px; }
  .pick-badge-col { width: 40px; }
  .pick-num { font-size: 16px; }
  .pick-img-col { width: 70px; padding: 12px 7px; }
  .pick-img-box { width: 56px; height: 56px; }
  .pick-info-col { padding: 11px 10px 10px 3px; gap: 3px; }
  .pick-name { font-size: 12px; }
  .pick-tag { font-size: 9px; padding: 2px 6px; }
  .pick-price { font-size: 12.5px; }
  .pick-cta a { font-size: 11px; }
  .pick-bottom-row { flex-direction: column; }
  .pick-col-scene { border-right: none; border-bottom: 1px solid #ede4e9; padding: 10px 13px; }
  .pick-col-impression { padding: 10px 13px; }
  .pick-col-scene-label, .pick-col-impression-label { font-size: 8.5px; }
  .pick-col-scene-text, .pick-col-impression-text { font-size: 12px; }
}


/* ============================================================
   【2】比較カード
   ============================================================ */

.comp-section {
  max-width: 720px; margin: 0 auto;
  font-family: 'Hiragino Mincho ProN', 'Yu Mincho', serif;
  color: #5c5260;
  display: flex; flex-direction: column; gap: 14px;
  padding: 4px 0 20px;
}
.comp-heading { text-align: center; margin-bottom: 20px; }
.comp-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;
}
.comp-heading-main {
  font-size: clamp(15px, 4vw, 20px); font-weight: 800;
  color: #3a3038; letter-spacing: .04em; line-height: 1.5; margin: 0;
}
.comp-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: row;
  transition: box-shadow .2s, transform .2s;
}
.comp-card:hover { box-shadow: 0 6px 22px rgba(100,60,80,.10); transform: translateY(-1px); }
.comp-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;
}
.comp-num { font-size: 20px; font-weight: 800; line-height: 1; color: #b87888; font-family: 'Helvetica Neue', Arial, sans-serif; }
.comp-num-label { font-size: 8px; font-weight: 700; letter-spacing: .08em; color: #c99aa8; font-family: 'Helvetica Neue', Arial, sans-serif; margin-top: 2px; }
.comp-img-col { flex-shrink: 0; width: 88px; padding: 14px 10px; display: flex; align-items: flex-start; justify-content: center; }
.comp-img-col a { display: block; width: 68px; height: 68px; border-radius: 10px; overflow: hidden; background: #f4f0f3; border: 1px solid #ede4e9; flex-shrink: 0; }
.comp-img-col a img { width: 100%; height: 100%; object-fit: cover; display: block; }
.comp-info-col { flex: 1; padding: 14px 14px 12px 6px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.comp-brand { font-size: 9.5px; font-weight: 700; letter-spacing: .08em; color: #c99aa8; text-transform: uppercase; font-family: 'Helvetica Neue', Arial, sans-serif; }
.comp-name { font-size: 13.5px; font-weight: 800; color: #3a3038; line-height: 1.45; word-break: break-all; }
.comp-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
.comp-tag { display: inline-block; font-size: 9.5px; font-weight: 700; padding: 2px 7px; border-radius: 20px; font-family: 'Helvetica Neue', Arial, sans-serif; white-space: nowrap; }
.comp-tag-age   { background: #f0eaf4; color: #a898c0; border: 1px solid #ddd4ec; }
.comp-tag-scent { background: #f4eee8; color: #a07850; border: 1px solid #e0cfb8; }
.comp-tag-scene { background: #faf5f7; color: #b87888; border: 1px solid #ede4e9; }
.comp-price { font-size: 13.5px; font-weight: 800; color: #3a3038; font-family: 'Helvetica Neue', Arial, sans-serif; display: block; margin-top: 2px; }
.comp-price-note { font-size: 10px; color: #8a7e8c; font-family: 'Helvetica Neue', Arial, sans-serif; margin-left: 4px; font-weight: 400; }
.comp-gauge-row { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.comp-gauge-label {
  font-size: 10px; font-weight: 700; color: #8a7e8c;
  font-family: 'Helvetica Neue', Arial, sans-serif;
  letter-spacing: .03em; white-space: nowrap; flex-shrink: 0;
  min-width: 46px;
}
.comp-gauge-label-r { text-align: right; }
.comp-gauge-track {
  flex: 1; height: 6px; background: #ddd0d8; border-radius: 3px;
  position: relative; overflow: visible;
}
.comp-gauge-fill {
  height: 100%; background: transparent; border-radius: 3px;
  position: relative; overflow: visible;
}
.comp-gauge-fill::after {
  content: ''; position: absolute; right: -7px; top: 50%;
  transform: translateY(-50%);
  width: 14px; height: 14px; background: #b87888; border-radius: 50%;
  box-shadow: 0 0 0 2.5px #ffffff, 0 1px 5px rgba(184,120,136,.45); z-index: 2;
}
.comp-btn {
  display: inline-flex; align-items: center; gap: 4px; margin-top: 4px;
  font-size: 11.5px; font-weight: 700; color: #c99aa8; text-decoration: none;
  font-family: 'Helvetica Neue', Arial, sans-serif; letter-spacing: .04em;
  border-bottom: 1px solid #dbbac4; padding-bottom: 1px;
  transition: color .15s, border-color .15s;
}
.comp-btn:hover { color: #b87888; border-color: #b87888; }
.comp-price-disclaimer {
  font-size: 10.5px; color: #a09aa8; line-height: 1.9;
  margin-top: 6px; padding: 10px 8px;
  text-align: center;
  border-top: 1px dashed #e0d0d8;
  font-family: 'Helvetica Neue', Arial, sans-serif;
}

@media (max-width: 480px) {
  .comp-badge-col { width: 40px; }
  .comp-num { font-size: 16px; }
  .comp-img-col { width: 70px; padding: 12px 7px; }
  .comp-img-col a { width: 56px; height: 56px; }
  .comp-info-col { padding: 11px 10px 10px 3px; gap: 3px; }
  .comp-name { font-size: 12px; }
  .comp-tag { font-size: 9px; padding: 2px 6px; }
  .comp-price { font-size: 12.5px; }
  .comp-gauge-label { font-size: 9px; min-width: 38px; }
}
/* ============================================================
   【2-b】比較カード メンズ配色（ゲージのドットをネイビーに）
   ============================================================ */
.comp-mens .comp-gauge-fill::after {
  background: #3d5a80;
  box-shadow: 0 0 0 2.5px #ffffff, 0 1px 5px rgba(61,90,128,.45);
}

/* ============================================================
   【3】アコーディオンブロック
   ============================================================ */

.trend-block {
  max-width: 720px; margin: 24px auto;
  background: #ffffff; border: 1px solid #ede4e9;
  border-radius: 16px; box-shadow: 0 6px 24px rgba(100,60,80,0.06); overflow: hidden;
}
.trend-header {
  position: relative; padding: 30px 24px 26px; text-align: center;
  background: linear-gradient(140deg, #fdf4f7 0%, #f8eef4 30%, #f2ecf8 65%, #edf3f9 100%);
  border-bottom: 1px solid #ede4e9; overflow: hidden;
}
.trend-header::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(108deg, transparent 30%, rgba(200,160,180,.10) 44%, rgba(220,200,230,.18) 50%, rgba(170,185,215,.10) 56%, transparent 70%);
  background-size: 220% 100%;
  animation: shimmer-bg 4s ease-in-out infinite; pointer-events: none;
}
@keyframes shimmer-bg {
  0%   { background-position: 220% 0; }
  100% { background-position: -220% 0; }
}
.trend-label {
  display: inline-block; font-size: 9px; font-weight: 700;
  letter-spacing: .24em; color: #c99aa8; text-transform: uppercase;
  margin-bottom: 10px; font-family: 'Helvetica Neue', Arial, sans-serif;
}
.trend-title {
  position: relative; display: inline-block;
  font-size: clamp(15px, 4vw, 19px); font-weight: 800;
  line-height: 1.6; letter-spacing: .06em; color: transparent;
  background: linear-gradient(90deg, #9a6878 0%, #b87888 18%, #c9a0a8 32%, #e8d8dc 44%, #c0aac8 52%, #d4b8c0 62%, #b87888 80%, #9a6878 100%);
  background-size: 220% auto;
  -webkit-background-clip: text; background-clip: text;
  animation: shimmer-text 4s linear infinite; padding-bottom: 14px;
  font-family: 'Hiragino Mincho ProN', 'Yu Mincho', serif;
}
@keyframes shimmer-text {
  0%   { background-position: 0% center; }
  100% { background-position: 220% center; }
}
.trend-title::after {
  content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 40px; height: 1.5px;
  background: linear-gradient(90deg, #dbbac4, #a898c0, #dbbac4);
  background-size: 200% auto; border-radius: 2px;
  animation: shimmer-line 4s linear infinite; opacity: .7;
}
@keyframes shimmer-line {
  0%   { background-position: 0% center; }
  100% { background-position: 200% center; }
}
/* ★ Sango衝突回避：.sp → .trend-sp にリネーム（HTML側も同様に変更すること） */
.sparkles { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.trend-sp { position: absolute; opacity: 0; animation: sparkle-pop 5s ease-in-out infinite; font-size: 8px; }
.trend-sp:nth-child(1) { top:20%; left: 7%; color:#c9a0b0; animation-delay:0.0s; }
.trend-sp:nth-child(2) { top:60%; left:13%; color:#b0a0c8; animation-delay:1.5s; }
.trend-sp:nth-child(3) { top:22%; right:9%; color:#b87888; animation-delay:0.9s; font-size:9px; }
.trend-sp:nth-child(4) { top:65%; right:11%; color:#9ab0cc; animation-delay:2.4s; }
.trend-sp:nth-child(5) { top:40%; left:22%; color:#b0a0c8; animation-delay:2.0s; }
.trend-sp:nth-child(6) { top:30%; right:24%; color:#c9a0b0; animation-delay:0.5s; }
.trend-sp:nth-child(7) { top:75%; left:40%; color:#9ab0cc; animation-delay:3.0s; font-size:7px; }
.trend-sp:nth-child(8) { top:14%; left:52%; color:#b87888; animation-delay:1.8s; }
@keyframes sparkle-pop {
  0%,100% { opacity:0; transform:scale(.5) rotate(0deg); }
  30%      { opacity:.7; transform:scale(1.1) rotate(15deg); }
  60%      { opacity:.35; transform:scale(.85) rotate(-5deg); }
  80%      { opacity:0; transform:scale(.5) rotate(0deg); }
}
.trend-body { padding: 26px 22px 30px; font-family: 'Hiragino Mincho ProN', 'Yu Mincho', serif; }
.trend-intro { font-size: 13.5px; line-height: 2.1; margin-bottom: 22px; color: #5c5260; }
.trend-intro p + p { margin-top: 1em; }
.trend-intro strong { color: #b87888; font-weight: 700; }
.accordion-stack { display: flex; flex-direction: column; gap: 10px; }
.accordion-btn {
  width: 100%; background: #faf5f7; border: 1px solid #e0d0d8;
  border-radius: 10px; padding: 14px 14px 14px 16px; cursor: pointer;
  display: flex; align-items: center; gap: 10px; text-align: left;
  transition: background .2s, box-shadow .2s;
  font-family: 'Hiragino Mincho ProN', 'Yu Mincho', serif;
  -webkit-tap-highlight-color: transparent;
}
.accordion-btn:hover,
.accordion-btn:focus-visible { background: #f4f0f3; box-shadow: 0 2px 8px rgba(100,60,80,.07); outline: none; }
.accordion-btn[aria-expanded="true"] { border-radius: 10px 10px 0 0; border-bottom-color: transparent; background: #f4f0f3; }
.acc-icon-wrap { font-size: 19px; flex-shrink: 0; line-height: 1; }
.acc-label-wrap { flex: 1; min-width: 0; }
.acc-sub { display: block; font-size: 9px; font-weight: 700; color: #c99aa8; letter-spacing: .16em; text-transform: uppercase; font-family: 'Helvetica Neue', Arial, sans-serif; margin-bottom: 3px; }
.acc-title { display: block; font-size: 13px; font-weight: 700; color: #3a3038; line-height: 1.55; letter-spacing: .02em; word-break: break-all; overflow-wrap: break-word; margin-bottom: 5px; }
.acc-hint { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; font-weight: 700; color: #c99aa8; font-family: 'Helvetica Neue', Arial, sans-serif; letter-spacing: .04em; transition: opacity .2s; }
.acc-hint-arrow { display: inline-block; animation: bounce-down 1.4s ease-in-out infinite; line-height: 1; font-size: 11px; }
@keyframes bounce-down {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(3px); }
}
.accordion-btn[aria-expanded="true"] .acc-hint { opacity: 0; pointer-events: none; }
.acc-chevron { flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; background: rgba(184,120,136,.12); border: 1px solid #e0d0d8; display: flex; align-items: center; justify-content: center; }
.acc-chevron svg { width: 12px; height: 12px; fill: none; stroke: #b87888; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .3s ease; }
.accordion-btn[aria-expanded="true"] .acc-chevron svg { transform: rotate(180deg); }
.accordion-panel { max-height: 0; overflow: hidden; transition: max-height .42s cubic-bezier(.4,0,.2,1), opacity .35s ease; opacity: 0; background: #faf5f7; border: 1px solid #e0d0d8; border-top: none; border-radius: 0 0 10px 10px; }
.accordion-panel.is-open { max-height: 800px; opacity: 1; }
.accordion-panel-inner { padding: 18px 18px 20px; }
.accordion-panel-inner p { font-size: 13.5px; color: #5c5260; line-height: 2.1; margin-bottom: .9em; }
.accordion-panel-inner p:last-child { margin-bottom: 0; }
.accordion-panel-inner strong { color: #b87888; font-weight: 700; }
.trend-table-scroll { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 8px; border: 1px solid #e0d0d8; margin-top: 4px; }
table.trend-table { width: 100%; min-width: 400px; border-collapse: collapse; font-size: 12.5px; font-family: 'Helvetica Neue', Arial, sans-serif; }
table.trend-table thead th { background: #f4f0f3; color: #b87888; font-weight: 700; padding: 10px 12px; text-align: center; border-bottom: 1px solid #e0d0d8; font-size: 11px; letter-spacing: .06em; white-space: nowrap; }
table.trend-table thead th:not(:last-child) { border-right: 1px solid #ede4e9; }
table.trend-table tbody tr:nth-child(odd) td { background: #faf7f8; }
table.trend-table tbody tr:nth-child(even) td { background: #ffffff; }
table.trend-table tbody td { padding: 10px 13px; border-bottom: 1px solid #ede4e9; color: #5c5260; vertical-align: middle; line-height: 1.7; }
table.trend-table tbody td:not(:last-child) { border-right: 1px solid #ede4e9; }
table.trend-table tbody td:first-child { font-weight: 700; color: #b87888; text-align: center; white-space: nowrap; font-size: 12px; }
.editor-voice-inner { display: flex; align-items: flex-start; gap: 12px; border-top: 1px solid #ede4e9; padding-top: 14px; margin-top: 14px; }
.ev-icon { font-size: 15px; flex-shrink: 0; padding-top: 2px; line-height: 1; opacity: .8; }
.ev-label { display: block; font-size: 9px; font-weight: 700; color: #b87888; letter-spacing: .16em; text-transform: uppercase; font-family: 'Helvetica Neue', Arial, sans-serif; margin-bottom: 5px; }
.ev-text { font-size: 13px; color: #5c5260; line-height: 1.95; font-style: italic; margin: 0; }

@media (max-width: 480px) {
  .trend-block { margin: 12px 10px; border-radius: 14px; }
  .trend-header { padding: 22px 14px 20px; }
  .trend-body { padding: 18px 14px 22px; }
  .trend-label { font-size: 8.5px; }
  .trend-intro { font-size: 13px; }
  table.trend-table { font-size: 11.5px; }
  table.trend-table thead th,
  table.trend-table tbody td { padding: 8px 10px; }
  .acc-title { font-size: 12.5px; }
  .accordion-panel-inner p, .ev-text { font-size: 13px; }
  .trend-sp:nth-child(1), .trend-sp:nth-child(3) { display: none; }
}


/* ============================================================
   【4】PREPカード（結論＋根拠3つのピラミッド構造）
   ============================================================ */

.rcb-wrapper {
  max-width: 100%; margin: 40px 0;
  background: #ffffff; border: 1px solid #ede8e3;
  border-radius: 16px; box-shadow: 0 10px 30px rgba(0,0,0,0.05);
  font-family: 'Helvetica Neue', Arial, 'Segoe UI', Roboto, 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif;
  -webkit-text-size-adjust: 100%;
  position: relative; overflow: hidden; box-sizing: border-box;
  contain: layout style;
}
.rcb-badge {
  position: absolute; top: 0; left: 0;
  background: linear-gradient(135deg, #b07a8a 0%, #c49aaa 100%);
  color: #fff; font-size: 11px; font-weight: 700;
  padding: 6px 14px; border-radius: 0 0 12px 0;
  letter-spacing: 0.05em; z-index: 10;
  box-shadow: 2px 2px 8px rgba(176,122,138,0.25);
}
.rcb-inner { padding: 40px 24px 28px; }
.rcb-title-area { text-align: center; margin-bottom: 18px; }
.rcb-title-en { display: block; font-size: 10px; color: #b07a8a; font-weight: 800; letter-spacing: 0.2em; margin-bottom: 6px; text-transform: uppercase; }
.rcb-title {
  font-size: 18px; font-weight: 800; color: #2d3748;
  margin: 0 !important; display: inline-block; position: relative;
  padding: 0 0 12px 0 !important; letter-spacing: 0.03em; line-height: 1.65;
  border: none !important; background: transparent !important;
  text-align: center;
}
.rcb-title::before { content: none !important; }
.rcb-title::after {
  content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 40px; height: 3px;
  background: linear-gradient(135deg, #b07a8a 0%, #c49aaa 100%); border-radius: 2px;
}
.rcb-lead { font-size: 13px; color: #4a5568; line-height: 1.9; text-align: left; margin: 0 0 22px 0; }
.rcb-lead br { display: none; }
.rcb-lead strong { color: #2d3748; font-weight: 700; }
.rcb-lead a {
  color: #b07a8a; font-weight: 700; text-decoration: none;
  border-bottom: 1px solid #dbbac4; padding-bottom: 1px;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.rcb-lead a:hover { color: #8a5a6a; border-color: #8a5a6a; }
@media (prefers-reduced-motion: reduce) { .rcb-lead a { transition: none; } }

/* ▼ ピラー：スマホは縦積み固定 ▼ */
.rcb-pillars {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.rcb-pillar {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: #faf7f5;
  border: 1px solid #ede8e3;
  border-radius: 12px;
  padding: 14px 16px;
  text-align: left;
  width: 100%;
  box-sizing: border-box;
}
.rcb-pillar-icon { font-size: 22px; line-height: 1; flex-shrink: 0; display: block; }
.rcb-pillar-label { display: block; font-size: 11px; font-weight: 800; color: #9a6a7a; letter-spacing: 0.05em; margin-bottom: 6px; }
.rcb-pillar-text { font-size: 13px; color: #4a5568; line-height: 1.75; margin: 0; }

/* ▼ 720px以上でのみ横並び（Sangoサイドバー対応）▼ */
@media (min-width: 720px) {
  .rcb-lead { text-align: center; }
  .rcb-lead br { display: inline; }
  .rcb-pillars { flex-direction: row; }
  .rcb-pillar {
    flex: 1;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0;
    padding: 16px 14px;
  }
  .rcb-pillar-icon { margin-bottom: 8px; }
  .rcb-pillar-label { margin-bottom: 5px; }
}


/* ============================================================
   【5】LINKカード（女性用・基本）
   ============================================================ */

.cil-wrapper {
  max-width: 100%; margin: 40px 0;
  background: #ffffff; border: 1px solid #f0ece1;
  border-radius: 16px; box-shadow: 0 10px 30px rgba(0,0,0,0.05);
  font-family: 'Helvetica Neue', Arial, 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif;
  position: relative; box-sizing: border-box;
}
.cil-badge {
  position: absolute; top: 0; left: 0;
  background: linear-gradient(135deg, #b07a8a 0%, #c49aaa 100%);
  color: #fff; font-size: 11px; font-weight: 700;
  padding: 6px 14px; border-radius: 0 0 12px 0;
  letter-spacing: 0.05em; z-index: 10;
  box-shadow: 2px 2px 8px rgba(176,122,138,0.25);
}
.cil-inner { padding: 36px 24px 24px; }
.cil-title-area { text-align: center; margin-bottom: 20px; }
.cil-title-en { display: block; font-size: 10px; color: #b07a8a; font-weight: 800; letter-spacing: 0.2em; margin-bottom: 6px; text-transform: uppercase; }
.cil-title {
  font-size: 19px; font-weight: 800; color: #2d3748;
  margin: 0 !important; display: inline-block; position: relative;
  padding: 0 0 12px 0 !important; letter-spacing: 0.05em;
  border: none !important; background: transparent !important;
}
.cil-title::before { content: none !important; }
.cil-title::after {
  content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 40px; height: 3px;
  background: linear-gradient(135deg, #b07a8a 0%, #c49aaa 100%); border-radius: 2px;
}
.cil-desc { font-size: 13px; color: #4a5568; line-height: 1.6; margin: 0 0 24px 0; text-align: center; }
.cil-list { list-style: none !important; padding: 0 !important; margin: 0 !important; display: flex; flex-direction: column; gap: 12px; }
.cil-list li a,
.cil-item {
  display: flex !important; flex-direction: column !important; text-decoration: none !important;
  background: #fdfaf6 !important; border: 1px solid #d8cfc8 !important;
  border-radius: 12px !important; padding: 14px 44px 14px 16px !important;
  transition: all 0.3s ease !important; position: relative !important;
  margin-bottom: 12px !important;
}
.cil-wrapper .cil-item:last-child { margin-bottom: 0 !important; }
.cil-list li a::after,
.cil-item::after {
  content: '' !important; position: absolute !important; right: 18px; top: 50%;
  width: 8px; height: 8px;
  border-top: 2px solid #b8a8b0 !important; border-right: 2px solid #b8a8b0 !important;
  transform: translateY(-50%) rotate(45deg) !important; transition: all 0.2s ease !important;
}
.cil-list li a:hover,
.cil-item:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 16px rgba(0,0,0,0.08) !important;
  border-color: #c49aaa !important;
  background: #ffffff !important;
}
.cil-list li a:hover::after,
.cil-item:hover::after {
  border-color: #c49aaa !important;
  right: 15px;
}
.cil-list li a:active,
.cil-item:active { transform: translateY(1px) !important; background: #f7f2eb !important; }
.cil-catch {
  display: inline-block; font-size: 12px; font-weight: 800; color: #ffffff;
  background: linear-gradient(135deg, #b07a8a 0%, #c49aaa 100%);
  border-radius: 4px; padding: 2px 10px; letter-spacing: 0.08em;
  margin-bottom: 7px; align-self: flex-start;
}
.cil-intent { display: flex; align-items: center; font-size: 11.5px; color: #9a6a7a; font-weight: 700; margin-bottom: 5px; }
.cil-emoji { margin-right: 4px; font-size: 12px; }
.cil-link-text { font-size: 14px; color: #2d3748; font-weight: 700; line-height: 1.45; }


/* ============================================================
   【6】LINKカード（男性用）
   ============================================================ */

.cil-wrapper.cil-mens { border-color: #e8edf5; }
.cil-wrapper.cil-mens .cil-badge {
  background: linear-gradient(135deg, #3d5a80 0%, #5b8ab0 100%);
  box-shadow: 2px 2px 8px rgba(61,90,128,0.3);
}
.cil-wrapper.cil-mens .cil-title-en { color: #5b8ab0; }
.cil-wrapper.cil-mens .cil-title::after { background: linear-gradient(135deg, #3d5a80 0%, #5b8ab0 100%); }
.cil-wrapper.cil-mens .cil-list li a,
.cil-wrapper.cil-mens .cil-item { background: #f7f9fc !important; border-color: #c8d8e8 !important; }
.cil-wrapper.cil-mens .cil-list li a:hover,
.cil-wrapper.cil-mens .cil-item:hover { border-color: #5b8ab0 !important; background: #ffffff !important; }
.cil-wrapper.cil-mens .cil-list li a:hover::after,
.cil-wrapper.cil-mens .cil-item:hover::after { border-color: #5b8ab0 !important; }
.cil-wrapper.cil-mens .cil-list li a:active,
.cil-wrapper.cil-mens .cil-item:active { background: #edf2f7 !important; }
.cil-wrapper.cil-mens .cil-catch { background: linear-gradient(135deg, #3d5a80 0%, #5b8ab0 100%); }
.cil-wrapper.cil-mens .cil-intent { color: #2d6a9f; }


/* LINKカード 共通スマホ対応 */
@media (max-width: 480px) {
  .cil-inner { padding: 32px 16px 20px; }
  .cil-title { font-size: 17px; padding-bottom: 10px !important; }
  .cil-desc { font-size: 12px; margin-bottom: 20px; }
  .cil-list li a { padding: 13px 38px 13px 14px; }
  .cil-catch { font-size: 11px; }
  .cil-link-text { font-size: 13px; }
  .cil-intent { font-size: 10.5px; }
}


/* ============================================================
   【共通】動きを減らす設定（prefers-reduced-motion）
   乗り物酔い・前庭障害・省電力設定のユーザー向けに
   無限ループの装飾アニメーションを停止する
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  /* アコーディオンブロックの装飾アニメを停止 */
  .trend-header::before,
  .trend-title,
  .trend-title::after,
  .trend-sp,
  .acc-hint-arrow { animation: none !important; }

  /* カードのホバー浮き上がり・開閉アニメも抑制 */
  .pick-card, .comp-card,
  .accordion-btn, .accordion-panel,
  .acc-chevron svg { transition: none !important; }
}

/* ===== source: 24750.css ===== */
/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Jul 08 2026 | 12:11:30 */
/* ============================================================
   香LIG SNS検証カードCSS v2.0
   ファイル名: sns-card.css
   ============================================================

   ■ v2.0 変更点（ranking.css と同様の画像・CTA改善）

     IMAGE-FIX-1: .sns-img-box を 68×68 → 96×96px に拡大
     IMAGE-FIX-2: .sns-img-col の幅を 88px → 118px に拡張
     CTA-FIX-1  : .sns-cta ボタンを ranking.css と同デザインに統一

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

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

/* ── CSS変数定義 ──────────────────────────────── */
.sns-section {
  --rose:        #b87888;
  --rose-mid:    #c99aa8;
  --rose-muted:  #dbbac4;
  --bg-page:     #f8f5f6;
  --bg-card:     #ffffff;
  --bg-pale:     #faf5f7;
  --bg-muted:    #f4f0f3;
  --text-dark:   #3a3038;
  --text-body:   #5c5260;
  --text-light:  #8a7e8c;
  --border-soft: #ede4e9;
  --border-mid:  #e0d0d8;
  --sns-bg:      #fff8f0;
  --sns-text:    #a07850;
  --check-bg:    #f0f7f0;
  --check-text:  #4a7a4a;
}

/* ── セクション全体 ───────────────────────────── */
.sns-section {
  max-width: 720px;
  margin: 0 auto;
  font-family: 'Hiragino Mincho ProN', 'Yu Mincho', serif;
  color: var(--text-body);
  contain: layout style;
}

/* ── 見出し ───────────────────────────────────── */
.sns-heading { text-align: center; margin-bottom: 20px; }
.sns-heading-sub {
  display: block;
  font-size: 9.5px; font-weight: 700; letter-spacing: .22em;
  color: var(--rose-mid); text-transform: uppercase;
  font-family: 'Helvetica Neue', Arial, sans-serif;
  margin-bottom: 8px;
}
.sns-heading-lead {
  font-size: clamp(14px, 3.5vw, 17px); font-weight: 800;
  color: var(--text-dark); letter-spacing: .04em; line-height: 1.6;
  margin: 0;
}

/* ── リード文 ─────────────────────────────────── */
.sns-lead {
  font-size: 13px; color: var(--text-body); line-height: 2;
  margin-bottom: 22px;
  padding: 14px 16px;
  background: var(--bg-pale);
  border-radius: 10px;
  border-left: 2.5px solid var(--rose-muted);
}

/* ── カードリスト ─────────────────────────────── */
.sns-list {
  display: flex; flex-direction: column; gap: 14px;
  margin-bottom: 8px;
}

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

/* ── 上段レイアウト（バッジ・画像・テキスト） ─── */
.sns-card-top { display: flex; flex-direction: row; }

/* 左：番号バッジ */
.sns-badge-col {
  flex-shrink: 0; width: 52px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: flex-start;
  padding: 16px 0 12px;
  background: var(--bg-pale);
  border-right: 1px solid var(--border-soft);
}
.sns-num {
  font-size: 20px; font-weight: 800; line-height: 1;
  color: var(--rose);
  font-family: 'Helvetica Neue', Arial, sans-serif;
}
.sns-num-label {
  font-size: 8px; font-weight: 700; letter-spacing: .08em;
  color: var(--rose-mid);
  font-family: 'Helvetica Neue', Arial, sans-serif;
  margin-top: 2px;
}

/* 中：画像列 */
/*
 * ★ IMAGE-FIX-2：幅を 88px → 118px に拡張
 */
.sns-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 に拡大
 * ranking.css と同様の理由・対処方法
 */
.sns-img-box {
  position: relative;
  width: 96px;
  height: 96px;
  border-radius: 12px;
  overflow: hidden;
  background: var(--bg-muted);
  border: 1px solid var(--border-soft);
  flex-shrink: 0;
  aspect-ratio: 1 / 1; /* CLS防止 */
}
.sns-img-box img {
  width: 100%; height: 100%; object-fit: cover;
  display: block;
  transition: opacity .3s ease;
}
.sns-affil-link {
  position: absolute; inset: 0; z-index: 2; display: block;
}

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

/* SNSバズタグ */
.sns-buzz-tag {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 9.5px; font-weight: 700;
  padding: 2px 8px; border-radius: 20px;
  font-family: 'Helvetica Neue', Arial, sans-serif;
  letter-spacing: .03em;
  background: #fff0e8; color: #c07030;
  border: 1px solid #f0d8b8;
  margin-top: 2px;
  width: -webkit-fit-content;
  width: fit-content;
}

/* ── CTA（詳しく調べてみる）ボタン ───────────────
 *
 * ★ CTA-FIX-1：ranking.css と同じデザインに統一
 *   カード下部の横断ラインに配置し、右寄せで目立つように
 * ───────────────────────────────────────────── */
.sns-cta {
  border-top: 1px solid var(--border-soft);
  padding: 10px 14px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  background: var(--bg-pale);
}
.sns-cta a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--rose);
  text-decoration: none;
  font-family: 'Helvetica Neue', Arial, sans-serif;
  letter-spacing: .04em;
  background: #ffffff;
  border: 1.5px solid var(--rose-muted);
  border-radius: 20px;
  padding: 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) {
  .sns-cta a:hover {
    color: #9a5868;
    border-color: var(--rose);
    background: #fff5f7;
    box-shadow: 0 3px 10px rgba(184,120,136,.16);
  }
}
.sns-cta a:active { transform: scale(0.97); }
.cta-arrow {
  font-style: normal; font-size: 11px;
  display: inline-block;
}

/* ── 下段：SNS評判 vs 検証結果 ───────────────── */
.sns-card-bottom { border-top: 1px solid var(--border-soft); }
.sns-verdict-row { display: flex; flex-direction: row; }

/* SNS評判 */
.sns-col-sns {
  flex: 1; padding: 12px 14px;
  background: var(--sns-bg);
  border-right: 1px solid var(--border-soft);
  display: flex; flex-direction: column; gap: 5px;
  min-width: 0;
}
.sns-col-label {
  display: flex; align-items: center; gap: 4px;
  font-size: 9px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase;
  font-family: 'Helvetica Neue', Arial, sans-serif;
  color: var(--sns-text);
  margin-bottom: 1px;
}
.sns-col-text { font-size: 12px; color: var(--text-body); line-height: 1.7; }

/* 検証結果 */
.sns-col-check {
  flex: 1; padding: 12px 14px;
  background: var(--check-bg);
  display: flex; flex-direction: column; gap: 5px;
  min-width: 0;
}
.check-col-label {
  display: flex; align-items: center; gap: 4px;
  font-size: 9px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase;
  font-family: 'Helvetica Neue', Arial, sans-serif;
  color: var(--check-text);
  margin-bottom: 1px;
}
.check-col-text { font-size: 12px; color: var(--text-body); line-height: 1.7; }
.check-col-text strong { color: var(--check-text); font-weight: 700; }

/* ── スマホ対応 ───────────────────────────────── */
@media (max-width: 480px) {
  .sns-heading { margin-bottom: 14px; }
  .sns-heading-lead { font-size: 15px; line-height: 1.65; }
  .sns-lead { font-size: 12.5px; line-height: 1.9; padding: 12px 13px; margin-bottom: 16px; }

  .sns-badge-col { width: 40px; }
  .sns-num { font-size: 16px; }
  .sns-num-label { font-size: 7.5px; }

  /* ★ スマホ：ranking.css と同様に 80px に縮小 */
  .sns-img-col { width: 100px; padding: 12px 8px; padding-top: 14px; }
  .sns-img-box { width: 80px; height: 80px; }

  .sns-info-col { padding: 11px 10px 10px 3px; gap: 3px; }
  .sns-brand { font-size: 9px; }
  .sns-name { font-size: 12px; }
  .sns-buzz-tag { font-size: 9px; padding: 2px 7px; white-space: normal; word-break: break-all; }

  /* CTA：スマホ */
  .sns-cta { padding: 8px 12px; }
  .sns-cta a { font-size: 11.5px; padding: 7px 14px; }

  /* SNS評判 vs 検証結果：スマホでは縦並び */
  .sns-verdict-row { flex-direction: column; }
  .sns-col-sns { border-right: none; border-bottom: 1px solid var(--border-soft); padding: 10px 13px; }
  .sns-col-check { padding: 10px 13px; }
  .sns-col-label, .check-col-label { font-size: 8.5px; }
  .sns-col-text, .check-col-text { font-size: 12px; line-height: 1.7; }
}

/* ── prefers-reduced-motion ───────────────────── */
@media (prefers-reduced-motion: reduce) {
  .sns-card { transition: none; will-change: auto; }
  .sns-card:hover { transform: none; }
  .sns-img-box img { transition: none; }
  .sns-cta a { transition: none; }
  .cta-arrow { transition: none; }
}

/* ===== source: 24743.css ===== */
/******* 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; }
}

/* ===== source: 24384.css ===== */
/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Jul 08 2026 | 12:12:15 */
/* ==============================================
   ウィジェット目次（PC・スマホ共通）：Apple Style (Gentle Edition)
   修正：
     BUG-1: content を span 要素から削除（擬似要素にのみ有効なプロパティ）
     BUG-2: ドット生成を .navigator__indicator に一本化（::before との二重表示を解消）
     BUG-3: ベンダープレフィックスの記述順を修正（-webkit- を先に）
     BUG-4: transition: all → 具体的なプロパティ名に変更（パフォーマンス改善）
     BUG-5: .navigator__indicator に transition を追加（アクティブ時がスムーズに）
     BUG-6: prefers-reduced-motion 対応を追加
   ============================================== */

/* --- 1. 全体の枠（優しく・目立たないように） --- */
.sgb-toc-menu,
.widget_sango_toc {
    background: rgba(255, 255, 255, 0.7) !important;
    /* ★修正BUG-3：ベンダープレフィックスを先に書く（慣習上の正しい順序） */
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(0, 0, 0, 0.04) !important;
    border-radius: 16px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02) !important;
    margin: 0 0 30px 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    /*
     * ★追加：backdrop-filter はGPU合成が必要。
     * will-change で事前にレイヤー確保し、初回描画時のチラつきを防止。
     */
    will-change: transform;
}

/* --- 2. タイトル（インライン色指定を強制無効化） --- */
.sgb-toc-menu__title,
.widgettitle {
    background: transparent !important;
    color: #1d1d1f !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    padding: 16px 20px !important;
    margin: 0 !important;
    border: none !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.04) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    text-align: left !important;
}

/* もともと入っているリストアイコンを消す */
.sgb-toc-menu__title i,
.widgettitle i {
    display: none !important;
}

/* 📕アイコンを追加 */
.sgb-toc-menu__title::before,
.widgettitle::before {
    content: '📕' !important;
    font-size: 16px !important;
    margin-right: 10px !important;
    background: #F2F2F7 !important;
    padding: 6px !important;
    border-radius: 8px !important;
    line-height: 1 !important;
    display: inline-block !important;
}

/* --- 3. リスト全体の調整 --- */
.toc_widget_list {
    padding: 12px 12px 20px 12px !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* 過去の装飾をリセット */
.toc_widget_list::before,
.toc_widget_list::after,
.toc_widget_list a::after,
.toc_widget_list a::before,
.navigator-child .navigator__indicator::before,
.navigator-child .navigator__indicator::after {
    display: none !important;
}

/* --- 4. リンク行のベーススタイル --- */
.toc_widget_list a,
.navigator-child {
    display: flex !important;
    align-items: flex-start !important;
    text-decoration: none !important;
    padding: 8px 12px !important;
    border-radius: 8px !important;
    /*
     * ★修正BUG-4：transition: all → 変化する2プロパティのみに限定。
     * 「all」はすべてのCSSプロパティを毎フレーム監視するため
     * スクロール中のパフォーマンスを圧迫する。
     */
    transition: background 0.2s ease !important;
}

.navigator__title {
    color: #6e6e73 !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    line-height: 1.6 !important;
    /* ★修正BUG-4：colorの遷移はここで管理 */
    transition: color 0.2s ease !important;
}

/* PC用ホバーアクション（タッチデバイスでは無視） */
@media (hover: hover) and (pointer: fine) {
    .toc_widget_list a:hover {
        background: rgba(0, 0, 0, 0.02) !important;
    }
    .toc_widget_list a:hover .navigator__title {
        color: #1d1d1f !important;
    }
}

/* --- 5. ドットインジケーター --- */
/*
 * ★修正BUG-1 & BUG-2：
 * 元コードでは以下の2箇所でドットを定義していた:
 *   (A) .toc_widget_list > li > a::before  ← 擬似要素のドット
 *   (B) .navigator-child .navigator__indicator ← スパン要素のドット
 *
 * SANGOテーマは <a><span class="navigator__indicator"></span><span class="navigator__title">...</span></a>
 * という構造のため、AとBが同時に描画され「ドット2個」になっていた。
 *
 * また「content: ''」は span 等のリアル要素には効かない（擬似要素専用）。
 *
 * 修正：
 * - ::before 擬似要素によるドット生成を廃止（セクション3のリセットで非表示済み）
 * - .navigator__indicator スパン要素のみにドットを設定
 * - content プロパティを削除（スパンには不要）
 */
.navigator__indicator {
    display: inline-block !important;
    width: 6px !important;
    min-width: 6px !important;
    height: 6px !important;
    min-height: 6px !important;
    background: #ff2d55 !important;
    border-radius: 50% !important;
    border: none !important;
    margin-right: 10px !important;
    margin-top: 6px !important;
    flex-shrink: 0 !important;
    opacity: 0.6 !important;
    /*
     * ★修正BUG-5：transform と box-shadow の遷移を子要素自身に定義。
     * transition は親要素から継承されないため、ここに書かないと
     * アクティブ状態への切り替えが瞬時（カクつく）になる。
     */
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.2s ease,
                opacity 0.2s ease !important;
    /* GPU合成ヒント：transformアニメーション対象のためレイヤー昇格 */
    will-change: transform !important;
}

/* 子階層 */
.toc_widget_list ul ul,
.toc_widget_list li li {
    margin-left: 14px !important;
}
.toc_widget_list ul ul a,
.toc_widget_list li li .navigator-child {
    padding: 6px 12px !important;
}
.toc_widget_list li li .navigator__title {
    font-size: 12px !important;
}
.toc_widget_list li li .navigator__indicator {
    background: linear-gradient(135deg, #007aff, #ff2d55) !important;
    width: 4px !important;
    min-width: 4px !important;
    height: 4px !important;
    min-height: 4px !important;
    margin-right: 8px !important;
    margin-top: 7px !important;
    opacity: 0.5 !important;
}

/* --- 6. 今読んでいるセクション（アクティブ） --- */
.toc_widget_list .is-active,
.toc_widget_list .active,
.toc_widget_list li.active,
.toc_widget_list li.is-active {
    background: transparent !important;
}

.toc_widget_list a.is-active,
.toc_widget_list a.active,
.navigator-child.is-active {
    background: rgba(255, 45, 85, 0.04) !important;
}

.is-active .navigator__title,
.active .navigator__title {
    color: #ff2d55 !important;
    font-weight: 600 !important;
}

/* インジケーターのアクティブ状態（transition は .navigator__indicator 自身に定義済み） */
.is-active .navigator__indicator,
.toc_widget_list a.active .navigator__indicator {
    opacity: 1 !important;
    box-shadow: 0 0 0 4px rgba(255, 45, 85, 0.15) !important;
    transform: scale(1.2) !important;
}

/* --- 7. prefers-reduced-motion 対応 --- */
/*
 * ★修正BUG-6：「動きを減らす」設定（iOS省電力モード等）を尊重。
 * すべての transition と transform アニメーションを無効化。
 */
@media (prefers-reduced-motion: reduce) {
    .toc_widget_list a,
    .navigator-child,
    .navigator__title,
    .navigator__indicator {
        transition: none !important;
    }
    .is-active .navigator__indicator,
    .toc_widget_list a.active .navigator__indicator {
        transform: none !important;
    }
}

/* --- 8. スマホ表示時の微調整 --- */
@media screen and (max-width: 480px) {
    .sgb-toc-menu,
    .widget_sango_toc {
        margin: 0 0 20px 0 !important;
        border-radius: 12px !important;
    }
}

/* ===== source: 24317.css ===== */
/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Jul 08 2026 | 12:12:25 */
/* ==============================================
   メイン目次デザイン：Apple Style (Gradient Edition)
   修正：
     BUG-1: overflow: hidden → clip に変更（position: sticky が機能しなかった問題を解消）
     BUG-2: .toc_title に will-change を追加（backdrop-filter / sticky の描画改善）
     BUG-3: -webkit-overflow-scrolling: touch を削除（iOS13以降は不要・非推奨）
     BUG-4: prefers-reduced-motion 対応を追加
     BUG-5: backdrop-filter の背景色を0.98→0.90に修正（0.98ではblurが視覚的に出ない）
     BUG-6: :focus-visible によるキーボードフォーカスリングを追加
   ============================================== */

/* 1. 外枠（カード全体） */
#toc_container {
    background: rgba(255, 255, 255, 0.98) !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
    border-radius: 20px !important;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.06) !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: 600px !important;
    margin: 40px auto 60px auto !important;
    /*
     * ★修正BUG-1（最重要）：overflow: hidden → overflow: clip に変更
     *
     * overflow: hidden はブラウザ仕様上「スクロールコンテナ」を生成する。
     * スクロールコンテナの子孫は position: sticky が機能しなくなるため、
     * .toc_title のスティッキーヘッダーが一切動いていなかった。
     *
     * overflow: clip は「はみ出しをクリップする」だけで
     * スクロールコンテナを生成しないため、sticky が正常に動作する。
     *
     * フォールバック（古いブラウザ向け）:
     *   overflow: hidden を先に書き、overflow: clip を後に書くことで
     *   clip 未対応ブラウザは hidden にフォールバックする。
     *   その場合 sticky は機能しないが、表示崩れは起きない。
     */
    overflow: hidden !important;  /* フォールバック（Chrome<90, Safari<16） */
    overflow: clip !important;    /* モダンブラウザ用（sticky が有効になる） */
    display: block !important;
    position: relative !important;
}

/* 2. ヘッダーエリア（スティッキーヘッダー） */
.toc_title {
    position: sticky !important;
    top: 0 !important;
    z-index: 10 !important;
    /*
     * ★修正BUG-5：0.98（ほぼ完全不透明）→ 0.90 に変更。
     * backdrop-filter のぼかしは背景が透けて初めて視覚的効果が出る。
     * 0.98では透明度が2%しかなく、ぼかしがほとんど見えていなかった。
     */
    background: rgba(255, 255, 255, 0.90) !important;
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding: 20px 24px !important;
    margin: 0 !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
    /*
     * ★修正BUG-2：will-change を追加。
     * backdrop-filter はGPU合成が必要。
     * さらに position: sticky の要素は合成レイヤーに昇格させると
     * スクロール追従のジャンクを防止できる。
     */
    will-change: transform;
}

/* 親要素の擬似要素を無効化 */
.toc_title::before,
.toc_title::after {
    content: none !important;
    display: none !important;
}

/* アイコンのコンテナ */
.toc_title .toc-icon-wrap {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 48px !important;
    height: 48px !important;
    background: #F2F2F7 !important;
    border-radius: 12px !important;
    margin-right: 16px !important;
    flex-shrink: 0 !important;
    font-size: 0 !important;
    color: transparent !important;
}

/* プラグイン標準のSVGや画像アイコンを完全に消す */
.toc_title .toc-icon-wrap svg,
.toc_title .toc-icon-wrap i,
.toc_title .toc-icon-wrap img {
    display: none !important;
}

/* CSSで作るApple風アイコン */
.toc_title .toc-icon-wrap::before {
    content: '📕' !important;
    font-size: 24px !important;
    line-height: 1 !important;
    color: initial !important;
    background: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* テキストラッパー */
.toc_title .toc-text-wrap {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
}

/* メインタイトル */
.toc_title .toc-main-title {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: #1d1d1f !important;
    line-height: 1.2 !important;
    margin: 0 !important;
}

/* サブテキスト */
.toc_title .toc-sub-text {
    font-size: 12px !important;
    font-weight: 400 !important;
    color: #86868b !important;
    line-height: 1.4 !important;
    margin-top: 4px !important;
}

/* 3. リストエリア */
.toc_list {
    padding: 12px 0 !important;
    margin: 0 !important;
    max-height: 65vh !important;
    overflow-y: auto !important;
    /*
     * ★修正BUG-3：-webkit-overflow-scrolling: touch を削除。
     * iOS 13以降はモメンタムスクロールがデフォルト有効のため不要。
     * MDN公式も非推奨と明記しており、将来的に副作用が出る可能性がある。
     */
}

/* スタイルリセット */
.toc_list li, .toc_list ol, .toc_list ul,
.toc_list ol li, .toc_list ul li {
    list-style: none !important;
    background: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
}

/* 4. 親見出し（H2） */
.toc_list > li > a {
    display: flex !important;
    align-items: center !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #1d1d1f !important;
    padding: 14px 24px !important;
    text-decoration: none !important;
    line-height: 1.5 !important;
    transition: background 0.2s ease !important;
}
.toc_list > li > a:active {
    background: rgba(0, 0, 0, 0.05) !important;
}

/* ★修正BUG-6：キーボードフォーカス時の視覚的リング（Tab操作対応） */
.toc_list > li > a:focus-visible,
.toc_list ol li a:focus-visible,
.toc_list ul li a:focus-visible {
    outline: 2px solid #ff2d55 !important;
    outline-offset: -2px !important;
    border-radius: 6px !important;
    background: rgba(255, 45, 85, 0.04) !important;
}

/* H2の赤丸 */
.toc_list > li > a::before {
    content: '' !important;
    display: inline-block !important;
    width: 8px !important;
    height: 8px !important;
    background-color: #ff2d55 !important;
    border-radius: 50% !important;
    margin-right: 12px !important;
    flex-shrink: 0 !important;
}

/* 5. 子見出し（H3） */
.toc_list ol,
.toc_list ul {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* H3の区切り線 */
.toc_list ol li,
.toc_list ul li {
    border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
    margin-left: 28px !important;
}
.toc_list ol li:last-child,
.toc_list ul li:last-child {
    border-bottom: none !important;
}

/* H3リンク */
.toc_list ol li a,
.toc_list ul li a {
    display: block !important;
    font-size: 14px !important;
    color: #424245 !important;
    padding: 12px 16px 12px 24px !important;
    text-decoration: none !important;
    position: relative !important;
}
.toc_list ol li a:active,
.toc_list ul li a:active {
    background: rgba(0, 0, 0, 0.03) !important;
}

/* H3の点（青と赤のグラデーション） */
.toc_list ol li a::before,
.toc_list ul li a::before {
    content: '' !important;
    position: absolute !important;
    left: 8px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 4px !important;
    height: 4px !important;
    background: linear-gradient(135deg, #007aff, #ff2d55) !important;
    border-radius: 50% !important;
}

/* 6. prefers-reduced-motion 対応 */
/*
 * ★修正BUG-4：「動きを減らす」設定を尊重。
 * transitionを無効化し、will-changeも解除（不要なレイヤー確保を防ぐ）。
 */
@media (prefers-reduced-motion: reduce) {
    .toc_list > li > a,
    .toc_list ol li a,
    .toc_list ul li a {
        transition: none !important;
    }
    .toc_title {
        will-change: auto !important;
    }
}

/* 7. スマホ微調整 */
@media screen and (max-width: 768px) {
    #toc_container {
        margin: 30px 16px !important;
        width: auto !important;
    }
    .toc_title {
        padding: 16px 20px !important;
    }
    .toc_list > li > a {
        padding: 14px 20px !important;
        font-size: 16px !important;
    }
    .toc_list ol li,
    .toc_list ul li {
        margin-left: 24px !important;
    }
    .toc_list ol li a,
    .toc_list ul li a {
        padding-left: 20px !important;
        font-size: 14px !important;
    }
}

/* ===== source: 24311.css ===== */
/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Jul 08 2026 | 12:12:36 */
/* =======================================================
   Rinker 統合カスタマイズ (完全版：マイクロコピー動的置換 ＋ ABテスト対応)
   修正：background-clip標準プロパティ追加 / will-change / reduced-motion / @keyframes pulse追加
   ======================================================= */

/* クレジット表記を非表示 */
.credit-box { display: none !important; }

/* --- 1. ベース & 画像 & タイトル --- */
div.yyi-rinker-contents {
    margin: 40px 0 !important;
    display: flex !important;
    justify-content: center !important;
}
div.yyi-rinker-box {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 480px !important;
    background: #ffffff !important;
    border: 1px solid #f0f0f5 !important;
    border-radius: 20px !important;
    box-shadow: 0 12px 36px rgba(0,0,0,0.06) !important;
    padding: 32px 24px !important;
    box-sizing: border-box !important;
    /* 描画コスト削減 */
    contain: layout style !important;
}

div.yyi-rinker-image {
    width: 100% !important;
    margin: 0 0 24px 0 !important;
    display: flex !important;
    justify-content: center !important;
}
div.yyi-rinker-image img {
    max-width: 100% !important;
    max-height: 200px !important;
    object-fit: contain !important;
    box-shadow: none !important;
}
.yyi-rinker-images-arrow,
.yyi-rinker-images-arrow-left,
.yyi-rinker-images-arrow-right,
.yyi-rinker-slider-prev,
.yyi-rinker-slider-next,
.yyi-rinker-slider-dots,
div.yyi-rinker-detail { display: none !important; }

div.yyi-rinker-info {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}
div.yyi-rinker-title {
    margin-bottom: 24px !important;
    text-align: center !important;
    width: 100% !important;
}
div.yyi-rinker-title a {
    font-size: 18px !important;
    font-weight: 700 !important;
    line-height: 1.5 !important;
    text-decoration: none !important;
    background: linear-gradient(90deg, #1A56DB 0%, #9333EA 50%, #EA580C 100%) !important;
    -webkit-background-clip: text !important;
    /* ★修正：Firefoxで文字が消える問題を解消（標準プロパティを追加） */
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    /* Firefox用フォールバック（-webkit-text-fill-colorを解釈しないため） */
    color: transparent !important;
    display: inline-block !important;
}

/* --- 2. 在庫ありバッジ --- */
.rinker-stock-badge {
    display: inline-flex !important;
    align-items: center !important;
    background: #f0fdf4 !important;
    color: #16a34a !important;
    border: 1px solid #bbf7d0 !important;
    padding: 4px 14px !important;
    border-radius: 20px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    margin: -12px auto 20px auto !important;
    letter-spacing: 0.05em !important;
}
.rinker-stock-badge i {
    margin-right: 6px !important;
    font-size: 12px !important;
}

/* --- 3. ソーシャルプルーフ（〇人が閲覧中 ＆ ハイライト装飾） --- */
.yyi-rinker-social-proof {
    display: block !important;
    background: #fffafa !important;
    border: 1px solid #ffe4e6 !important;
    border-radius: 12px !important;
    padding: 20px 16px !important;
    margin: 0 0 24px 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    box-shadow: inset 0 2px 10px rgba(225, 29, 72, 0.02) !important;
}
.social-proof-stats {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #111827 !important;
    margin-bottom: 16px !important;
}
.live-pulse {
    display: block !important;
    width: 10px !important;
    height: 10px !important;
    background-color: #e11d48 !important;
    border-radius: 50% !important;
    /* ★修正：GPUレイヤーに昇格してアニメーションを滑らかに */
    will-change: transform !important;
    animation: live-ping 2s cubic-bezier(0, 0, 0.2, 1) infinite !important;
}
@keyframes live-ping {
    0%   { transform: scale(0.95); box-shadow: 0 0 0 0   rgba(225, 29, 72, 0.7); }
    70%  { transform: scale(1);    box-shadow: 0 0 0 8px rgba(225, 29, 72, 0); }
    100% { transform: scale(0.95); box-shadow: 0 0 0 0   rgba(225, 29, 72, 0); }
}
/* ★修正：「動きを減らす」設定（iOS省電力モード等）では点滅を止める */
@media (prefers-reduced-motion: reduce) {
    .live-pulse { animation: none !important; opacity: 0.7 !important; }
}

.social-proof-number {
    color: #ffffff !important;
    background: #e11d48 !important;
    font-weight: 800 !important;
    font-size: 16px !important;
    padding: 3px 10px !important;
    border-radius: 6px !important;
    margin: 0 4px !important;
    box-shadow: 0 2px 6px rgba(225, 29, 72, 0.25) !important;
    display: inline-block !important;
}
.social-proof-message {
    background: #ffffff !important;
    border: 1px dashed #fecdd3 !important;
    border-radius: 8px !important;
    padding: 14px 12px !important;
    font-size: 13.5px !important;
    color: #374151 !important;
    text-align: center !important;
    line-height: 1.6 !important;
}
.sp-highlight {
    color: #be123c !important;
    font-weight: 800 !important;
    background: linear-gradient(transparent 60%, #ffe4e6 60%) !important;
    padding: 0 2px !important;
    display: inline !important;
}

/* --- 4. ちぐさのチャットプロモ枠 --- */
.rinker-promo-chat {
    display: flex !important;
    align-items: flex-start !important;
    gap: 12px !important;
    width: 100% !important;
    margin: 0 0 20px 0 !important;
    padding: 16px !important;
    background: #f8fafc !important;
    border-radius: 12px !important;
    box-sizing: border-box !important;
    border: 1px dashed #cbd5e1 !important;
}
.chat-avatar {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    flex-shrink: 0 !important;
    width: 50px !important;
}
.chat-avatar img {
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1) !important;
    border: 2px solid #ffffff !important;
}
.chat-name {
    font-size: 10px !important;
    color: #64748b !important;
    margin-top: 6px !important;
    font-weight: 700 !important;
}
.chat-bubble {
    position: relative !important;
    background: #ffffff !important;
    padding: 14px 16px !important;
    border-radius: 0 12px 12px 12px !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04) !important;
    border: 1px solid #e2e8f0 !important;
    font-size: 13px !important;
    color: #334155 !important;
    line-height: 1.6 !important;
    font-weight: 600 !important;
    width: 100% !important;
}
/*
 * ★修正：before の border-color をCSS変数に変更。
 * 元コードの #ffffff 固定では吹き出し三角形がダークモードで白くなる。
 * ただしこのサイトがライトモード固定であれば #ffffff のままでも可。
 */
.chat-bubble::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -8px !important;
    width: 0 !important;
    height: 0 !important;
    border-style: solid !important;
    border-width: 0 8px 10px 0 !important;
    border-color: transparent #ffffff transparent transparent !important;
}
.chat-bubble .highlight {
    color: #db2777 !important;
    background: linear-gradient(transparent 60%, #fbcfe8 60%) !important;
    padding: 0 2px !important;
    display: inline !important;
}

/* --- 5. ボタンとマイクロコピー --- */
ul.yyi-rinker-links {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}
ul.yyi-rinker-links li {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

/* SANGOのデフォルトマイクロコピーを強制非表示（JSで生成したものだけを表示） */
ul.yyi-rinker-links li > span:not(.kaolig-micro-copy),
ul.yyi-rinker-links li > div:not(.kaolig-micro-copy) { display: none !important; }

/* JS生成のマイクロコピー */
.kaolig-micro-copy {
    display: block !important;
    font-size: 11.5px !important;
    font-weight: 800 !important;
    margin-bottom: 6px !important;
    letter-spacing: 0.05em !important;
    text-align: center !important;
    transition: opacity 0.2s ease !important;
    opacity: 0.9 !important;
}
.micro-amazon  { color: #d97706 !important; }
.micro-rakuten { color: #be123c !important; }
.micro-yahoo   { color: #0369a1 !important; }

/* ボタン本体 */
ul.yyi-rinker-links li a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 54px !important;
    border-radius: 10px !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    color: #fff !important;
    text-decoration: none !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.08) !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease !important;
    position: relative !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    z-index: 1 !important;
    /* ★追加：ホバーアニメーション用にGPUレイヤーへ */
    will-change: transform !important;
}
li.amazonlink a  { background: linear-gradient(135deg, #FF9900, #FFB84D) !important; }
li.rakutenlink a { background: linear-gradient(135deg, #BF0000, #E60000) !important; }
li.yahoolink a   { background: linear-gradient(135deg, #0073C6, #009AD6) !important; }
ul.yyi-rinker-links li a::before,
ul.yyi-rinker-links li a::after {
    display: none !important;
    content: none !important;
    animation: none !important;
}

/* ホバー & アクティブ（マウス操作のデバイスのみ） */
@media (hover: hover) and (pointer: fine) {
    ul.yyi-rinker-links li:hover a {
        transform: translateY(-2px) !important;
        box-shadow: 0 6px 16px rgba(0,0,0,0.12) !important;
        opacity: 0.95 !important;
    }
    ul.yyi-rinker-links li:hover .kaolig-micro-copy { opacity: 1 !important; }
}
ul.yyi-rinker-links li:active a {
    transform: translateY(1px) !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
    transition: transform 0.05s, box-shadow 0.05s !important;
}

/* ★修正：テストモードバッジの @keyframes pulse が元コードに未定義だった */
@keyframes pulse {
    0%, 100% { box-shadow: 0 4px 12px rgba(219, 39, 119, 0.4); }
    50%       { box-shadow: 0 4px 20px rgba(219, 39, 119, 0.8); }
}
@media (prefers-reduced-motion: reduce) {
    @keyframes pulse {
        0%, 100% { opacity: 1; }
    }
}

/* --- 6. スマホ用レスポンシブ --- */
@media screen and (max-width: 600px) {
    div.yyi-rinker-box        { padding: 24px 16px !important; border-radius: 16px !important; }
    div.yyi-rinker-title a    { font-size: 16px !important; }
    .yyi-rinker-social-proof  { padding: 16px 12px !important; margin: 0 0 20px 0 !important; }
    .social-proof-stats       { font-size: 14px !important; gap: 6px !important; }
    .social-proof-number      { font-size: 15px !important; }
    .social-proof-message     { font-size: 13px !important; padding: 12px 10px !important; }
    .rinker-promo-chat        { padding: 12px !important; gap: 8px !important; margin-bottom: 16px !important; }
    .chat-bubble              { font-size: 12px !important; padding: 12px !important; }
    .chat-avatar              { width: 44px !important; }
    .chat-avatar img          { width: 38px !important; height: 38px !important; }
    ul.yyi-rinker-links li a  { height: 50px !important; font-size: 14px !important; }
    .kaolig-micro-copy        { font-size: 10px !important; }
}

/* ===== source: 21857.css ===== */
/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Jul 08 2026 | 12:12:46 */
/* ==============================================
   導入メッセージ：Apple Notification Style (Center Layout)
   修正：
     BUG-1: -webkit-backdrop-filter の記述順を修正（webkit 先）
     BUG-2: backdrop-filter に will-change を追加（GPU描画）
     BUG-3: highlight-text に background-clip / color を追加（Firefox対応）
     BUG-4: prefers-reduced-motion 対応を追加
     BUG-5: contain: layout style を追加
   ============================================== */

.apple-message-card {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 16px !important;

    /* ガラスの質感 */
    background: rgba(255, 255, 255, 0.6) !important;
    /*
     * ★修正BUG-1：-webkit- を先、標準プロパティを後に記述（慣習上の正しい順序）
     * ★修正BUG-2：will-change を追加（backdrop-filter の GPU合成ヒント）
     */
    -webkit-backdrop-filter: blur(20px) !important;
    backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(255, 255, 255, 0.5) !important;

    border-radius: 24px !important;
    padding: 32px 24px !important;
    margin-bottom: 30px !important;
    box-shadow: 0 12px 36px rgba(0,0,0,0.04) !important;

    /* ★修正BUG-5：レイアウト再計算をカード内に限定 */
    contain: layout style !important;

    /* ★修正BUG-2：backdrop-filter / transform アニメーション用 GPU レイヤー確保 */
    will-change: transform, opacity !important;

    /* 初期状態（アニメーション開始前） */
    opacity: 0;
    transform: translateY(-10px);

    /* アニメーション */
    animation: fadeSlideDown 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards !important;
}

@keyframes fadeSlideDown {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* アバター画像エリア */
.message-avatar {
    margin-bottom: 4px !important;
}
.message-avatar img {
    width: 80px !important;
    height: 80px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    object-position: center top !important;
    box-shadow: 0 8px 20px rgba(0,0,0,0.1) !important;
    border: 3px solid #ffffff !important;
}

/* テキストエリア */
.message-content {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
}

/* 名前 */
.message-name {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #1d1d1f !important;
    margin-bottom: 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
}

/* 肩書きバッジ */
.message-role {
    font-size: 11px !important;
    background: #e5e5ea !important;
    color: #86868b !important;
    padding: 3px 10px !important;
    border-radius: 20px !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em !important;
}

/* 本文 */
.message-body {
    font-size: 16px !important;
    line-height: 1.8 !important;
    color: #424245 !important;
    margin: 0 !important;
    font-feature-settings: "palt" !important;
}

/* 強調テキスト */
.highlight-text {
    background: linear-gradient(135deg, #a855f7, #ec4899, #f97316) !important;
    -webkit-background-clip: text !important;
    /*
     * ★修正BUG-3：標準プロパティを追加（Firefox で文字が消える問題を解消）。
     * -webkit-text-fill-color は Firefox では解釈されないため
     * color: transparent をフォールバックとして追加。
     */
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
    font-weight: 800 !important;
    font-size: 20px !important;
    letter-spacing: 0.02em !important;
}

/* 補足テキスト */
.sub-text {
    font-size: 12px !important;
    color: #86868b !important;
    display: block !important;
    margin-top: 8px !important;
    font-weight: 500 !important;
}

/*
 * ★修正BUG-4：prefers-reduced-motion 対応。
 * アニメーションを止めて、カードを最初から表示状態にする。
 * opacity: 0 の初期状態が維持されると invisible になるため
 * reduced-motion 時は opacity: 1 / transform: none を強制。
 */
@media (prefers-reduced-motion: reduce) {
    .apple-message-card {
        animation: none !important;
        opacity: 1 !important;
        transform: translateY(0) !important;
        will-change: auto !important;
    }
}

/* スマホ対応 */
@media (max-width: 768px) {
    .apple-message-card {
        padding: 24px 20px !important;
        border-radius: 20px !important;
    }
    .message-avatar img {
        width: 72px !important;
        height: 72px !important;
    }
    .message-name {
        font-size: 14px !important;
        margin-bottom: 12px !important;
    }
    .message-body {
        font-size: 15px !important;
        line-height: 1.6 !important;
    }
    .highlight-text {
        font-size: 18px !important;
    }
}

/* ===== source: 21828.css ===== */
/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Jul 08 2026 | 12:13:23 */
/* --- 香LIG・パフュームカード（アニメーション・完全版） --- */
.apple-perfume-card {
    background: #ffffff;
    border: 1px solid #f0f0f5;
    border-radius: 16px;
    padding: 24px;
    margin: 30px 0;
    font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Yu Gothic", sans-serif;
    /* ふんわり浮き上がる影 */
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04);
    /* カード自体のフェードイン */
    animation: card-fade-in 0.8s ease-out forwards;
}

/* ヘッダーエリア */
.apc-header {
    margin-bottom: 20px;
    border-bottom: 1px solid #f5f5f7;
    padding-bottom: 15px;
}

/* 商品名（洗練されたデザイン） */
.apple-perfume-card .apc-name {
    /* テーマの標準スタイルをリセット */
    border: none !important;
    background: none !important;
    padding: 0 0 12px 0 !important;
    margin: 0 0 16px 0 !important;
    
    /* 文字デザイン */
    font-size: 20px;
    font-weight: 700;
    color: #1d1d1f;
    line-height: 1.4;
    letter-spacing: 0.04em;
    position: relative;
}

/* 商品名の下線（ブランドカラー） */
.apple-perfume-card .apc-name::after {
    content: '';
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 40px;
    height: 3px;
    border-radius: 2px;
    background: linear-gradient(90deg, #a855f7, #ec4899, #f97316);
}

/* タグエリア */
.apc-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.apc-tag {
    display: inline-block;
    padding: 5px 12px;
    background: #fbfbfd;
    color: #424245;
    font-size: 11px;
    font-weight: 600;
    border-radius: 20px;
    border: 1px solid #e5e5ea;
}

/* チャートエリア */
.apc-body { display: flex; flex-direction: column; gap: 14px; }
.apc-meter-row { width: 100%; }

/* ラベルと数値 */
.apc-label-group {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 6px;
    font-size: 13px;
}
.apc-label { font-weight: 600; color: #86868b; }
.apc-value { font-weight: 700; color: #1d1d1f; font-feature-settings: "tnum"; }

/* バーの背景 */
.apc-bar-bg {
    width: 100%;
    height: 8px;
    background: #f0f0f5;
    border-radius: 4px;
    overflow: hidden;
    /* 角丸をきれいに見せるため */
    mask-image: -webkit-radial-gradient(white, black); 
}

/* ★アニメーションするバー本体 */
.apc-bar-fill {
    height: 100%;
    border-radius: 4px;
    /* ブランドカラー */
    background: linear-gradient(90deg, #a855f7, #ec4899, #f97316);
    
    /* --- アニメーション設定 --- */
    /* 最初は幅0（max-widthで制御）からスタート */
    max-width: 0%;
    /* 2秒かけてゆっくり伸びる（Apple風の緩急：最初は速く、最後はゆっくり） */
    animation: flow-bar 2s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* --- キーフレーム（動きの定義） --- */
@keyframes flow-bar {
    0% {
        max-width: 0%;
    }
    100% {
        max-width: 100%; /* インラインスタイルのwidthまで伸びる */
    }
}

@keyframes card-fade-in {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ===== source: 21803.css ===== */
/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Jul 08 2026 | 12:13:33 */
/* =========================================
   Apple風プロフィール（修正完了版）
   ========================================= */

.apple-profile-wrapper {
    font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Yu Gothic", YuGothic, sans-serif;
    color: #1d1d1f;
    margin-bottom: 60px;
}

/* --- プロフィール上部 --- */
.ap-bio-section {
    display: flex;
    gap: 30px;
    padding-bottom: 40px;
    border-bottom: 1px solid #e5e5e5;
    margin-bottom: 40px;
    align-items: flex-start;
}

/* 画像エリアの修正 */
.ap-avatar {
    flex-shrink: 0;
    width: 100px;
    height: 100px;
}
/* get_avatarが出力するimgタグへのスタイル */
.ap-avatar img {
    width: 100% !important;   /* 強制的に枠に合わせる */
    height: 100% !important;
    object-fit: cover;
    border-radius: 50%;       /* 丸くする */
    border: 1px solid #e5e5e5;
    margin: 0;                /* テーマの余白打ち消し */
    padding: 0;
    box-shadow: none;
}

.ap-bio-text {
    flex-grow: 1;
}

.ap-name {
    font-size: 22px;
    font-weight: 700;
    margin: 0 0 12px 0;
    letter-spacing: 0.02em;
    line-height: 1.3;
}

.ap-description {
    font-size: 14px;
    line-height: 1.8;
    color: #424245;
    margin: 0;
}

/* --- 3つの特徴グリッド --- */
.ap-features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.ap-feature-card {
    background: #fbfbfd;
    border: 1px solid #e5e5e5;
    border-radius: 12px;
    padding: 24px 14px; /* 左右の余白を詰めて文字スペース確保 */
    position: relative;
    transition: transform 0.2s;
}
.ap-feature-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

.ap-number {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: #86868b;
    margin-bottom: 12px;
    font-family: SF Pro Display, sans-serif;
}

.ap-text-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* ★見出しの改行を防ぐ設定 */
.ap-feature-title {
    font-size: 15px;       /* 16pxだと溢れるので15pxに */
    white-space: nowrap;   /* ★強制的に1行にする */
    letter-spacing: -0.05em; /* 文字間を少し詰める */
    font-weight: 700;
    margin: 0;
    line-height: 1.4;
    color: #1d1d1f;
}

.ap-feature-subtitle {
    font-size: 12px;
    font-weight: 600;
    color: #424245;
    margin: 0 0 8px 0;
    line-height: 1.5;
}

.ap-feature-desc {
    font-size: 13px;
    line-height: 1.7;
    color: #6e6e73;
    margin: 0;
    text-align: justify;
}

/* スマホ表示 */
@media (max-width: 768px) {
    .ap-bio-section {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .ap-features-grid {
        grid-template-columns: 1fr;
    }
    .ap-feature-title {
        white-space: normal; /* スマホでは改行してOK */
    }
}

/* ===== source: 21799.css ===== */
/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Jul 08 2026 | 12:13:44 */
/* Appleライクなリストデザイン（フォント小さめ・日本語版） */
.apple-list-container {
    border-top: 1px solid #e5e5e5;
    /* Apple製品で使われるシステムフォント優先 */
    font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Yu Gothic", YuGothic, sans-serif;
}

.al-item {
    display: block;
    padding: 14px 0; /* 余白を少し詰めて一覧性を向上 */
    border-bottom: 1px solid #e5e5e5;
    text-decoration: none !important;
    color: #1d1d1f;
    transition: background-color 0.2s ease;
    position: relative;
    padding-right: 20px;
}

.al-item:hover {
    background-color: transparent;
}
.al-item:hover .al-title {
    color: #0071e3; /* Apple Blue */
}
.al-item:hover .al-arrow::after {
    border-color: #0071e3;
}

/* メタ情報（ラベルと日付） */
.al-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 4px;
    font-size: 11px; /* 小さく控えめに */
    letter-spacing: 0.03em;
    color: #86868b;
}

/* ラベルデザイン */
.al-label {
    font-weight: 600;
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 10px;
    line-height: 1.4;
}
/* 執筆（Author） */
.label-auth { 
    color: #86868b; 
    border: 1px solid #c7c7cc;
} 
/* 監修（Supervisor） */
.label-sup { 
    color: #bf4800; /* シックなオレンジ */
    border: 1px solid #bf4800;
    background-color: rgba(191, 72, 0, 0.05); /* ほんのり背景色 */
}

/* 記事タイトル（サイズ変更箇所） */
.al-title {
    font-size: 14px; /* 16pxから14pxへ縮小 */
    font-weight: 400; /* 太さを標準に戻し、スッキリさせる */
    line-height: 1.6;
    margin: 0;
    color: #1d1d1f;
    transition: color 0.2s;
}

/* 矢印（>） */
.al-arrow {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}
.al-arrow::after {
    content: '';
    display: block;
    width: 5px; /* 少し小さく */
    height: 5px;
    border-top: 1px solid #c7c7cc; /* 線を細く */
    border-right: 1px solid #c7c7cc;
    transform: rotate(45deg);
    transition: border-color 0.2s;
}

/* スマホ表示 */
@media (max-width: 768px) {
    .al-title {
        font-size: 13.5px; /* スマホではさらに微調整 */
    }
}

/* ===== source: 17934.css ===== */
/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Jul 08 2026 | 12:14:23 */
/* ==============================================
   読了プログレス：Apple Activity Style (Fixed Layout)
   修正：will-change追加 / prefers-reduced-motion対応 /
         Firefox drop-shadow互換性修正
   ============================================== */

/* 1. コンテナ配置 */
.progress-indicator {
    position: fixed;
    left: 20px;
    bottom: 110px;
    width: 60px;
    height: 60px;
    z-index: 9999;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
    pointer-events: none;
    /*
     * ★修正BUG-5：backdrop-filter（ぼかし）はGPU合成が必要。
     * will-change でブラウザに事前にGPUレイヤー確保を促す。
     * 初回スクロール時のチラつきを防止。
     */
    will-change: transform, opacity;
}
.progress-indicator.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* スマホ用調整 */
@media (max-width: 768px) {
    .progress-indicator {
        left: 16px;
        bottom: 100px;
        width: 52px;
        height: 52px;
    }
}

/* 2. リング本体 */
.progress-circle {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.85);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.08),
        0 2px 8px rgba(0, 0, 0, 0.04),
        inset 0 1px 0 rgba(255, 255, 255, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* 3. SVGリング */
.progress-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
    overflow: visible;
}
.progress-bg {
    fill: none;
    stroke: rgba(0, 0, 0, 0.06);
    stroke-width: 3;
}
.progress-bar {
    fill: none;
    stroke: url(#brand-gradient);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-dasharray: 0 999; /* JS で上書きされる（初期状態を非表示に） */
    transition: stroke-dashoffset 0.1s linear;
    /*
     * ★修正BUG-6：drop-shadowとSVGグラデーションの組み合わせは
     * Firefoxで描画されないことがある（既知の互換性バグ）。
     * 確実に描画させるため filter を削除し、box-shadowで代替。
     * → SVGのcircleにはbox-shadowは効かないため、
     *   親の .progress-circle の box-shadow で光彩を演出している。
     */
    /* filter: drop-shadow(0 0 4px rgba(236, 72, 117, 0.4)); ← 削除 */
}

/* 4. テキスト */
.progress-text {
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: #1d1d1f;
    font-feature-settings: "tnum";
    transition: opacity 0.3s;
    /* スクリーンリーダー向けにaria-live="polite"をHTMLに追加済み */
}
@media (max-width: 768px) {
    .progress-text { font-size: 11px; }
}

/* 5. 完了アニメーション */
.progress-indicator.completed .progress-circle {
    transform: scale(1.1);
    background: #ffffff;
    box-shadow: 0 12px 36px rgba(236, 72, 117, 0.25);
    border-color: rgba(236, 72, 117, 0.2);
}
.progress-indicator.completed .progress-text {
    opacity: 0;
}
.progress-indicator.completed::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 24px;
    height: 24px;
    transform: translate(-50%, -50%) scale(0);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='url(%23grad)' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cdefs%3E%3ClinearGradient id='grad' x1='0%25' y1='0%25' x2='100%25' y2='0%25'%3E%3Cstop offset='0%25' stop-color='%23a855f7'/%3E%3Cstop offset='100%25' stop-color='%23f97316'/%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C%2Fsvg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    animation: pop-check 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes pop-check {
    0%   { transform: translate(-50%, -50%) scale(0);   opacity: 0; }
    50%  { transform: translate(-50%, -50%) scale(1.2); opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(1);   opacity: 1; }
}

/*
 * ★修正BUG-4：prefers-reduced-motion（動きを減らす設定）への対応
 * iOSの省電力モードや「動きを減らす」アクセシビリティ設定が
 * オンのユーザーにはアニメーションを無効化する。
 * pop-checkアニメーションはopacityのみに置き換え。
 */
@media (prefers-reduced-motion: reduce) {
    .progress-indicator {
        transition: opacity 0.3s ease;
        /* transformのアニメーションを除去（スライドインをフェードインに変更） */
    }
    .progress-indicator.is-visible {
        transform: translateY(0); /* 初期値と同じにして動きをなくす */
    }
    .progress-circle {
        transition: none;
    }
    .progress-bar {
        transition: stroke-dashoffset 0.05s linear;
    }
    .progress-text {
        transition: none;
    }
    @keyframes pop-check {
        0%   { opacity: 0; transform: translate(-50%, -50%) scale(1); }
        100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    }
}

/* ===== source: 17925.css ===== */
/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Jul 08 2026 | 12:14:43 */
/* ==============================================
   アンケートフォーム：Apple Style (Final Polish Ver)
   ============================================== */

/* --- 1. フォームコンテナ --- */
.cf7__list {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    background: rgba(255, 255, 255, 0.8) !important; /* 少し透明度を上げる */
    backdrop-filter: blur(25px) saturate(180%) !important; /* ブラーと彩度でApple感 */
    -webkit-backdrop-filter: blur(25px) saturate(180%) !important;
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
    border-radius: 24px !important;
    padding: 32px 24px 40px 24px !important;
    box-shadow: 0 12px 40px rgba(0,0,0,0.08) !important; /* シャドウを少しリッチに */
    margin-bottom: 40px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* --- 記事情報カード --- */
.article-info-card {
    background: rgba(245, 245, 247, 0.6) !important; /* 半透明に */
    border-radius: 16px !important; padding: 16px !important;
    margin-top: 20px !important; margin-bottom: 24px !important;
    display: flex !important; align-items: flex-start !important; gap: 12px !important;
    border: 1px solid rgba(0,0,0,0.05) !important;
}
.info-icon {
    font-size: 20px !important; background: #fff !important; width: 40px !important; height: 40px !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    border-radius: 10px !important; box-shadow: 0 2px 8px rgba(0,0,0,0.05) !important; flex-shrink: 0 !important;
}
.info-content { display: flex !important; flex-direction: column !important; gap: 2px !important; width: 100% !important; overflow: hidden !important; }
.info-label { font-size: 11px !important; font-weight: 600 !important; color: #86868b !important; text-transform: uppercase !important; letter-spacing: 0.05em !important; margin-bottom: 2px !important; }
.info-title { font-size: 14px !important; font-weight: 700 !important; color: #1d1d1f !important; line-height: 1.4 !important; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.info-url { font-size: 11px !important; color: #86868b !important; margin-top: 4px !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; font-family: SF Mono, Menlo, monospace !important; opacity: 0.8 !important; }

/* 入力欄非表示 */
.cf7__list dt:has(+ dd input.wpcf7-text), .cf7__list dd:has(input.wpcf7-text) { display: none !important; }
.qa-wrapper.is-hidden-system-field { display: none !important; }

/* --- 残りバッジ --- */
#remaining-badge {
    position: absolute !important; top: -14px !important; left: 50% !important; transform: translateX(-50%) !important;
    background: linear-gradient(135deg, #FF2D55, #FF375F) !important; color: #fff !important;
    font-size: 13px !important; font-weight: 700 !important; padding: 6px 16px !important; border-radius: 20px !important;
    box-shadow: 0 4px 16px rgba(255, 45, 85, 0.4) !important; z-index: 10 !important;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important; display: flex; align-items: center; gap: 4px;
}
#remaining-badge.is-completed {
    background: linear-gradient(135deg, #34C759, #30B350) !important;
    box-shadow: 0 4px 16px rgba(52, 199, 89, 0.4) !important;
}

/* --- 質問エリア --- */
.cf7__list dt {
    width: 100% !important; padding: 0 !important; margin-top: 24px !important; margin-bottom: 12px !important;
    font-weight: 700 !important; color: #1d1d1f !important; font-size: 17px !important; line-height: 1.4 !important;
    display: flex !important; align-items: center !important; gap: 12px !important; border-bottom: none !important;
}
.cf7__list dt:first-of-type { margin-top: 0 !important; }
.cf7__required { background: #FF2D55 !important; margin: 0 !important; padding: 4px 10px !important; font-size: 11px !important; border-radius: 6px !important; color: #fff !important; font-weight: 700 !important; flex-shrink: 0 !important; line-height: 1 !important; }
.cf7__optional { background: #86868b !important; margin: 0 !important; padding: 4px 10px !important; font-size: 11px !important; border-radius: 6px !important; color: #fff !important; font-weight: 700 !important; flex-shrink: 0 !important; line-height: 1 !important; }
.cf7__list dd {
    width: 100% !important; margin: 0 !important; padding-bottom: 20px !important;
    border-bottom: 1px solid rgba(0,0,0,0.08) !important; /* 点線を実線に */
}
.cf7__list dd:last-of-type { border-bottom: none !important; }

/* --- 選択肢ボタン（修正：背景デザイン改善） --- */
.wpcf7-list-item { display: inline-block !important; margin: 0 10px 12px 0 !important; }
.wpcf7-list-item input { position: absolute !important; opacity: 0 !important; pointer-events: none !important; }
.wpcf7-list-item label {
    display: inline-block !important; padding: 12px 24px !important; background: rgba(255,255,255,0.8) !important;
    border: 1px solid rgba(0,0,0,0.1) !important; border-radius: 50px !important; font-size: 15px !important;
    font-weight: 500 !important; color: #1d1d1f !important; cursor: pointer !important;
    transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1) !important; box-shadow: 0 2px 4px rgba(0,0,0,0.02) !important;
    backdrop-filter: blur(5px);
}
.wpcf7-list-item label:hover {
    background: rgba(255,255,255,1) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08) !important;
}
/* ★選択時：グラデーションとシャドウを洗練 */
.wpcf7-list-item input:checked + span, .wpcf7-list-item input:checked + label { 
    background: linear-gradient(135deg, #a855f7, #ec4899, #f97316) !important; /* ブランドカラー */
    color: #ffffff !important; border-color: transparent !important;
    box-shadow: 0 8px 20px rgba(236, 72, 153, 0.4) !important; /* リッチなシャドウ */
    font-weight: 600 !important;
    transform: translateY(-1px) !important;
}

/* 消滅アニメーション */
.item-vanishing {
    animation: appleFadeOut 0.6s cubic-bezier(0.19, 1, 0.22, 1) forwards !important;
    pointer-events: none !important;
}
@keyframes appleFadeOut {
    0% { transform: scale(1); opacity: 1; max-height: 200px; margin-bottom: 20px; filter: blur(0); }
    100% { transform: scale(0.95) translateY(-20px); opacity: 0; max-height: 0; margin-bottom: 0; padding: 0; filter: blur(10px); }
}
.qa-wrapper { transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1) !important; overflow: hidden !important; }

/* --- 同意エリア --- */
.agree-section {
    display: flex !important; flex-direction: column !important; align-items: center !important;
    width: 100% !important; margin: 30px 0 20px 0 !important;
}

/* --- プライバシーポリシー同意ボタン（修正：洗練されたデザイン） --- */
.wpcf7-acceptance { display: flex !important; justify-content: center !important; width: 100% !important; }

.wpcf7-acceptance label {
    display: inline-flex !important; align-items: center !important; justify-content: center !important;
    padding: 14px 28px !important;
    border: 1px solid rgba(0,0,0,0.1) !important; /* 薄い枠線 */
    border-radius: 50px !important;
    background: rgba(255,255,255,0.8) !important; /* 半透明白 */
    color: #1d1d1f !important; font-size: 15px !important; font-weight: 600 !important;
    cursor: pointer !important; transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    backdrop-filter: blur(5px); box-shadow: 0 2px 4px rgba(0,0,0,0.02) !important;
    min-width: 260px !important;
}
.wpcf7-acceptance label:hover {
    background: rgba(255,255,255,1) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08) !important;
}
.wpcf7-acceptance input { display: none !important; }

/* ★チェック時：ブランドカラーのグラデーション */
.wpcf7-acceptance label:has(input:checked) {
    background: linear-gradient(135deg, #a855f7, #ec4899, #f97316) !important;
    border-color: transparent !important;
    color: #ffffff !important;
    box-shadow: 0 8px 20px rgba(236, 72, 153, 0.4) !important;
}
/* チェックマーク */
.wpcf7-acceptance label:has(input:checked)::before {
    content: '✓' !important; margin-right: 8px !important; font-weight: 800 !important; font-size: 16px !important; color: #ffffff !important;
}

/* --- 送信ボタンエリア（修正：配置ずれを直す） --- */
.cf7__button {
    text-align: center !important;
    margin-top: 10px !important;
    width: 100% !important;
    display: flex !important; /* Flexboxで中央揃え */
    justify-content: center !important;
    align-items: center !important;
}

/* 送信ボタン */
.wpcf7-submit {
    appearance: none !important; border: none !important; width: 100% !important; max-width: 360px !important;
    padding: 18px 0 !important; font-size: 17px !important; font-weight: 700 !important;
    border-radius: 50px !important; cursor: pointer !important;
    background: linear-gradient(135deg, #a855f7, #ec4899, #f97316) !important;
    background-size: 200% auto !important; color: #ffffff !important;
    box-shadow: 0 8px 24px rgba(236, 72, 153, 0.4) !important;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    pointer-events: auto !important; opacity: 1 !important;
}
.wpcf7-submit:hover {
    transform: translateY(-2px) scale(1.02) !important;
    box-shadow: 0 12px 32px rgba(236, 72, 153, 0.5) !important;
}

/* --- ★送信後メッセージ（修正：洗練されたデザイン） --- */
div.wpcf7-response-output {
    border: none !important; /* デフォルトの枠線を消す */
    background: rgba(255, 255, 255, 0.9) !important; /* 半透明白背景 */
    backdrop-filter: blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
    border-radius: 24px !important;
    padding: 30px !important;
    margin: 20px 0 !important;
    box-shadow: 0 12px 40px rgba(0,0,0,0.1) !important;
    text-align: center !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    color: #1d1d1f !important;
    line-height: 1.6 !important;
    
    /* アニメーション */
    animation: fadeUp 0.6s cubic-bezier(0.19, 1, 0.22, 1) forwards !important;
    opacity: 0;
    transform: translateY(20px);
}

/* 成功時のスタイル */
div.wpcf7-mail-sent-ok {
    border: 1px solid rgba(52, 199, 89, 0.3) !important; /* 薄い緑の枠 */
}
/* 成功アイコンを追加 */
div.wpcf7-mail-sent-ok::before {
    content: '🎉';
    display: block;
    font-size: 40px;
    margin-bottom: 16px;
}

@keyframes fadeUp {
    to { opacity: 1; transform: translateY(0); }
}

/* スマホ */
@media (max-width: 768px) {
    .cf7__list { padding: 36px 20px 30px 20px !important; }
    .wpcf7-list-item label, .wpcf7-acceptance label, .wpcf7-submit { width: 100% !important; text-align: center; max-width: none !important; }
    .article-info-card { flex-direction: column; gap: 8px; text-align: center; align-items: center; }
}

/* ===== source: 17920.css ===== */
/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Jul 08 2026 | 12:15:11 */
/*
────────────────────────────────
1. ドロワーメニュー
────────────────────────────────
*/
#drawer #drawer__open {
    right: 0;
    left: auto;
}

/* ===== source: 17913.css ===== */
/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Jul 08 2026 | 12:15:21 */
/*
────────────────────────────────
9. 目次ボタン（アニメーション付き）
────────────────────────────────
*/
/* アニメーション定義 */
@keyframes toc-pulse {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.08); }
    100% { transform: scale(1); }
}

@keyframes toc-bounce {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-6px); }
}

/* 目次ボタンスタイル */
a.sgb-toc-button.js-toc-button.block {
    width: 64px;
    height: 64px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    
    /* Apple Intelligence風グラデーション */
    background: linear-gradient(
        90deg,
        #4FA0F9 0%,
        #B558D1 50%,
        #EC4C75 100%
    ) !important;
    
    color: #ffffff !important;
    border-radius: 50% !important;
    border: none !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.12) !important;
    font-size: 1.4rem !important;
    
    /* アニメーション */
    animation: 
        toc-pulse 2.5s ease-in-out infinite,
        toc-bounce 3s ease-in-out infinite;
}

/* ===== source: 17905.css ===== */
/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Jul 08 2026 | 12:05:53 */
/* ═══════════════════════════════════════
   統一感のある目次戻りボタン
   修正：
     BUG-1: transition: all → 個別プロパティに変更
     BUG-2: width: fit-content に -webkit- プレフィックスを追加
     BUG-3: prefers-reduced-motion 対応を追加
     BUG-4: will-change: transform に統一（translateZ(0) は削除）
     BUG-5: contain: layout style を追加
   ═══════════════════════════════════════ */

.toc-return-btn {
    /* 中央配置 */
    display: block !important;
    margin: 32px auto 24px auto !important;
    /* ★修正BUG-2：-webkit- プレフィックスを追加（iOS Safari 15.3以前対応） */
    width: -webkit-fit-content !important;
    width: fit-content !important;

    /* デザイン */
    padding: 12px 28px !important;
    font-family: 'Hiragino Sans', 'Noto Sans JP', 'Yu Gothic', sans-serif !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    letter-spacing: 1px !important;
    border-radius: 50px !important;

    /* グラデーション */
    background: linear-gradient(
        135deg,
        #667eea 0%,
        #764ba2 100%
    ) !important;
    background-size: 200% 200% !important;

    color: #fff !important;
    text-decoration: none !important;
    border: none !important;
    cursor: pointer !important;

    /* シャドウ */
    box-shadow:
        0 8px 32px rgba(102, 126, 234, 0.4),
        0 4px 16px rgba(118, 75, 162, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;

    /*
     * ★修正BUG-1：transition: all → 実際に変化する3プロパティのみに限定。
     * 元コードは all で全プロパティを毎フレーム監視していた。
     */
    transition:
        transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
        box-shadow 0.4s ease,
        filter 0.2s ease !important;

    /* 浮遊アニメーション */
    animation: gentleFloat 3s ease-in-out infinite !important;

    /* 文字の影 */
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) !important;

    /* GPU最適化 */
    backface-visibility: hidden !important;
    /*
     * ★修正BUG-4：transform: translateZ(0) を will-change に置き換え。
     * translateZ(0) はGPU昇格の古いハック。
     * will-change: transform が現代的な正しいアプローチ。
     * ただし常時アニメーション中の要素なので、will-change は適切。
     */
    will-change: transform !important;

    position: relative !important;
    overflow: hidden !important;

    /* ★修正BUG-5 */
    contain: layout style !important;
}

/* ホバー時 */
@media (hover: hover) and (pointer: fine) {
    .toc-return-btn:hover {
        animation-play-state: paused !important;
        transform: translateY(-4px) scale(1.05) !important;
        background-position: 100% 0 !important;
        box-shadow:
            0 12px 40px rgba(102, 126, 234, 0.5),
            0 6px 20px rgba(118, 75, 162, 0.4),
            inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
        filter: brightness(1.1) !important;
    }
    .toc-return-btn:hover::before {
        left: 100% !important;
    }
}

/* アクティブ時 */
.toc-return-btn:active {
    transform: translateY(-2px) scale(1.02) !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}

/* スマホ調整 */
@media (max-width: 768px) {
    .toc-return-btn {
        font-size: 12px !important;
        padding: 10px 22px !important;
        margin: 24px auto 16px auto !important;
    }
}

/* キラキラ（シマー）効果 */
.toc-return-btn::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg,
        transparent,
        rgba(255, 255, 255, 0.3),
        transparent
    ) !important;
    transition: left 0.8s ease !important;
    border-radius: 50px !important;
    z-index: 1 !important;
}

/* 浮遊アニメーション */
@keyframes gentleFloat {
    0%   { transform: translateY(0); }
    50%  { transform: translateY(-6px); }
    100% { transform: translateY(0); }
}

/*
 * ★修正BUG-3：prefers-reduced-motion 対応（最重要）。
 * gentleFloat は3秒ループで常時動き続けるため、
 * 前庭障害のユーザーや「動きを減らす」設定のユーザーへの影響が大きい。
 * アニメーションを完全停止し、ボタンを静止させる。
 * また will-change も解除してGPUリソースを開放する。
 */
@media (prefers-reduced-motion: reduce) {
    .toc-return-btn {
        animation: none !important;
        will-change: auto !important;
        transition: none !important;
        transform: none !important;
    }
    .toc-return-btn:hover {
        transform: none !important;
        filter: brightness(1.1) !important; /* hover の視覚フィードバックは残す */
    }
    .toc-return-btn::before {
        transition: none !important;
    }
    .toc-return-btn:active {
        transform: none !important;
        transition: none !important;
    }
}

/* スムーススクロール */
html {
    scroll-behavior: smooth !important;
    scroll-padding-top: 50px !important; /* 固定ヘッダーの高さに合わせて調整 */
}

/* ===== [1b-fix] type4は現在ブラウン背景(#8A5A2B)のため文字は白に統一（2026-07） ===== */
.sgb-heading__inner.sgb-heading--type4,
.sgb-heading__inner.sgb-heading--type4 .sgb-heading__text,
.sgb-heading__inner.sgb-heading--type4 strong,
.sgb-heading__inner.sgb-heading--type4 * {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

/* ===== 目次コンパクト化（2026-07） ===== */
.toc_container .toc_list li a {
    padding: 6px 16px !important;
    font-size: 14px !important;
}