/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Jul 08 2026 | 12:07:30 */
/* ================================================
   香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;
}

*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }

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-body  { flex:1; }
.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枚動的カード
   ════════════════════════════════════════════════ */

/* ── コンテナ ── */
.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));
}

/* 時間ボックス：圧縮不可 + 折り返し禁止（Bug修正） */
.nv-time-box {
  display: flex;
  align-items: center;     /* baseline → center */
  gap: 4px;
  flex-shrink: 0;          /* 圧縮されない */
}
.nv-time-ico { font-size: 12px; opacity: .45; flex-shrink: 0; }
.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;
}
.nv-time-sub { font-size: 11px; color: rgba(255,255,255,.35); letter-spacing: .08em; white-space: nowrap; flex-shrink: 0; }

/* 支配ノート表示：縮小可能でオーバーフロー防止（Bug修正） */
.nv-active-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 1;          /* 縮小可能（Bug修正） */
  min-width: 0;            /* flexオーバーフロー防止（Bug修正） */
  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: '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-active-sub { display: none; }

/* ── チャート ── */
.nv-chart-wrap { background: var(--nv-dk); }
.nv-chart-wrap canvas {
  display: block; width: 100%; height: 130px;
  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: 'Cormorant Garamond', serif; 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: 'Noto Sans JP', sans-serif; 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; transition: box-shadow .15s;
}
.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;
}

/* ── 3列インジケーターストリップ（NEW）── */
.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: 'Cormorant Garamond', serif; 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: 'Cormorant Garamond', serif; letter-spacing: .05em;
}
.nv-strip-item.nv-strip-dominant .nv-strip-pct { color: var(--nv-ink); font-weight: 500; }

/* ── 1枚動的カード（NEW）── */
.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: '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;
}
.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); }

/* PC: 余裕があるので "が支配的な時間帯" を復活 */
@media (min-width: 580px) {
  .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; }
  .nv-time-val     { font-size: 24px; letter-spacing: .04em; }
  .nv-time-ico     { font-size: 14px; opacity: .5; }
  .nv-active-label { font-size: 13px; }
}

/* ────────────────────────────────────────────────
   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-widget   { margin-bottom:0; }
.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-body-wrap { display:flex; gap:16px; align-items:flex-start; }
.pp-svg-wrap  { flex-shrink:0; width:130px; position:relative; }
.pp-svg-wrap svg { width:100%; height:auto; display:block; }
.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 { 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:.35; }
.pp-dot.pp-inactive .dot-ring { opacity:0; }
.pp-dot.pp-active .dot-core   { fill:rgba(160,120,80,.55); 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:.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-info-panel { flex:1; min-width: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-list  { display:flex; flex-direction:column; gap:8px; }
.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-item.visible { opacity:1; transform:none; }
.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-item.best-point .pp-point-name { color:var(--gold); }
.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-row.visible { opacity:1; transform:none; }
.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-panel      { display:none; }
.lf-panel.show { display:block; }
.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-tags  { display:flex; flex-wrap:wrap; gap:4px; }
.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; }
.cite li::before { content:none !important; }
.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; }
.rv.in { opacity:1; transform:none; }

/* ────────────────────────────────────────────────
   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-modes    { flex-wrap:nowrap; }
  .pp-mode-btn { min-width:0; }
  .pp-body-wrap { gap:24px; }
  .pp-svg-wrap  { width:150px; }
}