/*
 * npc Column Author CTA — フロント用CSS
 *
 * 正典: デザインモック v2.1（author-cta-mock.html・クライアント最終OK済み）
 * 「npc-aca-cta-」接頭辞ブロックを値変更なしで移植（mock- 接頭辞・.mock-note-inline は含めない）。
 * 色・サイズ（パネル文字=白・グラデ #a295c8→#8d7fb8・text-shadow・22px bold 等）は
 * WCAG計算済みのクライアント確定値のため変更禁止。
 *
 * テーマ（crieinc2.0）は Bootstrap 3 同梱のため全プロパティ明示指定・リセット依存なし。
 * フォントはサイト読込済みの family 名（zen-maru-gothic 等）を使用し、プラグインからは読み込まない。
 *
 * モックからの補完（デザイン値の変更なし・実装上の必要分のみ）:
 *   1. box-sizing の明示（モックはページ足場の「* { box-sizing: border-box }」に依存していたため
 *      プラグインスコープで明示。Bootstrap 3 も border-box だが自前で担保する）
 *   2. .npc-aca-cta-photo img（実写真用。モックはプレースホルダのみだったため丸抜き表示の指定を追加）
 */

/* ============================================================
   box-sizing の明示（補完1）
   ============================================================ */
.npc-aca-cta-mid,
.npc-aca-cta-mid *,
.npc-aca-cta-end,
.npc-aca-cta-end * {
  box-sizing: border-box;
}

/* ============================================================
   共通パーツ：顔写真・ボタン基礎
   ============================================================ */
.npc-aca-cta-photo {
  flex-shrink: 0;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: #d4d4d4;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.npc-aca-cta-photo span {
  font-size: 12px;
  color: #888;
  letter-spacing: 1px;
}
/* 実写真（補完2）: 丸抜きいっぱいに表示 */
.npc-aca-cta-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  margin: 0;
}
.npc-aca-cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 10px 28px;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  line-height: 1.4;
  transition: opacity .2s ease, background-color .2s ease, color .2s ease;
}
.npc-aca-cta-btn:hover { opacity: .85; }
.npc-aca-cta-btn:focus-visible {
  outline: 3px solid #2e2750;
  outline-offset: 2px;
}
.npc-aca-cta-btn svg { flex-shrink: 0; }
.npc-aca-cta-btn-line {
  background: #06C755;
  color: #fff;
}
@media (prefers-reduced-motion: reduce) {
  .npc-aca-cta-btn { transition: none; }
}

/* ============================================================
   記事中間ブロック（.npc-aca-cta-mid）＝パーソナル型
   吹き出し＋丸ゴ見出し＋ピルボタン。
   テーマ実在モチーフ（ラベンダー2px枠の吹き出し・有機的な円）を流用
   ============================================================ */
.npc-aca-cta-mid {
  position: relative;
  margin: 48px 0;
  padding: 38px 34px 32px;
  background: #f5f2fa;
  border-radius: 14px;
  overflow: hidden;
}
/* ヒーロー帯の有機的な円モチーフを控えめに引用（画像不使用・CSSのみ） */
.npc-aca-cta-mid::before,
.npc-aca-cta-mid::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.npc-aca-cta-mid::before {
  width: 180px;
  height: 180px;
  right: -60px;
  top: -70px;
  background: rgba(162,149,200,.14);
}
.npc-aca-cta-mid::after {
  width: 110px;
  height: 110px;
  left: -40px;
  bottom: -50px;
  border: 2px solid rgba(162,149,200,.25);
  background: transparent;
}
.npc-aca-cta-mid > * { position: relative; z-index: 1; }

.npc-aca-cta-mid-heading {
  margin: 0 0 24px;
  font-family: zen-maru-gothic, "Zen Maru Gothic", "Hiragino Maru Gothic ProN", sans-serif;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: 3px;
  line-height: 1.7;
  text-align: center;
  color: #875f87;
}

/* --- 顔写真＋吹き出し（テーマの吹き出しパターンを踏襲） --- */
.npc-aca-cta-mid-row {
  display: flex;
  gap: 22px;
  align-items: center;
  margin: 0 0 18px;
}
.npc-aca-cta-mid-bubble {
  position: relative;
  flex: 1;
  padding: 18px 22px;
  background: #fff;
  border: 2px solid #a295c8;
  border-radius: 12px;
}
.npc-aca-cta-mid-bubble::before {
  content: "";
  position: absolute;
  left: -12px;
  top: 50%;
  margin-top: -10px;
  border: 10px solid transparent;
  border-right: 12px solid #a295c8;
  border-left: none;
}
.npc-aca-cta-mid-bubble::after {
  content: "";
  position: absolute;
  left: -8px;
  top: 50%;
  margin-top: -8px;
  border: 8px solid transparent;
  border-right: 10px solid #fff;
  border-left: none;
}
.npc-aca-cta-mid-bubble p {
  margin: 0;
  font-size: 14px;
  line-height: 1.9;
  color: #555;
}

.npc-aca-cta-mid-quali {
  margin: 0 0 2px;
  text-align: center;
  font-size: 12px;
  letter-spacing: 1px;
  color: #875f87;
}
.npc-aca-cta-mid-name {
  margin: 0 0 4px;
  text-align: center;
  font-size: 17px;
  font-weight: 700;
  color: #333;
}
.npc-aca-cta-mid-title {
  margin: 0 0 2px;
  text-align: center;
  font-size: 12.5px;
  line-height: 1.7;
  color: #666;
}
.npc-aca-cta-mid-date {
  margin: 0 0 24px;
  text-align: center;
  font-size: 11.5px;
  color: #999;
}

.npc-aca-cta-mid-buttons {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
  margin: 0 0 16px;
}
.npc-aca-cta-mid .npc-aca-cta-btn {
  border-radius: 999px; /* ピル型でやわらかさを出す */
  min-width: 230px;
}
.npc-aca-cta-mid .npc-aca-cta-btn-form {
  background: #fff;
  color: #875f87;
  border: 2px solid #875f87;
}
.npc-aca-cta-mid .npc-aca-cta-btn-form:hover {
  background: #875f87;
  color: #fff;
  opacity: 1;
}
/* マイクロコピー「初回相談無料」＝大きめの白ピルバッジ */
.npc-aca-cta-mid-micro {
  margin: 0 0 16px;
  text-align: center;
}
.npc-aca-cta-mid-micro span {
  display: inline-block;
  padding: 7px 26px;
  background: #fff;
  border: 1px solid #e0ddf2;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 2px;
  color: #875f87;
}
.npc-aca-cta-mid-more {
  margin: 0;
  text-align: center;
  font-size: 13px;
}
.npc-aca-cta-mid-more a {
  color: #875f87;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.npc-aca-cta-mid-more a:hover { color: #3a4277; }

@media (max-width: 560px) {
  .npc-aca-cta-mid { padding: 30px 18px 26px; }
  .npc-aca-cta-mid-heading { font-size: 16.5px; letter-spacing: 1.5px; }
  .npc-aca-cta-mid-row {
    flex-direction: column;
    gap: 18px;
  }
  .npc-aca-cta-mid-bubble::before {
    left: 50%;
    top: -12px;
    margin: 0 0 0 -10px;
    border: 10px solid transparent;
    border-bottom: 12px solid #a295c8;
    border-top: none;
  }
  .npc-aca-cta-mid-bubble::after {
    left: 50%;
    top: -8px;
    margin: 0 0 0 -8px;
    border: 8px solid transparent;
    border-bottom: 10px solid #fff;
    border-top: none;
  }
  .npc-aca-cta-mid-buttons { flex-direction: column; align-items: stretch; }
  .npc-aca-cta-mid .npc-aca-cta-btn { min-width: 0; width: 100%; }
}

/* ============================================================
   記事末尾ブロック（.npc-aca-cta-end）＝しっかり型
   薄色著者カード ＋ ラベンダーCTAパネル（v2: #A295C8 指定反映）
   ============================================================ */
.npc-aca-cta-end {
  margin: 48px 0 8px;
}

/* --- 著者ボックス（薄ラベンダー枠の白カード） --- */
.npc-aca-cta-end-author {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  padding: 26px 28px;
  background: #faf9fc;
  border: 1px solid #e0ddf2;
  border-radius: 6px 6px 0 0;
  border-bottom: none;
}
.npc-aca-cta-end-label {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 3px;
  color: #875f87;
}
.npc-aca-cta-end-quali {
  margin: 0 0 2px;
  font-size: 12px;
  letter-spacing: 1px;
  color: #875f87;
}
.npc-aca-cta-end-name {
  margin: 0 0 4px;
  font-size: 18px;
  font-weight: 700;
  color: #333;
}
.npc-aca-cta-end-title {
  margin: 0 0 6px;
  font-size: 13px;
  line-height: 1.7;
  color: #666;
}
.npc-aca-cta-end-date {
  margin: 0 0 12px;
  font-size: 12px;
  color: #999;
}
/* 記事ごとの要約（動的テキスト）＋固定文末 */
.npc-aca-cta-end-summary {
  margin: 0;
  padding: 2px 0 2px 14px;
  border-left: 3px solid #a295c8;
  font-size: 14px;
  line-height: 1.9;
  color: #555;
}

/* --- CTAパネル（v2.1: ラベンダー #A295C8 面 × 白文字・クライアント確定） ---
   白文字の可読性補助として、同じ紫に見える範囲の下方向グラデーションを敷く */
.npc-aca-cta-end-panel {
  padding: 34px 30px 30px;
  background: #a295c8; /* グラデーション非対応環境のフォールバック */
  background: linear-gradient(180deg, #a295c8 0%, #8d7fb8 100%);
  border-radius: 0 0 6px 6px;
  text-align: center;
}
.npc-aca-cta-end-panel-heading {
  margin: 0 0 12px;
  font-family: zen-maru-gothic, "Zen Maru Gothic", "Hiragino Maru Gothic ProN", sans-serif;
  font-size: 22px; /* 大テキスト基準（18.5px bold 以上）に乗せる */
  font-weight: 700;
  letter-spacing: 2px;
  line-height: 1.6;
  color: #fff;
  text-shadow: 0 1px 2px rgba(46,39,80,.28);
}
.npc-aca-cta-end-panel-desc {
  max-width: 560px;
  margin: 0 auto 22px;
  font-size: 15.5px;
  font-weight: 500;
  line-height: 1.9;
  color: #fff;
  text-shadow: 0 1px 2px rgba(46,39,80,.22);
}
.npc-aca-cta-end-buttons {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
  margin: 0 0 16px;
}
.npc-aca-cta-end .npc-aca-cta-btn {
  border-radius: 10px; /* サイトの .sample_btn と同じ角丸 */
  min-width: 230px;
}
.npc-aca-cta-end .npc-aca-cta-btn-form {
  background: #fff;
  color: #3a4277;
}
/* マイクロコピー「初回相談無料」＝大きめの白ピルバッジ
   （トップページヒーローの「白チップ×濃色文字」モチーフを引用） */
.npc-aca-cta-end-micro {
  margin: 0 0 18px;
}
.npc-aca-cta-end-micro span {
  display: inline-block;
  padding: 7px 26px;
  background: #fff;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 2px;
  color: #875f87;
}
.npc-aca-cta-end-more {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
}
.npc-aca-cta-end-more a {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-shadow: 0 1px 2px rgba(46,39,80,.22);
}
.npc-aca-cta-end-more a:hover { color: #e0ddf2; }

@media (max-width: 560px) {
  .npc-aca-cta-end-author {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 24px 20px;
  }
  .npc-aca-cta-end-summary {
    text-align: left;
  }
  .npc-aca-cta-end-panel { padding: 28px 18px 26px; }
  .npc-aca-cta-end-panel-heading { font-size: 18.5px; letter-spacing: 1px; } /* モバイルでも大テキスト基準を維持 */
  .npc-aca-cta-end-buttons { flex-direction: column; align-items: stretch; }
  .npc-aca-cta-end .npc-aca-cta-btn { min-width: 0; width: 100%; }
}