/*====================================================================
お役立ち資料詳細ページ formrunフォーム
（HubSpotフォームと同じ見た目を踏襲。SCSSは使わずプレーンCSSで管理）
余白・背景・角丸はフォームを囲う download-pdf.css 側の
.downloadPage__hubspotformArea を共通で利用する。
セレクタは formrun 専用クラス（downloadPage__formrun*）を直接指定する。
====================================================================*/

/* 各フィールド（input下端→次のタイトルまで25px。HubSpotの .input margin-bottom と同等） */
.downloadPage__formrunField {
  margin-bottom: 2.5rem;
}

.downloadPage__formrunField label {
  display: inline-block;
  margin-bottom: 0.5rem;
  font-weight: 700;
  font-size: clamp(15px, calc(15vw / 15), 15px);
  letter-spacing: 0.05em;
}

/* 必須マーク */
.downloadPage__formrunRequired {
  color: #bb101d;
  font-size: clamp(13px, calc(13vw / 15), 13px);
}

/* 入力欄・セレクト */
.downloadPage__formrunField input,
.downloadPage__formrunField select {
  display: block;
  width: 100%;
  padding: 8px 15px;
  font-weight: 400;
  font-size: clamp(15px, calc(15vw / 15), 15px);
  line-height: 200%;
  border: 1px solid #cccccc;
  border-radius: 5px;
}

.downloadPage__formrunField input::placeholder {
  color: #cccccc;
}

/* セレクト（想定ご予算）の矢印アイコン */
.downloadPage__formrunField select {
  background-image: url('../assets/images/page/download-pdf/select-arrow.png');
  background-repeat: no-repeat;
  background-position: right 15px center;
  background-size: 18px 8px;
  appearance: none;
}

/* セレクト未選択時はプレースホルダ色（HubSpotの is-placeholder と同等） */
.downloadPage__formrunField select:has(option[value='']:checked) {
  color: #cccccc;
}

/* エラーメッセージ */
.downloadPage__formrunError {
  margin-top: 0.5rem;
  color: #bb101d;
  font-weight: 400;
  font-size: clamp(11px, calc(12vw / 15), 12px);
  line-height: 100%;
  letter-spacing: 0;
}

/* 送信ボタン */
.downloadPage__formrunSubmit {
  position: relative;
  display: block;
  width: 100%;
  margin-top: 2.5rem;
  padding: 17px;
  color: #ffffff;
  font-weight: 700;
  font-size: clamp(15px, calc(15vw / 15), 15px);
  line-height: 170%;
  letter-spacing: 0.05em;
  text-align: center;
  background-color: #60c200;
  border: none;
  border-radius: 63px;
  cursor: pointer;
  transition: 0.3s;
}

.downloadPage__formrunSubmit::after {
  position: absolute;
  top: 50%;
  left: 0;
  display: block;
  width: 35px;
  height: 15px;
  background: url('../assets/images/page/download-pdf/submit-icon.png') center
    center / contain no-repeat;
  transform: translate(50%, -50%);
  content: '';
  pointer-events: none;
}

@media (max-width: 768px) {
  .downloadPage__formrunSubmit {
    margin-top: 2rem;
  }
}

@media (hover: hover) and (pointer: fine) {
  .downloadPage__formrunSubmit:hover {
    opacity: 0.6;
  }
}

/*====================================================================
セミナー詳細ページ formrunフォーム
（HubSpot iframeフォームの見た目を踏襲。DevToolsでの実測値ベース）
フォームは .semi_content__formAreaWrap 内に配置される。
====================================================================*/

/* 各フィールド */
.semi_content__formrunField {
  margin-bottom: 1.8rem;
}

.semi_content__formrunField label {
  display: block;
  margin-bottom: 0.4rem;
  color: #33475b;
  font-weight: 500;
  font-size: 1.3rem;
}

/* 必須マーク */
.semi_content__formrunRequired {
  color: #ff0000;
}

/* 入力欄（チェックボックスは除外） */
.semi_content__formrunField input:not([type='checkbox']) {
  width: 100%;
  height: 40px;
  padding: 0 15px;
  color: #33475b;
  font-size: 1.6rem;
  line-height: 22px;
  background-color: #f5f8fa;
  border: 1px solid #cbd6e2;
  border-radius: 3px;
}

.semi_content__formrunField input::placeholder {
  color: #99acc2;
}

/* エラーメッセージ */
.semi_content__formrunError {
  margin-top: 0.5rem;
  color: #ff0000;
  font-size: 1.2rem;
}

/* 処理に関する説明文 */
.semi_content__formrunPolicy {
  margin-bottom: 1rem;
  color: #33475b;
  font-size: 1.4rem;
}

.semi_content__formrunPolicy a {
  color: #0000ee;
  text-decoration: underline;
}

/* プライバシーポリシー同意チェックボックス */
.semi_content__formrunConsent label {
  display: flex;
  align-items: flex-start;
  margin-bottom: 0;
  font-weight: 400;
  font-size: 1.4rem;
}

.semi_content__formrunConsent input[type='checkbox'] {
  flex-shrink: 0;
  width: 13px;
  height: 13px;
  margin-top: 0.3em;
  margin-right: 5px;
  appearance: auto;
}

.semi_content__formrunConsent a {
  color: #0000ee;
  text-decoration: underline;
}

/* 送信ボタン（中央寄せ・オレンジ） */
.semi_content__formrunSubmitWrap {
  margin-top: 60px;
  text-align: center;
}

.semi_content__formrunSubmit {
  display: inline-block;
  padding: 12px 24px;
  color: #ffffff;
  font-weight: 700;
  font-size: 2.4rem;
  text-align: center;
  background-color: #ff7a59;
  border: 1px solid #ff7a59;
  border-radius: 3px;
  cursor: pointer;
  transition: 0.3s;
}

@media (hover: hover) and (pointer: fine) {
  .semi_content__formrunSubmit:hover {
    opacity: 0.85;
  }
}

/*====================================================================
QUERYY 記事内ダウンロードバナー formrunフォーム（クリエイター型埋め込み）
フォーム本体はformrunのiframeが描画するため、テーマ側からは
フォーム内部にCSSを当てられない。ここでは外側のラッパーのみ調整する。
====================================================================*/

.download-banner-formrun {
  width: 100%;
  margin-block-start: 1.5rem;
}

@media screen and (max-height: 910px) {
  .download-banner-formrun {
    margin-block-start: 0;
  }
}