/*
 * ブログ記事末尾の「相談・会員登録」ブロック（inc/blog-cta.php・0.7.3・2026-11-02）
 * 見た目の正本: 02_hp_renewal/work/20261029_blog_cta/blog_cta_final_pc.png / _sp.png（10/29 ゆっきー決定）
 *
 * ブロックは記事本文（.entry-content）の中に出るので、テーマの Customizer 追加 CSS（.entry-content.cell h3 の飾り罫・
 * .entry-content p の余白）と、テーマの a（太字・下線なし・ホバー下線）が掛かる。ここでは詳細度を 1 段上げて打ち消す。
 * 色: 紺 #0d2861（テーマの著者プロフィール h3 の罫・HP の紺）／橙 #ea5513（HP の会員登録ボタン）／文字 #151515（テーマ本文）
 */

.entry-content .lidix-blog-cta {
  /* .entry-content には左右 30px（SP 15px）の余白がある。負のマージンで打ち消し、ブロックをカードの端まで広げる＝
     自分の余白 30px で文字の左端が本文と揃う（モックと同じ・著者プロフィールの箱と同じ幅） */
  margin: 40px -30px 0;
  padding: 30px;
  background: #fefefe;
  overflow: hidden; /* 見出しの右罫（100vw）をカードの中で切る＝著者プロフィールと同じ作り */
}

/* 見出し: 明朝・「— 見出し ———」の罫＝著者プロフィールの h3 と同じ。Customizer の h3 飾り（skew の脚・下線）は消す */
.entry-content .lidix-blog-cta h3.lidix-blog-cta__title {
  font-family: "游明朝", YuMincho, "Hiragino Mincho ProN", "Hiragino Mincho Pro", "ＭＳ 明朝", serif;
  font-size: 22px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0.06em; /* 0.1em だと PC 幅で見出しが 2 行に折れる（モックは 0.06em） */
  color: #151515;
  margin: 0 0 20px;
  padding: 0 0 0 40px;
  text-align: left;
  overflow: hidden;
  position: static;
  display: block;
}
.entry-content .lidix-blog-cta h3.lidix-blog-cta__title::before,
.entry-content .lidix-blog-cta h3.lidix-blog-cta__title::after {
  content: none;
}
.entry-content .lidix-blog-cta h3.lidix-blog-cta__title span {
  position: relative;
}
.entry-content .lidix-blog-cta h3.lidix-blog-cta__title span::before {
  content: "";
  position: absolute;
  background: #0d2861;
  display: block;
  width: 40px;
  height: 1px;
  top: 50%;
  left: -60px;
}
.entry-content .lidix-blog-cta h3.lidix-blog-cta__title span::after {
  content: "";
  position: absolute;
  background: #0d2861;
  display: block;
  width: 100vw;
  height: 1px;
  top: 50%;
  right: calc(-100vw - 20px);
}

/* 本文: 記事本文と同じ 16px・1.8 */
.entry-content .lidix-blog-cta p.lidix-blog-cta__body {
  margin: 0 0 24px;
  padding: 0;
  font-size: 16px;
  line-height: 1.8;
  color: #151515;
}

/* 社名のテキストリンク: テーマの a（太字・下線なし）を打ち消して、紺＋下線に */
.entry-content .lidix-blog-cta a.lidix-blog-cta__link,
.entry-content .lidix-blog-cta a.lidix-blog-cta__link:link,
.entry-content .lidix-blog-cta a.lidix-blog-cta__link:visited {
  display: inline;
  padding: 0;
  margin: 0;
  border: 0;
  background: none;
  font-size: inherit;
  font-weight: 700;
  line-height: inherit;
  color: #0d2861;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.entry-content .lidix-blog-cta a.lidix-blog-cta__link:hover,
.entry-content .lidix-blog-cta a.lidix-blog-cta__link:focus {
  color: #0b2253;
  text-decoration: underline;
}

/* ボタン 2 つ: 左 紺「相談する」・右 橙「会員登録する」。HP のボタンと同じ 16px 太字・角丸なし */
.entry-content .lidix-blog-cta .lidix-blog-cta__btns {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}
.entry-content .lidix-blog-cta a.lidix-blog-cta__btn,
.entry-content .lidix-blog-cta a.lidix-blog-cta__btn:link,
.entry-content .lidix-blog-cta a.lidix-blog-cta__btn:visited {
  display: inline-block;
  flex: 1 1 240px;
  max-width: 360px;
  margin: 0;
  padding: 16px 20px;
  border: 0;
  border-radius: 0;
  text-align: center;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.04em;
  text-decoration: none;
  color: #fff;
}
.entry-content .lidix-blog-cta a.lidix-blog-cta__btn:hover,
.entry-content .lidix-blog-cta a.lidix-blog-cta__btn:focus {
  text-decoration: none;
  color: #fff;
}
.entry-content .lidix-blog-cta a.lidix-blog-cta__btn--navy { background: #0d2861; }
.entry-content .lidix-blog-cta a.lidix-blog-cta__btn--navy:hover,
.entry-content .lidix-blog-cta a.lidix-blog-cta__btn--navy:focus { background: #0b2253; }
.entry-content .lidix-blog-cta a.lidix-blog-cta__btn--orange { background: #ea5513; }
.entry-content .lidix-blog-cta a.lidix-blog-cta__btn--orange:hover,
.entry-content .lidix-blog-cta a.lidix-blog-cta__btn--orange:focus { background: #d44c10; }

/* SP: 余白を詰め・見出しの左罫を短く・右罫なし・ボタンは縦に 2 段 */
/* 639px 以下＝テーマ（Foundation）の small 幅。.entry-content の余白が 15px になるのに合わせる */
@media (max-width: 639px) {
  .entry-content .lidix-blog-cta {
    margin: 40px -15px 0;
    padding: 24px 15px;
  }
  .entry-content .lidix-blog-cta h3.lidix-blog-cta__title {
    font-size: 19px;
    padding-left: 30px;
  }
  .entry-content .lidix-blog-cta h3.lidix-blog-cta__title span {
    display: inline-block;
  }
  .entry-content .lidix-blog-cta h3.lidix-blog-cta__title span::before {
    width: 20px;
    left: -30px;
  }
  .entry-content .lidix-blog-cta h3.lidix-blog-cta__title span::after {
    display: none;
  }
  .entry-content .lidix-blog-cta a.lidix-blog-cta__btn {
    flex-basis: 100%;
    max-width: none;
  }
}
