/*
Theme Name: Themify Ultra Child
Description: A child theme of Themify Ultra
Template: themify-ultra
Author: tomiyama (info@import-business.jp)
*/

/* =========================================
   Design Tokens
   ========================================= */

:root{
  /* ===== Brand palette ===== */
  --brand-sky:        #5D8D72;  /* Primary（Earth Green） */
  --brand-sky-tint:   #F6F9F7;  /* L: 約97% */
  --brand-sage:       #4682B4;  /* Support（Serenity Blue） */
  --brand-sage-tint:  #F5FAFD;  /* L: 約98% */
  --brand-coral:      #B7410E;  /* Highlight（Rooibos Red） */
  --brand-coral-tint: #FEF6F3;  /* L: 約97% */
  --brand-honey:      #E28C4C;  /* Accent（Sunset Orange） */
  --brand-honey-tint: #FDF5F0;  /* L: 約97.5% */

  /* ===== Neutrals / Text / Links ===== */
  --neutral-50:       #F7F7F7;
  --neutral-75:       #F6F5F2; /* うすい背景 */
  --color-text:       #1C1C1F;
  --color-subtext:    #6B7280;
  --color-border-light:#E7E5E4;

  /* 見出し・リンク（Primaryへ更新） */
  --color-heading:        #5D8D72; /* 見出し文字 */
  --color-heading-accent: #5D8D72; /* H2左線/H3下線 */
  --color-link:           #5D8D72; /* 未訪問 */
  --color-link-visited:   #4A745F; /* 訪問済み（主色のやや濃色） */
  --color-link-hover:     #4F7C66; /* hover/active（主色の濃色） */
  --color-focus-ring:     #E28C4C; /* フォーカスリング（Accent） */

  /* 互換エイリアス（既存CSSが参照していても安全） */
  --border-100: var(--color-border-light);
  --ink-900:    var(--color-text);

  /* ===== Typography ===== */
  /* 日本語・UI向け標準フォント */
  --ff-jp: -apple-system, BlinkMacSystemFont, "Segoe UI",
           "Hiragino Sans", "Meiryo", sans-serif;
  /* 等幅フォント（コード用途） */
  --ff-mono: Consolas, Menlo, "Courier New", monospace;

  --fs-root: 16px;          /* 1rem基準 */
  --fs-body: 1.0625rem;     /* 17px */
  --lh-body: 1.8;
  --ls-body: 0.03em;

  --fs-lead: 1.0625rem;     /* リード文：17px */
  --lh-lead: 1.9;
  --fs-note: 0.9375rem;     /* 注釈：15px */

  /* 見出し */
  --fs-h1: 2rem;      /* 32px */
  --fs-h2: 1.75rem;   /* 28px */
  --fs-h3: 1.5rem;    /* 24px */
  --fs-h4: 1.25rem;   /* 20px */
  --fs-h5: 1.125rem;  /* 18px */
  --lh-heading: 1.35;
  --space-h-mt: 2rem;        /* 見出し 上 */
  --space-h-mb: 1rem;        /* 見出し 下 */
  --space-h2-after-p:  0.2rem; /* 見出し直後が段落 */
  --space-h2-after-ul: 0.4rem; /* 見出し直後がリスト */
  --h2-border-left:   6px;
  --h3-border-bottom: 2px;
  --h4-border-bottom: 1px;

  /* 段落 */
  --space-para: 1.6rem;     /* Themify基準よりも広く */
  @media (max-width:480px){
    --space-para: 1.3rem;   /* モバイルは狭く（Themify基準） */
  }

  /* アンカー補正（固定ヘッダー分） */
  --anchor-offset: 80px;

  /* ===== Components: Box ===== */
  --box-radius: 6px;
  --box-pad-y:  1.25rem;
  --box-pad-x:  1.75rem;
  --box-gap:    2rem;
  --box-lh:     1.8;

  /* ===== Components: Blog Card ===== */
  --card-max: 720px;
  --card-max-wide: 860px;
  --card-bg: #fff;
  --radius-card: 12px;
  --shadow-card:        0 10px 24px rgba(0,0,0,.06);
  --shadow-card-hover:  0 14px 30px rgba(0,0,0,.10);
  --color-border-hover: #DAD7D3;

  --card-text-pad:    20px 16px 10px;
  --card-text-pad-sm: 12px 16px;

  --fs-card-title:       1.1em;
  --fs-card-title-sm:    1rem;
  --fs-card-excerpt:     .95em;

  /* ===== Components: Quote (blockquote) ===== */
  --quote-bg: #F8FAFC;
  --quote-margin: 2rem 0;
  --quote-pad:    2rem 1.5rem 1.5rem;
  --quote-pad-sm: 1.5rem 1rem 0.5rem 1rem;
  --radius-quote: 6px;

  --fs-cite:         0.85em;
  --quote-icon:      #9CA3AF;
  --fs-quote-icon:   2.2rem;
  --fs-quote-icon-sm:1.8rem;

  /* ===== Components: FAQ ===== */
  --faq-margin: 2rem 0;
  --faq-border: #E7E5E4;
  --faq-border-strong: #DAD7D3;
  --faq-radius: 10px;
  --faq-bg: #fff;

  --faq-row-pad:    1rem 1.25rem 1rem 3rem;
  --faq-row-pad-sm: .9rem 1rem .9rem 2.6rem;

  --faq-divider: #F1F0EF;   /* 仕切り線 */
  --faq-ans-bg:  #F8FCFF;   /* A 行の淡色背景 */

  --faq-badge-size:     22px;    /* バッジ：サイズ */
  --faq-badge-left:      .9rem;  /* バッジ：位置 */
  --faq-badge-left-sm:   .7rem;
  --faq-badge-top:       1rem;

  /* ===== Components: Link Card ===== */
  --linkcard-wrap-maxw:      720px;
  --linkcard-wrap-margin:    2rem auto;
  --linkcard-gap:            1rem;
  --linkcard-pad:            1.1rem 3rem 1.0rem 1.25rem;
  --linkcard-radius:         12px;
  --linkcard-fs:             1rem;
  --linkcard-fw:             600;
  --linkcard-fg:             #1C1C1F;
  --linkcard-bg:             #FAFAFA;
  --linkcard-border:         #DAD7D3;
  --linkcard-border-w:       1.5px;
  --linkcard-shadow:         0 8px 18px rgba(0,0,0,.06);
  --linkcard-bg-hover:       #FFFFFF;
  --linkcard-border-hover:   #DAD7D3;
  --linkcard-shadow-hover:   0 12px 26px rgba(0,0,0,.10);
  --linkcard-add-fs:         .8rem;
  --linkcard-add-ls:         .02em;
  --linkcard-label-top:      -12px;
  --linkcard-label-left:     16px;
  --linkcard-label-left-sm:  12px;
  --linkcard-label-bg:       #fff;
  --linkcard-arrow-right:    16px;

  /* ===== Components: CV Card ===== */
  --cv-wrap-maxw:     720px;
  --cv-wrap-gap:      2rem;
  --cv-wrap-pad:      1.5rem;
  --cv-wrap-pad-b:    1.5rem;
  --cv-wrap-radius:   12px;
  --cv-wrap-bg:       #F6F5F2;
  --cv-wrap-border:   #E7E5E4;

  --cv-img-maxw:      320px;
  --cv-img-radius:    8px;

  --cv-cta-radius:    10px;
  --cv-cta-shadow:         0 8px 18px rgba(0,0,0,.06);
  --cv-cta-shadow-hover:   0 12px 26px rgba(0,0,0,.10);

  /* ===== Responsive tokens (declared; mapped below) ===== */
  --fs-body-sm: 1rem;        /* 16px */
  --fs-h1-sm:   1.625rem;    /* 26px */
  --fs-h2-sm:   1.375rem;    /* 22px */
  --fs-h3-sm:   1.25rem;     /* 20px */
  --fs-h4-sm:   1.0625rem;   /* 17px */
  --fs-h5-sm:   1rem;        /* 16px */

  /* Link Card / Responsive */
  --linkcard-wrap-margin-sm: 1.6rem auto;
  --linkcard-pad-sm:         1rem 2rem;

  /* 中間＆iPad */
  --linkcard-pad-md: 1.1rem 2.25rem 1.05rem 1.25rem;
  --linkcard-pad-lg: 1.2rem  2.5rem  1.1rem  1.5rem;
}

/* スマホで “-sm” をベース変数に反映（必要なときだけ） */
@media (max-width:480px){
  :root{
    --fs-body: var(--fs-body-sm);
    --fs-h1:   var(--fs-h1-sm);
    --fs-h2:   var(--fs-h2-sm);
    --fs-h3:   var(--fs-h3-sm);
    --fs-h4:   var(--fs-h4-sm);
    --fs-h5:   var(--fs-h5-sm);
  }
}


/* =========================================
   Font Family – 全体統一
   ========================================= */

/* 全体のデフォルトフォント統一 */
body, h1, h2, h3, h4, h5, h6,
p, ul, ol, dl, dt, dd, li,
blockquote, a, span, strong, em, small, mark,
input, textarea, button, select, option,
table, th, td, caption {
  font-family: var(--ff-jp);
}

/* コード系は等幅フォント */
pre, code, kbd, samp {
  font-family: var(--ff-mono);
}

/* 本文（Post Content モジュール内）だけに反映 */
#tbp_content .module-post-content .tb_text_wrap{
  font-size: var(--fs-body, 1.0625rem);
  line-height: var(--lh-body, 1.8);
  letter-spacing: var(--ls-body, 0.03em);
}


/* =========================================
   段落・リンク・見出し・リスト・画像
   （トークン参照版 childers.co.jp）
   ========================================= */

/* 段落（基本文字） */
p {
  margin: 0 0 var(--space-para, 1.3rem);
  padding: 0;
  letter-spacing: var(--ls-body, 0.03em);
  color: var(--color-text, #1C1C1F);
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* リード文（冒頭や強調段落に使用） */
p.lead {
  font-size: var(--fs-lead, 1.0625rem);
  line-height: var(--lh-lead, 1.9);
  color: #2f2f2f; /* わずかに濃い色で可読性UP */
  margin-bottom: 1.6em;
}

/* 注釈・補足（小さめ） */
p.note {
  font-size: var(--fs-note, 0.9375rem);
  color: var(--color-subtext, #6B7280);
  margin-top: -0.4em;
}

/* ブラウザ対応：行末調整 */
@supports (text-wrap: balance) {
  p { text-wrap: pretty; }
}


/* リンク（共通） */
a {
  text-decoration: none;
  color: var(--color-link, #5D8D72);
}

/* 訪問済み */
a:visited {
  color: var(--color-link-visited, #4A745F);
}

/* hover / active */
a:hover,
a:active {
  color: var(--color-link-hover, #4F7C66);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.20em;
  text-decoration-color: currentColor;
}

/* フォーカスリング */
a:focus-visible {
  outline: 3px solid var(--color-focus-ring, #E28C4C);
  outline-offset: 2px;
  border-radius: 2px;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.20em;
}


/* 見出し（ページ & 記事共通） */
.page h2, .single-post h2,
.page h3, .single-post h3,
.page h4, .single-post h4,
.page h5, .single-post h5 {
  color: var(--color-heading, #5D8D72);
  line-height: var(--lh-heading, 1.35);
  margin-top: var(--space-h-mt, 2rem);
  margin-bottom: var(--space-h-mb, 1rem);
}

/* H1：記事タイトル */
.single-post h1.entry-title,
.page h1.entry-title,
.page-title h1,
.post-title h1,
.module-post-title h1 {
  font-size: var(--fs-h1, 2rem);
  line-height: var(--lh-heading, 1.35);
  font-weight: 700;
  letter-spacing: .01em;
  color: var(--color-text, #1C1C1F);
  margin: 0 0 var(--space-h-mb, 1rem);
}

/* H2：左ライン */
.page h2, .single-post h2 {
  font-size: var(--fs-h2, 1.75rem);
  padding-left: 0.6em;
  border-left: var(--h2-border-left, 6px) solid var(--color-heading-accent, #5D8D72);
  background: transparent;
}

/* H3：下線 */
.page h3, .single-post h3 {
  font-size: var(--fs-h3, 1.5rem);
  padding: 0 0 0.15em 0;
  border-bottom: var(--h3-border-bottom, 2px) solid var(--color-heading-accent, #5D8D72);
  margin-bottom: 0.8rem;
}

/* H4：細線 */
.page h4, .single-post h4 {
  font-size: var(--fs-h4, 1.25rem);
  padding: 0.1em 0 0.2em 0;
  border-bottom: var(--h4-border-bottom, 1px) solid var(--color-border-light, #E7E5E4);
  color: var(--color-text, #1C1C1F);
}

/* H5：色強調のみ */
.page h5, .single-post h5 {
  font-size: var(--fs-h5, 1.125rem);
  color: var(--color-heading-accent, #5D8D72);
  font-weight: 700;
  padding: 0;
  border: 0;
}

/* 見出し直後の余白調整 */
.page h2 + p, .single-post h2 + p,
.page h3 + p, .single-post h3 + p,
.page h4 + p, .single-post h4 + p {
  margin-top: var(--space-h2-after-p, 0.2rem);
}
.page h2 + ul, .single-post h2 + ul,
.page h3 + ul, .single-post h3 + ul,
.page h4 + ul, .single-post h4 + ul {
  margin-top: var(--space-h2-after-ul, 0.4rem);
}

/* モバイル（≤480px）のサイズ調整 */
@media screen and (max-width: 480px) {
  .page h2, .single-post h2 { font-size: var(--fs-h2-sm, 1.375rem); }
  .page h3, .single-post h3 { font-size: var(--fs-h3-sm, 1.25rem); }
  .page h4, .single-post h4 { font-size: var(--fs-h4-sm, 1.0625rem); }
  .page h5, .single-post h5 { font-size: var(--fs-h5-sm, 1rem); }
}


/* リスト（ul, ol 共通） */
ul, ol {
  margin: 0 0 var(--space-para, 1.125rem);
  padding-left: var(--list-indent, 1.25rem);
}

/* 項目ごとの間隔 */
ul li,
ol li {
  margin: 0.4em 0;
  line-height: var(--lh-body, 1.8);
}

/* ネスト（入れ子）の余白調整 */
ul ul, ul ol,
ol ul, ol ol {
  margin-top: 0.4rem;
  margin-bottom: 0.6rem;
}

/* 説明リスト */
dl {
  margin: 0 0 var(--space-para, 1.125rem);
}
dt {
  font-weight: 700;
  margin-top: 0.8rem;
}
dd {
  margin: 0.2rem 0 0.6rem 0;
  padding-left: 0; /* 初期値に戻す（テーマ依存対策） */
}

/* コンパクト版ユーティリティ */
.compact-list ul li,
.compact-list ol li {
  margin: 0.2em 0;
  line-height: 1.6;
}

/* モバイル（≤480px）：インデントを少し短縮 */
@media screen and (max-width: 480px) {
  ul, ol {
    padding-left: var(--list-indent-narrow, 1.1rem);
  }
}


/* 画像（img 基本スタイル） */
img {
  display: block;         /* インライン時の余白を消す */
  max-width: 100%;        /* はみ出し防止（レスポンシブ対応） */
  height: auto;           /* 縦横比を維持 */
  margin: 0;
  padding: 0;
}


/* =========================================
   その他
   ========================================= */

/* reCAPTCHA保護マーク非表示 */
.grecaptcha-badge { visibility: hidden; }


/* =========================================
   プラグイン設定
   ========================================= */

/* Contact Form 送信ボタン */
input[type="submit"] {
  -webkit-appearance: none;
  background-color: var(--color-heading-accent, #5D8D72); /* Primary */
  border: none;
  border-radius: 6px; /* 丸すぎない、落ち着いた角丸 */
  color: #fff;
  cursor: pointer;
  font-weight: 600;
  letter-spacing: .04em;
  padding: .6em 1.4em;
  font-size: 1rem;
  line-height: 1.4;
  transition: background-color .3s ease, transform .2s ease;
}
/* hover / active */
input[type="submit"]:hover {
  background-color: #6E9585; /* Support濃色 */
  transform: translateY(-1px);
}
input[type="submit"]):active {
  background-color: #5D8474; /* Supportさらに濃色 */
  transform: translateY(1px);
}
/* フォーカスリング（Accent） */
input[type="submit"]:focus-visible {
  outline: 3px solid var(--color-focus-ring, #E28C4C);
  outline-offset: 2px;
}


/* 目次　Sticky　閉じるボタン　位置調整 */
.ez-toc-sticky-fixed .ez-toc-close-icon {
  margin-right: 10%;
}


/* =========================================
   デザインカスタマイズ　AddQuicktag連動
   ========================================= */

/*********************************
* マーカー
*********************************/

/* 共通：複数行でも切れない・太さ安定・少しだけ余白を付与 */
.yellow_line,
.red_line,
.blue_line {
  background-repeat: no-repeat;          /* 繰り返し防止 */
  background-position: 0 100%;           /* 下端に配置 */
  background-size: 100% 0.65em;          /* ハイライトの“厚み”を統一 */
  -webkit-box-decoration-break: clone;   /* 改行時に背景を複製 */
  box-decoration-break: clone;
  padding: 0 .08em;                       /* 文字にかぶり過ぎない余白 */
  border-radius: .12em;                   /* マーカー端を少し柔らかく */
}

/* 色ごと（お好みで色だけ差し替え可） */
.yellow_line { background-image: linear-gradient(transparent 35%, #fffb93 0); }
.red_line    { background-image: linear-gradient(transparent 35%, #ff9999 0); }
.blue_line   { background-image: linear-gradient(transparent 35%, #d6e4ed 0); }

/* モバイルでは少し太めに（視認性UP／任意） */
@media (max-width: 600px) {
  .yellow_line, .red_line, .blue_line { background-size: 100% 0.72em; }
}


/*********************************
* 吹き出し（Design Tokens 参照版）
*********************************/

/* 共通：アイコン名 */
.icon-name{
  width: 100px;
  font-size: .7em;
  text-align: center;
  margin-top: .4em;   /* 画像の下に自然に配置 */
  color: var(--color-subtext, #6B7280);   /* 落ち着いたグレー */
}

/* ===== ベース：左右共通でflex化 ===== */

.talk10, .talk11{
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  margin: 2rem 0;
}

/* 右側はアイコンを右に（並びを反転） */
.talk11{ flex-direction: row-reverse; }

/* アイコン（figure想定） */
.talk10-img, .talk11-img{
  width: 100px;
  flex: 0 0 100px;
}
.talk10 figure, .talk11 figure{
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0;
}
.talk10 figure img, .talk11 figure img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;       /* タテヨコ比が違っても綺麗 */
  border-radius: 50%;      /* 丸アイコン */
}

/* 吹き出し（テキスト） */
.talk10-txt, .talk11-txt{
  position: relative;
  color: var(--color-text, #1C1C1F);
  background: #fff;
  border: 1.5px solid var(--brand-sage, #4682B4);
  border-radius: 10px;
  padding: .9rem 1rem;
  line-height: var(--lh-body, 1.8);
  max-width: 100%;
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* 段落の間隔 */
p.talk10-text, p.talk11-text{ margin: 0 0 .6rem; }
p.talk10-text:last-child, p.talk11-text:last-child{ margin-bottom: 0; }

/* 吹き出しの三角（枠と塗りを二重で作る） */
.talk10-txt::before, .talk10-txt::after,
.talk11-txt::before, .talk11-txt::after{
  content: "";
  position: absolute;
  top: 18px;               /* 三角の縦位置：テキストの1行目中央あたり */
  width: 0; height: 0;
  border: 10px solid transparent;
  line-height: 0;
}

/* 左向き（枠→塗り） */
.talk10-txt::before{ border-right-color: var(--brand-sage, #4682B4); left: -20px; }
.talk10-txt::after { border-right-color: #fff;                       left: -18px; }

/* 右向き（枠→塗り） */
.talk11-txt::before{ border-left-color: var(--brand-sage, #4682B4);  right: -20px; }
.talk11-txt::after { border-left-color: #fff;                        right: -18px; }

/* 内部リンク（本文のリンクトークンに合わせる） */
.talk10-txt a, .talk11-txt a{
  color: var(--color-link, #5D8D72);
  text-decoration: underline;
  text-underline-offset: .2em;
}

/* ===== お客様と運営のトーク ===== */

/* ── お客様（左：Sky→Primary Green） ── */
.talk10--sky .talk10-txt {
  border-color: var(--brand-sky, #5D8D72);
}
.talk10--sky .talk10-txt::before { border-right-color: var(--brand-sky, #5D8D72); }
.talk10--sky .talk10-txt::after  { border-right-color: #fff; }
.talk10--sky.is-soft .talk10-txt {
  background: var(--brand-sky-tint, #E3ECE7);
}
.talk10--sky.is-soft .talk10-txt::after {
  border-right-color: var(--brand-sky-tint, #E3ECE7);
}
.talk10--sky .talk10-img img {
  outline: 2px solid var(--brand-sky, #5D8D72);
  outline-offset: 2px;
  border-radius: 50%;
}

/* ── 運営（右：Sage→Support Blue） ── */
.talk11--sage .talk11-txt {
  border-color: var(--brand-sage, #4682B4);
}
.talk11--sage .talk11-txt::before { border-left-color: var(--brand-sage, #4682B4); }
.talk11--sage .talk11-txt::after  { border-left-color: #fff; }
.talk11--sage.is-soft .talk11-txt {
  background: var(--brand-sage-tint, #C3D9EA);
}
.talk11--sage.is-soft .talk11-txt::after {
  border-left-color: var(--brand-sage-tint, #C3D9EA);
}
.talk11--sage .talk11-img img {
  outline: 2px solid var(--brand-sage, #4682B4);
  outline-offset: 2px;
  border-radius: 50%;
}

/* ── 会話が続く時の連投 ── */
.talk--continued .talk10-img,
.talk--continued .talk11-img{
  visibility: hidden;
  width: 32px;
  flex-basis: 32px;
}
.talk--continued .talk10-txt::before,
.talk--continued .talk10-txt::after,
.talk--continued .talk11-txt::before,
.talk--continued .talk11-txt::after{
  display: none; /* 吹き出し三角を消す */
}

/* ===== モバイル最適化（～600px） ===== */

@media (max-width: 600px){
  .icon-name{ display:none; }     /* モバイルでは非表示（任意） */

  .talk10-img, .talk11-img{
    width: 56px;                  /* アイコン小さめ */
    flex-basis: 56px;
  }

  .talk10, .talk11{
    gap: .6rem;
    margin: 1.4rem 0;
  }

  .talk10-txt, .talk11-txt{
    padding: .8rem .9rem;
    border-width: 1.5px;
  }

  /* 三角位置を微調整（小さく） */
  .talk10-txt::before, .talk11-txt::before,
  .talk10-txt::after,  .talk11-txt::after{
    top: 16px;
    border-width: 9px;
  }
  .talk10-txt::before{ left: -18px; } .talk10-txt::after{ left: -16px; }
  .talk11-txt::before{ right:-18px; } .talk11-txt::after{ right:-16px; }
}

/* ===== 追加CSS（会話用の“外枠”と微調整） ===== */

/* 会話全体の幅・リズム（本文幅にそのまま馴染む） */
.conversation{
  margin: 2rem 0;              /* 会話ブロックの上下 */
}

/* 1回ごとの間隔（既存talkに上書き） */
.conversation .talk10,
.conversation .talk11{
  margin: 1.25rem 0;           /* 既存の 2rem より少しタイトに */
}

/* 連投のときは間隔をさらに詰めて読みやすく */
.conversation .talk10 + .talk10,
.conversation .talk11 + .talk11{
  margin-top: .75rem;
}

/* 長いURLや英数字の折返しを強化（万一のハミ出し防止） */
.conversation .talk10-txt,
.conversation .talk11-txt{
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* 小さな注釈・タイムスタンプ（任意） */
.conversation .meta{
  font-size: .85rem;
  color: var(--color-subtext, #6B7280);
  margin-top: .35rem;
}

/* 印刷最適化（任意） */
@media print{
  .conversation .talk10-img,
  .conversation .talk11-img{ width: 64px; flex-basis: 64px; }
}

/* ===== 補正：古いfloat系を無効化 ===== */

.talk10-img, .talk11-img{ float: none !important; margin: 0 !important; }
.talk10:after, .talk11:after, .talk:before{ content: none !important; display: none !important; }


/*********************************
* ボックス（Design Tokens 参照版）
*********************************/

/* ========= フレーム系（simple / multi） ========= */

/* 共通の呼吸感 */
.frame-simple-gray,
.frame-multi-gray,
.frame-simple-yellow,
.frame-multi-yellow,
.frame-dash,
.frame-multi-dash{
  margin: var(--box-gap, 2rem) 0;
  padding: var(--box-pad-y, 1.25rem) var(--box-pad-x, 1.75rem);
  line-height: var(--box-lh, 1.8);
  box-sizing: border-box;
  border-radius: var(--box-radius, 6px);
}

/* ── Neutral（Gray） ── */
.frame-simple-gray{
  background: var(--neutral-50, #F7F7F7);
  border: 1px solid var(--border-100, #E7E5E4);
  color: var(--ink-900, #1C1C1F);
}
.frame-multi-gray{
  background: var(--neutral-50, #F7F7F7);
  border: 1px solid var(--border-100, #E7E5E4);
  color: var(--ink-900, #1C1C1F);
  padding-bottom: .5rem; /* 既存挙動を維持（multiのみ少し詰め） */
}

/* ── Honey ── */
.frame-simple-yellow{
  background: var(--brand-honey-tint, #FDF5F0);
  border: 1px solid var(--brand-honey, #E28C4C);
  color: var(--ink-900, #1C1C1F);
}
.frame-multi-yellow{
  background: var(--brand-honey-tint, #FDF5F0);
  border: 1px solid var(--brand-honey, #E28C4C);
  color: var(--ink-900, #1C1C1F);
  padding-bottom: .5rem;
}

/* ── Sky（点線）→ Primary Green ── */
.frame-dash{
  background: var(--brand-sky-tint, #F6F9F7);
  border: 2px dashed var(--brand-sky, #5D8D72);
  color: #0F172A;
}
.frame-multi-dash{
  background: var(--brand-sky-tint, #F6F9F7);
  border: 2px dashed var(--brand-sky, #5D8D72);
  color: #0F172A;
  padding-bottom: 0; /* 既存維持 */
}

/* モバイル（～600px）：左右少し詰める */
@media (max-width:600px){
  .frame-simple-gray, .frame-multi-gray,
  .frame-simple-yellow, .frame-multi-yellow,
  .frame-dash, .frame-multi-dash{
    margin: 1.6rem 0;
    padding: 1rem 1.25rem;
  }
}

/* ========= タイトル付きボックス（まとめ） ========= */

.title-box-matome,
.title-box-multi-matome{
  position: relative;
  margin: 0 0 var(--box-gap, 2rem) 0;
  padding: var(--box-pad-y, 1.25rem) var(--box-pad-x, 1.75rem);
  background: var(--neutral-50, #F7F7F7);
  color: var(--ink-900, #1C1C1F);
  line-height: var(--box-lh, 1.8);
  box-sizing: border-box;
  border: 1px solid var(--border-100, #E7E5E4);
}
.title-box-multi-matome{ padding-bottom: .5rem; }

/* ── Sage帯（推奨）→ Support Blue帯 ── */
.title-matome,
.title-multi-matome{
  margin: var(--box-gap, 2rem) 0 0 0;
  padding: .6rem .6rem .5rem;
  text-align: center;
  font-size: 1.1rem;
  color: #fff;
  font-weight: 600;
  letter-spacing: .05em;
  background: var(--brand-sage, #4682B4); /* Support Blue */
  
}

/* ── Coral帯（注意喚起）→ Rooibos Red ── */
/* 使うときは .title-matome を .title-matome--coral に付け替え */
.title-matome--coral,
.title-multi-matome--coral{
  background: var(--brand-coral, #B7410E);
  border-bottom-color: #8F2F0B;
}

/* モバイル調整 */
@media (max-width:600px){
  .title-box-matome, .title-box-multi-matome{ padding: 1rem 1.25rem; }
  .title-matome, .title-multi-matome,
  .title-matome--coral, .title-multi-matome--coral{ margin-top: 1.5rem; }
}

/* ========= アイコン：小サイズ（mini-*） ========= */

/* mini（小）共通 */
.mini-memobox,
.mini-cautionbox,
.mini-checkbox,
.mini-pointbox{
  position: relative;
  margin: var(--box-gap, 2rem) 0;
  padding: .75rem 1rem .75rem 2.25rem;
  box-sizing: border-box;
  line-height: var(--box-lh, 1.8);
  border-radius: 8px;
  color: var(--ink-900, #1C1C1F);
}

/* 背景をブランド淡色に */
.mini-memobox    { background: var(--brand-honey-tint, #FDF5F0); }
.mini-cautionbox { background: var(--brand-coral-tint, #FEF6F3); }
.mini-checkbox   { background: var(--brand-sage-tint,  #F5FAFD); }
.mini-pointbox   { background: var(--brand-sky-tint,   #F6F9F7); }

/* 左アイコン（丸背景なし） */
.mini-memobox:before,
.mini-cautionbox:before,
.mini-checkbox:before,
.mini-pointbox:before{
  position: absolute;
  top: 50%;
  left: .6rem;  /* 感覚調整（好みで±） */
  transform: translateY(-50%);
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  /* ↓ここがポイント：固定の“箱”を作って中央に配置 */
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.25em; height: 1.25em; line-height: 1;
  /* 見た目は従来どおり */
  background: none; border-radius: 0; box-shadow: none; font-size: 20px;
  content: "";
}

/* アイコン内容＆色 */
.mini-memobox:before    { content:"\f304"; color: var(--brand-honey, #E28C4C); }
.mini-cautionbox:before { content:"\f071"; color: var(--brand-coral, #B7410E); }
.mini-checkbox:before   { content:"\f00c"; color: var(--brand-sage,  #4682B4); }
.mini-pointbox:before   { content:"\f0eb"; color: var(--brand-sky,   #5D8D72); }

/* 区切り線風の段落（線だけブランド色） */
.mini-memobox p,
.mini-cautionbox p,
.mini-checkbox p,
.mini-pointbox p{
  margin: .6rem 0 .9rem .3rem;
  padding: 0 0 0 .8rem;
  color: var(--ink-900, #1C1C1F);
  border-left: 1px solid currentColor;
}
.mini-memobox    p { border-left-color: var(--brand-honey, #E28C4C); }
.mini-cautionbox p { border-left-color: var(--brand-coral, #B7410E); }
.mini-checkbox   p { border-left-color: var(--brand-sage,  #4682B4); }
.mini-pointbox   p { border-left-color: var(--brand-sky,   #5D8D72); }

/* モバイル（～600px）：左右少し詰める */
@media (max-width: 600px){
  .mini-memobox, .mini-cautionbox, .mini-checkbox, .mini-pointbox{
    margin: 1.6rem 0;
    padding-right: 1.25rem;
    padding-left: 2rem;  /* ほんの少しだけ更に詰める */
  }
  /* アイコンを少し左へ */
  .mini-memobox:before,
  .mini-cautionbox:before,
  .mini-checkbox:before,
  .mini-pointbox:before{ left: .4rem; }
}

/* ========= アイコン：大サイズ（large-*） ========= */

/* large（大）共通 */
.memobox, .cautionbox, .checkbox, .pointbox{
  margin: var(--box-gap, 2rem) 0;
  padding: .9rem 1.5rem;
  border-radius: 8px;
  line-height: var(--box-lh, 1.8);
  color: var(--ink-900, #1C1C1F);
}

.memobox    { background: var(--brand-honey-tint, #F8D7BA); }
.cautionbox { background: var(--brand-coral-tint, #F2C8B5); }
.checkbox   { background: var(--brand-sage-tint,  #C3D9EA); }
.pointbox   { background: var(--brand-sky-tint,   #E3ECE7); }

.memobox-title,
.cautionbox-title,
.checkbox-title,
.pointbox-title{
  font-size: 1.15rem;
  font-weight: 700;
  margin: .3rem 0 .6rem;
  display: flex; align-items: center; gap: .5rem;
}

.memobox-title:before    { content:"\f304"; font-family:"Font Awesome 5 Free"; font-weight:900; color: var(--brand-honey, #E28C4C); }
.cautionbox-title:before { content:"\f071"; font-family:"Font Awesome 5 Free"; font-weight:900; color: var(--brand-coral, #B7410E); }
.checkbox-title:before   { content:"\f00c"; font-family:"Font Awesome 5 Free"; font-weight:900; color: var(--brand-sage,  #4682B4); }
.pointbox-title:before   { content:"\f0eb"; font-family:"Font Awesome 5 Free"; font-weight:900; color: var(--brand-sky,   #5D8D72); }

.memobox-title    { color: var(--brand-honey, #E28C4C); }
.cautionbox-title { color: var(--brand-coral, #B7410E); }
.checkbox-title   { color: var(--brand-sage,  #4682B4); }
.pointbox-title   { color: var(--brand-sky,   #5D8D72); }

.memobox p, .cautionbox p, .checkbox p, .pointbox p{ margin: .5rem 0 1rem 0; }

/* ===============================
   親だけで余白統一管理（共通ルール）
   =============================== */

/* 子要素の最後は margin をゼロに */
.frame-simple-gray p:last-child,
.frame-multi-gray p:last-child,
.frame-simple-yellow p:last-child,
.frame-multi-yellow p:last-child,
.frame-dash p:last-child,
.frame-multi-dash p:last-child,
.title-box-matome p:last-child,
.title-box-multi-matome p:last-child,
.mini-memobox p:last-child,
.mini-cautionbox p:last-child,
.mini-checkbox p:last-child,
.mini-pointbox p:last-child,
.memobox p:last-child,
.cautionbox p:last-child,
.checkbox p:last-child,
.pointbox p:last-child{
  margin-bottom: 0;
}

/* 親で余白を統一管理（PC） */
.frame-simple-gray,
.frame-multi-gray,
.frame-simple-yellow,
.frame-multi-yellow,
.frame-dash,
.frame-multi-dash,
.title-box-matome,
.title-box-multi-matome,
.mini-memobox,
.mini-cautionbox,
.mini-checkbox,
.mini-pointbox,
.memobox,
.cautionbox,
.checkbox,
.pointbox{
  padding-bottom: 1.25rem;  /* PC時の下余白 */
}

/* モバイル（〜600px） */
@media (max-width: 600px){
  .frame-simple-gray,
  .frame-multi-gray,
  .frame-simple-yellow,
  .frame-multi-yellow,
  .frame-dash,
  .frame-multi-dash,
  .title-box-matome,
  .title-box-multi-matome,
  .mini-memobox,
  .mini-cautionbox,
  .mini-checkbox,
  .mini-pointbox,
  .memobox,
  .cautionbox,
  .checkbox,
  .pointbox{
    padding-bottom: 1.25rem; /* 既存値を踏襲（必要なら 1rem に） */
  }
}


/*********************************
* リスト（Design Tokens 参照版）
*********************************/

/* ============ 共通ベース（行間＆項目間） ============ */
.list-blueline,
.list-bluedash,
.list-bluetitle ul,
.list-bluecircle,
.list-bluecircle-title ol{
  line-height: var(--lh-body, 1.8);
  color: var(--color-text, #1C1C1F);
}

.list-blueline li,
.list-bluedash li,
.list-bluetitle li,
.list-bluecircle li,
.list-bluecircle-title li{
  margin: 0.35em 0;  /* 項目間の詰まり防止 */
}

/* ============ 枠線リスト（実線・点線・タイトル付き） ============ */

/* 実線 */
.list-blueline{
  margin: var(--box-gap, 2rem) 0;
  padding: 0.5rem 2.5rem;
  border: 1px solid var(--brand-sage, #4682B4);
  background: #fff;
  box-sizing: border-box;
}
.list-blueline li{ margin: 0.75rem 0; }
.list-blueline li::marker{
  color: var(--brand-sage, #4682B4);
  font-size: 1.05em;
}

/* 点線＋淡背景 */
.list-bluedash{
  margin: var(--box-gap, 2rem) 0;
  padding: 0.5rem 2.5rem;
  border: 2px dashed var(--brand-sage, #4682B4);
  background: var(--neutral-75, #F6F5F2);
  box-sizing: border-box;
}
.list-bluedash li{ margin: 0.75rem 0; }
.list-bluedash li::marker{
  color: var(--brand-sage, #4682B4);
  font-size: 1.05em;
}

/* モバイル（~600px）：右だけ少し詰める */
@media (max-width: 600px){
  .list-blueline,
  .list-bluedash{
    margin: 1.4rem 0;
    padding: 0.5rem 1rem 0.5rem 2rem; /* 上 右 下 左 */
  }
}

/* タイトル付き（ラッパdiv + 内側ul） */
.list-bluetitle{
  margin: var(--box-gap, 2rem) 0;
  padding: 0;
  border: 1px solid var(--brand-sage, #4682B4);
  border-radius: 4px;
  overflow: hidden;
}
.list-bluetitle > div{
  display: flex; justify-content: center; align-items: center;
  margin: 0; padding: 12px 14px;
  background: var(--brand-sage, #4682B4); color: #fff;
  font-size: 1.1em; font-weight: 600; line-height: 1.4;
}
.list-bluetitle > ul{
  list-style: disc;
  margin: 0;
  padding: 1.5rem 2.5rem;       /* 上下1.5 / 左右2.5 */
  border-top: 1px solid var(--border-100, #E7E5E4);
  box-sizing: border-box;
}
.list-bluetitle li{ margin: 0.75rem 0; }
.list-bluetitle li:first-child{ margin-top: 0; }
.list-bluetitle li:last-child{ margin-bottom: 0; }
.list-bluetitle li::marker{
  color: var(--brand-sage, #4682B4);
  font-size: 1.05em;
}

@media (max-width: 600px){
  .list-bluetitle > ul{ padding: 1.25rem 1.25rem 1.25rem 2rem; }
}

/* ============ 番号付き（丸番号） ============ */

.list-bluecircle{
  list-style: none;
  counter-reset: li;
  margin: var(--box-gap, 2rem) 0;
  padding: 0.5rem 1rem;         /* 上下0.5 / 左右1 */
  border: 1px solid var(--brand-sage, #4682B4);
  background: #fff;
  box-sizing: border-box;
}
.list-bluecircle li{
  display: flex; align-items: center; gap: 0.5em;
  padding: 0.3em 0;
  margin: 0.5rem 0.5rem;         /* 枠線リストと同じ上下余白 */
}
.list-bluecircle li::before{
  content: counter(li); counter-increment: li;
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 1.8em; height: 1.8em; border-radius: 50%;
  background: var(--brand-sage, #4682B4);
  color: #fff; font-weight: 700; font-size: .875em;
}

/* 丸番号＋タイトル帯 */
.list-bluecircle-title{
  list-style: none;
  counter-reset: li;
  margin: 1.6rem 0;
  border: 1px solid var(--brand-sage, #4682B4);
  border-radius: 4px;
  overflow: hidden;
}
.list-bluecircle-title div{
  display: flex; justify-content: center; align-items: center;
  margin: 0; padding: 10px;
  background: var(--brand-sage, #4682B4); color: #fff;
  font-size: 1.1em; font-weight: 600;
}
.list-bluecircle-title ol{
  margin: 0;
  padding: 0.5rem 1rem;         /* 上下0.5 / 左右1 */
  box-sizing: border-box;
}
.list-bluecircle-title li{
  display: flex; align-items: center; gap: 0.5em;
  padding: 0.3em 0;
  margin: 0.5rem 0.5rem;
}
.list-bluecircle-title li::before{
  content: counter(li); counter-increment: li;
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 1.8em; height: 1.8em; border-radius: 50%;
  background: var(--brand-sage, #4682B4);
  color: #fff; font-weight: 700; font-size: .875em;
}

/* モバイル：丸番号（余白微調整） */
@media (max-width: 600px){
  .list-bluecircle li,
  .list-bluecircle-title li{
    margin: 1rem 0.5rem 1rem 0rem;
  }
}


/*********************************
* タイトル付きリスト（Design Tokens 参照版）
*********************************/

/* ===== 共通ベース ===== */
.list-free-title01,
.list-free-title02,
.list-free-title03,
.list-free-title04 {
  position: relative;
  margin: var(--space-list-title-mt, 2.5em) 0 var(--space-list-title-mb, 2em) 0;
  padding: 2.25rem 2.5rem 2.25rem 2.5rem; /* タイトルが浮く分、上を厚めに */
  border: 2px solid;     /* 色は各バリエーションで指定 */
  border-radius: 6px;
  background: #fff;
  box-sizing: border-box;
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* ===== Post Content 内の list-free-title（01〜04）を本文基準に合わせる ===== */
#tbp_content .module-post-content .tb_text_wrap
:is(.list-free-title01, .list-free-title02, .list-free-title03, .list-free-title04){
  color: var(--color-text, #1C1C1F);        /* ← 薄さ解消（本文色に固定） */
  font-size: var(--fs-body, 1.0625rem);     /* ← 既存の 1rem を上書き */
  line-height: var(--lh-body, 1.8);
  letter-spacing: var(--ls-body, 0.03em);
}

/* タイトルバッジ（共通） */
.list-free-title01 .list-free-title01-title,
.list-free-title02 .list-free-title01-title,
.list-free-title03 .list-free-title01-title,
.list-free-title04 .list-free-title01-title {
  position: absolute;
  top: -12px; left: 22px;
  background: #fff;
  line-height: 1.2;
  padding: 0.2em 0.7em;
  font-size: 1.06em;
  font-weight: 700;
  white-space: nowrap;
}

/* リスト共通 */
.list-free-title01 ul,
.list-free-title02 ul,
.list-free-title03 ul,
.list-free-title04 ul {
  list-style: disc;
  margin: 0;
  padding: 0; /* 余白は親ボックス側で管理 */
}
.list-free-title01 li,
.list-free-title02 li,
.list-free-title03 li,
.list-free-title04 li {
  margin: 0.5rem 0;
  line-height: var(--lh-body, 1.8);
}
.list-free-title01 li:first-child,
.list-free-title02 li:first-child,
.list-free-title03 li:first-child,
.list-free-title04 li:first-child { margin-top: 0; }
.list-free-title01 li:last-child,
.list-free-title02 li:last-child,
.list-free-title03 li:last-child,
.list-free-title04 li:last-child { margin-bottom: 0; }

/* ===== バリエーションごとの色 ===== */

/* 01: チェック（Support） */
.list-free-title01 { border-color: var(--brand-sage, #4682B4); }
.list-free-title01 .list-free-title01-title { color: var(--brand-sage, #4682B4); }
.list-free-title01 .list-free-title01-title:before {
  content: '\f00c'; font-family: 'Font Awesome 5 Free'; font-weight: 900; margin-right: 6px;
}
.list-free-title01 li::marker { color: var(--brand-sage, #4682B4); font-size: 1.1em; }

/* 02: ペン（Accent） */
.list-free-title02 { border-color: var(--brand-honey, #E28C4C); }
.list-free-title02 .list-free-title01-title { color: var(--brand-honey, #E28C4C); }
.list-free-title02 .list-free-title01-title:before {
  content: '\f304'; font-family: 'Font Awesome 5 Free'; font-weight: 900; margin-right: 6px;
}
.list-free-title02 li::marker { color: var(--brand-honey, #E28C4C); font-size: 1.1em; }

/* 03: ブックマーク（Primary） */
.list-free-title03 { border-color: var(--brand-sky, #5D8D72); }
.list-free-title03 .list-free-title01-title { color: var(--brand-sky, #5D8D72); }
.list-free-title03 .list-free-title01-title:before {
  content: '\f02e'; font-family: 'Font Awesome 5 Free'; font-weight: 900; margin-right: 6px;
}
.list-free-title03 li::marker { color: var(--brand-sky, #5D8D72); font-size: 1.1em; }

/* 04: 注意（Highlight） */
.list-free-title04 { border-color: var(--brand-coral, #B7410E); }
.list-free-title04 .list-free-title01-title { color: var(--brand-coral, #B7410E); }
.list-free-title04 .list-free-title01-title:before {
  content: '\f071'; font-family: 'Font Awesome 5 Free'; font-weight: 900; margin-right: 6px;
}
.list-free-title04 li::marker { color: var(--brand-coral, #B7410E); font-size: 1.1em; }

/* ===== モバイル基準（〜600px） ===== */
@media (max-width: 600px){
  .list-free-title01,
  .list-free-title02,
  .list-free-title03,
  .list-free-title04 {
    padding: 2.25rem 1.25rem 1.75rem 2rem;  /* 右だけ少し詰める */
  }
  .list-free-title01 .list-free-title01-title,
  .list-free-title02 .list-free-title01-title,
  .list-free-title03 .list-free-title01-title,
  .list-free-title04 .list-free-title01-title {
    left: 16px; top: -10px;
    font-size: 1.02em;
    padding: 0.18em 0.6em;
  }
}

/* ===============================
   タイトル付きリスト：本文内最適化（追加調整）
   =============================== */

/* 本文リズム：上下余白をややタイトに */
.list-free-title01,
.list-free-title02,
.list-free-title03,
.list-free-title04 {
  margin-top: 2rem;
  margin-bottom: 1.8rem;
  clear: both; /* 画像回り込みなどの崩れ防止 */
}

/* 見出し直下では上マージンを詰める */
h2 + .list-free-title01,
h2 + .list-free-title02,
h2 + .list-free-title03,
h2 + .list-free-title04,
h3 + .list-free-title01,
h3 + .list-free-title02,
h3 + .list-free-title03,
h3 + .list-free-title04 {
  margin-top: 1.2rem;
}

/* 連続配置時はさらに詰めてリズム調整 */
.list-free-title01 + .list-free-title01,
.list-free-title01 + .list-free-title02,
.list-free-title01 + .list-free-title03,
.list-free-title01 + .list-free-title04,
.list-free-title02 + .list-free-title01,
.list-free-title02 + .list-free-title02,
.list-free-title02 + .list-free-title03,
.list-free-title02 + .list-free-title04,
.list-free-title03 + .list-free-title01,
.list-free-title03 + .list-free-title02,
.list-free-title03 + .list-free-title03,
.list-free-title03 + .list-free-title04,
.list-free-title04 + .list-free-title01,
.list-free-title04 + .list-free-title02,
.list-free-title04 + .list-free-title03,
.list-free-title04 + .list-free-title04 {
  margin-top: 1.1rem;
}

/* 直後に段落/リストが続くときの余白 */
.list-free-title01 + p,
.list-free-title01 + ul,
.list-free-title02 + p,
.list-free-title02 + ul,
.list-free-title03 + p,
.list-free-title03 + ul,
.list-free-title04 + p,
.list-free-title04 + ul {
  margin-top: 0.9rem;
}

/* 本文サイズに追従（念のため） */
.list-free-title01,
.list-free-title02,
.list-free-title03,
.list-free-title04 { font-size: 1rem; }
.list-free-title01 li,
.list-free-title02 li,
.list-free-title03 li,
.list-free-title04 li {
  font-size: 1em;
  list-style-position: outside; /* マーカー視認性UP */
}

/* 極小幅対策（〜360px） */
@media (max-width: 360px){
  .list-free-title01 .list-free-title01-title,
  .list-free-title02 .list-free-title01-title,
  .list-free-title03 .list-free-title01-title,
  .list-free-title04 .list-free-title01-title {
    font-size: 0.96em;
    left: 14px; top: -10px;
    padding: 0.18em 0.55em;
  }
  .list-free-title01,
  .list-free-title02,
  .list-free-title03,
  .list-free-title04 {
    padding: 2rem 1rem 1.6rem 1.75rem; /* 右を詰め、左はバッジに合わせて確保 */
  }
}

/* 印刷最適化 */
@media print{
  .list-free-title01,
  .list-free-title02,
  .list-free-title03,
  .list-free-title04 {
    break-inside: avoid;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}

/* コンパクト版（LPなどで密度UP） */
.list-free-title--compact{
  margin-top: 1.2rem;
  margin-bottom: 1.2rem;
}
.list-free-title--compact ul{ margin: 0; }
.list-free-title--compact li{ margin: 0.7rem 0; }

/* 本文インセット（左右を本文に寄せる） */
.list-free-title--inset{
  padding-right: 1.75rem;
  padding-left: 2rem;
}


/*********************************
* ブログカード（Design Tokens 参照版）
*********************************/

/* ブログカード：ベース */
.blog-card-long{
  margin: 2rem auto;   /* 上下2remの余白、左右autoで中央寄せ */
  max-width: var(--card-max, 720px);   /* 本文幅に合わせて制限 */
}

.card-link{
  display: block;
  width: 100%;
  background: var(--card-bg, #fff);
  color: var(--color-text, #1C1C1F);
  text-decoration: none !important;
  border-radius: var(--radius-card, 12px);
  border: 1px solid var(--color-border-light, #E7E5E4);
  box-shadow: var(--shadow-card, 0 10px 24px rgba(0,0,0,.06));
  overflow: hidden;
  position: relative;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.card-link:hover{
  transform: translateY(-2px);
  box-shadow: var(--shadow-card-hover, 0 14px 30px rgba(0,0,0,.10));
  border-color: var(--color-border-hover, #DAD7D3);
  color: var(--color-text, #1C1C1F);
}
.card-link:focus-visible{
  outline: 3px solid var(--color-focus-ring, #E28C4C);
  outline-offset: 2px;
}

/* ラベル（左上チップ） */
.blog-card-label-long{
  position: absolute;
  top: 10px; left: 10px;
  z-index: 5;            /* ← 画像より前に出す */
  display: inline-block;
  padding: 0 0.6rem;
  min-height: 26px; line-height: 26px;
  max-width: 160px;
  font-size: .82rem;
  font-weight: 800;
  border-radius: 999px;
  letter-spacing: .02em;
  color: #fff;
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease, color .15s ease, border-color .15s ease;
  pointer-events: none; /* クリックはカードへ通す */
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ホバー時は少しだけ“ふわっ” */
.card-link:hover .blog-card-label-long{
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(0,0,0,.12);
}

/* 自動色分け（ラベルの文章を変更するとsageになる） */
.blog-card-label-long.label-sage  { background-color: var(--brand-sage,  #4682B4); color:#fff; } /* 関連記事 */
.blog-card-label-long.label-coral { background-color: var(--brand-coral, #B7410E); color:#fff; } /* おすすめ */

/* 画像 */
.card-link img{ width: 100%; height: auto; display: block; }
.longcard-img{ position: relative; background: var(--card-img-bg, #fff); }
.longcard-link img{ padding: 0; }  /* 余白はテキスト側で管理 */

/* テキスト領域 */
.card-link .blogcard-text{
  display: block;
  padding: var(--card-text-pad, 20px 16px 10px);
  line-height: var(--lh-body, 1.7);
}

.blogcard-title{
  font-size: var(--fs-card-title, 1.1em);
  font-weight: 800;
  line-height: 1.45;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3;
  overflow: hidden; text-overflow: ellipsis;
  color: var(--color-heading, #5D8D72); /* 見出し */
}

.blog-card-excerpt-long{
  margin-top: .55em;
  font-size: var(--fs-card-excerpt, .95em);
  line-height: 1.7;
  font-weight: 400;
  color: var(--color-subtext, #4b5563);
  opacity: .95;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  overflow: hidden; text-overflow: ellipsis;
}

/* スマホ（～600px）：縦積み＋抜粋非表示＋はみ出し防止 */
@media (max-width: 600px){
  .card-link.longcard-link{
    display: block; /* 縦積み */
    max-width: 100%; /* ラッパ（.blog-card-long）で幅管理 */
  }

  .longcard-img{ width: 100%; }
  .longcard-img img{ width: 100%; height: auto; object-fit: cover; }

  /* ここが重要：span をブロック化し、箱の幅を親に合わせる */
  .blogcard-content{
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: var(--card-text-pad-sm, 12px 16px);
  }

  .blog-card-excerpt-long{ display: none; }

  /* タイトルのはみ出し対策を強める */
  .blogcard-title{
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;  /* タイトルは2行で省略（3行にしたければ 3 ） */
    overflow: hidden; text-overflow: ellipsis;
    word-break: break-word; overflow-wrap: anywhere;
    width: 100%; max-width: 100%; box-sizing: border-box;
    font-size: var(--fs-card-title-sm, 1rem);
    line-height: 1.5;
    margin-bottom: 0.8em;  /* デフォルトより広め */
  }

/* スマホはホバーの“浮き”を抑える（任意） */
  .card-link:hover{
    transform: none;
    box-shadow: var(--shadow-card, 0 10px 24px rgba(0,0,0,.06));
  }
}

/* タブレット以上（601px～）：横並び＋テキストはmin-width:0でオーバーフロー抑止 */
@media (min-width: 601px){
  .card-link.longcard-link{ display: flex; max-width: var(--card-max-wide, 860px); } /* 横並び時の見やすい最大幅（必要なら調整） */
  .longcard-img{ flex: 0 0 40%; }
  .card-link.longcard-link .blogcard-content{ flex: 1 1 60%; min-width: 0; }
  .longcard-img img{ width: 100%; height: 100%; object-fit: cover; }
  .blog-card-excerpt-long{
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  }
}

/* テキストブロックの安全な折返し（保険） */
.blogcard-content, .blogcard-title, .blog-card-excerpt-long{
  word-break: break-word;
  overflow-wrap: anywhere;
}


/*********************************
* 引用（Design Tokens 参照版）
*********************************/

blockquote {
  position: relative;
  background: var(--quote-bg, #F8FAFC);   /* 淡グレー背景 */
  padding: var(--quote-pad, 2rem 1.5rem 1.5rem);  /* 上下余白をバランス良く */
  margin: var(--quote-margin, 2rem 0);
  border-left: 4px solid var(--color-heading-accent, #5D8D72); /* Primary濃 */
  border-radius: var(--radius-quote, 6px);
}

blockquote p {
  color: var(--color-text, #1C1C1F);   /* 本文色を統一 */
  margin: 0 0 1rem;
  line-height: var(--lh-body, 1.8);
}

blockquote cite {
  display: block;
  font-size: var(--fs-cite, 0.85em);
  text-align: right;
  color: var(--color-subtext, #555);
  margin-top: -0.5rem;
}

/* 装飾アイコン（Font Awesome） */
blockquote:before,
blockquote:after {
  position: absolute;
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  color: var(--quote-icon, #9CA3AF);
  font-size: var(--fs-quote-icon, 2.2rem);
  line-height: 1;
}

blockquote:before {
  content: "\f10d";
  top: -0.8rem;
  left: 1rem;
}
blockquote:after {
  content: "\f10e";
  bottom: -0.8rem;
  right: 1rem;
}

/* スマホ（〜600px） */
@media (max-width: 600px){
  blockquote {
    padding: var(--quote-pad-sm, 1.5rem 1rem 0.5rem 1rem);
  }
  blockquote:before,
  blockquote:after {
    font-size: var(--fs-quote-icon-sm, 1.8rem);
  }
}


/*********************************
* よくある質問と回答（FAQ）：シンプル（Design Tokens 参照版）
*********************************/

/* ラッパ */
.faq.qa-simple{
  margin: var(--faq-margin, 2rem 0);
  border: 1px solid var(--faq-border, #E7E5E4);
  border-radius: var(--faq-radius, 10px);
  background: var(--faq-bg, #fff);
  overflow: hidden;
}

/* 行レイアウト（Q:dt / A:dd 共通） */
.faq.qa-simple dt,
.faq.qa-simple dd{
  position: relative;
  margin: 0;
  padding: var(--faq-row-pad, 1rem 1.25rem 1rem 3rem); /* 左はQ/Aバッジ分の余白 */
  line-height: var(--lh-body, 1.8);
  color: var(--color-text, #1C1C1F);
}

/* 区切り線（最初のdtのみ線を消す）・背景 */
.faq.qa-simple dt{
  font-weight: 700;
  border-top: 1px solid var(--faq-divider, #F1F0EF);
}
.faq.qa-simple dt:first-of-type{ border-top: 0; }

/* A行は淡色背景で読み分けやすく */
.faq.qa-simple dd{
  background: var(--faq-ans-bg, #F8FCFF); /* 淡色寄りを既定に */
  border-top: 1px dashed var(--faq-border, #E7E5E4);
}

/* Q/Aバッジ */
.faq.qa-simple dt::before,
.faq.qa-simple dd::before{
  content: "";
  position: absolute;
  left: var(--faq-badge-left, 0.9rem);
  top: var(--faq-badge-top, 1rem);
  width: var(--faq-badge-size, 22px);
  height: var(--faq-badge-size, 22px);
  border-radius: 50%;
  font: 700 12px/22px system-ui, -apple-system, "Segoe UI", sans-serif;
  text-align: center;
  color: #fff;
}

.faq.qa-simple dt::before{
  content: "Q";
  background: var(--faq-badge-q-bg, var(--brand-sage, #4682B4));
}
.faq.qa-simple dd::before{
  content: "A";
  background: var(--faq-badge-a-bg, var(--brand-sky, #5D8D72));
}

/* 内部リンクや強調が入っても崩れないように */
.faq.qa-simple a{
  color: var(--color-link, #5D8D72);
  text-decoration: underline;
  text-underline-offset: .2em;
}
.faq.qa-simple strong{ font-weight: 700; }

/* モバイル（〜600px）：左右を少し詰める　｀バッジ位置微調整 */
@media (max-width: 600px){
  .faq.qa-simple dt,
  .faq.qa-simple dd{
    padding: var(--faq-row-pad-sm, .9rem 1rem .9rem 2.6rem);
  }
  .faq.qa-simple dt::before,
  .faq.qa-simple dd::before{
    left: var(--faq-badge-left-sm, .7rem);
  }
}

/* オプション：コンパクト版（必要時） */
.faq.qa-simple.is-compact dt,
.faq.qa-simple.is-compact dd{
  padding-top: var(--faq-compact-pad-v, .8rem);
  padding-bottom: var(--faq-compact-pad-v, .8rem);
}

/* オプション：ボーダー濃いめ（見出し直下で使うなど） */
.faq.qa-simple.is-bold{
  border-color: var(--faq-border-strong, #DAD7D3);
}


/*********************************
* リンクカード（Design Tokens 参照版）
*********************************/

/* ベースラッパ */
.pb-btn{
  margin: var(--linkcard-wrap-margin, 2rem auto);
  max-width: var(--linkcard-wrap-maxw, 720px);  /* 本文幅に合わせやすい */
  width: 100%;
  position: relative;
  overflow: visible; /* ラベルが切れない */
  /* セーフエリア対応は各ブレークポイント側で維持 */
}
.pb-btn p{ margin:0; padding:0; }

/* カード本体 */
.pb-btn a{
  display: flex;
  align-items: center;
  justify-content: space-between;  /* 右端の矢印とテキストを分離 */
  gap: var(--linkcard-gap, 1rem);
  width: 100%;
  padding: var(--linkcard-pad, 1.1rem 3rem 1.0rem 1.25rem); /* 右は矢印分を少し広く */
  color: var(--linkcard-fg, #1C1C1F);
  background: var(--linkcard-bg, #FAFAFA);
  border: var(--linkcard-border-w, 1.5px) solid var(--linkcard-border, #DAD7D3); /* デフォはニュートラル。色は下のモディファイアで上書き */
  border-radius: var(--linkcard-radius, 12px);
  text-decoration: none;
  font-size: var(--linkcard-fs, 1rem);
  font-weight: var(--linkcard-fw, 600);
  box-shadow: var(--linkcard-shadow, 0 8px 18px rgba(0,0,0,.06));
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background-color .18s ease;
  position: relative;
  box-sizing: border-box; /* ← 追加：内側paddingも幅内に収める */
}

/* 文面 */
.pb-btn .pb-btn__text{
  flex: 1 1 auto;  /* ← 追加：テキスト領域に可変幅を与える */
  min-width: 0;    /* ← 追加：長文でも右へ突き抜けない最重要指定 */
  line-height: var(--lh-body, 1.8);
  word-break: break-word;  /* ← 追加：長い単語/URL対策 */
  overflow-wrap: anywhere;  /* ← 追加：端末幅で安全に折り返す */
}

/* 補足テキスト（下） */
.pb-btn .pb-btn__add{
  font-size: var(--linkcard-add-fs, .8rem);
  letter-spacing: var(--linkcard-add-ls, .02em);
  margin: .5rem auto 0;
  max-width: 90%;
  font-weight: 600;
  text-align: center;
  color: var(--linkcard-accent, var(--brand-sage, #4682B4)); /* モディファイアに追従 */
}

/* ラベル（浮かせるチップ） */
.pb-btn .pb-btn__label{
  position: absolute;
  top: var(--linkcard-label-top, -12px); /* ラベル（高さ調整） */
  left: var(--linkcard-label-left, 16px);
  z-index: 2;
  display: inline-block;
  padding: .4em .8em;
  background: var(--linkcard-label-bg, #fff);
  border: 1px solid currentColor; /* 枠は文字色に追従 */
  border-radius: 999px;
  font-size: .75rem;
  line-height: 1;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--linkcard-accent, var(--brand-sage, #4682B4));
}

/* 角度つきラベル（オプションの“リンクカード2”） */
.pb-btn .pb-btn__label-2{
  position: absolute;
  top: -25px; left: -18px;
  z-index: 2;
  display: inline-block;
  font-size: .75rem;
  font-weight: 700;
  transform: rotate(-5deg);
  color: var(--linkcard-accent, var(--brand-sage, #4682B4));
}
.pb-btn .pb-btn__label-2:before{ content:"＼"; margin-right: 3px; }
.pb-btn .pb-btn__label-2:after { content:"／"; margin-left: 3px; }

/* 矢印（右端） */
.pb-btn a::after{
  content: "";
  position: absolute;
  right: var(--linkcard-arrow-right, 16px);
  top: 50%;
  width: 9px; height: 9px;
  border-top: 3px solid var(--linkcard-accent, #5A5A5A);
  border-right: 3px solid var(--linkcard-accent, #5A5A5A);
  transform: translateY(-50%) rotate(45deg);
  transition: border-color .18s ease, right .18s ease;
}

/* ホバー＆フォーカス */
.pb-btn a:hover{
  transform: translateY(-2px);
  box-shadow: var(--linkcard-shadow-hover, 0 12px 26px rgba(0,0,0,.10));
  background: var(--linkcard-bg-hover, #FFFFFF);
  border-color: var(--linkcard-border-hover, #DAD7D3);
}
.pb-btn a:focus-visible{
  outline: 3px solid var(--color-focus-ring, #E28C4C);
  outline-offset: 2px;
}

/* =========================
   ブランド色モディファイア
   ========================= */

/* 共通：モディファイアは “accent（強調色）” だけ差し替え */
.pb-btn--sage    { --linkcard-accent: var(--brand-sage,  #4682B4); --linkcard-border: var(--brand-sage,  #4682B4); --linkcard-border-hover: #3F6F99; }
.pb-btn--coral   { --linkcard-accent: var(--brand-coral, #B7410E); --linkcard-border: var(--brand-coral, #B7410E); --linkcard-border-hover: #9E360C; }
.pb-btn--sky     { --linkcard-accent: var(--brand-sky,   #5D8D72); --linkcard-border: var(--brand-sky,   #5D8D72); --linkcard-border-hover: #4F7A62; }
.pb-btn--honey   { --linkcard-accent: var(--brand-honey, #E28C4C); --linkcard-border: var(--brand-honey, #E28C4C); --linkcard-border-hover: #C87A40; }

/* ボーダー色・矢印色・ラベル色が “accent” に追従 */
.pb-btn--sage a::after,
.pb-btn--coral a::after,
.pb-btn--sky a::after,
.pb-btn--honey a::after{ border-color: var(--linkcard-accent); }
.pb-btn--sage .pb-btn__label,
.pb-btn--coral .pb-btn__label,
.pb-btn--sky .pb-btn__label,
.pb-btn--honey .pb-btn__label{ color: var(--linkcard-accent); }
.pb-btn--sage .pb-btn__label-2,
.pb-btn--coral .pb-btn__label-2,
.pb-btn--sky .pb-btn__label-2,
.pb-btn--honey .pb-btn__label-2{ color: var(--linkcard-accent); }
.pb-btn--sage .pb-btn__add,
.pb-btn--coral .pb-btn__add,
.pb-btn--sky .pb-btn__add,
.pb-btn--honey .pb-btn__add{ color: var(--linkcard-accent); }

/* =========================
   レスポンシブ
   ========================= */

/* スマホ（〜600px） */
@media (max-width: 600px) {
  .pb-btn {
    box-sizing: border-box;
    width: 100%;
    max-width: var(--linkcard-wrap-maxw, 720px);
    margin: var(--linkcard-wrap-margin-sm, 1.6rem auto);
    padding-left: max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
    clear: both;
  }
  .pb-btn a {
    width: 100%;
    padding: var(--linkcard-pad-sm, 1rem 2rem);
    font-size: var(--linkcard-fs-sm, .95rem);
  }
  .pb-btn a::after { right: var(--linkcard-arrow-right-sm, 12px); }
  .pb-btn .pb-btn__label { left: var(--linkcard-label-left-sm, 12px); }
}

/* 大画面スマホ〜小型タブ縦（601–820px） */
@media (min-width: 601px) and (max-width: 820px) {
  .pb-btn {
    box-sizing: border-box;
    max-width: 760px;
    margin-left: auto; margin-right: auto;
    padding-left: max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
  }
  .pb-btn a {
    padding: var(--linkcard-pad-md, 1.1rem 2.25rem 1.05rem 1.25rem);
    font-size: 1rem;
  }
  .pb-btn a::after { right: 14px; }
  .pb-btn .pb-btn__label { left: 16px; }
}

/* iPad縦〜小型タブ横（821–1024px） */
@media (min-width: 821px) and (max-width: 1024px) {
  .pb-btn {
    box-sizing: border-box;
    max-width: 860px;
    margin-left: auto; margin-right: auto;
    padding-left: max(20px, env(safe-area-inset-left));
    padding-right: max(20px, env(safe-area-inset-right));
  }
  .pb-btn a {
    padding: var(--linkcard-pad-lg, 1.2rem 2.5rem 1.1rem 1.5rem);
    font-weight: 600;
  }
  .pb-btn a::after { right: 16px; }
  .pb-btn .pb-btn__label { left: 18px; }
}

/* デスクトップ（1025px〜） */
@media (min-width: 1025px) {
  .pb-btn { max-width: 860px; }
  .pb-btn a:hover {
    transform: translateY(-3px);
    box-shadow: var(--linkcard-shadow-hover, 0 14px 30px rgba(0,0,0,.12));
  }
}

/* 低モーション環境配慮 */
@media (prefers-reduced-motion: reduce) {
  .pb-btn a { transition: none; }
  .pb-btn a:hover { transform: none; }
}

/* ラベル階層（常に前面） */
.pb-btn a { position: relative; z-index: 1; }
.pb-btn .pb-btn__label,
.pb-btn .pb-btn__label-2 { z-index: 2; }


/*********************************
* CVカード（Design Tokens 参照版）
*********************************/

/* ラッパ */
.p-cv-btn-wrap{
  box-sizing: border-box;
  background: var(--cv-wrap-bg, #F6F5F2);
  border: 1px solid var(--cv-wrap-border, #E7E5E4);
  border-radius: var(--cv-wrap-radius, 12px);
  padding: var(--cv-wrap-pad, 1.5rem);
  margin: 0 auto var(--cv-wrap-gap, 2rem);
  max-width: var(--cv-wrap-maxw, 720px);
  line-height: var(--lh-body, 1.8);
  color: var(--color-text, #1C1C1F);
}

/* 画像 */
.p-cv-btn-img{ text-align:center; margin: 0 0 .75rem; }
.p-cv-btn-img img{
  display:inline-block;
  max-width: var(--cv-img-maxw, 320px);
  width:100%; height:auto;
  border-radius: var(--cv-img-radius, 8px);
}

/* 利点リスト（ベース） */
.p-cv-list{
  list-style:none;
  margin: 0 auto .75rem; padding:0; max-width: var(--cv-list-maxw, 540px);
  font-size: .9rem; line-height: 1.6;
}
.p-cv-list li{ position:relative; margin:.5em 0; padding-left:1.6em; }
.p-cv-list li::before{
  font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f00c";
  position:absolute; left:0; top:.15em; font-size:.95em; line-height:1;
  color: var(--cv-accent, var(--brand-sage, #4682B4)); /* チェック色 */
}

/* CTAボタン */
.p-cv-btn{ margin: .5rem auto 0; max-width: var(--cv-list-maxw, 540px); }
.p-cv-btn a{
  display:flex; align-items:center; gap:.75rem; width:100%;
  box-sizing:border-box; padding: .9rem 1rem; border-radius: var(--cv-cta-radius, 10px);
  text-decoration:none; color:#fff; font-weight:700; letter-spacing:.02em;
  border: 1px solid var(--cv-cta-border, transparent);
  background: var(--cv-cta-bg, var(--brand-sage, #4682B4));
  box-shadow: var(--cv-cta-shadow, 0 8px 18px rgba(0,0,0,.06));
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease, border-color .15s ease;
  position:relative;
}
.p-cv-btn a:hover{
  transform: translateY(-1px);
  box-shadow: var(--cv-cta-shadow-hover, 0 12px 26px rgba(0,0,0,.10));
}
.p-cv-btn a:active{
  transform: translateY(2px);
  box-shadow: 0 4px 10px rgba(0,0,0,.08);
}
.p-cv-btn a:focus-visible{
  outline: 3px solid var(--color-focus-ring, #E28C4C);
  outline-offset: 2px;
}

/* ボタン内「無料」チップ */
.p-cv-em{
  display:inline-block; flex:0 0 auto;
  background:#fff; color: inherit; /* CTA色に追従 */
  border-radius: 999px; font-size:.85rem; font-weight:800;
  line-height:1; padding:.4em .7em;
}

/* テキスト＆右アイコン */
.p-cv-text{
  flex: 1 1 auto; min-width:0;
  font-size: 1rem; white-space: normal; overflow-wrap: anywhere;
}
.p-cv-btn i, .p-cv-btn svg{ flex:0 0 auto; width:1.2em; height:1.2em; color:inherit; }

/* 補足 */
.p-cv-btn-centered{
  margin-top: 1rem; margin-bottom: -.25rem;
  text-align:center; font-size:.95rem; font-weight:700;
  color: var(--cv-accent, var(--brand-sage, #4682B4));
}
.p-cv-note{
  margin: .6rem auto 0; max-width: var(--cv-list-maxw, 540px); font-size:.9rem;
  border: 1px solid var(--color-border-light, #E7E5E4);
  border-radius: 8px; padding: .6rem .9rem; background: #fff; color: var(--color-text, #1C1C1F);
}

/* ===== 既定：Support（.p-cv-btn-wrap 単体でもOK） ===== */
.p-cv-btn-wrap{
  --cv-accent: var(--brand-sage, #4682B4);
  --cv-cta-bg: var(--brand-sage, #4682B4);
  --cv-cta-border: #3F6F99; /* 旧 #4C775F を更新 */
}

/* カラーモディファイア（ラッパに付与） */
.p-cv--coral{ --cv-accent: var(--brand-coral, #B7410E); --cv-cta-bg: var(--brand-coral, #B7410E); --cv-cta-border: #9E360C; }
.p-cv--sky  { --cv-accent: var(--brand-sky,   #5D8D72); --cv-cta-bg: var(--brand-sky,   #5D8D72); --cv-cta-border: #4F7A62; }
.p-cv--honey{ --cv-accent: var(--brand-honey, #E28C4C); --cv-cta-bg: var(--brand-honey, #E28C4C); --cv-cta-border: #C87A40; }

/* 既存の色指定をモディファイアに追従させる */
.p-cv-btn-wrap .p-cv-em{ color: var(--cv-accent); }
.p-cv-btn-wrap .p-cv-btn-centered{ color: var(--cv-accent); }
.p-cv-btn-wrap .p-cv-list li::before{ color: var(--cv-accent); }

/* レスポンシブ */
@media (max-width:600px){
  .p-cv-btn-wrap{ padding: 1.1rem; }
  .p-cv-btn-img img{ max-width: 260px; }
  .p-cv-text{ font-size: .95rem; }
  .p-cv-btn-centered, .p-cv-note{ font-size: .9rem; }
}

/* ============ 親だけで余白統一管理（既存運用に合わせて） ============ */

/* 子要素の最後は margin をゼロに */
.p-cv-btn-wrap p:last-child{ margin-bottom: 0; }

/* 親で下余白を統一 */
.p-cv-btn-wrap{ padding-bottom: var(--cv-wrap-pad-b, 1.5rem); }


/* =========================================
   Themify Builder Pro パンくず（tbp_trail_items）補正
   ========================================= */

/* パンくずのUL本体：全体の ul/ol ルールをリセット */
ul.tbp_trail_items{
  margin: 0rem;            /* タイトルとの距離：調整可 */
  padding-left: 0;         /* 左インデントを打ち消す */
  list-style: none;
  font-size: .85rem;       /* 少し小さめ（調整可） */
  line-height: 1.6;
  letter-spacing: .02em;
  color: var(--color-subtext, #6B7280);
}

/* LIは横並び・余白ゼロに（全体 li の上下余白を無効化） */
ul.tbp_trail_items > li{
  display: inline;
  margin: 0;
  padding: 0;
  line-height: inherit;
}

/* 区切り「>」の前後だけ適度にスペース */
ul.tbp_trail_items .tbp_breadcrumb_sep{
  margin: 0 .5em;
  color: var(--color-subtext, #6B7280);
}

/* リンク色・ホバー */
ul.tbp_trail_items a{
  color: var(--color-link, #345547);
  text-decoration: none;
}
ul.tbp_trail_items a:hover{
  text-decoration: underline;
  text-underline-offset: .2em;
}


/* =========================================
   フォントサイズ補正（サイドバー）
   ========================================= */

/* Themifyの 1.07em を無効化して本文基準を 1rem に戻す */
body {
  font-size: 1rem;
  line-height: var(--lh-body, 1.8);
  color: var(--color-text, #1C1C1F);
}


/* =========================================
   Themify Ultra カスタマイズ
   ========================================= */

/*********************************
* トップページ
*********************************/

/* トップページ　スライダータイトル　ボーダー非表示 */
.themify_builder_content-1348 .tb_gyir789.module-pro-slider.module .bsp-slide-post-title {
  border-bottom: none;
}

/* トップページ　お知らせ　タイトル調整 */
.themify_builder_content-1348 .tb_sss6891.module-post.module .post-title, .themify_builder_content-1348 .tb_guyp891.module-post.module .post-title {
  background: none;
  border: none;
  font-weight: 500;
  margin: 0;
  padding: 0;
  text-align: left;
	line-height: 1.4;
}


/*********************************
* サイドバー
*********************************/

/* page 2 column お知らせ */
.loops-wrapper.list-thumb-image .post-title {
  font-size: 1em;
  font-weight: normal;
  border: none;
  margin: 0;
  line-height: 1.4;
}

/* page 2 column お知らせ */
.loops-wrapper.list-thumb-image .post-image {
  float: left;
  margin: 0 .5em .5em 0;
  width: 20%;
}


/*********************************
* マルシェページ
*********************************/

/* マルシェページ　お客様の声　タイトル調整 */
.module-testimonial-slider.image-bubble .testimonial-content h3 {
	border: none;
}


/* マルシェページ　マルシェ日記　タイトル調整 */
.loops-wrapper.grid3 .post-title {
    font-size: 1.2em;
    border: none;
    font-weight: 600;
    text-align: left;
	  line-height: 1.4;
	  margin-top: 0;
    padding: 0 5% 7% 5%;
}

/* マルシェページ　イベント　タイトル調整 */
.themify_event_post_loop.grid2 .tep_post_title {
  font-size: 1.8em;
	border: none;
}


/*********************************
* お知らせページ
*********************************/

/* お知らせ一覧　画像内タイトル　オーバーレイの濃さ */
.loops-wrapper.overlay .post-image + .post-content, .loops-wrapper.overlay .post-image + .product-content, .loops-wrapper.polaroid .post-image + .post-content, .loops-wrapper.polaroid .post-image + .product-content {
  background-color: rgba(0,0,0,.5);
  color: #fff;
  padding: 5%;
}


/*********************************
* メンバー紹介ページ
*********************************/

.themify_builder_content-1350 .tb_kick750.module-image.module .image-title {
  border: none;
}



/* =========================================
   アップデート等による不意のデザイン崩れ対応
   追記CSS
   ========================================= */

/*********************************
* すべてのイタリックを排除（WooCommerce含む）
*********************************/

/* body配下を全て normal に固定 */
body,
body * ,
body *::before,
body *::after{
  font-style: normal !important;
}

/* 念のため：見出し・タイトル系も明示（Themify生成CSS対策） */
h1, h2, h3, h4, h5, h6,
.entry-title, .entry-title a,
.post-title, .post-title a,
.module-post-title h1, .module-post-title h1 a,
.builder-posts-wrap .post-title a{
  font-style: normal !important;
}

/* 代表的な“元々斜体になりがちな要素”も明示（ブロック/woocommerceでも出やすい） */
em, i, cite, dfn, var, address, blockquote, q{
  font-style: normal !important;
}