html {
  scroll-behavior: smooth;
}
main {
  padding-block: 0 80px;
  background-color: #f1f7f5;
  height: 100%;
}

.top-ttl {
  background: #5ca789;
  margin-bottom: 24px;
  padding-block: 24px;
  word-break: auto-phrase;
}

.top-ttl p,
.top-ttl h1 {
  text-align: start;
  color: #ffffff;
  margin-bottom: 0;
  max-width: 1080px;
  margin-inline: auto;
  padding-left: 20px;
}

.top-ttl h1 {
  font-size: 28px;
}

.top-ttl__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) min(360px, 100%);
  max-width: 860px;
  margin-inline: auto;
}

/* ── Marketo デフォルトスタイルのリセット ───────────────── */
form.mktoForm.mkto-form-card {
  --mkto-color-primary: #5ca789;
  display: flex;
  flex-direction: column;
  float: none;
  max-height: 840px;
  padding: 0;
  overflow-y: auto;
  overflow-x: visible;
  background: #fff;
  border-radius: 12px;
  box-sizing: border-box;
  margin-bottom: 20px;
  padding-bottom: 12px;
  /* Firefox（このフォーム内のみ） */
  scrollbar-width: thin;
  scrollbar-color: #5ca789 #ffffff00;
}
/* フォーム内のスクロールバーだけ丸く */
form.mktoForm.mkto-form-card ::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

form.mktoForm.mkto-form-card ::-webkit-scrollbar-track {
  background: #e0e0e0;
  border-radius: 9999px;
}

form.mktoForm.mkto-form-card ::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 9999px;
}

form.mktoForm.mkto-form-card ::-webkit-scrollbar-thumb:hover {
  background: #555;
}

form.mktoForm.mkto-form-card .mktoFormRow,
form.mktoForm.mkto-form-card .mktoFormCol,
form.mktoForm.mkto-form-card .mktoFieldDescriptor,
form.mktoForm.mkto-form-card .mktoFieldWrap,
form.mktoForm.mkto-form-card .mktoHtmlText {
  float: none;
  margin-left: 0;
  max-width: 100%;
}

.mktoForm.mktoLayoutAbove .mktoCheckboxList {
  display: flex;
  gap: 4px;
}

form.mktoForm.mkto-form-card nav.mkto-progress,
form.mktoForm.mkto-form-card .mkto-progress__track,
form.mktoForm.mkto-form-card .mkto-progress__step,
form.mktoForm.mkto-form-card .mkto-progress__circle,
form.mktoForm.mkto-form-card .mkto-progress__label,
form.mktoForm.mkto-form-card .mkto-progress__line {
  position: static;
  float: none;
  top: auto;
  left: auto;
  right: auto;
  transform: none;
}

/* 旧プログレスバー構造（Marketo 側に残っている場合）は非表示 */
form.mktoForm.mkto-form-card .mkto-progress__items,
form.mktoForm.mkto-form-card .mkto-progress__circles,
form.mktoForm.mkto-form-card .mkto-progress__labels,
form.mktoForm.mkto-form-card .mkto-progress__label-item,
form.mktoForm.mkto-form-card .mkto-progress__label-spacer {
  display: none;
}

/* ── プログレスバー ─────────────────────────────────────── */
/*
 * forms2.css の `.mktoForm div { margin:0; padding:0 }` より詳細度を上げる。
 * form.mktoForm.mkto-form-card .mkto-progress__* = (0, 3, 1) > (0, 1, 1)
 */
form.mktoForm.mkto-form-card nav.mkto-progress {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  background: #f1f7f5;
  padding: 16px 12px;
  margin-top: 16px;
  margin-bottom: 0;
  clear: both;
  box-sizing: border-box;
  text-align: center;
  position: relative;
}

form.mktoForm.mkto-form-card .mkto-progress__status {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

form.mktoForm.mkto-form-card .mkto-progress__track {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: center;
  width: 100%;
  max-width: 320px;
  margin: 0 auto;
  padding: 0;
  --mkto-progress-step-pad: 20px;
}

form.mktoForm.mkto-form-card .mkto-progress__step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 80px;
  flex-shrink: 0;
  margin: 0;
  padding: 0;
}

form.mktoForm.mkto-form-card .mkto-progress__label {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  font-size: 1.2rem;
  font-weight: 500;
  line-height: 1.3;
  color: #888;
  text-align: center;
  word-break: keep-all;
}

form.mktoForm.mkto-form-card .mkto-progress__step.is-active .mkto-progress__label {
  color: var(--mkto-color-primary);
}

form.mktoForm.mkto-form-card .mkto-progress__circle svg {
  display: block;
  width: 20px;
  height: 20px;
  padding: 0;
}

form.mktoForm.mkto-form-card .mkto-progress__circle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin: 0;
  padding: 0;
  font-size: 1.6rem;
  font-weight: 700;
  color: #b0b0b0;
  background: #fff;
  border: 2px solid #b0b0b0;
  border-radius: 50%;
  flex-shrink: 0;
  transition:
    background 0.2s,
    border-color 0.2s,
    color 0.2s;
}

@media screen and (max-width: 759px) {
  form.mktoForm.mkto-form-card .mkto-progress__circle {
    width: 32px;
    height: 32px;
    font-size: 1.4rem;
  }

  form.mktoForm.mkto-form-card .mkto-progress__step {
    width: 72px;
  }

  form.mktoForm.mkto-form-card .mkto-progress__label {
    font-size: 1.1rem;
  }
}

form.mktoForm.mkto-form-card .mkto-progress__track > .mkto-progress__line {
  flex: 1;
  height: 2px;
  min-width: 8px;
  align-self: flex-start;
  margin-top: 20px;
  margin-bottom: 0;
  margin-left: calc(var(--mkto-progress-step-pad, 20px) * -1);
  margin-right: calc(var(--mkto-progress-step-pad, 20px) * -1);
  padding: 0;
  background: #b0b0b0;
  transition: background 0.2s;
}

@media screen and (max-width: 759px) {
  form.mktoForm.mkto-form-card .mkto-progress__track > .mkto-progress__line {
    margin-top: 15px;
  }
}

form.mktoForm.mkto-form-card .mkto-progress__track > .mkto-progress__line.is-done {
  background: var(--mkto-color-primary);
}

form.mktoForm.mkto-form-card .mkto-progress__step.is-active .mkto-progress__circle {
  color: #fff;
  background: var(--mkto-color-primary);
  border-color: var(--mkto-color-primary);
}

/* Marketo の表示設定ルールで丸ごとスキップされたステップのバブル・接続線を隠す */
form.mktoForm.mkto-form-card .mkto-progress__step.is-skipped,
form.mktoForm.mkto-form-card .mkto-progress__track > .mkto-progress__line.is-skipped {
  display: none !important;
}

form.mktoForm.mkto-form-card .mkto-progress__step.is-done .mkto-progress__circle {
  font-size: 0;
  color: #fff;
  background: var(--mkto-color-primary);
  border-color: var(--mkto-color-primary);
}

/* ── ナビゲーション（「戻る」リンク） ──────────────────── */
form.mktoForm.mkto-form-card .mkto-nav {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin: 0;
  padding: 0;
  text-align: center;
  float: none;
  box-sizing: border-box;
}

form.mktoForm.mkto-form-card .mkto-nav__prev {
  display: inline-flex;
  align-items: center;
  background: none;
  border: none;
  color: var(--mkto-color-primary);
  font-size: 1.4rem;
  cursor: pointer;
  text-decoration: underline;
  padding: 0;
  margin: 16px 0 0;
}

form.mktoForm.mkto-form-card .mkto-nav__prev:hover {
  color: #4a8e72;
}

form.mktoForm.mkto-form-card .mkto-nav__prev:focus-visible {
  outline: 2px solid var(--mkto-color-primary);
  outline-offset: 2px;
}

/* ── Marketo フォームスタイル ──────────────────────────── */

/* 縦並びレイアウトに変換 */
.mkto-form-card .mktoFormRow,
form.mktoForm.mkto-form-card .mktoFormRow {
  display: block;
  margin-bottom: 0;
}

/* 現在のステップでない行を隠す。ステップ切替の根幹機能のため、
   .mkto-form-card が付与されない構造のフォームでも必ず効くよう
   スコープを付けない。Marketo の表示設定ルールが行に付与する
   inline style（display）より優先させるため !important も付与。 */
.mkto-step-row-hidden {
  display: none !important;
}

.mkto-form-card .mktoFieldDescriptor,
form.mktoForm.mkto-form-card .mktoFieldDescriptor,
.mktoFormCol > .mktoFieldWrap > .mktoHtmlText.mktoHasWidth {
  display: block;
  width: 100%;
  padding-left: 24px;
  padding-right: 24px;
  margin-top: 16px;
}
div.mktoFormRow.mkto-privacy-notice-row {
  display: block;
  width: 100%;
  padding-left: 24px;
  padding-right: 24px;
  margin-top: 16px;
}

/* 横並びレイアウト用の余白要素を非表示 */
.mkto-form-card .mktoOffset,
.mkto-form-card .mktoGutter,
.mkto-form-card .mktoClear,
form.mktoForm.mkto-form-card .mktoOffset,
form.mktoForm.mkto-form-card .mktoGutter,
form.mktoForm.mkto-form-card .mktoClear {
  display: none;
}

/* ラベル全幅 */
.mkto-form-card .mktoFieldWrap,
form.mktoForm.mkto-form-card .mktoFieldWrap {
  display: block;
  width: 100%;
}

.mkto-form-card .mktoLabel,
form.mktoForm.mkto-form-card .mktoLabel {
  display: flex;
  font-size: 1.4rem;
  font-weight: 700;
  width: auto;
  margin-bottom: 4px;
}

/* 個人情報同意チェックボックス：フィールドラベル（※のみ）は非表示にし、
   代わりにチェックボックス右上へ疑似要素で必須マークを表示する */
form.mktoForm.mkto-form-card label#Lblprivacy_policy_consent_SX {
  display: none;
}

form.mktoForm.mkto-form-card .mktoFieldWrap:has(#Lblprivacy_policy_consent_SX) .mktoLogicalField.mktoCheckboxList {
  position: relative;
}

form.mktoForm.mkto-form-card .mktoFieldWrap:has(#Lblprivacy_policy_consent_SX) .mktoLogicalField.mktoCheckboxList::before {
  content: "※";
  position: absolute;
  top: 0px;
  left: 30px;
  font-size: 8px;
  line-height: 1;
  color: #e66447;
  pointer-events: none;
}

.mkto-form-card .mktoLabel a,
form.mktoForm.mkto-form-card .mktoLabel a {
  color: #e66447;
  text-decoration: underline;
}

/* 必須マーク（required フィールドのみ表示） */
.mkto-form-card .mktoAsterix,
form.mktoForm.mkto-form-card .mktoAsterix {
  display: none;
}

.mkto-form-card .mktoRequiredField .mktoAsterix,
.mkto-form-card .mktoFieldWrap:has(.mktoRequired) .mktoAsterix,
.mkto-form-card .mktoFieldWrap:has([aria-required="true"]) .mktoAsterix,
.mkto-form-card .mktoFieldWrap:has([required]) .mktoAsterix,
form.mktoForm.mkto-form-card .mktoRequiredField .mktoAsterix,
form.mktoForm.mkto-form-card .mktoFieldWrap:has(.mktoRequired) .mktoAsterix,
form.mktoForm.mkto-form-card .mktoFieldWrap:has([aria-required="true"]) .mktoAsterix,
form.mktoForm.mkto-form-card .mktoFieldWrap:has([required]) .mktoAsterix {
  display: inline;
  color: #e66447;
  margin-right: 2px;
  font-size: 0;
}

.mkto-form-card .mktoRequiredField .mktoAsterix::before,
.mkto-form-card .mktoFieldWrap:has(.mktoRequired) .mktoAsterix::before,
.mkto-form-card .mktoFieldWrap:has([aria-required="true"]) .mktoAsterix::before,
.mkto-form-card .mktoFieldWrap:has([required]) .mktoAsterix::before,
form.mktoForm.mkto-form-card .mktoRequiredField .mktoAsterix::before,
form.mktoForm.mkto-form-card .mktoFieldWrap:has(.mktoRequired) .mktoAsterix::before,
form.mktoForm.mkto-form-card .mktoFieldWrap:has([aria-required="true"]) .mktoAsterix::before,
form.mktoForm.mkto-form-card .mktoFieldWrap:has([required]) .mktoAsterix::before {
  content: "※";
  font-size: 1.4rem;
}

/* フィールド全幅 */
.mkto-form-card .mktoField,
form.mktoForm.mkto-form-card .mktoField {
  width: 100%;
  box-sizing: border-box;
}

/* テキスト・セレクト入力 */
.mkto-form-card .mktoForm input[type="text"],
.mkto-form-card .mktoForm input[type="url"],
.mkto-form-card .mktoForm input[type="email"],
.mkto-form-card .mktoForm input[type="tel"],
.mkto-form-card .mktoForm input[type="number"],
.mkto-form-card .mktoForm input[type="date"],
.mkto-form-card .mktoForm select.mktoField,
form.mktoForm.mkto-form-card input[type="text"],
form.mktoForm.mkto-form-card input[type="url"],
form.mktoForm.mkto-form-card input[type="email"],
form.mktoForm.mkto-form-card input[type="tel"],
form.mktoForm.mkto-form-card input[type="number"],
form.mktoForm.mkto-form-card input[type="date"],
form.mktoForm.mkto-form-card select.mktoField {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 8px 13px;
  height: 35px;
  background: #f6f6f6;
  border: 1px solid #cccccc;
  border-radius: 4px;
}

@media screen and (max-width: 759px) {
  form.mktoForm.mkto-form-card select.mktoField {
    padding: 0 13px;
  }
}

form.mktoForm.mkto-form-card input[type="text"]:focus-visible,
form.mktoForm.mkto-form-card input[type="url"]:focus-visible,
form.mktoForm.mkto-form-card input[type="email"]:focus-visible,
form.mktoForm.mkto-form-card input[type="tel"]:focus-visible,
form.mktoForm.mkto-form-card input[type="number"]:focus-visible,
form.mktoForm.mkto-form-card input[type="date"]:focus-visible,
form.mktoForm.mkto-form-card select.mktoField:focus-visible,
form.mktoForm.mkto-form-card textarea.mktoField:focus-visible {
  border-color: var(--mkto-color-primary);
  outline: 2px solid var(--mkto-color-primary);
  outline-offset: 1px;
}

/* テキストエリア */
form.mktoForm.mkto-form-card textarea.mktoField {
  display: block;
  width: 100%;
  min-height: auto;
  height: auto;
  box-sizing: border-box;
  padding: 8px 13px;
  background: #f6f6f6;
  border: 1px solid #cccccc;
  border-radius: 4px;
  resize: vertical;
}

/* セレクト矢印 */
.mkto-form-card .mktoForm select.mktoField,
form.mktoForm.mkto-form-card select.mktoField {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-size: 20px 20px;
  background-repeat: no-repeat;
  background-position: right 13px center;
  padding-right: 30px;
}

/* チェックボックス外観 */
.mkto-form-card input[type="checkbox"],
form.mktoForm.mkto-form-card input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 24px;
  height: 24px;
  min-width: 24px;
  max-width: 24px;
  margin: 0;
  background: #ffffff;
  border: 1px solid #cccccc;
  border-radius: 4px;
  box-sizing: border-box;
  cursor: pointer;
  vertical-align: middle;
}

form.mktoForm.mkto-form-card input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--mkto-color-primary);
  outline-offset: 2px;
}

.mkto-form-card input[type="checkbox"]:checked,
form.mktoForm.mkto-form-card input[type="checkbox"]:checked {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E66447' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12l5 5L20 7'/%3E%3C/svg%3E");
  background-size: 16px 16px;
  background-repeat: no-repeat;
  background-position: center;
}

/* privacy notice 内の Marketo 生成要素（ラベル・余白・option label）を非表示 */
form.mktoForm.mkto-form-card .mkto-privacy-notice .mktoGutter,
form.mktoForm.mkto-form-card .mkto-privacy-notice .mktoClear,
form.mktoForm.mkto-form-card .mkto-privacy-notice .mktoCheckboxList > label {
  display: none;
}

/* Marketo CDN CSS を詳細度で上書き */
form.mktoForm.mkto-form-card .mkto-privacy-notice .mktoCheckboxList input[type="checkbox"] {
  display: block;
  width: 24px;
  height: 24px;
  min-width: 24px;
  max-width: 24px;
  flex-shrink: 0;
}

form.mktoForm.mkto-form-card .mkto-privacy-notice {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  gap: 3px;
}

form.mktoForm.mkto-form-card .mkto-privacy-notice .mkto-error-msg {
  order: 3;
  width: 100%;
  margin-top: 0;
}

form.mktoForm.mkto-form-card .mkto-privacy-notice .mktoLogicalField {
  order: 1;
  flex-shrink: 0;
  width: auto;
}

form.mktoForm.mkto-form-card .mkto-privacy-notice__text {
  display: flex;
  order: 2;
  flex: 1;
  margin: 0;
  font-weight: 500;
  line-height: 1.2;
}

form.mktoForm.mkto-form-card .mkto-privacy-notice__text a {
  color: #e66447;
  text-decoration: underline;
}

/* 単一チェックボックス（同意項目）：チェックボックスをラベルの左隣に配置 */
.mkto-form-card .mktoFieldWrap:has(.mktoCheckboxList):has(input[type="checkbox"]:only-of-type),
form.mktoForm.mkto-form-card .mktoFieldWrap:has(.mktoCheckboxList):has(input[type="checkbox"]:only-of-type) {
  display: flex;
  flex-direction: column-reverse;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 3px;
}

.mkto-form-card .mktoFieldWrap:has(.mktoCheckboxList):has(input[type="checkbox"]:only-of-type) .mkto-error-msg,
form.mktoForm.mkto-form-card .mktoFieldWrap:has(.mktoCheckboxList):has(input[type="checkbox"]:only-of-type) .mkto-error-msg {
  order: 3;
  width: 100%;
  margin-top: 0;
}

.mkto-form-card .mktoFieldWrap:has(.mktoCheckboxList):has(input[type="checkbox"]:only-of-type) .mktoLabel,
form.mktoForm.mkto-form-card .mktoFieldWrap:has(.mktoCheckboxList):has(input[type="checkbox"]:only-of-type) .mktoLabel {
  order: 2;
  flex: 1;
  margin-bottom: 0;
}

.mkto-form-card .mktoFieldWrap:has(.mktoCheckboxList):has(input[type="checkbox"]:only-of-type) .mktoLogicalField,
form.mktoForm.mkto-form-card .mktoFieldWrap:has(.mktoCheckboxList):has(input[type="checkbox"]:only-of-type) .mktoLogicalField {
  order: 1;
  flex-shrink: 0;
  width: auto;
}

/* 複数チェックボックス / ラジオボタン（選択肢リスト）：縦並び・列位置を統一 */
.mkto-form-card .mktoFieldWrap:not(.mkto-privacy-notice) .mktoCheckboxList:not(:has(input[type="checkbox"]:only-of-type)),
.mkto-form-card .mktoFieldWrap:not(.mkto-privacy-notice) .mktoRadioList,
form.mktoForm.mkto-form-card .mktoFieldWrap:not(.mkto-privacy-notice) .mktoCheckboxList:not(:has(input[type="checkbox"]:only-of-type)),
form.mktoForm.mkto-form-card .mktoFieldWrap:not(.mkto-privacy-notice) .mktoRadioList {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 3px 8px;
  font-weight: 500;
  align-items: center;
  width: 100%;
  max-width: 100%;
  padding: 0;
  margin: 0;
}

.mkto-form-card .mktoCheckboxList:not(:has(input[type="checkbox"]:only-of-type)) input[type="checkbox"],
.mkto-form-card .mktoRadioList input[type="radio"],
form.mktoForm.mkto-form-card .mktoCheckboxList:not(:has(input[type="checkbox"]:only-of-type)) input[type="checkbox"],
form.mktoForm.mkto-form-card .mktoRadioList input[type="radio"] {
  justify-self: start;
  width: 24px;
  min-width: 24px;
  max-width: 24px;
}

.mkto-form-card .mktoCheckboxList:not(:has(input[type="checkbox"]:only-of-type)) label,
.mkto-form-card .mktoRadioList label,
form.mktoForm.mkto-form-card .mktoCheckboxList:not(:has(input[type="checkbox"]:only-of-type)) label,
form.mktoForm.mkto-form-card .mktoRadioList label {
  margin-bottom: 0;
  margin-left: 0;
  font-size: 1.4rem;
  line-height: 1.4;
  color: #333;
}

.mkto-form-card .mktoRadioList label,
form.mktoForm.mkto-form-card .mktoRadioList label {
  cursor: pointer;
}

/* ラジオボタン外観（チェックボックスと同系） */
.mkto-form-card input[type="radio"],
form.mktoForm.mkto-form-card input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  width: 24px;
  height: 24px;
  min-width: 24px;
  max-width: 24px;
  margin: 0;
  background: #ffffff;
  border: 1px solid #cccccc;
  border-radius: 50%;
  box-sizing: border-box;
  cursor: pointer;
  vertical-align: middle;
}

form.mktoForm.mkto-form-card input[type="radio"]:focus-visible {
  outline: 2px solid var(--mkto-color-primary);
  outline-offset: 2px;
}

.mkto-form-card input[type="radio"]:checked,
form.mktoForm.mkto-form-card input[type="radio"]:checked {
  border-color: #e66447;
  background-color: #ffffff;
  background-image: radial-gradient(circle, #e66447 0%, #e66447 38%, #ffffff 40%);
}

/* バリデーションエラー */
.mkto-form-card input.mktoInvalid,
.mkto-form-card select.mktoInvalid,
.mkto-form-card textarea.mktoInvalid,
form.mktoForm.mkto-form-card input.mktoInvalid,
form.mktoForm.mkto-form-card select.mktoInvalid,
form.mktoForm.mkto-form-card textarea.mktoInvalid {
  outline: 2px solid #d00;
}

form.mktoForm.mkto-form-card .mkto-error-msg {
  display: inline-block;
  margin-bottom: 0;
  padding-left: 4px;
  font-size: 1.2rem;
  color: #d00;
}

/* ── 送信ボタン ─────────────────────────────────────── */
.mkto-form-card .mktoButtonWrap,
form.mktoForm.mkto-form-card .mktoButtonWrap {
  display: block;
  width: 100%;
}

.mkto-form-card .mktoButton,
form.mktoForm.mkto-form-card .mktoButton {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  width: 300px;
  padding: 12px 40px 12px 32px;
  margin: 0 auto;
  border-radius: 100px;
  box-shadow: 0 4px 4px 0 rgba(19, 70, 50, 0.25);
  background: #e66447;
  border: 1px solid #ffffff;
  border-radius: 100px;
  color: #ffffff;
  cursor: pointer;
  box-sizing: border-box;
}

form.mktoForm.mkto-form-card .mktoButton:focus-visible {
  outline: 2px solid var(--mkto-color-primary);
  outline-offset: 2px;
}

.mkto-form-card .mktoButton::before,
form.mktoForm.mkto-form-card .mktoButton::before {
  content: "";
}

.mkto-form-card .mktoButton span,
form.mktoForm.mkto-form-card .mktoButton span {
  text-align: center;
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.5;
}

.mkto-form-card .mktoButton .mktoButton__base,
form.mktoForm.mkto-form-card .mktoButton .mktoButton__base {
  font-size: 16px;
}

.mkto-form-card .mktoButton::after,
form.mktoForm.mkto-form-card .mktoButton::after {
  content: "›";
  font-size: 2.4rem;
  line-height: 1;
  justify-self: end;
}

/* ── Landing Page 2カラムレイアウト ────────────────────── */
/*
 * sticky 2カラムは LP テンプレート側の class で有効化する（SETUP.md 参照）。
 * デザイン基準（コンテナ 1080px）: 本文 672px + gap 48px + フォーム 360px
 */
div.container.has-mkto-sticky-form {
  --mkto-color-primary: #5ca789;

  display: grid;
  grid-template-columns: minmax(0, 1fr) min(360px, 100%);
  gap: 48px;
  align-items: start;
  float: none;
  clear: both;
  width: 100%;
  max-width: 1080px;
  margin-inline: auto;
  box-sizing: border-box;
}

div.container.has-mkto-sticky-form > .mkto-lp-content {
  grid-column: 1;
  min-width: 0;
  max-width: 100%;
  width: 100%;
  overflow-x: clip;
  box-sizing: border-box;
  contain: inline-size;
}

/*
 * LP 既存の .row / .col はフル幅前提のため、左カラム内で幅を再拘束する。
 * 長い英数字・URL も折り返し、フォーム列へはみ出さないようにする。
 */
.container.has-mkto-sticky-form > .mkto-lp-content > .row,
.container.has-mkto-sticky-form > .mkto-lp-content .row {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin-inline: 0;
  box-sizing: border-box;
  overflow: hidden;
}

.container.has-mkto-sticky-form > .mkto-lp-content > .row > [class*="col"],
.container.has-mkto-sticky-form > .mkto-lp-content > .row > [class*="span-"],
.container.has-mkto-sticky-form > .mkto-lp-content [class*="col"],
.container.has-mkto-sticky-form > .mkto-lp-content [class*="span-"] {
  max-width: 100%;
  box-sizing: border-box;
}

.container.has-mkto-sticky-form > .mkto-lp-content .mktoText,
.container.has-mkto-sticky-form > .mkto-lp-content .top-ttl,
.container.has-mkto-sticky-form > .mkto-lp-content p,
.container.has-mkto-sticky-form > .mkto-lp-content li,
.container.has-mkto-sticky-form > .mkto-lp-content td,
.container.has-mkto-sticky-form > .mkto-lp-content th,
.container.has-mkto-sticky-form > .mkto-lp-content dd,
.container.has-mkto-sticky-form > .mkto-lp-content dt,
.container.has-mkto-sticky-form > .mkto-lp-content a,
.container.has-mkto-sticky-form > .mkto-lp-content h1,
.container.has-mkto-sticky-form > .mkto-lp-content h2,
.container.has-mkto-sticky-form > .mkto-lp-content h3,
.container.has-mkto-sticky-form > .mkto-lp-content h4,
.container.has-mkto-sticky-form > .mkto-lp-content h5,
.container.has-mkto-sticky-form > .mkto-lp-content h6 {
  margin-top: 20px;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.container.has-mkto-sticky-form > .mkto-lp-content img,
.container.has-mkto-sticky-form > .mkto-lp-content video,
.container.has-mkto-sticky-form > .mkto-lp-content iframe,
.container.has-mkto-sticky-form > .mkto-lp-content embed,
.container.has-mkto-sticky-form > .mkto-lp-content object,
.container.has-mkto-sticky-form > .mkto-lp-content svg,
.container.has-mkto-sticky-form > .mkto-lp-content table {
  max-width: 100%;
}

.container.has-mkto-sticky-form > .mkto-lp-content img,
.container.has-mkto-sticky-form > .mkto-lp-content video {
  height: auto;
}

.container.has-mkto-sticky-form > .mkto-lp-content table {
  width: 100%;
  table-layout: fixed;
}

.container.has-mkto-sticky-form > .mkto-lp-content pre {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* LP 本文セクション見出し（.top-ttl 内 h2 は除外 / #PageOutline 直下 h2 等） */
div.container.has-mkto-sticky-form > .mkto-lp-content h2,
div.container.has-mkto-sticky-form > .mkto-lp-content > #PageOutline > h2 {
  margin: 32px 0 32px;
  padding: 8px 0 8px 16px;
  border-left: 4px solid var(--mkto-color-primary);
  background: #fff;
  color: var(--mkto-color-primary);
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.04em;
}

/* LP 本文見出しサイズ（h3 基準で h4 以降を段階的に縮小） */
div.container.has-mkto-sticky-form > .mkto-lp-content h3 {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.5;
}

div.container.has-mkto-sticky-form > .mkto-lp-content h4 {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.5;
}

div.container.has-mkto-sticky-form > .mkto-lp-content h5 {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
}

div.container.has-mkto-sticky-form > .mkto-lp-content h6 {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.5;
}

/* ページ内リンク（#inPageLink）はスマホ表示時のみ表示する。
   テンプレート側の inline style（display:${var7}）を上書きするため !important を付与。 */
div.container.has-mkto-sticky-form > .mkto-lp-content #inPageLink {
  display: none !important;
}

@media screen and (max-width: 759px) {
  div.container.has-mkto-sticky-form > .mkto-lp-content #inPageLink {
    display: block !important;
  }
  div.container.has-mkto-sticky-form > .mkto-lp-content #inPageLink a {
    display: block !important;
    align-items: center;
    width: fit-content;
    text-decoration: none;
    padding: 12px 40px 12px 32px;
    margin: 0 auto;
    border-radius: 100px;
    background: #e66447;
    border: 1px solid #ffffff;
    border-radius: 100px;
    color: #ffffff;
    cursor: pointer;
    box-sizing: border-box;
  }
}

/*
 * position: sticky でビューポート上部から20pxの位置に貼り付ける。
 * フッターは div.container.has-mkto-sticky-form の外側の兄弟要素のため、
 * sticky はコンテナ下端で自然に追従を終了し、フッターとは重ならない
 * （固定表示用の JS によるフッター回避制御は不要）。
 * シェル自体はスクロールさせない（overflow-y: hidden）。ヘッダー・注記は
 * 常に全体表示し、フォーム本体側（form.mktoForm.mkto-form-card）だけが
 * flex + min-height:0 で内部スクロールする。width / overflow-y は後方の
 * .is-lp-form-sticky-target.mkto-form-card-shell 系ルール（詳細度が同じ）に
 * カスケード順で上書きされるため !important で確定させている（958行目付近のモバイル用上書きにも
 * 対になる !important を付与している）。
 */
div.container.has-mkto-sticky-form > .is-lp-form-sticky-target {
  position: sticky;
  top: 20px;
  width: 360px !important;
  max-height: calc(100vh - 40px);
  overflow-y: hidden !important;
  overflow-x: visible;
  z-index: 1;
  isolation: isolate;
}

@media screen and (max-width: 959px) {
  #content div.container.has-mkto-sticky-form,
  #wrapper div.container.has-mkto-sticky-form,
  div.container.has-mkto-sticky-form {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 32px;
    width: 100%;
    max-width: 100%;
    float: none;
    clear: both;
    grid-template-columns: none;
  }

  #content div.container.has-mkto-sticky-form > .mkto-lp-content,
  #content div.container.has-mkto-sticky-form > .is-lp-form-sticky-target,
  #wrapper div.container.has-mkto-sticky-form > .mkto-lp-content,
  #wrapper div.container.has-mkto-sticky-form > .is-lp-form-sticky-target,
  div.container.has-mkto-sticky-form > .mkto-lp-content,
  div.container.has-mkto-sticky-form > .is-lp-form-sticky-target {
    display: block;
    flex: 0 0 auto;
    float: none;
    clear: both;
    /* .is-lp-form-sticky-target は width:360px !important（デスクトップ用固定表示）を上書きするため width にも !important を付与 */
    width: 100% !important;
    max-width: 100%;
    min-width: 0;
    grid-column: auto;
    grid-row: auto;
    contain: none;
  }

  #content div.container.has-mkto-sticky-form > .mkto-lp-content,
  #wrapper div.container.has-mkto-sticky-form > .mkto-lp-content,
  div.container.has-mkto-sticky-form > .mkto-lp-content {
    order: 1;
  }

  #content div.container.has-mkto-sticky-form > .is-lp-form-sticky-target,
  #wrapper div.container.has-mkto-sticky-form > .is-lp-form-sticky-target,
  div.container.has-mkto-sticky-form > .is-lp-form-sticky-target {
    order: 2;
    margin-top: 32px;
    position: static;
    top: auto;
    left: auto;
    max-height: none;
    /* デスクトップ用 overflow-y: hidden !important（固定表示フォーム用）を上書きするため !important を付与 */
    overflow-y: visible !important;
  }

  form.mktoForm.mkto-form-card,
  .is-lp-form-sticky-target.mkto-form-card-shell,
  .is-lp-form-sticky-target:has(> .mkto-form-card__header),
  .is-lp-form-sticky-target:has(> form.mktoForm.mkto-form-card) {
    max-height: none;
    overflow-y: visible;
  }
}

/* ── テンプレート側カード（見出し・注釈を form 外に配置） ─── */

.is-lp-form-sticky-target.mkto-form-card-shell,
.is-lp-form-sticky-target:has(> .mkto-form-card__header),
.is-lp-form-sticky-target:has(> form.mktoForm.mkto-form-card) {
  display: flex;
  flex-direction: column;
  max-width: 100%;
  margin-top: -130px;
  background: #fff;
  border: 3px solid #32aa86;
  border-radius: 12px;
  box-sizing: border-box;
  margin-bottom: 20px;
  overflow: visible;
}

/*
 * Marketo はテンプレートのプレースホルダー div（class="mktoForm"）を残したまま
 * 内部に実フォームを差し込む。ガイド付きエディタの「要素の挿入」で追加した場合は
 * さらに div#lpeCDiv_* / span.lpContentsItem という編集用ラッパーも入れ子になり、
 * 実フォームがシェルから3階層下になることがある（span は inline のため block の
 * form を挟むと高さの継承も崩れる）。これらはレイアウト上不要な入れ子なので
 * display:contents で除去し、実フォーム（form.mktoForm.mkto-form-card）を
 * シェルの flex アイテムとして直接扱えるようにする。
 */
.is-lp-form-sticky-target.mkto-form-card-shell > div.mktoForm,
.is-lp-form-sticky-target:has(> .mkto-form-card__header) > div.mktoForm,
.is-lp-form-sticky-target:has(> form.mktoForm.mkto-form-card) > div.mktoForm,
.is-lp-form-sticky-target.mkto-form-card-shell > div.mktoForm [id^="lpeCDiv_"],
.is-lp-form-sticky-target.mkto-form-card-shell > div.mktoForm .lpContentsItem {
  display: contents;
}

.is-lp-form-sticky-target.mkto-form-card-shell form.mktoForm.mkto-form-card,
.is-lp-form-sticky-target:has(> .mkto-form-card__header) form.mktoForm,
.is-lp-form-sticky-target:has(> form.mktoForm.mkto-form-card) form.mktoForm.mkto-form-card {
  border: none;
  margin-left: 0;
  margin-bottom: 0;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
}

.is-lp-form-sticky-target.mkto-form-card-shell > form.mktoForm.mkto-form-card nav.mkto-progress,
.is-lp-form-sticky-target:has(> .mkto-form-card__header) > form.mktoForm nav.mkto-progress,
.is-lp-form-sticky-target:has(> form.mktoForm.mkto-form-card) > form.mktoForm nav.mkto-progress {
  margin-top: 0;
}

/* ── フォームカード見出し ─────────────────────────────────── */

/* 見出し（form 内 Rich Text / テンプレート直下のいずれも） */
form.mktoForm.mkto-form-card .mkto-form-card__header,
form.mktoForm.mkto-form-card .mktoHtmlText .mkto-form-card,
.is-lp-form-sticky-target > .mkto-form-card__header {
  border: none;
  background: none;
  padding: 0 24px 12px;
  box-sizing: border-box;
  flex-shrink: 0;
}

form.mktoForm.mkto-form-card > .mktoFormRow:first-child .mktoFormCol,
form.mktoForm.mkto-form-card > .mktoFormRow:first-child .mktoFieldWrap,
form.mktoForm.mkto-form-card > .mktoFormRow:first-child .mktoHtmlText {
  display: block;
  width: 100%;
  margin-bottom: 0;
}

form.mktoForm.mkto-form-card p.mkto-form-card__lead,
.is-lp-form-sticky-target > .mkto-form-card__header p.mkto-form-card__lead {
  margin-top: 24px;
  margin-bottom: 0;
  padding: 0;
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.6;
  color: #e66447;
  text-align: center;
}

form.mktoForm.mkto-form-card .mkto-form-card__lead__emphasis,
.is-lp-form-sticky-target > .mkto-form-card__header .mkto-form-card__lead__emphasis {
  font-size: 1.6rem;
}

form.mktoForm.mkto-form-card h2.mkto-form-card__title,
.is-lp-form-sticky-target > .mkto-form-card__header h2.mkto-form-card__title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 10px;
  margin-bottom: 0;
  padding: 0;
  font-size: 2rem;
  color: #000;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
}

form.mktoForm.mkto-form-card span.mkto-form-card__badge,
.is-lp-form-sticky-target > .mkto-form-card__header span.mkto-form-card__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  line-height: 1.3;
  width: 40px;
  height: 24px;
  font-size: 1.2rem;
  font-weight: 700;
  color: #fff;
  background: #e66447;
  border-radius: 4px;
}

form.mktoForm.mkto-form-card p.mkto-form-card__desc,
.is-lp-form-sticky-target > .mkto-form-card__header p.mkto-form-card__desc {
  margin-top: 10px;
  margin-bottom: 0;
  padding: 0;
  font-size: 1.4rem;
  line-height: 1.6;
  color: #555;
  text-align: center;
}

form.mktoForm.mkto-form-card p.mkto-form-card__note,
.is-lp-form-sticky-target > .mkto-form-card__note {
  width: fit-content;
  margin-top: 12px;
  margin-bottom: 0;
  margin-inline: auto;
  padding: 0 24px 16px;
  font-size: 1.2rem;
  line-height: 1.6;
  color: #000;
  text-align: start;
  box-sizing: border-box;
  flex-shrink: 0;
}

.is-lp-form-sticky-target > form.mktoForm.mkto-form-card .mktoButtonRow {
  padding-bottom: 0;
}

form.mktoForm.mkto-form-card .mktoButtonRow {
  margin-top: 12px;
  padding: 0 24px;
  box-sizing: border-box;
}

.mktoImg {
  width: 100%;
  margin: 0 auto;
  text-align: center;
}

.cts01-img-link {
  display: block;
  margin-top: 8px;
}