@charset "UTF-8";

/* =========================================================
   SEO Article Skin (Posts only)
   Theme vibe: Soft purple + subtle accent + clean UI
   ========================================================= */

:root{
  --brand-1:#7e57c2; /* soft purple */
  --brand-2:#9575cd; /* light purple */
  --accent:#FFD54F;  /* soft amber */
  --accent-2:#FFCA28;/* warm amber */
  --bg:#ffffff;
  --bg-sub:#F7F7F8;
  --bg-purple:#f8f6fc;
  --text:#2c2c2c;
  --muted:#666666;
  --border:rgba(44,44,44,.10);

  --radius-1:6px;
  --radius-2:8px;
  --shadow-1:0 2px 8px rgba(44,44,44,.06);
  --shadow-2:0 2px 6px rgba(126,87,194,.08);

  --grad:linear-gradient(180deg, var(--brand-1), var(--brand-2));
}

/* 投稿ページ以外に波及させたくない場合の保険 */
.single-post .article,
.single-post .entry-content{
  color:var(--text);
}

/* =========================
   全体：読みやすさ
   ========================= */
.single-post .article{
  line-height: 1.9;
}

.single-post .entry-content{
  font-size: 16px;
  letter-spacing: .01em;
}

@media (min-width: 768px){
  .single-post .entry-content{
    font-size: 17px;
  }
}

/* =========================
   タイトル（フラット＋左ボーダー）
   ========================= */
.single-post .entry-title{
  position: relative;
  padding: 14px 16px;
  border-radius: var(--radius-2);
  background: var(--bg-purple);
  border-left: 5px solid var(--brand-1);
  color: var(--text);
  box-shadow: none;
}

.single-post .entry-title::after{
  display: none;
}

.single-post .entry-content > p:first-of-type{
  margin-top: 18px;
}

/* =========================
   見出し（h2/h3/h4）
   ========================= */

/* H2: 薄紫背景＋左ボーダー */
.single-post .entry-content h2{
  margin: 44px 0 16px;
  padding: 12px 16px;
  border-radius: var(--radius-2);
  background: var(--bg-purple);
  border-left: 5px solid var(--brand-1);
  color: var(--text);
  box-shadow: none;
}

/* H3: 下線のみですっきり */
.single-post .entry-content h3{
  margin: 30px 0 12px;
  padding: 8px 0 8px 0;
  border-radius: 0;
  background: transparent;
  border: none;
  border-bottom: 2px solid #d1c4e9;
  color: var(--text);
  position: relative;
}

.single-post .entry-content h3::before{
  display: none;
}

/* H4: 控えめ左ボーダー */
.single-post .entry-content h4{
  margin: 22px 0 10px;
  padding: 4px 0 4px 10px;
  border-left: 3px solid #b39ddb;
  color: #444;
}

/* =========================
   リンク
   ========================= */
.single-post .entry-content a{
  color: #5e35b1;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.single-post .entry-content a:hover{
  color: var(--brand-1);
}

.single-post .entry-content a:focus{
  outline: 2px solid rgba(126,87,194,.4);
  outline-offset: 2px;
  border-radius: 4px;
}

/* =========================
   画像
   ========================= */
.single-post .entry-content img{
  border-radius: var(--radius-2);
  box-shadow: var(--shadow-1);
}

/* =========================
   箇条書き
   ========================= */
.single-post .entry-content ul,
.single-post .entry-content ol{
  padding-left: 1.25em;
  margin: 12px 0 18px;
}

.single-post .entry-content li{
  margin: 6px 0;
}

/* =========================
   引用
   ========================= */
.single-post .entry-content blockquote{
  margin: 18px 0;
  padding: 14px 16px;
  border-radius: var(--radius-2);
  background: #faf9fc;
  border: 1px solid #e8e0f0;
  border-left: 4px solid #b39ddb;
}

.single-post .entry-content blockquote p{
  margin: 0;
  color: var(--muted);
}

/* =========================
   コード
   ========================= */
.single-post .entry-content code{
  padding: .2em .45em;
  border-radius: 6px;
  background: rgba(126,87,194,.08);
  border: 1px solid rgba(126,87,194,.14);
  font-size: .95em;
}

.single-post .entry-content pre{
  padding: 14px 16px;
  border-radius: var(--radius-2);
  background: #2b2b2b;
  color: #e8e8e8;
  overflow:auto;
  box-shadow: var(--shadow-1);
  border: 1px solid rgba(255,255,255,.06);
}

.single-post .entry-content pre code{
  background: transparent;
  border: 0;
  padding: 0;
  color: inherit;
}

/* =========================
   表（テーブル）
   ========================= */
.single-post .entry-content table{
  width:100%;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  border-radius: var(--radius-2);
  box-shadow: var(--shadow-1);
  border: 1px solid var(--border);
}

.single-post .entry-content th{
  background: var(--brand-1);
  color:#fff;
  padding: 12px 10px;
  text-align:left;
}

.single-post .entry-content td{
  background:#fff;
  padding: 12px 10px;
  border-top: 1px solid var(--border);
}

.single-post .entry-content tr:nth-child(even) td{
  background: var(--bg-sub);
}

/* =========================
   Cocoonの目次（.toc）
   ========================= */
.single-post .toc{
  margin: 20px auto 26px;
  padding: 14px 16px;
  border-radius: var(--radius-2);
  background: var(--bg-purple);
  border: 1px solid #e8e0f0;
  max-width: fit-content;
}

.single-post .toc-title{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(126,87,194,.10);
  border: 1px solid rgba(126,87,194,.18);
  color: var(--text);
  font-weight: 700;
}

/* =========================
   CTAボタン（.seo-btn）
   ========================= */
.single-post .entry-content .seo-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5em;
  min-height: 44px;
  padding: 10px 16px;
  border-radius: var(--radius-2);
  font-weight: 700;
  text-decoration: none;
  border: 1px solid transparent;
  box-shadow: var(--shadow-1);
  transition: transform .08s ease, box-shadow .2s ease, filter .2s ease;
}

.single-post .entry-content .seo-btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(44,44,44,.10);
  filter: brightness(1.02);
}

.single-post .entry-content .seo-btn:active{
  transform: translateY(0);
  box-shadow: var(--shadow-1);
}

.single-post .entry-content .seo-btn--primary{
  background: var(--brand-1);
  color:#fff;
}

.single-post .entry-content .seo-btn--secondary{
  background: rgba(255,213,79,.7);
  color:#2c2c2c;
  border-color: rgba(255,202,40,.4);
}

/* =========================
   注意・補足（.seo-note）
   ========================= */
.single-post .entry-content .seo-note{
  margin: 18px 0;
  padding: 14px 16px;
  border-radius: var(--radius-2);
  border: 1px solid var(--border);
  background: #fff;
  box-shadow: var(--shadow-1);
}

.single-post .entry-content .seo-note--tip{
  border-color: rgba(126,87,194,.18);
  background: var(--bg-purple);
}

.single-post .entry-content .seo-note--warn{
  border-color: rgba(255,202,40,.3);
  background: rgba(255,213,79,.12);
}

/* =========================
   余白の最適化
   ========================= */
.single-post .entry-content h2 + p,
.single-post .entry-content h3 + p{
  margin-top: 10px;
}

/* =========================
   区切り線
   ========================= */
.single-post .entry-content hr{
  border:0;
  height: 1px;
  background: #e8e0f0;
  margin: 28px 0;
}

/* =========================
   画像（figure/figcaption）
   ========================= */
.single-post .entry-content .seo-figure {
  margin: 24px auto;
  text-align: center;
}

.single-post .entry-content .seo-figure img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-2);
  box-shadow: var(--shadow-1);
}

.single-post .entry-content .seo-figure figcaption {
  margin-top: 8px;
  padding: 8px 12px;
  font-size: 14px;
  color: var(--muted);
  text-align: center;
  background: var(--bg-purple);
  border-radius: 0 0 var(--radius-1) var(--radius-1);
}