/* ==========================================================================
   /crm/ の選択肢カード（page-crm.php でだけ読む）
   --------------------------------------------------------------------------
   2026-09-19。下層ページの部品（頭・見出し・数字の行・問い合わせの箱）はそのまま使い、
   ここで足すのは「3 つの選択肢」のカード 1 種類だけ。
   寸法はサイト全体と同じく 1440（PC）/ 390（SP）基準の px を画面幅で伸縮させる
   （--u = 1 基準 px。lower.css と同じ式）。
   地は問い合わせの箱（.block-button-link-emphasized）と同じ灰・角丸 10。
   枠線は足さない。画像の面だけ LP と同じ深い緑にして、製品の画面が浮くようにする。
   ========================================================================== */

.crm-choices {
  --u: calc(1 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  display: grid;
  gap: calc(20 * var(--u));
}

.crm-choice {
  display: grid;
  grid-template-columns: 1fr;
  overflow: hidden;
  border-radius: calc(10 * var(--u));
  background-color: var(--color-oki-bg-gray);
}

/* 左（SP は上）の面は、その LP の表紙のつもりで作る: LP の見出し 1 文 ＋ 動く製品画面。
   ★ 2026-09-19 オーナー指示: 画面は**わざと枠からはみ出させる**。
     そのためカードは overflow を切らず、角丸は面ごとに付ける。
     SP ははみ出しを左右 12px に抑える（本文の余白 16px の内側 → 横スクロールを出さない）。 */
.crm-choice {
  overflow: visible;
}
.crm-choice__shot {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: calc(20 * var(--u));
  padding-bottom: calc(24 * var(--u));
  border-radius: calc(10 * var(--u)) calc(10 * var(--u)) 0 0;
  background-color: #02424e;              /* LP のファーストビューと同じ深い緑 */
  color: #fff;
}
.crm-choice__body {
  border-radius: 0 0 calc(10 * var(--u)) calc(10 * var(--u));
}
.crm-choice__tag {
  margin: 0;
  padding: calc(24 * var(--u)) calc(20 * var(--u)) 0;
  font-weight: 700;
  font-size: calc(20 * var(--u));
  line-height: 1.45;
  letter-spacing: .02em;
}
.crm-choice__screen {
  position: relative;
  z-index: 1;
  margin-inline: -12px;                   /* SP: 左右に 12px はみ出す */
  border-radius: calc(14 * var(--u));
  box-shadow: 0 18px 40px -12px rgba(0, 20, 26, .45), 0 4px 10px -4px rgba(0, 20, 26, .3);
}
.crm-choice__screen > img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: inherit;
}
.crm-choice__screen .live-stage {
  position: absolute;
  inset: 0;
  z-index: 2;
}
.crm-choice__screen.is-live > img {
  visibility: hidden;
}

.crm-choice__body {
  display: flex;
  flex-direction: column;
  padding: calc(28 * var(--u)) calc(20 * var(--u)) calc(32 * var(--u));
}

/* 誰向けか。見出しより先に読ませる一言 */
.crm-choice__for {
  margin: 0;
  color: var(--color-oki-red);          /* 名前は red だが実体はサイトの主色 #003678 */
  font-weight: 700;
  letter-spacing: .04em;
}

.crm-choice__title {
  margin: calc(8 * var(--u)) 0 0;
  text-wrap: balance;
}

.crm-choice__text {
  margin: calc(14 * var(--u)) 0 0;
}

/* 揃っているもの。罫で区切った 3 行（箇条の黒丸は使わない） */
.crm-choice__facts {
  margin: calc(20 * var(--u)) 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--color-oki-line-gray);
}
.crm-choice__facts li {
  display: flex;
  gap: calc(10 * var(--u));
  align-items: flex-start;
  padding: calc(12 * var(--u)) 0;
  border-bottom: 1px solid var(--color-oki-line-gray);
}
.crm-choice__facts svg {
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: .35em;
  color: var(--color-oki-red);
}

.crm-choice__action {
  margin-top: calc(24 * var(--u));
}

.crm-choice .button-base {
  transition: opacity .2s ease;
}

@media (min-width: 1024px) {
  .crm-choices {
    gap: calc(24 * var(--u));
  }
  .crm-choice {
    grid-template-columns: 44% 1fr;
    width: calc(var(--column-unit) * 30);   /* 問い合わせの箱・数字の行と同じ幅・同じ中央寄せ */
    margin-inline: auto;
  }
  .crm-choice__shot {
    justify-content: space-between;
    padding-bottom: calc(44 * var(--u));
    border-radius: calc(10 * var(--u)) 0 0 calc(10 * var(--u));
  }
  .crm-choice__body {
    border-radius: 0 calc(10 * var(--u)) calc(10 * var(--u)) 0;
  }
  .crm-choice__tag {
    padding: calc(40 * var(--u)) calc(36 * var(--u)) 0;
    font-size: calc(24 * var(--u));
  }
  /* PC: 画面を面より大きくして、カードの左の枠から外へ出す。右端は面の中に残す */
  .crm-choice__screen {
    margin: 0 calc(28 * var(--u)) 0 calc(-72 * var(--u));
  }
  .crm-choice__body {
    padding: calc(44 * var(--u)) calc(48 * var(--u)) calc(44 * var(--u)) calc(44 * var(--u));
  }
  .crm-choice__action {
    margin-top: auto;
    padding-top: calc(28 * var(--u));
  }
}