:root{--bg:#f7f9fb;--card:#fff;--ink:#1a1f2e;--muted:#4a5568;--line:#e2e8f0;--accent:#4f7ef5;--green:#10b981;--dark:#2a3f6f}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"Noto Sans JP","Segoe UI",sans-serif;line-height:1.85;-webkit-font-smoothing:antialiased}.siteHeader{background:#fff;border-bottom:1px solid var(--line);box-shadow:0 1px 3px rgba(0,0,0,.04)}.siteHeaderInner{max-width:1080px;margin:0 auto;padding:16px 22px;display:flex;align-items:center;justify-content:space-between;gap:16px}.brand{display:flex;align-items:center;gap:0;text-decoration:none;color:var(--ink)}.brandLogo{height:28px;width:auto;display:block}.nav{display:flex;gap:18px;align-items:center;flex-wrap:wrap}.nav a{color:var(--muted);text-decoration:none;font-size:14px;font-weight:600;transition:color .15s}.nav a:hover{color:var(--accent)}.hero{max-width:1080px;margin:0 auto;padding:52px 22px 32px}.kicker{display:inline-block;border-radius:999px;background:#eef2ff;color:var(--accent);font-size:13px;font-weight:700;padding:6px 14px;margin-bottom:16px;letter-spacing:.02em}h1{font-size:clamp(32px,5vw,52px);line-height:1.2;letter-spacing:-.02em;margin:0 0 18px;font-weight:800}.lead{font-size:17px;color:var(--muted);max-width:100%;margin:0;line-height:1.75}.main{max-width:1080px;margin:0 auto;padding:0 22px 72px}.articleCard{background:#fff;border:1px solid var(--line);border-radius:16px;padding:32px;box-shadow:0 4px 24px rgba(26,31,46,.06)}.postGrid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}.postLink{display:block;text-decoration:none;color:inherit;background:#fff;border:1px solid var(--line);border-radius:14px;padding:24px;transition:all .2s;box-shadow:0 2px 8px rgba(26,31,46,.04)}.postLink:hover{transform:translateY(-3px);box-shadow:0 12px 32px rgba(79,126,245,.12);border-color:#c7d2fe}.postTitle{font-size:20px;line-height:1.4;margin:0 0 12px;font-weight:700;color:var(--ink)}.postDesc{font-size:14px;color:var(--muted);margin:0 0 16px;line-height:1.7}.postDate{font-size:12px;color:#94a3b8;font-weight:600;letter-spacing:.01em}.article{font-size:16px;line-height:1.8}.article h2{font-size:28px;line-height:1.4;margin:48px 0 20px;padding-left:18px;border-left:4px solid var(--accent);font-weight:800;letter-spacing:-.01em}.article h3{font-size:23px;line-height:1.45;margin:36px 0 14px;font-weight:700;color:#45af38}.article p{margin:0 0 20px}.article ul,.article ol{background:#f8fafc;border:1px solid var(--line);border-radius:12px;padding:20px 24px 20px 44px;margin:24px 0}.article li{margin:8px 0}.article table{width:100%;border-collapse:collapse;margin:28px 0;background:#fff;border:1px solid var(--line);border-radius:10px;overflow:hidden}.article th,.article td{border:1px solid var(--line);padding:14px 16px;vertical-align:top}.article th{background:#f8fafc;font-weight:700;color:var(--ink)}.article img{max-width:100%;height:auto;border-radius:12px;margin:24px 0}.article a:not(.backLink){color:var(--accent);font-weight:600;text-decoration:none;border-bottom:1px solid rgba(79,126,245,.3)}.article a:not(.backLink):hover{border-bottom-color:var(--accent)}.backLink{display:inline-flex;margin-top:32px;border-radius:8px;background:var(--accent);color:#fff;text-decoration:none;font-weight:700;padding:12px 20px;font-size:14px;transition:.2s}.backLink:hover{background:#3a6ae0;transform:translateY(-1px)}.empty{background:#fff;border:1px solid var(--line);border-radius:14px;padding:32px;color:var(--muted);text-align:center;font-size:15px}.footer{border-top:1px solid var(--line);padding:32px 22px;text-align:center;color:#94a3b8;font-size:13px;background:#fff}@media(max-width:760px){.siteHeaderInner{align-items:flex-start;flex-direction:column;gap:12px}.nav{gap:14px}.postGrid{grid-template-columns:1fr}.articleCard{padding:24px}.article h2{font-size:24px}.article h3{font-size:20px;color:#45af38}}

/* 記事末尾の注意書き */
.article .note_text {
  font-size: 13px;
  line-height: 1.7;
  color: #8a94a6;
  margin-top: 32px;
}

/* 20260521 修正 */

/* 記事内目次 */
.article .simple_toc {
  margin: 32px 0 40px;
  padding: 24px 26px;
  background: #f8fbff;
  border: 1px solid #dbe7ff;
  border-radius: 16px;
  box-shadow: 0 4px 18px rgba(79, 126, 245, 0.06);
}

/* 目次タイトル */
.article .simple_toc .toc_title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
  font-size: 18px;
  font-weight: 800;
  color: #1a1f2e;
  line-height: 1.5;
}

/* Font Awesomeを使う場合 */
.article .simple_toc .toc_title::before {
  content: "\f0eb";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: #eef2ff;
  color: #4f7ef5;
  font-size: 14px;
  flex: 0 0 auto;
}

/* simple_toc内のulだけ、通常記事リストの装飾を外す */
.article .simple_toc ul {
  margin: 0;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
  list-style: none;
}

/* 目次項目 */
.article .simple_toc li {
  margin: 0;
  border-top: 1px solid #e6edf7;
}

/* 目次の最初の項目だけ線なし */
.article .simple_toc li:first-child {
  border-top: none;
}

/* 目次リンク */
.article .simple_toc a {
  display: block;
  position: relative;
  padding: 11px 28px 11px 2px;
  color: #2a3f6f;
  font-weight: 700;
  text-decoration: none;
  border-bottom: none;
  line-height: 1.6;
}

/* 右側の矢印 */
.article .simple_toc a::after {
  content: "›";
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  color: #4f7ef5;
  font-size: 22px;
  line-height: 1;
}

/* ホバー */
.article .simple_toc a:hover {
  color: #4f7ef5;
}

/* スマホ調整 */
@media (max-width: 760px) {
  .article .simple_toc {
    margin: 28px 0 34px;
    padding: 20px;
    border-radius: 14px;
  }

  .article .simple_toc .toc_title {
    font-size: 17px;
  }

  .article .simple_toc a {
    padding: 10px 24px 10px 0;
    font-size: 15px;
  }
}


/* 記事内ボックスブロック */
.article .box_block {
  margin: 28px 0 36px;
  padding: 24px 26px;
  background: #f8fbff;
  border: 1px solid #dbe7ff;
  border-radius: 16px;
  box-shadow: 0 4px 18px rgba(79, 126, 245, 0.06);
}

/* box_block内のul、olだけ通常リストの箱デザインを解除 */
.article .box_block ul,
.article .box_block ol {
  margin: 0;
  background: transparent;
  border: none;
  border-radius: 0;
}

/* ulの箇条書き機能は残す */
.article .box_block ul {
  padding: 0 0 0 1.4em;
  list-style: disc;
}

/* olの番号リスト機能は残す */
.article .box_block ol {
  padding: 0 0 0 1.6em;
  list-style: decimal;
}

/* strongがタイトルとして使われている場合のみ、見出し風にする */
.article .box_block > strong,
.article .box_block > p:first-child strong {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
  font-size: 18px;
  font-weight: 800;
  color: #1a1f2e;
  line-height: 1.5;
}

/* strongタイトルにだけリスト風アイコンを付ける */
.article .box_block > strong::before,
.article .box_block > p:first-child strong::before {
  content: "\f03a";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: #eef2ff;
  color: #4f7ef5;
  font-size: 13px;
  flex: 0 0 auto;
}

/* strongタイトルを含むpの余白調整 */
.article .box_block > p:first-child {
  margin: 0 0 14px;
}

/* リスト項目 */
.article .box_block li {
  margin: 8px 0;
  padding-left: 2px;
  color: #2a3f6f;
  font-weight: 700;
  line-height: 1.7;
}

/* マーカーの色だけCost Pandaの青に寄せる */
.article .box_block li::marker {
  color: #4f7ef5;
  font-weight: 800;
}

/* スマホ調整 */
@media (max-width: 760px) {
  .article .box_block {
    margin: 24px 0 32px;
    padding: 20px;
    border-radius: 14px;
  }

  .article .box_block > strong,
  .article .box_block > p:first-child strong {
    font-size: 17px;
  }

  .article .box_block li {
    font-size: 15px;
  }
}
/* 数式ボックス：重なり防止版 */
.article .formula_box {
  display: block;
  width: 100%;
  clear: both;
  box-sizing: border-box;

  margin: 24px 0;
  padding: 14px 18px;

  background: #f8fbff;
  border: 1px solid #dbe7ff;
  border-radius: 12px;

  color: #2a3f6f;
  font-weight: 800;
  line-height: 1.7;

  white-space: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
}

/* formula_boxの中にpが入っている場合 */
.article .formula_box p {
  margin: 0;
  padding: 0;
  line-height: 1.7;
  white-space: nowrap;
}

/* formula_boxの次の文章との間隔 */
.article .formula_box + p {
  margin-top: 20px;
}

/* pの直後にformula_boxが来る場合の間隔 */
.article p + .formula_box {
  margin-top: 22px;
}

/* formula_boxが連続する場合 */
.article .formula_box + .formula_box {
  margin-top: 16px;
}

/* スマホ調整 */
@media (max-width: 760px) {
  .article .formula_box {
    margin: 22px 0;
    padding: 12px 14px;
    font-size: 15px;
    line-height: 1.7;
  }

  .article .formula_box p {
    line-height: 1.7;
  }
}
/* box_block内のp余白を消す */
.article .box_block p,
.article .box_block > p:first-child {
  margin: 0;
  padding: 0;
}

/* 20260522 CTAボタン・戻るボタン最終修正 */

/* COST PANDA CTA：『COST PANDAを無料で試す』ボタン（ctaFloatと同じ形状・青色） */
.article .cp_cta .cp_btn,
.article .cp_cta .cp_btn:link,
.article .cp_cta .cp_btn:visited {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: auto !important;
  max-width: 100% !important;
  padding: 14px 28px !important;
  margin-top: 8px !important;
  border-radius: 999px !important;
  background: #4f7ef5 !important;
  color: #ffffff !important;
  border: none !important;
  border-bottom: none !important;
  text-decoration: none !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  line-height: 1.4 !important;
  white-space: nowrap !important;
  box-sizing: border-box !important;
  overflow: visible !important;
  box-shadow: 0 4px 18px rgba(79, 126, 245, 0.35) !important;
  transition: background 0.18s, box-shadow 0.18s, transform 0.18s !important;
}

.article .cp_cta .cp_btn:hover,
.article .cp_cta .cp_btn:active,
.article .cp_cta .cp_btn:focus {
  background: #3a6ae0 !important;
  color: #ffffff !important;
  border: none !important;
  border-bottom: none !important;
  text-decoration: none !important;
  box-shadow: 0 6px 24px rgba(79, 126, 245, 0.45) !important;
  transform: translateY(-2px) !important;
}

/* コラム一覧へ戻る */
.backLink,
a.backLink,
a.backLink:link,
a.backLink:visited,
.article .backLink,
.article a.backLink,
.article a.backLink:link,
.article a.backLink:visited {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  min-width: 108px !important;
  min-height: 44px !important;
  margin-top: 32px !important;
  padding: 12px 20px !important;
  border-radius: 8px !important;
  background: #4f7ef5 !important;
  color: #ffffff !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  border: none !important;
  border-bottom: none !important;
  text-decoration: none !important;
  box-shadow: none !important;
  opacity: 1 !important;
  box-sizing: border-box !important;
  overflow: visible !important;
  transition: background 0.2s, transform 0.2s !important;
}

.backLink::before,
.backLink::after,
a.backLink::before,
a.backLink::after,
.article .backLink::before,
.article .backLink::after,
.article a.backLink::before,
.article a.backLink::after {
  content: none !important;
}

.backLink:hover,
a.backLink:hover,
a.backLink:active,
a.backLink:focus,
.article .backLink:hover,
.article a.backLink:hover,
.article a.backLink:active,
.article a.backLink:focus {
  background: #3a6ae0 !important;
  color: #ffffff !important;
  border: none !important;
  border-bottom: none !important;
  text-decoration: none !important;
  transform: translateY(-1px) !important;
}

@media (max-width: 760px) {
  .article .cp_cta .cp_btn,
  .article .cp_cta .cp_btn:link,
  .article .cp_cta .cp_btn:visited,
  .article .cp_cta .cp_btn:hover,
  .article .cp_cta .cp_btn:active {
    width: 100% !important;
    white-space: normal !important;
    text-align: center !important;
  }
}

/* フローティングCTAボタン */
.ctaFloat,
a.ctaFloat,
a.ctaFloat:link,
a.ctaFloat:visited {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  background: #d7a20a !important;
  color: #ffffff !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  text-decoration: none !important;
  border: none !important;
  border-bottom: none !important;
  border-radius: 999px !important;
  padding: 14px 28px !important;
  box-shadow: 0 4px 18px rgba(215, 162, 10, 0.35) !important;
  white-space: nowrap !important;
}

a.ctaFloat:hover,
a.ctaFloat:active,
a.ctaFloat:focus {
  background: #bf8f08 !important;
  color: #ffffff !important;
  border: none !important;
  border-bottom: none !important;
  text-decoration: none !important;
  box-shadow: 0 4px 18px rgba(215, 162, 10, 0.35) !important;
}

.ctaLogo {
  height: 22px !important;
  width: auto !important;
  vertical-align: middle !important;
}

/* 20260525 FAQデザイン調整 */
/* FAQ全体：記事本文内で自然に見えるように、プロンプト指定の cp_faq 構造に対応 */
.article .cp_faq {
  margin: 28px 0 40px;
}

/* FAQの質問：h3と同じ緑を使い、本文より少し大きく表示 */
.article .cp_faq .cp_faq_q {
  margin: 24px 0 10px;
  color: #45af38;
  font-size: 19px;
  font-weight: 800;
  line-height: 1.55;
}

/* 最初の質問だけ上の余白を抑える */
.article .cp_faq .cp_faq_q:first-child {
  margin-top: 0;
}

/* FAQの回答：背景色と枠線は付けず、本文として自然に表示 */
.article .cp_faq .cp_faq_a {
  margin: 0 0 18px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
}

/* 回答内pの余白を整える */
.article .cp_faq .cp_faq_a p {
  margin: 0;
}

@media (max-width: 760px) {
  .article .cp_faq .cp_faq_q {
    font-size: 18px;
    line-height: 1.55;
  }

  .article .cp_faq .cp_faq_a {
    padding: 0;
  }
}

/* 20260526 cp_btn スタンドアロン対応（ctaFloatの色以外の見た目を共有） */

/* .cp_cta の外で単独使用する .cp_btn にもフローティングボタンと同じ形状を適用 */
.article .cp_btn,
.article .cp_btn:link,
.article .cp_btn:visited {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  text-decoration: none !important;
  border-radius: 999px !important;
  padding: 14px 28px !important;
  white-space: nowrap !important;
  line-height: 1.4 !important;
  box-sizing: border-box !important;
  transition: background 0.18s, box-shadow 0.18s, transform 0.18s !important;
  /* 色は cp_cta 内と同じ青を使用 */
  background: #4f7ef5 !important;
  color: #ffffff !important;
  border: none !important;
  border-bottom: none !important;
  box-shadow: 0 4px 18px rgba(79, 126, 245, 0.35) !important;
}

.article .cp_btn:hover,
.article .cp_btn:active,
.article .cp_btn:focus {
  background: #3a6ae0 !important;
  color: #ffffff !important;
  border: none !important;
  border-bottom: none !important;
  text-decoration: none !important;
  box-shadow: 0 6px 24px rgba(79, 126, 245, 0.45) !important;
  transform: translateY(-2px) !important;
}

@media (max-width: 760px) {
  .article .cp_btn,
  .article .cp_btn:link,
  .article .cp_btn:visited,
  .article .cp_btn:hover,
  .article .cp_btn:active {
    width: 100% !important;
    white-space: normal !important;
    text-align: center !important;
    padding: 12px 20px !important;
    font-size: 14px !important;
  }
}
/* 記事内のCOST PANDAボタン：形はフローティングCTA風、背景色は青のまま */
.article .cp_btn,
.article .cp_btn:link,
.article .cp_btn:visited,
.article .cp_cta .cp_btn,
.article .cp_cta .cp_btn:link,
.article .cp_cta .cp_btn:visited {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;

  width: auto !important;
  max-width: 100% !important;
  min-height: auto !important;

  padding: 14px 28px !important;
  border-radius: 999px !important;

  background: #4f7ef5 !important;
  color: #ffffff !important;

  font-size: 15px !important;
  font-weight: 800 !important;
  line-height: 1.4 !important;
  text-decoration: none !important;
  white-space: nowrap !important;

  border: none !important;
  border-bottom: none !important;
  box-shadow: 0 4px 18px rgba(79, 126, 245, 0.35) !important;

  box-sizing: border-box !important;
  overflow: visible !important;
}

.article .cp_btn:hover,
.article .cp_btn:active,
.article .cp_btn:focus,
.article .cp_cta .cp_btn:hover,
.article .cp_cta .cp_btn:active,
.article .cp_cta .cp_btn:focus {
  background: #3a6ae0 !important;
  color: #ffffff !important;
  border: none !important;
  border-bottom: none !important;
  text-decoration: none !important;
  box-shadow: 0 6px 24px rgba(79, 126, 245, 0.45) !important;
  transform: none !important;
}

/* 記事内の汎用img指定がロゴ画像に当たるのを防ぐ */
.article .cp_btn_logo_img {
  display: block !important;
  height: 22px !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  flex: 0 0 auto !important;
}

/* ボタン内テキスト */
.article .cp_btn span {
  display: inline-block !important;
  color: #ffffff !important;
  line-height: 1.4 !important;
}

/* スマホ時 */
@media (max-width: 760px) {
  .article .cp_btn,
  .article .cp_btn:link,
  .article .cp_btn:visited,
  .article .cp_cta .cp_btn,
  .article .cp_cta .cp_btn:link,
  .article .cp_cta .cp_btn:visited {
    width: 100% !important;
    white-space: normal !important;
    text-align: center !important;
    padding: 12px 20px !important;
    font-size: 14px !important;
  }
}