/* ==========================================================================
   CTA の型 — 記事（目次の下）と事業紹介ページ（本文の最後）で使う
   --------------------------------------------------------------------------
   2026-09-23。オーナー指摘「CTA なら CTA を他から学んで取り入れる」。
   作り方は LP と同じ手順（参考サイトを実測して写す）で、実測したのは 2 社 ＋ 自社 LP:

   ・カミナシ（kaminashi.jp 末尾の帯・1280 実測）
       主ボタン 263×72・角丸 60（黄 #ffdb22）／副ボタン 188×72・白。**行動は 2 つまで**。
       ボタンの上に「カミナシがわかる3点セット」14px の一言（＝何がもらえるか）
   ・バクラク（bakuraku.jp 本文中の箱・1280 実測）
       箱 1040×290・角丸 8・余白 40/64・淡い青地。**ボタンは 1 つ**（314×79・角丸 9999）。
       ラベルが 2 段（上「バクラクがわかる3点セット」＋下「資料ダウンロード」）
   ・自社 LP（scratchpad/lp・この 5 社から作った家の標準）
       ①不安をつぶす一言「無理な勧誘はいたしません」「お名前とメールだけで受け取れます」
       ②受け取るものの条件（小さい上段）「10分で読めるPDF」「オンライン30分・無料」
       ③行動（大きい下段）「加盟資料を無料ダウンロード」
       ④主（塗り）と副（白）の 2 択

   ここでは ①〜③ を site の部品に載せる。色は LP の橙ではなく**サイトの主色**
   （.button-base の既定 --color-oki-red2）。角丸・余白・字は .button-base（style.css:394）の
   ままで、2 段のラベルぶんだけ縦の余白を足す。新しい色は 1 つも増やさない。
   ========================================================================== */

/* ラベルが 2 段になるボタン。.button-base の上に乗せるだけ（色・角丸・字は触らない） */
.cta-btn {
  align-items: center;
  justify-content: space-between;
  gap: calc(12 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  padding-top: calc(12 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  padding-bottom: calc(12 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  text-align: left;
}
.cta-btn__stack {
  display: flex;
  flex-direction: column;
  gap: calc(4 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
}
/* 上段＝受け取るものの条件。下段より 2 段小さく、少し透かす（カミナシ 14px / 本体 18px の比） */
.cta-btn__top {
  font-size: calc(12 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  font-weight: 700;
  line-height: 120%;
  opacity: .82;
}
.cta-btn__main {
  font-size: calc(16 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  font-weight: 700;
  line-height: 130%;
}
/* 不安をつぶす一言。ボタンの上に置く（カミナシと同じ位置） */
.cta-note {
  margin: 0 0 calc(10 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  font-size: calc(12 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  font-weight: 700;
  line-height: 140%;
  color: var(--color-oki-black2);
}

/* ── 記事：目次の下（寸法は目次 .block-side-nav（lower.css:292-304）から取る）── */
.side-cta {
  border-radius: calc(10 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  background-color: var(--color-oki-bg-gray);
  padding: calc(33 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))) calc(var(--column-unit) * 2) calc(37 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  margin-top: calc(var(--column-unit) * 1);
}
.side-cta__title {
  margin: 0 0 calc(12 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  font-weight: 800;
  font-size: calc(20 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  line-height: 120%;
  letter-spacing: calc(.6 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  color: var(--color-oki-black);
}
.side-cta .cta-btn {
  display: flex;
  width: 100%;
}

@media (min-width: 1024px) {
  .side-cta {
    border-radius: calc(8 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
    padding: calc(44 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))) calc(var(--column-unit) * 1) calc(50 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  }
  /* 見出しは PC で 18px（lower.css:304 の html[lang=ja] 規則と同じ。20 のままだと目次より 1.8px 大きい） */
  .side-cta__title {
    font-size: calc(18 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
    letter-spacing: calc(.54 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  }
}

/* ── 事業紹介ページ：本文の最後の箱の中。ボタンは主 1 つ（バクラクと同じ）── */
.block-button-link-emphasized .cta-btn {
  display: inline-flex;
}

/* SP では箱のボタン欄が横並び（lower.css:2864 付近 `.button-area{display:flex;justify-content:flex-end}`）
   なので、そのままだと安心材料がボタンの**左隣**に回る（実測）。縦に積んで右端にそろえる */
@media (max-width: 1023.98px) {
  .block-button-link-emphasized .button-area {
    flex-direction: column;
    align-items: flex-end;
  }
  .block-button-link-emphasized .cta-note {
    text-align: right;
  }
}