body { background-color: #F0F0F0; }

:root {
  --kyo-bg: #0D0D0D;
  --kyo-bg-subtle: #141414;
  --kyo-dawn-indigo: #1C2C4E;
  --kyo-text: #F5F0E8;
  --kyo-text-muted: #9A9590;
  --kyo-text-dim: #5A5550;
  --kyo-border: rgba(245,240,232,0.08);
  --kyo-tanzaku-bg: #F5F0E8;
  --kyo-tanzaku-text: #2A2520;
  --kyo-tanzaku-sub: #6A6560;
  --kyo-ise: #4A6B5A;
  --kyo-yamato: #BA9C98;
  --kyo-yamashiro: #C4A24E;
  --kyo-font-jp: 'Noto Sans JP', sans-serif;
  --kyo-font-serif: 'Noto Serif JP', serif;
  --kyo-font-en: 'Inter', sans-serif;
  --kyo-light-bg: #FAFAF7;
  --kyo-light-text: #2A2520;
  --kyo-light-muted: #8A8580;
  --kyo-light-sub: #6A6560;
}

/* ── Hero ── */
.kyo-hero {
  position: relative;
  height: calc(100vh - 112px);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.kyo-hero__slide {
  position: absolute; inset: 0;
  opacity: 0;
  animation: kyoFadeSlide 20s ease-in-out infinite;
}
.kyo-hero__slide:nth-child(1) { animation-delay: 0s; background: var(--kyo-ise); }
.kyo-hero__slide:nth-child(2) { animation-delay: 5s; background: var(--kyo-yamato); }
.kyo-hero__slide:nth-child(3) { animation-delay: 10s; background: var(--kyo-yamashiro); }
.kyo-hero__slide:nth-child(4) { animation-delay: 15s; background: #1A2040; }
@keyframes kyoFadeSlide {
  0%{opacity:0} 5%{opacity:1} 25%{opacity:1} 30%{opacity:0} 100%{opacity:0}
}
.kyo-hero__heading {
  position: relative; z-index: 1;
  font-family: var(--kyo-font-serif);
  font-size: 28px;
  font-weight: 300;
  letter-spacing: 0.25em;
  color: var(--kyo-text);
  text-shadow: 0 2px 30px rgba(0,0,0,.5);
}

/* ── Section Common ── */
.kyo-section { padding: 120px 80px; max-width: 1440px; margin: 0 auto; }
.kyo-sec-heading {
  font-family: var(--kyo-font-serif);
  font-size: 20px;
  font-weight: 400;
  letter-spacing: 0.15em;
  color: var(--kyo-text-muted);
  text-align: center;
  margin-bottom: 60px;
}
.kyo-products .kyo-sec-heading { color: var(--kyo-light-muted); }

/* ══════════════════════════════════════
   ボタン共通スタイル — 押しやすい枠付きボタン
   2026-05-14 追加
   ══════════════════════════════════════ */
.kyo-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-width: 240px;
  padding: 18px 36px;
  font-family: var(--kyo-font-serif);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.2em;
  border: 1px solid currentColor;
  background: transparent;
  text-decoration: none;
  cursor: pointer;
  transition: background .25s ease, color .25s ease;
}
.kyo-btn__arrow { transition: transform .25s ease; display: inline-block; }
.kyo-btn:hover .kyo-btn__arrow { transform: translateX(6px); }

/* ダーク背景用（白文字＋白枠 → ホバーで白塗りつぶし＋黒文字） */
.kyo-btn--light { color: var(--kyo-text); border-color: rgba(245,240,232,0.4); }
.kyo-btn--light:hover { background: var(--kyo-text); color: var(--kyo-bg); border-color: var(--kyo-text); }

/* 白背景用（黒文字＋黒枠 → ホバーで黒塗りつぶし＋白文字） */
.kyo-btn--dark { color: var(--kyo-light-text); border-color: rgba(42,37,32,0.4); }
.kyo-btn--dark:hover { background: var(--kyo-light-text); color: var(--kyo-light-bg); border-color: var(--kyo-light-text); }

/* ── Products (白背景・見出しなし・SP 2x2) ── */
.kyo-products {
  background: var(--kyo-light-bg);
  color: var(--kyo-light-text);
  max-width: none;
}
.kyo-products__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  max-width: 1080px;
  margin: 0 auto;
}
.kyo-product-card { cursor: pointer; text-decoration: none; }
.kyo-product-card:hover .kyo-product-card__img { opacity: 0.9; }
.kyo-product-card__img {
  width: 100%; aspect-ratio: 1/1;
  margin-bottom: 16px; transition: opacity .15s;
}
.kyo-product-card__name {
  font-family: var(--kyo-font-serif);
  font-size: 15px; font-weight: 500;
  margin-bottom: 6px; color: var(--kyo-light-text);
  letter-spacing: 0.08em;
}
.kyo-product-card__sub {
  font-family: var(--kyo-font-jp);
  font-size: 12px; font-weight: 300;
  color: var(--kyo-light-sub); margin-bottom: 8px;
  letter-spacing: 0.05em;
}
.kyo-product-card__price {
  font-family: var(--kyo-font-en);
  font-size: 13px; color: var(--kyo-light-sub);
}
.kyo-products__more { text-align: center; margin-top: 64px; }

/* ══════════════════════════════════════
   Brand Message — 縦書きレイアウト
   2026-05-14 改修: 右に大見出し / 左に複数列縦書き本文
   ══════════════════════════════════════ */
.kyo-brand-msg {
  padding: 140px 80px;
  background: var(--kyo-bg);
  color: var(--kyo-text);
  position: relative;
}
.kyo-brand-msg__inner {
  max-width: 1080px;
  margin: 0 auto;
  display: flex;
  flex-direction: row-reverse;
  justify-content: center;
  align-items: flex-start;
  gap: 48px;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  height: 540px;
}
.kyo-brand-msg__heading {
  font-family: var(--kyo-font-serif);
  font-size: 42px;
  font-weight: 300;
  letter-spacing: 0.4em;
  line-height: 1.7;
  color: var(--kyo-text);
  margin: 0;
  padding: 0 8px;
}
.kyo-brand-msg__body {
  display: flex;
  flex-direction: row-reverse;
  gap: 28px;
  align-items: flex-start;
}
.kyo-brand-msg__body p {
  font-family: var(--kyo-font-serif);
  font-size: 15px;
  font-weight: 300;
  line-height: 2.6;
  letter-spacing: 0.12em;
  color: var(--kyo-text-muted);
  margin: 0;
  padding: 0;
}
.kyo-brand-msg__action {
  margin-top: 64px;
  text-align: center;
  writing-mode: horizontal-tb;
}

/* ══════════════════════════════════════
   短冊セクション
   各アイテムが100vh + 同期背景アニメーション
   ══════════════════════════════════════ */

/* 各短冊アイテム（100vh、自己完結） */
.kyo-tanzaku__item {
  position: relative;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* 背景（各アイテム内でabsolute、同期アニメーションで連続感） */
.kyo-tanzaku__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.kyo-tanzaku__bg-slide {
  position: absolute; inset: 0;
  opacity: 0;
  animation: kyoTzFade 20s ease-in-out infinite;
}
.kyo-tanzaku__bg-slide:nth-child(1) { animation-delay: 0s; background: var(--kyo-ise); }
.kyo-tanzaku__bg-slide:nth-child(2) { animation-delay: 5s; background: var(--kyo-yamato); }
.kyo-tanzaku__bg-slide:nth-child(3) { animation-delay: 10s; background: var(--kyo-yamashiro); }
.kyo-tanzaku__bg-slide:nth-child(4) { animation-delay: 15s; background: #1A2040; }
@keyframes kyoTzFade {
  0%{opacity:0} 4%{opacity:1} 21%{opacity:1} 25%{opacity:0} 100%{opacity:0}
}
.kyo-tanzaku__overlay {
  position: absolute; inset: 0;
  background: rgba(13,13,13,.2);
  z-index: 1;
}

/* 短冊カード */
.kyo-tanzaku__card {
  position: relative;
  z-index: 2;
  width: 400px;
  max-width: 460px;
  background: var(--kyo-tanzaku-bg);
  display: flex;
  flex-direction: column;
  box-shadow: 0 8px 60px rgba(0,0,0,.15);
}
.kyo-tanzaku__photo {
  aspect-ratio: 4/5;
  flex-shrink: 0;
  margin: 64px 64px 0;
}
.kyo-tanzaku__text {
  padding: 44px 48px 48px;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  color: var(--kyo-tanzaku-text);
  overflow: hidden;
  height: 340px;
  margin: 0 auto;
  width: fit-content;
}
.kyo-tanzaku__name {
  display: inline;
  margin-left: 32px;
}
.kyo-tanzaku__kanji {
  font-family: var(--kyo-font-serif);
  font-size: 28px;
  font-weight: 400;
  letter-spacing: 0.5em;
  line-height: 1.8;
  display: inline;
}
.kyo-tanzaku__reading {
  font-family: var(--kyo-font-jp);
  font-size: 12px;
  font-weight: 300;
  letter-spacing: 0.3em;
  color: var(--kyo-tanzaku-text);
  display: inline;
  margin-top: 4px;
}
.kyo-tanzaku__body {
  font-family: var(--kyo-font-serif);
  font-size: 14px;
  font-weight: 300;
  letter-spacing: 0.1em;
  line-height: 2.6;
  color: var(--kyo-tanzaku-text);
  margin-left: 24px;
}

/* Tanzaku — 各カードの写真プレースホルダー色 */
.kyo-tanzaku__photo--ise { background: linear-gradient(160deg, var(--kyo-ise), #2A3D32); }
.kyo-tanzaku__photo--yamato { background: linear-gradient(160deg, var(--kyo-yamato), #6A4E48); }
.kyo-tanzaku__photo--yamashiro { background: linear-gradient(160deg, var(--kyo-yamashiro), #7A6420); }

/* ══════════════════════════════════════
   News — 左縦書き見出し + 右リスト
   2026-05-14 改修: 横並びレイアウト
   ══════════════════════════════════════ */
.kyo-news {
  padding: 120px 80px;
  background: var(--kyo-bg);
  color: var(--kyo-text);
}
.kyo-news__inner {
  max-width: 1080px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 96px;
  align-items: flex-start;
}
.kyo-news__heading {
  font-family: var(--kyo-font-serif);
  font-size: 32px;
  font-weight: 300;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  letter-spacing: 0.4em;
  color: var(--kyo-text);
  margin: 0;
  padding: 8px 0;
}
.kyo-news__list { width: 100%; }
.kyo-news__item {
  display: flex;
  gap: 32px;
  padding: 24px 0;
  border-bottom: 1px solid var(--kyo-border);
  align-items: baseline;
  text-decoration: none;
  color: var(--kyo-text-muted);
  transition: color .15s ease;
}
.kyo-news__item:hover { color: var(--kyo-text); }
.kyo-news__item:first-child { border-top: 1px solid var(--kyo-border); }
.kyo-news__date {
  font-family: var(--kyo-font-en);
  font-size: 13px;
  color: var(--kyo-text-dim);
  white-space: nowrap;
  letter-spacing: 0.05em;
}
.kyo-news__title {
  font-size: 14px;
  color: inherit;
  letter-spacing: 0.05em;
}
.kyo-news__more { margin-top: 56px; text-align: center; }

/* ── Responsive ── */
@media (max-width: 768px) {
  .kyo-section { padding: 80px 24px; }

  /* Products: SP は 2列 × 2行 */
  .kyo-products__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    max-width: 480px;
  }
  .kyo-product-card__name { font-size: 14px; }
  .kyo-product-card__sub { font-size: 11px; }
  .kyo-product-card__price { font-size: 12px; }

  /* Brand Message: SP は縦並びに切り替え */
  .kyo-brand-msg { padding: 80px 24px; }
  .kyo-brand-msg__inner {
    flex-direction: column-reverse;
    height: auto;
    gap: 40px;
    align-items: center;
  }
  .kyo-brand-msg__heading {
    font-size: 28px;
    letter-spacing: 0.3em;
    padding: 0;
  }
  .kyo-brand-msg__body {
    gap: 18px;
  }
  .kyo-brand-msg__body p {
    font-size: 13px;
    line-height: 2.4;
  }
  .kyo-brand-msg__action { margin-top: 48px; }

  /* News: SP は縦並び（見出し横書きに戻す） */
  .kyo-news { padding: 80px 24px; }
  .kyo-news__inner {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .kyo-news__heading {
    writing-mode: horizontal-tb;
    text-align: center;
    font-size: 22px;
    letter-spacing: 0.3em;
    padding: 0;
  }
  .kyo-news__item {
    flex-direction: column;
    gap: 6px;
    align-items: flex-start;
    padding: 16px 0;
  }
  .kyo-news__date { font-size: 12px; }
  .kyo-news__title { font-size: 13px; }

  /* ボタン: SP もそのまま枠付き */
  .kyo-btn {
    min-width: 200px;
    padding: 16px 28px;
    font-size: 13px;
  }

  /* Tanzaku */
  .kyo-tanzaku__card { width: calc(100% - 40px); max-width: 460px; }
  .kyo-tanzaku__photo { margin: 48px 48px 0; }
  .kyo-tanzaku__kanji { font-size: 22px; }
  .kyo-tanzaku__text { height: 280px; padding: 32px 32px 36px; }
  .kyo-tanzaku__body { font-size: 13px; line-height: 2.4; }
  .kyo-tanzaku__name { margin-left: 20px; }
  .kyo-tanzaku__reading { font-size: 12px; }
  .kyo-hero__heading { font-size: 20px; letter-spacing: 0.15em; }
}

/* ══════════════════════════════════════
   Footer — KYO ダークテーマ
   2026-05-13: 3カラムグリッド構成
   ロゴ+メッセージ | KYOグループ | サポートグループ
   ══════════════════════════════════════ */

.l-footer.footer_bg {
  /* 夜 → 夜明け（藍色）グラデーション。下部に藍を控えめに差す（折衷65%） */
  background: linear-gradient(180deg,
    var(--kyo-bg) 0%,
    var(--kyo-bg) 65%,
    #14192B 84%,
    var(--kyo-dawn-indigo) 100%) !important;
  color: var(--kyo-text-muted) !important;
  padding: 100px 80px 40px !important;
  border-top: 1px solid var(--kyo-border) !important;
  display: grid !important;
  grid-template-columns: 1.4fr 1fr 1fr !important;
  column-gap: 60px !important;
  row-gap: 0 !important;
  align-items: start !important;
}

/* 1カラム目: ロゴ + ブランドメッセージ */
.l-footer__logo {
  grid-column: 1 / 2 !important;
  max-width: 180px !important;
  margin: 0 !important;
}
/* ロゴ画像はアップロード素材の色をそのまま表示。
   旧 filter:invert(1) は色反転（ピンク→緑・白→黒）の原因だったため撤去 2026-05-19 */
.l-footer__logo img { filter: none; }
.l-footer__logo::after {
  content: "日本の夜を、薫りで旅する。";
  display: block;
  margin-top: 24px;
  font-family: var(--kyo-font-serif);
  font-size: 13px;
  letter-spacing: 0.08em;
  line-height: 1.9;
  color: var(--kyo-text-muted);
  white-space: nowrap;   /* ロゴ幅に引っ張られず1行で表示 */
}

/* メニューラッパーを透明化 → 子要素を直接gridに */
.l-footer__menu { display: contents !important; }
.c-footer_menus { display: contents !important; }

.c-footer_menu {
  border: none !important;
  min-width: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
}
.c-footer_menu:nth-of-type(1) { grid-column: 2 / 3 !important; }
.c-footer_menu:nth-of-type(2) { grid-column: 3 / 4 !important; }

/* 見出し */
.c-footer_menu__title.footer_head {
  font-family: var(--kyo-font-jp) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0.18em !important;
  color: var(--kyo-text-dim) !important;
  margin-bottom: 20px !important;
  padding-bottom: 0 !important;
  /* 見出しを項目の上に・横並び/折返しを防止 */
  display: block !important;
  float: none !important;
  position: static !important;
  width: auto !important;
  white-space: nowrap !important;
}

/* リンク群 */
.c-footer_menu__list {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.c-footer_menu__list__item { margin: 0 !important; padding: 0 !important; }
.c-footer_menu__list__item::after,
.c-footer_menu__list__item::before,
.c-footer_menu__list__item__inner::after,
.c-footer_menu__list__item__inner::before { display: none !important; content: none !important; }

.c-footer_menu__list__item__inner.footer_link {
  font-family: var(--kyo-font-jp) !important;
  font-size: 13px !important;
  font-weight: 300 !important;
  color: var(--kyo-text) !important;
  letter-spacing: 0.04em !important;
  text-decoration: none !important;
  transition: opacity .2s !important;
  display: inline-block !important;
  padding: 0 !important;
}
.c-footer_menu__list__item__inner.footer_link:hover { opacity: 0.6 !important; }

/* 下段: SNS（左） + Copyright（右）/ 全カラムスパン */
.l-footer__info__store {
  grid-column: 1 / -1 !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding-top: 30px !important;
  margin-top: 80px !important;
  border-top: 1px solid var(--kyo-border) !important;
}
.l-footer__info__store__sns { display: flex !important; gap: 16px !important; }
.l-footer__info__store__sns__item i.footer_link { color: var(--kyo-text-muted) !important; }
.l-footer__info__store__sns__item:hover i.footer_link { color: var(--kyo-text) !important; }

.l-footer__info__store .footer_body {
  font-family: var(--kyo-font-en) !important;
  font-size: 11px !important;
  letter-spacing: 0.1em !important;
  color: var(--kyo-text-dim) !important;
}

/* SP: メニューは縦積み / 各メニュー内のリンクを2カラムに */
@media (max-width: 768px) {
  .l-footer.footer_bg {
    grid-template-columns: 1fr !important;
    row-gap: 40px !important;
    padding: 60px 24px 30px !important;
  }
  .l-footer__logo,
  .c-footer_menu:nth-of-type(1),
  .c-footer_menu:nth-of-type(2) {
    grid-column: 1 !important;
  }
  .l-footer__logo { max-width: 140px !important; }
  .l-footer__logo::after { max-width: 100% !important; }
  /* 見出しは上に1行 / その下にリンクを左右2カラムで並べる */
  .c-footer_menu__list {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 14px 24px !important;
  }
  .l-footer__info__store {
    flex-direction: column !important;
    gap: 20px !important;
    align-items: flex-start !important;
    margin-top: 40px !important;
  }
}

/* ══════════════════════════════════════
   商品詳細 — 香りの構成 / ピラミッド / 風景
   2026-05-17 追加: products_show_content.liquid の
   .kyo-scent-* 用。表示順＝構成 → ピラミッド → 風景
   ══════════════════════════════════════ */

/* ── 共通（外枠・見出し）── */
.kyo-scent-composition,
.kyo-scent-pyramid,
.kyo-scent-landscape {
  max-width: 680px;
  margin: 80px auto;
  padding: 0 24px;
}
.kyo-scent-composition__heading,
.kyo-scent-pyramid__heading,
.kyo-scent-landscape__heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-bottom: 40px;
}
.kyo-scent-composition__label,
.kyo-scent-pyramid__label,
.kyo-scent-landscape__label {
  font-family: var(--kyo-font-en);
  font-size: 11px;
  letter-spacing: 0.3em;
  color: var(--kyo-text-muted);
  text-transform: uppercase;
}
.kyo-scent-composition__title,
.kyo-scent-pyramid__title,
.kyo-scent-landscape__title {
  font-family: var(--kyo-font-serif);
  font-size: 20px;
  font-weight: 500;
  color: var(--kyo-light-text);
  letter-spacing: 0.15em;
  margin: 0;
}

/* ── 香りの構成（TOP / MIDDLE / BASE のテーブル）── */
.kyo-scent-composition__table {
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--kyo-text-muted);
}
.kyo-scent-composition__row {
  display: flex;
  align-items: baseline;
  gap: 24px;
  padding: 20px 0;
  border-bottom: 1px solid var(--kyo-text-muted);
}
.kyo-scent-composition__note {
  flex-shrink: 0;
  width: 80px;
  font-family: var(--kyo-font-en);
  font-size: 11px;
  letter-spacing: 0.3em;
  color: var(--kyo-text-muted);
  margin: 0;
}
.kyo-scent-composition__material {
  font-family: var(--kyo-font-serif);
  font-size: 15px;
  line-height: 1.8;
  letter-spacing: 0.05em;
  color: var(--kyo-light-text);
  margin: 0;
}

/* ── 香りのピラミッド（自由入力6の<img>）── */
.kyo-scent-pyramid__image {
  max-width: 480px;
  margin: 0 auto;
}
.kyo-scent-pyramid__image img {
  width: 100%;
  height: auto;
  display: block;
}

/* ── 香りの風景（テキストのみ・風景画像なし）── */
.kyo-scent-landscape__quote {
  margin: 0;
  padding: 0;
  font-family: var(--kyo-font-serif);
  text-align: left;
}
.kyo-scent-landscape__quote p {
  font-size: 15px;
  line-height: 2.6;
  letter-spacing: 0.08em;
  color: var(--kyo-light-text);
  margin: 0;
}

/* ── SP調整 ── */
@media (max-width: 768px) {
  .kyo-scent-composition,
  .kyo-scent-pyramid,
  .kyo-scent-landscape {
    margin: 60px auto;
    padding: 0 20px;
  }
  .kyo-scent-composition__title,
  .kyo-scent-pyramid__title,
  .kyo-scent-landscape__title {
    font-size: 18px;
  }
  .kyo-scent-composition__row { padding: 16px 0; }
  .kyo-scent-composition__note {
    width: 64px;
    font-size: 10px;
  }
  .kyo-scent-composition__material { font-size: 14px; }
  .kyo-scent-landscape__quote p {
    font-size: 13px;
    line-height: 2.4;
  }
}


.kyo-usage-caution {
  margin-top: 3rem;
  padding: 1.25rem 1rem;
  border-top: 1px solid rgba(0,0,0,.08);
  color: #888;
  font-size: 12px;
  line-height: 1.7;
}
.kyo-usage-caution__title {
  font-size: 13px;
  font-weight: 500;
  color: #888;
  margin: 0 0 .5rem;
  letter-spacing: .04em;
}
.kyo-usage-caution__list {
  list-style: none;
  padding-left: 0;
  margin: 0;
}
.kyo-usage-caution__list li {
  margin-bottom: .25em;
}

/* ===== 規格セレクタ（柄）の背景調整 2026-07-19 ===== */
/* #option_types に付く u-color__input--bg が白背景の原因。ID指定で上書き */
#option_types.c-product_info__form__variant {
  background-color: #f2f1ee !important; 
  border-color: #dad8d3 !important;
}
#option_types select {
  background-color: #f2f1ee;
  border: 1px solid #dad8d3;
  border-radius: 4px;
  color: #333;
  font-family: inherit;
}

/* ===== カート 送料無料ライン 固定表示 2026-07-22 ===== */
.kyo-cart_freeship {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid #dad8d3;
  font-size: 12px;
  line-height: 1.6;
  letter-spacing: .04em;
  text-align: right;
  color: var(--kyo-light-sub);
}
.kyo-cart_freeship__note {
  display: inline-block;
  margin-top: 4px;
  font-size: 11px;
  opacity: .85;
}