/* =========================================================
   Kaisen Article Design v1.0
   対象：.kaisen-post（記事ページ）
   - h2：指定デザイン採用（上下余白しっかり）
   - h3/h4：章構造が分かるデザインに変更
   - BOX：影なし／色付き背景＋左アクセント
   - リスト：2パターン
   - 吹き出し：2パターン
   - 画像：余白/角丸/キャプション
   - ボタン：CTA大きめ・丸め・矢印・ホバー
   - 楽天CTA：.rakuten クラスで赤
========================================================= */

/* =========================
   base
========================= */
/* =========================
   wrapper（指定）
========================= */
.post-hub {
  margin: 0;
  padding: 0 20px !important;
}
@media (max-width: 768px) {
  .post-hub { padding: 0 10px !important; }
}

.kaisen-post .kaisen-content{
  line-height: 1.95;     /* 行間は広め（狭い問題を解消） */
  color: #0f172a;        /* ぼやけ防止：濃い目 */
}

@media (max-width: 768px){
  .kaisen-post .kaisen-content{ font-size: 15px; line-height: 1.95; }
}

.kaisen-post .kaisen-content p{
  margin: 0 0 1.25em !important; /* 段落の区切り */
}

/* =========================
   headings（h2は指定デザインを採用）
========================= */
.kaisen-post .kaisen-content h2{
  margin: 40px 0 30px !important;
  position: relative;
  display: flex;
  align-items: center;
  padding: 13px 0 13px 30px;
  font-size: 16px !important;
  background: rgba(12, 29, 60, 0.06);
  border-radius: 6px;
  font-weight: 700;
  line-height: 1.3;
  color: #0C1D3C;
  border: none !important;
}

/* 左の縦棒 */
.kaisen-post .kaisen-content h2::after{
  content: "";
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 5px;
  height: 20px;
  background: #0C1D3C;
  border-radius: 9999px;
}

/* h3：小見出し（シンプルに強弱） */
.kaisen-post .kaisen-content h3{
  margin: 26px 0 14px !important;
  font-size: 15.5px !important;
  font-weight: 800 !important;
  color: #0C1D3C;
  padding: 0 0 8px;
  border-bottom: 1px solid rgba(12,29,60,.18);
}

/* h4：さらに下の階層（左ライン） */
.kaisen-post .kaisen-content h4{
  margin: 18px 0 10px !important;
  font-size: 14.5px !important;
  font-weight: 800 !important;
  color: rgba(12,29,60,.92);
  padding-left: 10px;
  border-left: 3px solid rgba(12,29,60,.35);
}

/* =========================
   links
========================= */
.kaisen-post .kaisen-content a{
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

/* =========================
   BOX（影なし／色・アクセントで“拾える”）
   使い分け：.kaisen-box / .kaisen-box--caution / .kaisen-box--tips / .kaisen-box--steps
========================= */
.kaisen-post .kaisen-box{
  border: 1px solid rgba(12,29,60,.18);
  border-left: 6px solid rgba(12,29,60,.45);
  border-radius: 10px;
  background: rgba(12, 29, 60, 0.04);
  padding: 14px 14px 12px;
  margin: 18px 0;
  box-shadow: none !important;
}

.kaisen-post .kaisen-box__title{
  font-size: 14px;
  font-weight: 800;
  margin: 0 0 10px;
  color: #0C1D3C;
}

.kaisen-post .kaisen-box__list{
  margin: 0;
  padding-left: 1.2em;
}

.kaisen-post .kaisen-box__list li{ margin: 7px 0; }

/* 注意（赤系） */
.kaisen-post .kaisen-box--caution{
  border-color: rgba(220,38,38,.22);
  border-left-color: rgba(220,38,38,.55);
  background: rgba(220,38,38,.06);
}
.kaisen-post .kaisen-box--caution .kaisen-box__title{
  color: rgba(170, 0, 0, .95);
}

/* コツ（青緑系） */
.kaisen-post .kaisen-box--tips{
  border-color: rgba(2,132,199,.22);
  border-left-color: rgba(2,132,199,.55);
  background: rgba(2,132,199,.06);
}

/* 手順（紺系） */
.kaisen-post .kaisen-box--steps{
  border-color: rgba(12,29,60,.18);
  border-left-color: rgba(12,29,60,.60);
  background: rgba(12,29,60,.05);
}

/* =========================
   LIST（2パターン）
   A: 通常（デフォ） / B: チェックリスト .kaisen-list--check
========================= */
.kaisen-post .kaisen-content ul,
.kaisen-post .kaisen-content ol{
  margin: 10px 0 18px !important;
  padding-left: 1.25em;
}

.kaisen-post .kaisen-content li{
  margin: 9px 0;
}

.kaisen-post .kaisen-content ul.kaisen-list--check{
  list-style: none;
  padding-left: 0;
  margin: 12px 0 18px !important;
}
.kaisen-post .kaisen-content ul.kaisen-list--check li{
  position: relative;
  padding-left: 28px;
  margin: 10px 0;
}
.kaisen-post .kaisen-content ul.kaisen-list--check li::before{
  content: "?";
  position: absolute;
  left: 0;
  top: 0.1em;
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(12,29,60,.10);
  color: #0C1D3C;
  font-weight: 900;
  font-size: 13px;
}

/* =========================
   吹き出し（2パターン）
   使い方：<div class="kaisen-bubble kaisen-bubble--tip">...</div>
========================= */
.kaisen-post .kaisen-bubble{
  border-radius: 14px;
  padding: 12px 14px;
  margin: 16px 0;
  position: relative;
  border: 1px solid rgba(12,29,60,.18);
  background: rgba(12,29,60,.04);
}
.kaisen-post .kaisen-bubble::after{
  content:"";
  position:absolute;
  left: 18px;
  top: -8px;
  width: 14px;
  height: 14px;
  background: inherit;
  border-left: 1px solid rgba(12,29,60,.18);
  border-top: 1px solid rgba(12,29,60,.18);
  transform: rotate(45deg);
}

.kaisen-post .kaisen-bubble--tip{
  border-color: rgba(2,132,199,.22);
  background: rgba(2,132,199,.06);
}
.kaisen-post .kaisen-bubble--caution{
  border-color: rgba(220,38,38,.22);
  background: rgba(220,38,38,.06);
}

/* =========================
   画像周り（角丸・余白・キャプション）
========================= */
.kaisen-post .kaisen-content img{
  border-radius: 12px;
}

.kaisen-post .kaisen-content figure{
  margin: 18px 0;
}
.kaisen-post .kaisen-content figcaption{
  margin-top: 8px;
  font-size: 12px;
  color: rgba(0,0,0,.65);
}

/* =========================
   ボタン（CTA）
   - デフォ：紺
   - 楽天：.rakuten を付与で赤
   - センター寄せ & 大きめ & 角丸 & 矢印
========================= */
.kaisen-post .kaisen-hero__cta{
  display: flex;
  justify-content: center; /* 中央寄せ */
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 14px;
}

.kaisen-post a.kaisen-btn{
  min-width: 280px;
  max-width: 520px;
  width: 100%;
  padding: 14px 18px;
  border-radius: 999px; /* しっかり丸く */
  border: 1px solid rgba(12,29,60,.22);
  background: #0C1D3C;
  color: #fff !important;
  font-weight: 900;
  text-decoration: none !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: transform .08s ease, opacity .18s ease, filter .18s ease;
}

.kaisen-post a.kaisen-btn::after{
  content: "?";
  font-size: 20px;
  line-height: 1;
  transform: translateY(-1px);
  opacity: .95;
}

.kaisen-post a.kaisen-btn:hover{
  opacity: .96;
  filter: brightness(1.05);
  transform: translateY(-1px);
}
.kaisen-post a.kaisen-btn:active{
  transform: translateY(0);
}

/* 楽天（赤） */
.kaisen-post a.kaisen-btn.rakuten{
  background: #D60000;
  border-color: rgba(214,0,0,.35);
}

/* スマホ：押しやすく */
@media (max-width: 768px){
  .kaisen-post a.kaisen-btn{
    min-width: 0;
    width: 100%;
    padding: 15px 18px;
  }
}
/* =========================================================
   Text highlight utilities (運用しやすい強調)
   使い方例：
   <span class="hl-yl">重要ワード</span>
   <span class="hl-dot">重要ワード</span>
   <span class="hl-marker">重要ワード</span>
========================================================= */

.kaisen-post .kaisen-content .hl-yl{
  background: linear-gradient(transparent 60%, rgba(255, 215, 0, .45) 0);
  padding: 0 .15em;
  border-radius: 4px;
  font-weight: 800;
}

/* 黄色の下線（細め、品良く） */
.kaisen-post .kaisen-content .hl-marker{
  position: relative;
  font-weight: 800;
}
.kaisen-post .kaisen-content .hl-marker::after{
  content:"";
  position:absolute;
  left: 0;
  right: 0;
  bottom: -0.15em;
  height: 6px;
  background: rgba(255, 215, 0, .55);
  border-radius: 999px;
  z-index: -1;
}

/* ドット下線（細かい点線） */
.kaisen-post .kaisen-content .hl-dot{
  text-decoration: none;
  background-image: radial-gradient(rgba(12,29,60,.55) 1px, transparent 1px);
  background-size: 6px 2px;     /* ドット密度 */
  background-repeat: repeat-x;
  background-position: 0 100%;
  padding-bottom: 2px;
  font-weight: 800;
}

/* ついでに：重要文を“黄色線付き”にしたいときのp用 */
.kaisen-post .kaisen-content .lead-line{
  border-left: 5px solid rgba(255, 215, 0, .9);
  padding-left: 12px;
  margin: 14px 0 18px !important;
  font-weight: 650;
}