/* =========================================================
   Novelumo Design Pack
   Version : 1.0
   Author  : Novelumo Project
   Updated : 2026-07-13
========================================================= */

/* =========================================================
   01. 基本カラー・共通設定
========================================================= */

:root {
  --novelumo-blue: #2563eb;
  --novelumo-blue-dark: #173f73;
  --novelumo-blue-light: #eff6ff;

  --novelumo-red: #dc2626;
  --novelumo-red-light: #fff1f2;

  --novelumo-yellow: #b45309;
  --novelumo-yellow-light: #fffbeb;

  --novelumo-green: #047857;
  --novelumo-green-light: #ecfdf5;

  --novelumo-gray: #475569;
  --novelumo-gray-light: #f8fafc;
  --novelumo-border: #dbe3ee;

  --novelumo-text: #1f2937;
  --novelumo-white: #ffffff;

  --novelumo-radius: 8px;
  --novelumo-shadow: 0 4px 14px rgba(15, 23, 42, 0.08);
}

/* 記事本文の基本設定 */
.content,
.entry-content,
.postContents {
  color: var(--novelumo-text);
  line-height: 1.9;
  word-break: break-word;
}

/* 本文段落 */
.content p,
.entry-content p,
.postContents p {
  margin-top: 0;
  margin-bottom: 1.6em;
}

/* 太字 */
.content strong,
.entry-content strong,
.postContents strong {
  font-weight: 700;
}

/* =========================================================
   02. H2見出し
========================================================= */

.content h2,
.entry-content h2,
.postContents h2 {
  position: relative;
  margin: 3.5em 0 1.4em;
  padding: 18px 22px;
  border: none;
  border-left: 7px solid var(--novelumo-blue-dark);
  border-radius: 0 var(--novelumo-radius) var(--novelumo-radius) 0;
  background: linear-gradient(
    135deg,
    var(--novelumo-blue) 0%,
    #3478f6 100%
  );
  color: var(--novelumo-white);
  font-size: 1.45em;
  font-weight: 700;
  line-height: 1.5;
  box-shadow: var(--novelumo-shadow);
}

.content h2::before,
.entry-content h2::before,
.postContents h2::before {
  content: "";
  position: absolute;
  top: 0;
  right: 18px;
  width: 58px;
  height: 100%;
  background: rgba(255, 255, 255, 0.08);
  transform: skewX(-18deg);
  pointer-events: none;
}

/* =========================================================
   03. H3見出し
========================================================= */

.content h3,
.entry-content h3,
.postContents h3 {
  position: relative;
  margin: 2.8em 0 1.2em;
  padding: 11px 14px 11px 18px;
  border-left: 5px solid var(--novelumo-blue);
  border-bottom: 1px solid var(--novelumo-border);
  background: var(--novelumo-gray-light);
  color: var(--novelumo-blue-dark);
  font-size: 1.23em;
  font-weight: 700;
  line-height: 1.55;
}

/* =========================================================
   04. H4見出し
========================================================= */

.content h4,
.entry-content h4,
.postContents h4 {
  margin: 2.2em 0 1em;
  padding: 7px 0 7px 14px;
  border-left: 3px solid var(--novelumo-blue);
  color: #25364d;
  font-size: 1.08em;
  font-weight: 700;
  line-height: 1.6;
}

/* =========================================================
   05. Novelumo Point
   最重要ポイント・結論
========================================================= */

.novelumo-point {
  position: relative;
  margin: 2em 0;
  padding: 54px 22px 20px;
  border: 2px solid var(--novelumo-blue);
  border-radius: var(--novelumo-radius);
  background: var(--novelumo-blue-light);
  box-shadow: var(--novelumo-shadow);
}

.novelumo-point::before {
  content: "💡 Novelumo Point";
  position: absolute;
  top: 0;
  left: 0;
  padding: 9px 18px;
  border-radius: 5px 0 8px 0;
  background: var(--novelumo-blue);
  color: var(--novelumo-white);
  font-size: 0.95em;
  font-weight: 700;
  letter-spacing: 0.03em;
}

.novelumo-point > :last-child {
  margin-bottom: 0;
}

/* =========================================================
   06. 補足メモ
========================================================= */

.novelumo-memo {
  position: relative;
  margin: 2em 0;
  padding: 52px 22px 18px;
  border: 1px solid #94a3b8;
  border-radius: var(--novelumo-radius);
  background: var(--novelumo-gray-light);
}

.novelumo-memo::before {
  content: "📝 MEMO";
  position: absolute;
  top: 0;
  left: 0;
  padding: 8px 16px;
  border-radius: 5px 0 8px 0;
  background: var(--novelumo-gray);
  color: var(--novelumo-white);
  font-size: 0.92em;
  font-weight: 700;
}

.novelumo-memo > :last-child {
  margin-bottom: 0;
}

/* =========================================================
   07. 注意・失敗ポイント
========================================================= */

.novelumo-warning {
  position: relative;
  margin: 2em 0;
  padding: 54px 22px 20px;
  border: 2px solid var(--novelumo-red);
  border-radius: var(--novelumo-radius);
  background: var(--novelumo-red-light);
}

.novelumo-warning::before {
  content: "⚠ 注意";
  position: absolute;
  top: 0;
  left: 0;
  padding: 9px 18px;
  border-radius: 5px 0 8px 0;
  background: var(--novelumo-red);
  color: var(--novelumo-white);
  font-size: 0.95em;
  font-weight: 700;
}

.novelumo-warning > :last-child {
  margin-bottom: 0;
}

/* =========================================================
   08. 最短ルート
========================================================= */

.novelumo-route {
  position: relative;
  margin: 2em 0;
  padding: 54px 22px 20px;
  border: 2px solid var(--novelumo-green);
  border-radius: var(--novelumo-radius);
  background: var(--novelumo-green-light);
}

.novelumo-route::before {
  content: "🚀 今ならこうする";
  position: absolute;
  top: 0;
  left: 0;
  padding: 9px 18px;
  border-radius: 5px 0 8px 0;
  background: var(--novelumo-green);
  color: var(--novelumo-white);
  font-size: 0.95em;
  font-weight: 700;
}

.novelumo-route > :last-child {
  margin-bottom: 0;
}

/* =========================================================
   09. 黄色の補足・ヒント
========================================================= */

.novelumo-hint {
  position: relative;
  margin: 2em 0;
  padding: 54px 22px 20px;
  border: 2px solid #d97706;
  border-radius: var(--novelumo-radius);
  background: var(--novelumo-yellow-light);
}

.novelumo-hint::before {
  content: "🔎 ヒント";
  position: absolute;
  top: 0;
  left: 0;
  padding: 9px 18px;
  border-radius: 5px 0 8px 0;
  background: var(--novelumo-yellow);
  color: var(--novelumo-white);
  font-size: 0.95em;
  font-weight: 700;
}

.novelumo-hint > :last-child {
  margin-bottom: 0;
}

/* =========================================================
   10. 今日のゴール
========================================================= */

.novelumo-goal {
  position: relative;
  margin: 2.4em 0;
  padding: 58px 24px 22px;
  border-radius: var(--novelumo-radius);
  background: linear-gradient(135deg, #eff6ff 0%, #ffffff 100%);
  box-shadow: var(--novelumo-shadow);
  border: 1px solid #93c5fd;
}

.novelumo-goal::before {
  content: "🎯 今日のゴール";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  padding: 11px 18px;
  border-radius: var(--novelumo-radius) var(--novelumo-radius) 0 0;
  background: var(--novelumo-blue);
  color: var(--novelumo-white);
  font-weight: 700;
}

.novelumo-goal > :last-child {
  margin-bottom: 0;
}

/* =========================================================
   11. チェックリスト
========================================================= */

.novelumo-checklist {
  margin: 2em 0;
  padding: 20px 22px;
  border: 1px solid #86efac;
  border-radius: var(--novelumo-radius);
  background: #f0fdf4;
}

.novelumo-checklist ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.novelumo-checklist li {
  position: relative;
  margin: 0;
  padding: 9px 0 9px 34px;
  border-bottom: 1px dashed #bbf7d0;
}

.novelumo-checklist li:last-child {
  border-bottom: none;
}

.novelumo-checklist li::before {
  content: "✓";
  position: absolute;
  top: 8px;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 23px;
  height: 23px;
  border-radius: 50%;
  background: var(--novelumo-green);
  color: var(--novelumo-white);
  font-size: 0.82em;
  font-weight: 700;
}

/* =========================================================
   12. リスト共通
========================================================= */

.content ul,
.content ol,
.entry-content ul,
.entry-content ol,
.postContents ul,
.postContents ol {
  margin: 1.4em 0 1.8em;
  padding-left: 1.8em;
}

.content li,
.entry-content li,
.postContents li {
  margin-bottom: 0.65em;
  line-height: 1.75;
}

/* =========================================================
   13. 比較表・通常テーブル
========================================================= */

.content table,
.entry-content table,
.postContents table {
  width: 100%;
  margin: 2em 0;
  border-collapse: collapse;
  border-spacing: 0;
  background: var(--novelumo-white);
  font-size: 0.96em;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.06);
}

.content table th,
.entry-content table th,
.postContents table th {
  padding: 13px 12px;
  border: 1px solid #cbd5e1;
  background: var(--novelumo-blue-dark);
  color: var(--novelumo-white);
  font-weight: 700;
  text-align: center;
  vertical-align: middle;
}

.content table td,
.entry-content table td,
.postContents table td {
  padding: 13px 12px;
  border: 1px solid #dbe3ee;
  text-align: left;
  vertical-align: top;
}

.content table tbody tr:nth-child(even),
.entry-content table tbody tr:nth-child(even),
.postContents table tbody tr:nth-child(even) {
  background: #f8fafc;
}

.content table tbody tr:hover,
.entry-content table tbody tr:hover,
.postContents table tbody tr:hover {
  background: #eff6ff;
}

/* 横幅を超える表に使用 */
.novelumo-table-scroll {
  width: 100%;
  margin: 2em 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.novelumo-table-scroll table {
  margin: 0;
  min-width: 680px;
}

/* =========================================================
   14. ノベル・ルモ共通吹き出し
========================================================= */

.novelumo-balloon {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin: 2.2em 0;
}

.novelumo-balloon.is-right {
  flex-direction: row-reverse;
}

.novelumo-balloon__person {
  flex: 0 0 82px;
  width: 82px;
  text-align: center;
}

.novelumo-balloon__person img {
  display: block;
  width: 72px;
  height: 72px;
  margin: 0 auto 6px;
  border: 3px solid var(--novelumo-white);
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.16);
}

.novelumo-balloon__name {
  color: var(--novelumo-gray);
  font-size: 0.8em;
  font-weight: 700;
}

.novelumo-balloon__body {
  position: relative;
  flex: 1;
  padding: 17px 19px;
  border: 1px solid #cbd5e1;
  border-radius: 12px;
  background: var(--novelumo-white);
  box-shadow: var(--novelumo-shadow);
}

.novelumo-balloon__body::before {
  content: "";
  position: absolute;
  top: 25px;
  left: -11px;
  width: 19px;
  height: 19px;
  border-left: 1px solid #cbd5e1;
  border-bottom: 1px solid #cbd5e1;
  background: var(--novelumo-white);
  transform: rotate(45deg);
}

.novelumo-balloon.is-right .novelumo-balloon__body::before {
  right: -11px;
  left: auto;
  border: none;
  border-top: 1px solid #cbd5e1;
  border-right: 1px solid #cbd5e1;
}

.novelumo-balloon__body > :last-child {
  margin-bottom: 0;
}

/* ノベル */
.novelumo-balloon.is-novel .novelumo-balloon__body {
  border-color: #93c5fd;
  background: var(--novelumo-blue-light);
}

/* ルモ */
.novelumo-balloon.is-lumo .novelumo-balloon__body {
  border-color: #86efac;
  background: var(--novelumo-green-light);
}

/* =========================================================
   15. CTAボタン
========================================================= */

.novelumo-button-wrap {
  margin: 2.4em 0;
  text-align: center;
}

.novelumo-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 260px;
  padding: 15px 28px;
  border: 2px solid var(--novelumo-blue);
  border-radius: 999px;
  background: linear-gradient(
    135deg,
    var(--novelumo-blue) 0%,
    #1d4ed8 100%
  );
  color: var(--novelumo-white) !important;
  font-weight: 700;
  line-height: 1.5;
  text-decoration: none !important;
  box-shadow: 0 6px 14px rgba(37, 99, 235, 0.24);
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    background 0.2s ease;
}

.novelumo-button::after {
  content: "→";
  margin-left: 10px;
}

.novelumo-button:hover {
  background: var(--novelumo-white);
  color: var(--novelumo-blue) !important;
  transform: translateY(-2px);
  box-shadow: 0 9px 18px rgba(37, 99, 235, 0.2);
}

/* =========================================================
   16. 次の記事を読む
========================================================= */

.novelumo-next-article {
  margin: 2.8em 0;
  padding: 20px 22px;
  border-left: 6px solid var(--novelumo-blue);
  border-radius: 0 var(--novelumo-radius) var(--novelumo-radius) 0;
  background: var(--novelumo-blue-light);
  box-shadow: var(--novelumo-shadow);
}

.novelumo-next-article a {
  color: var(--novelumo-blue-dark);
  font-weight: 700;
  text-decoration: none;
}

.novelumo-next-article a:hover {
  color: var(--novelumo-blue);
  text-decoration: underline;
}

/* =========================================================
   17. FAQ
========================================================= */

.novelumo-faq {
  margin: 2.2em 0;
}

.novelumo-faq details {
  margin-bottom: 14px;
  border: 1px solid var(--novelumo-border);
  border-radius: var(--novelumo-radius);
  background: var(--novelumo-white);
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.05);
  overflow: hidden;
}

.novelumo-faq summary {
  position: relative;
  padding: 16px 48px 16px 54px;
  background: var(--novelumo-gray-light);
  color: var(--novelumo-blue-dark);
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}

.novelumo-faq summary::-webkit-details-marker {
  display: none;
}

.novelumo-faq summary::before {
  content: "Q";
  position: absolute;
  top: 13px;
  left: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 27px;
  height: 27px;
  border-radius: 50%;
  background: var(--novelumo-blue);
  color: var(--novelumo-white);
  font-size: 0.85em;
  font-weight: 700;
}

.novelumo-faq summary::after {
  content: "＋";
  position: absolute;
  top: 13px;
  right: 17px;
  color: var(--novelumo-blue);
  font-size: 1.3em;
  font-weight: 700;
}

.novelumo-faq details[open] summary::after {
  content: "−";
}

.novelumo-faq__answer {
  position: relative;
  padding: 18px 20px 18px 54px;
}

.novelumo-faq__answer::before {
  content: "A";
  position: absolute;
  top: 17px;
  left: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 27px;
  height: 27px;
  border-radius: 50%;
  background: var(--novelumo-green);
  color: var(--novelumo-white);
  font-size: 0.85em;
  font-weight: 700;
}

.novelumo-faq__answer > :last-child {
  margin-bottom: 0;
}

/* =========================================================
   18. 引用
   本当の引用だけに使用
========================================================= */

.content blockquote,
.entry-content blockquote,
.postContents blockquote {
  margin: 2em 0;
  padding: 20px 22px 20px 52px;
  border: 1px solid #cbd5e1;
  border-left: 5px solid #64748b;
  background: #f8fafc;
  color: #334155;
  font-style: italic;
}

.content blockquote::before,
.entry-content blockquote::before,
.postContents blockquote::before {
  color: #94a3b8;
}

/* =========================================================
   19. 強調文字
========================================================= */

/* 最重要 */
.novelumo-red {
  color: var(--novelumo-red);
  font-weight: 700;
}

/* 注意・マイナス */
.novelumo-blue {
  color: #1d4ed8;
  font-weight: 700;
}

/* 通常の重要部分 */
.novelumo-bold {
  color: var(--novelumo-text);
  font-weight: 700;
}

/* マーカー */
.novelumo-marker {
  padding: 0 0.15em;
  background: linear-gradient(
    transparent 62%,
    rgba(250, 204, 21, 0.5) 62%
  );
  font-weight: 700;
}

/* =========================================================
   20. 区切り線
========================================================= */

.content hr,
.entry-content hr,
.postContents hr {
  margin: 3em 0;
  border: none;
  border-top: 1px solid var(--novelumo-border);
}

/* =========================================================
   21. スマートフォン対応
========================================================= */

@media screen and (max-width: 767px) {

  .content,
  .entry-content,
  .postContents {
    line-height: 1.85;
  }

  .content h2,
  .entry-content h2,
  .postContents h2 {
    margin-top: 2.8em;
    padding: 15px 16px;
    border-left-width: 5px;
    font-size: 1.24em;
  }

  .content h3,
  .entry-content h3,
  .postContents h3 {
    margin-top: 2.3em;
    padding: 10px 11px 10px 14px;
    font-size: 1.12em;
  }

  .content h4,
  .entry-content h4,
  .postContents h4 {
    font-size: 1.03em;
  }

  .novelumo-point,
  .novelumo-memo,
  .novelumo-warning,
  .novelumo-route,
  .novelumo-hint,
  .novelumo-goal {
    padding-right: 16px;
    padding-left: 16px;
  }

  .novelumo-balloon,
  .novelumo-balloon.is-right {
    gap: 9px;
  }

  .novelumo-balloon__person {
    flex-basis: 58px;
    width: 58px;
  }

  .novelumo-balloon__person img {
    width: 52px;
    height: 52px;
  }

  .novelumo-balloon__name {
    font-size: 0.7em;
  }

  .novelumo-balloon__body {
    padding: 14px 15px;
    font-size: 0.95em;
  }

  .novelumo-balloon__body::before {
    top: 18px;
    left: -9px;
    width: 15px;
    height: 15px;
  }

  .novelumo-balloon.is-right .novelumo-balloon__body::before {
    right: -9px;
    left: auto;
  }

  .novelumo-button {
    width: 100%;
    min-width: 0;
    padding: 14px 18px;
  }

  .novelumo-faq summary {
    padding: 15px 43px 15px 49px;
  }

  .novelumo-faq__answer {
    padding: 16px 16px 16px 49px;
  }

  .content table,
  .entry-content table,
  .postContents table {
    font-size: 0.88em;
  }

  .content table th,
  .content table td,
  .entry-content table th,
  .entry-content table td,
  .postContents table th,
  .postContents table td {
    padding: 10px 8px;
  }
}