@charset "UTF-8";

/* ===== Base ===== */
:root{
  --ink:#0b1e33;
  --sub:#4a6078;
  --brand:#174a8b;
  --brand-soft:#e9f1fb;
  --accent:#caa86b;       /* 上品なゴールド */
  --bg:#ffffff;
  --muted:#f6f8fb;
  --danger:#b00020;
}

.blog-wrap{
  color:var(--ink);
  font-family:"Noto Sans JP","Hiragino Kaku Gothic ProN",system-ui,-apple-system,sans-serif;
  line-height:1.9;
  letter-spacing:0.02em;
  font-size:16px;
}
.blog-wrap img{max-width:100%;height:auto;border-radius:10px}

/* ===== Eye-catch ===== */
.eye-catch{
  background: linear-gradient(160deg,#0e2a4a 0%, #173b67 45%, #235085 100%);
  color:#fff;border-radius:16px;padding:28px 22px;margin:10px 0 20px;
  position:relative;overflow:hidden;
}
.eye-catch::after{
  content:"";position:absolute;inset:-20% -20% auto auto;width:60%;height:160%;
  background: radial-gradient(ellipse at top left, rgba(255,255,255,.15), transparent 60%);
  transform:rotate(12deg);
}
.eye-catch-title{
  font-family:"Hiragino Mincho ProN","Yu Mincho",serif;
  font-weight:700;font-size:clamp(22px,3.2vw,30px);line-height:1.5;margin:0 0 6px;
}
.eye-catch-caption{
  font-size:clamp(13px,2.2vw,15px);opacity:.92;margin:0
}

/* ===== Headings ===== */
.blog-wrap h1{
  font-size:clamp(24px,3.8vw,34px);
  line-height:1.35;margin:28px 0 14px;
  font-weight:800; letter-spacing:.01em;
}
.blog-wrap h2{
  font-size:clamp(18px,3vw,22px);
  margin:26px 0 10px; font-weight:700;
  border-left:5px solid var(--brand);
  padding-left:10px;
}
.blog-wrap h3{
  font-size:clamp(16px,2.6vw,19px);
  margin:18px 0 8px; font-weight:700; color:var(--brand);
}

/* ===== Paragraphs & Lists ===== */
.blog-wrap p{margin:14px 0}
.blog-wrap ul{margin:8px 0 14px 1.3em}
.blog-wrap li{margin:6px 0}

/* ===== “問いかけ”強調（行内/ブロック両対応） ===== */
.ask{
  background:var(--brand-soft);
  border-left:4px solid var(--accent);
  padding:10px 12px; border-radius:8px; color:var(--ink);
  margin:14px 0;
}
.ask strong{color:var(--brand)}

/* ===== 引用（ひとことを印象的に） ===== */
.pull{
  margin:18px 0; padding:14px 16px;
  background:var(--muted); border-radius:12px;
  font-family:"Hiragino Mincho ProN","Yu Mincho",serif;
  position:relative;
}
.pull::before{
  content:"“"; position:absolute; left:10px; top:-6px;
  font-size:40px; color:#d0d8e5; line-height:1;
}
.pull p{margin:0}

/* ===== 結びの固定フレーズ帯 ===== */
.closure{
  margin:26px 0 10px; padding:16px 18px;
  border:1px solid #e5eaf2; border-radius:12px;
  background:#fff;
}
.closure .line{
  font-weight:700; color:var(--brand); text-align:center;
}

/* ===== Share row ===== */
.share-row{
  display:flex; gap:10px; align-items:center; flex-wrap:wrap;
  margin:22px 0 6px;
}
.share-btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 12px; border-radius:999px; border:1px solid #dbe3ee;
  background:#fff; color:var(--ink); text-decoration:none; cursor:pointer;
}
.share-btn:hover{border-color:var(--brand); box-shadow:0 2px 8px rgba(23,74,139,.08)}
.share-btn svg{width:16px;height:16px}

/* ===== Progress bar（読了インジケーター） ===== */
.read-progress{
  position:fixed; left:0; top:0; height:3px; width:0%;
  background:linear-gradient(90deg,var(--accent), #8fb7ff);
  box-shadow:0 0 6px rgba(23,74,139,.35);
  z-index:9999; transition:width .15s ease;
}

/* ===== 小さめ端末最適化 ===== */
@media (max-width: 480px){
  .eye-catch{padding:22px 16px}
  .share-row{gap:8px}
}