/* ===========================================================================
   チアセブンアーチ 記事コンポーネント
   ---------------------------------------------------------------------------
   WordPress にもテーマにもプラグインにも依存しない、素のCSS。
   記事本文のHTMLは c7a- で始まるクラスだけを使うので、
   将来 CMS を自作に切り替えるときは、このファイルを読み込むだけで見た目が再現できる。

   ⚠️ ここにあるクラス名は記事のHTMLに焼き込まれている。名前を変えると過去記事が崩れる。
      見た目を変えたいときは、まず下の変数（--c7a-*）を書き換えること。

   収録している部品
     .c7a-em        本文中の強調（青／橙／琥珀／赤）
     .c7a-src       出典表記
     .c7a-note      囲み（memo / ok / alert）
     .c7a-voice     アンケート回答者の声
     .c7a-doc       公的資料からの引用
     .c7a-fig       グラフ（中のSVGは .c7a-chart）
     .c7a-img       画像
     .c7a-dl        用語と説明
     .c7a-faq       質問と答え
     .c7a-step      手順
     .c7a-timeline  時系列
     .c7a-accordion 折りたたみ（<details>。JS不要）
     .c7a-affi      アフィリエイトカード／商品ボックス（c7a-affiliate.php）
     .c7a-card      ブログカード（c7a-blogcard.php）
     .c7a-table     表
   =========================================================================== */

:root {
  /* 色。サイトのテーマ色を変えるときはここだけ触る */
  --c7a-text:        #374151;  /* 本文 */
  --c7a-text-sub:    #4b5563;  /* 補足・出典 */
  --c7a-text-strong: #1f2937;  /* 見出し・強い文字 */

  --c7a-accent:      #4f8f5e;  /* サイトの緑 */
  --c7a-accent-bg:   #f5f9f5;
  --c7a-accent-head: #e6f0e7;
  --c7a-accent-line: #d7e5d9;
  --c7a-accent-text: #2f5d3a;

  --c7a-doc:         #6b7280;  /* 公的資料の引用（灰） */
  --c7a-doc-bg:      #f7f7f4;
  --c7a-doc-line:    #e4e4dd;

  --c7a-memo-bg:     #f6f7f8;  /* 囲み（ふつう・memo） */
  --c7a-memo-head:   #eceef1;
  --c7a-memo-line:   #dfe3e8;
  --c7a-memo-mark:   #6b7280;

  --c7a-alert-bg:    #fdf8f1;  /* 囲み（注意） */
  --c7a-alert-head:  #fbeedd;
  --c7a-alert-line:  #f0d9bb;
  --c7a-alert-mark:  #c47b28;

  --c7a-fig-bg:      #fdfdfb;  /* グラフの地 */
  --c7a-fig-line:    #e4e4dd;
  --c7a-series:      #2a78d6;  /* グラフの棒 */
  --c7a-grid:        #e3e6df;
  --c7a-axis:        #c6cabf;
  --c7a-tick:        #6b716c;

  --c7a-em:          #0b6bb8;  /* 本文中の強調 */
  --c7a-em-orange:   #c1590f;
  --c7a-em-amber:    #a5730a;
  --c7a-em-red:      #c0392b;

  --c7a-radius:      10px;
  --c7a-gap:         1.7em;
}

/* --- 本文中の強調 ------------------------------------------------------- */
.c7a-em { color: var(--c7a-em); font-weight: 700; background: none; }
.c7a-em--orange { color: var(--c7a-em-orange); }
.c7a-em--amber  { color: var(--c7a-em-amber); }
.c7a-em--red    { color: var(--c7a-em-red); }

/* --- 出典表記 ----------------------------------------------------------- */
.c7a-src {
  margin: .7em 0 0;
  font-size: 12.5px;
  line-height: 1.75;
  color: var(--c7a-text-sub);
}
.c7a-src a { color: inherit; text-decoration: underline; word-break: break-all; }

/* --- 囲み --------------------------------------------------------------- */
.c7a-note {
  margin: var(--c7a-gap) 0;
  border: 1px solid var(--c7a-memo-line);
  border-radius: var(--c7a-radius);
  background: var(--c7a-memo-bg);
  overflow: hidden;
}
.c7a-note__head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 11px 17px;
  background: var(--c7a-memo-head);
  border-bottom: 1px solid var(--c7a-memo-line);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.6;
  color: var(--c7a-text-strong);
}
.c7a-note__icon { flex: none; width: 20px; height: 20px; fill: var(--c7a-memo-mark); }
.c7a-note__title { font-weight: 700; }
.c7a-note__body {
  padding: 13px 17px 15px;
  font-size: 14.5px;
  line-height: 1.9;
  color: var(--c7a-text);
}
.c7a-note__body > :first-child { margin-top: 0; }
.c7a-note__body > :last-child { margin-bottom: 0; }
.c7a-note__list {
  margin: 0;
  padding: 13px 17px 15px 34px;
  font-size: 14.5px;
  line-height: 1.9;
  color: var(--c7a-text);
}
.c7a-note__list li { margin: .35em 0; }
.c7a-note__list li::marker { color: var(--c7a-memo-mark); }
.c7a-note__list b, .c7a-note__list strong,
.c7a-note__body b, .c7a-note__body strong { color: var(--c7a-text-strong); }

.c7a-note--ok { border-color: var(--c7a-accent-line); background: var(--c7a-accent-bg); }
.c7a-note--ok .c7a-note__head {
  background: var(--c7a-accent-head);
  border-bottom-color: var(--c7a-accent-line);
}
.c7a-note--ok .c7a-note__icon { fill: var(--c7a-accent); }
.c7a-note--ok .c7a-note__list li::marker { color: var(--c7a-accent); }

.c7a-note--alert { border-color: var(--c7a-alert-line); background: var(--c7a-alert-bg); }
.c7a-note--alert .c7a-note__head {
  background: var(--c7a-alert-head);
  border-bottom-color: var(--c7a-alert-line);
}
.c7a-note--alert .c7a-note__icon { fill: var(--c7a-alert-mark); }
.c7a-note--alert .c7a-note__list li::marker { color: var(--c7a-alert-mark); }

/* --- アンケート回答者の声 ----------------------------------------------- */
.c7a-voice {
  margin: var(--c7a-gap) 0;
  border: 1px solid var(--c7a-accent-line);
  border-radius: var(--c7a-radius);
  background: var(--c7a-accent-bg);
  overflow: hidden;
}
.c7a-voice__head {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 16px;
  background: var(--c7a-accent-head);
  border-bottom: 1px solid var(--c7a-accent-line);
}
.c7a-voice__badge {
  flex: none;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--c7a-accent);
  color: #fff;
  font-size: 11px; line-height: 22px;
  text-align: center; font-weight: 700;
}
.c7a-voice__who {
  font-size: 13px; font-weight: 700;
  letter-spacing: .02em;
  color: var(--c7a-accent-text);
}
.c7a-voice__body {
  margin: 0;
  padding: 14px 17px 16px;
  font-size: 15px; line-height: 1.95;
  color: var(--c7a-text);
}

/* --- 公的資料からの引用 ------------------------------------------------- */
.c7a-doc {
  margin: var(--c7a-gap) 0;
  padding: 15px 18px 16px;
  border: 1px solid var(--c7a-doc-line);
  border-left: 4px solid var(--c7a-doc);
  border-radius: var(--c7a-radius);
  background: var(--c7a-doc-bg);
}
.c7a-doc__label {
  margin: 0 0 9px;
  font-size: 12px; font-weight: 700;
  letter-spacing: .09em;
  color: var(--c7a-doc);
}
.c7a-doc__body { margin: 0; font-size: 15px; line-height: 1.95; color: var(--c7a-text); }
.c7a-doc__cite {
  display: block; margin: 11px 0 0;
  font-size: 12px; font-style: normal; line-height: 1.7;
  color: var(--c7a-text-sub);
}

/* --- 用語と説明 --------------------------------------------------------- */
.c7a-dl { margin: var(--c7a-gap) 0; }
.c7a-dl__dt {
  margin: 0;
  padding: 9px 15px;
  background: var(--c7a-memo-head);
  border-left: 4px solid var(--c7a-accent);
  border-radius: 6px 6px 0 0;
  font-size: 15px; font-weight: 700;
  color: var(--c7a-text-strong);
}
.c7a-dl__dd {
  margin: 0 0 14px;
  padding: 12px 16px 13px;
  border: 1px solid var(--c7a-memo-line);
  border-top: 0;
  border-radius: 0 0 6px 6px;
  font-size: 15px; line-height: 1.9;
  color: var(--c7a-text);
}
.c7a-dl__dd > :first-child { margin-top: 0; }
.c7a-dl__dd > :last-child { margin-bottom: 0; }

/* --- 質問と答え --------------------------------------------------------- */
.c7a-faq { margin: var(--c7a-gap) 0; }
.c7a-faq__item {
  margin: 0 0 12px;
  border: 1px solid var(--c7a-memo-line);
  border-radius: var(--c7a-radius);
  overflow: hidden;
}
.c7a-faq__q {
  position: relative;
  margin: 0;
  padding: 12px 16px 12px 46px;
  background: var(--c7a-accent-head);
  font-size: 15px; font-weight: 700; line-height: 1.7;
  color: var(--c7a-accent-text);
}
.c7a-faq__q::before {
  content: "Q";
  position: absolute; left: 15px; top: 12px;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--c7a-accent); color: #fff;
  font-size: 12px; line-height: 22px; text-align: center;
}
.c7a-faq__a {
  position: relative;
  margin: 0;
  padding: 13px 16px 14px 46px;
  font-size: 15px; line-height: 1.9;
  color: var(--c7a-text);
}
.c7a-faq__a::before {
  content: "A";
  position: absolute; left: 15px; top: 13px;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--c7a-memo-mark); color: #fff;
  font-size: 12px; line-height: 22px; text-align: center;
}
.c7a-faq__a > :first-child { margin-top: 0; }
.c7a-faq__a > :last-child { margin-bottom: 0; }

/* --- 手順 --------------------------------------------------------------- */
.c7a-step { margin: var(--c7a-gap) 0; counter-reset: c7a-step; }
.c7a-step__item {
  position: relative;
  padding: 0 0 18px 34px;
  border-left: 2px solid var(--c7a-accent-line);
  margin-left: 10px;
}
.c7a-step__item:last-child { border-left-color: transparent; padding-bottom: 0; }
.c7a-step__head { display: flex; flex-direction: column; gap: 2px; }
.c7a-step__number {
  counter-increment: c7a-step;
  position: absolute; left: -11px; top: 0;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--c7a-accent); color: #fff;
  font-size: 11px; line-height: 20px; text-align: center; font-weight: 700;
}
.c7a-step__number::after { content: counter(c7a-step); }
.c7a-step__label { display: none; }   /* 「STEP」の文字は数字に置き換える */
.c7a-step__title {
  font-size: 15.5px; font-weight: 700; line-height: 1.6;
  color: var(--c7a-text-strong);
}
.c7a-step__body {
  padding-top: 5px;
  font-size: 15px; line-height: 1.9;
  color: var(--c7a-text);
}
.c7a-step__body > :first-child { margin-top: 0; }
.c7a-step__body > :last-child { margin-bottom: 0; }

/* --- 時系列 ------------------------------------------------------------- */
.c7a-timeline { margin: var(--c7a-gap) 0; }
.c7a-timeline__item {
  position: relative;
  padding: 0 0 18px 26px;
  border-left: 2px solid var(--c7a-accent-line);
  margin-left: 6px;
}
.c7a-timeline__item:last-child { border-left-color: transparent; padding-bottom: 0; }
.c7a-timeline__head { display: flex; align-items: center; gap: 8px; }
.c7a-timeline__shape {
  position: absolute; left: -7px; top: 5px;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--c7a-accent);
}
.c7a-timeline__label {
  font-size: 13px; font-weight: 700; letter-spacing: .02em;
  color: var(--c7a-accent-text);
}
.c7a-timeline__title {
  padding-top: 3px;
  font-size: 15px; line-height: 1.85;
  color: var(--c7a-text);
}

/* --- 折りたたみ（JS不要。<details>のまま） ------------------------------ */
.c7a-accordion { margin: var(--c7a-gap) 0; }
.c7a-accordion__item {
  margin: 0 0 10px;
  border: 1px solid var(--c7a-memo-line);
  border-radius: var(--c7a-radius);
  overflow: hidden;
  background: var(--c7a-memo-bg);
}
.c7a-accordion__title {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px;
  cursor: pointer;
  list-style: none;
  font-size: 15px; font-weight: 700; line-height: 1.6;
  color: var(--c7a-text-strong);
}
.c7a-accordion__title::-webkit-details-marker { display: none; }
.c7a-accordion__label { flex: 1; }
.c7a-accordion__icon {
  flex: none;
  width: 14px; height: 14px;
  border-right: 2px solid var(--c7a-memo-mark);
  border-bottom: 2px solid var(--c7a-memo-mark);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .18s ease;
}
.c7a-accordion__item[open] .c7a-accordion__icon {
  transform: rotate(-135deg) translate(-3px, -3px);
}
.c7a-accordion__body {
  padding: 0 16px 14px;
  font-size: 15px; line-height: 1.9;
  color: var(--c7a-text);
}
.c7a-accordion__body > :first-child { margin-top: 0; }
.c7a-accordion__body > :last-child { margin-bottom: 0; }
@media (prefers-reduced-motion: reduce) {
  .c7a-accordion__icon { transition: none; }
}

/* --- グラフ ------------------------------------------------------------- */
.c7a-fig {
  margin: var(--c7a-gap) 0;
  padding: 20px 18px 16px;
  border: 1px solid var(--c7a-fig-line);
  border-radius: var(--c7a-radius);
  background: var(--c7a-fig-bg);
}
.c7a-fig__title {
  margin: 0 0 14px;
  font-size: 15px; font-weight: 700; line-height: 1.6;
  color: var(--c7a-text-strong);
}
.c7a-fig__scroll { overflow-x: auto; }
.c7a-fig__cap {
  margin: 12px 0 0;
  font-size: 12.5px; line-height: 1.7;
  color: var(--c7a-text-sub);
}
.c7a-fig__cap a { color: inherit; text-decoration: underline; word-break: break-all; }

/* SVGの中身。SVG側にも同じ色を属性で書いてあるので、
   このCSSが読み込まれなくてもグラフは表示される（読み込まれれば上書きされる） */
.c7a-chart {
  display: block;
  width: 100%; height: auto;
  min-width: 580px;
  /* テーマが body に letter-spacing を掛けているとSVGの文字にも継承されて
     ラベルが伸び、左端で切れる。ここで必ず打ち消す */
  letter-spacing: 0;
  word-spacing: 0;
}
.c7a-chart__grid { stroke: var(--c7a-grid); stroke-width: 1; }
.c7a-chart__axis { stroke: var(--c7a-axis); stroke-width: 1; }
.c7a-chart__tick { fill: var(--c7a-tick); font-size: 11px; }
.c7a-chart__lab  { fill: var(--c7a-text-sub); font-size: 12.5px; }
.c7a-chart__val  { fill: var(--c7a-text-strong); font-size: 12.5px; font-weight: 700; }
.c7a-chart__bar  { fill: var(--c7a-series); }

/* --- 画像 --------------------------------------------------------------- */
.c7a-img { margin: var(--c7a-gap) 0; }
.c7a-img img { width: 100%; height: auto; display: block; border-radius: var(--c7a-radius); }
.c7a-img figcaption {
  margin: 8px 0 0;
  font-size: 12.5px; line-height: 1.7;
  color: var(--c7a-text-sub);
}

/* --- 狭い画面 ----------------------------------------------------------- */
@media (max-width: 600px) {
  .c7a-note__head, .c7a-voice__head { padding: 9px 13px; }
  .c7a-note__list { padding: 11px 13px 13px 30px; }
  .c7a-note__body { padding: 11px 13px 13px; }
  .c7a-voice__body { padding: 12px 14px 14px; }
  .c7a-doc, .c7a-fig { padding-left: 14px; padding-right: 14px; }
  .c7a-faq__q { padding: 11px 13px 11px 42px; }
  .c7a-faq__a { padding: 12px 13px 13px 42px; }
  .c7a-faq__q::before, .c7a-faq__a::before { left: 12px; }
}

/* --- アフィリエイトカード（c7a-affiliate.php が出力） --------------------- */
:root {
  --c7a-affi-line:    #e2e5e0;
  --c7a-affi-bg:      #fff;
  --c7a-affi-btn:     #4f8f5e;
  --c7a-affi-amazon:  #ff9900;
  --c7a-affi-rakuten: #bf0000;
  --c7a-affi-yahoo:   #ff0033;
}

.c7a-affi {
  position: relative;
  display: flex;
  gap: 16px;
  margin: var(--c7a-gap) 0;
  padding: 16px;
  border: 1px solid var(--c7a-affi-line);
  border-radius: var(--c7a-radius);
  background: var(--c7a-affi-bg);
  box-shadow: 0 1px 2px rgba(28,33,29,.05);
}
.c7a-affi__pr {
  position: absolute;
  top: 8px; right: 10px;
  padding: 1px 7px;
  border: 1px solid var(--c7a-affi-line);
  border-radius: 4px;
  font-size: 10px;
  letter-spacing: .08em;
  color: var(--c7a-text-sub);
  background: var(--c7a-affi-bg);
}
.c7a-affi__thumb { flex: none; width: 132px; }
.c7a-affi__thumb img {
  width: 100%; height: 132px;
  object-fit: contain;
  display: block;
  border-radius: 6px;
  background: #f7f7f5;
}
.c7a-affi--card .c7a-affi__thumb img { object-fit: cover; height: 100px; }
.c7a-affi__main { flex: 1; min-width: 0; }
.c7a-affi__site {
  margin: 0 0 3px;
  font-size: 11.5px; letter-spacing: .02em;
  color: var(--c7a-text-sub);
}
.c7a-affi__title {
  margin: 0 0 6px;
  padding-right: 34px;
  font-size: 15px; font-weight: 700; line-height: 1.6;
  color: var(--c7a-text-strong);
}
.c7a-affi__title a { color: inherit; text-decoration: none; }
.c7a-affi__title a:hover { text-decoration: underline; }
.c7a-affi__desc {
  margin: 0 0 10px;
  font-size: 13px; line-height: 1.75;
  color: var(--c7a-text-sub);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.c7a-affi__meta {
  margin: 0 0 10px;
  font-size: 12.5px;
  color: var(--c7a-text-sub);
}
.c7a-affi__price { font-weight: 700; color: var(--c7a-text-strong); }
.c7a-affi__actions { margin: 0; }

.c7a-affi__btn {
  display: inline-block;
  padding: 8px 20px;
  border-radius: 999px;
  background: var(--c7a-affi-btn);
  color: #fff;
  font-size: 13.5px; font-weight: 700;
  text-decoration: none;
}
.c7a-affi__btn:hover { opacity: .88; }

.c7a-affi__shops { display: flex; flex-wrap: wrap; gap: 8px; }
.c7a-affi__shop {
  display: inline-block;
  padding: 7px 14px;
  border-radius: 6px;
  background: var(--c7a-text-sub);
  color: #fff;
  font-size: 12.5px; font-weight: 700;
  text-decoration: none;
}
.c7a-affi__shop:hover { opacity: .88; }
.c7a-affi__shop--amazon  { background: var(--c7a-affi-amazon); color: #241f16; }
.c7a-affi__shop--rakuten { background: var(--c7a-affi-rakuten); }
.c7a-affi__shop--yahoo   { background: var(--c7a-affi-yahoo); }

@media (max-width: 600px) {
  .c7a-affi { flex-direction: column; gap: 12px; padding: 14px; }
  .c7a-affi__thumb { width: 100%; }
  .c7a-affi__thumb img { height: 160px; }
  .c7a-affi__title { padding-right: 30px; }
  .c7a-affi__shops { flex-direction: column; }
  .c7a-affi__shop { text-align: center; }
}

/* --- ブログカード（c7a-blogcard.php が出力） ----------------------------- */
:root {
  --c7a-card-line: #e2e5e0;
  --c7a-card-bg:   #fff;
  --c7a-card-hov:  #f7faf7;
}

.c7a-card {
  display: flex;
  gap: 15px;
  margin: var(--c7a-gap) 0;
  padding: 14px;
  border: 1px solid var(--c7a-card-line);
  border-radius: var(--c7a-radius);
  background: var(--c7a-card-bg);
  text-decoration: none;
  color: inherit;
  transition: background .16s ease, box-shadow .16s ease;
}
.c7a-card:hover { background: var(--c7a-card-hov); box-shadow: 0 2px 10px rgba(28,33,29,.08); }
.c7a-card:focus-visible { outline: 2px solid var(--c7a-accent); outline-offset: 2px; }

.c7a-card__thumb { flex: none; width: 128px; }
.c7a-card__thumb img {
  width: 100%; height: 84px;
  object-fit: cover;
  display: block;
  border-radius: 6px;
  background: #f2f2ef;
}
.c7a-card__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.c7a-card__label {
  font-size: 11.5px;
  letter-spacing: .04em;
  color: var(--c7a-accent-text);
}
.c7a-card--out .c7a-card__label { color: var(--c7a-text-sub); }
/* 矢印記号はフォントによってスラッシュに見えることがあるので、文字で示す */
.c7a-card--out .c7a-card__label::before {
  content: "外部サイト";
  display: inline-block;
  margin-right: 7px;
  padding: 1px 5px;
  border: 1px solid var(--c7a-card-line);
  border-radius: 3px;
  font-size: 10px;
  letter-spacing: .06em;
}
.c7a-card__title {
  font-size: 15px; font-weight: 700; line-height: 1.6;
  color: var(--c7a-text-strong);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.c7a-card:hover .c7a-card__title { text-decoration: underline; }
.c7a-card__desc {
  font-size: 12.5px; line-height: 1.75;
  color: var(--c7a-text-sub);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.c7a-card-fallback { font-size: 14px; }

@media (prefers-reduced-motion: reduce) { .c7a-card { transition: none; } }
@media (max-width: 600px) {
  .c7a-card { gap: 12px; padding: 12px; }
  .c7a-card__thumb { width: 96px; }
  .c7a-card__thumb img { height: 70px; }
  .c7a-card__desc { -webkit-line-clamp: 2; }
}

/* --- 表 ----------------------------------------------------------------- */
.c7a-table { margin: var(--c7a-gap) 0; }
.c7a-table__scroll { overflow-x: auto; }
.c7a-table table {
  width: 100%;
  min-width: 420px;
  border-collapse: collapse;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}
.c7a-table caption {
  caption-side: top;
  text-align: left;
  margin-bottom: 10px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.6;
  color: var(--c7a-text-strong);
}
.c7a-table th, .c7a-table td {
  padding: 9px 12px;
  border-bottom: 1px solid var(--c7a-memo-line);
  text-align: left;
  line-height: 1.7;
  color: var(--c7a-text);
}
.c7a-table thead th {
  background: var(--c7a-memo-head);
  border-bottom: 1px solid var(--c7a-memo-line);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--c7a-text-sub);
  white-space: nowrap;
}
.c7a-table tbody tr:last-child th,
.c7a-table tbody tr:last-child td { border-bottom: 0; }
.c7a-table tbody th { font-weight: 700; color: var(--c7a-text-strong); white-space: nowrap; }
.c7a-table .num { text-align: right; white-space: nowrap; }
.c7a-table__cap {
  margin: 10px 0 0;
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--c7a-text-sub);
}
@media (max-width: 600px) {
  .c7a-table th, .c7a-table td { padding: 8px 10px; font-size: 13.5px; }
}