/* HubSpot form custom styles
 * ここにHubSpotフォーム用のスタイルを追記してください。
 * 例: #hubspot-form .hs-form { ... }
 */

#hubspot-form .hs-form .hs-form-required {
  font-size: 0;
}

#hubspot-form .hs-form .hs-form-required::after {
  content: "必須";
  display: inline-flex;
  align-items: center;
  margin-left: 4px;
  padding: 2px 6px;
  border-radius: 2px;
  background-color: #e53935;
  color: #ffffff;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  vertical-align: baseline;
}

#hubspot-form .hs-form > .hs-visible-group + .hs-visible-group {
  padding-top: 20px;
}

/* 2カラム行（姓・名など）: form-columnsに依存しない */
#hubspot-form .hs-form > fieldset:has(> .hs-form-field + .hs-form-field),
#hubspot-form .hs-form > .hs_name {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 0 auto;
}

#hubspot-form
  .hs-form
  > fieldset:has(> .hs-form-field + .hs-form-field)
  > .hs-form-field,
#hubspot-form .hs-form > .hs_name > .hs-form-field {
  max-width: none;
  width: 100%;
  margin-bottom: 0;
}

/* ラベルと入力の縦間隔（全フィールド） */
#hubspot-form .hs-form .hs-form-field {
  display: grid;
  row-gap: 8px;
  padding-bottom: 20px;
}

/* 入力UIの余白とボーダー */
#hubspot-form .hs-form input[type="text"],
#hubspot-form .hs-form input[type="email"],
#hubspot-form .hs-form input[type="tel"],
#hubspot-form .hs-form input[type="number"],
#hubspot-form .hs-form select,
#hubspot-form .hs-form textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #dddddd;
}

#hubspot-form .hs-form .hs-form-checkbox-display {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

#hubspot-form .hs-form .hs-privacy .hs-form-booleancheckbox-display {
  display: inline-flex;
  align-items: flex-start;
  gap: 8px;
}

#hubspot-form .hs-form .actions {
  text-align: center;
}

#hubspot-form .hs-form .actions .hs-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 18px 40px;
  border-radius: 8px;
  background-color: #222222;
  color: #ffffff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 4H10M7 1L10 4L7 7' fill='none' stroke='%23ffffff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 12px 8px;
  background-position: calc(50% + 86px) center;
}

#hubspot-form .hs-form .hs-form-checkbox .inputs-list > li + li {
  margin-top: 8px;
}

#hubspot-form .hs-form .hs-privacy span span {
  font-size: 0;
}

#hubspot-form .hs-form .hs_raijyokibo_radio .hs-form-radio-display {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

#hubspot-form .hs-form .hs-field-desc {
  font-size: 10px;
  color: #888888;
}

#hubspot-form .hs-form label {
  font-weight: 700;
}

#hubspot-form .hs-form .hs-privacy a {
  color: #e53935;
  text-decoration: underline;
}

#hubspot-form .hs-form .hs-privacy {
  text-align: center;
}

#hubspot-form .hs-form .hs-privacy span {
  display: inline;
  font-size: 12px;
}

/* 「連絡が取りやすい時間」 */
#hubspot-form .hs-form .hs_available_time {
  padding-top: 20px;
  border-top: 1px solid #dddddd;
}

#hubspot-form .hs-form .hs_areadai1kibo,
#hubspot-form .hs-form .hs_raijyokibo_radio,
#hubspot-form .hs-form .hs_toiawasenaiyo2 {
  padding-top: 20px;
  border-top: 1px solid #dddddd;
}

.hs_toiawasenaiyo_combine {
  display: none !important;
}

/* 「郵便番号・都道府県」の2カラム行 */
#hubspot-form .hs-form > fieldset:has(.hs_zip):has(.hs_state),
#hubspot-form .hs-form > .hs_zip.hs-form-field + .hs_state.hs-form-field {
  padding-top: 20px;
  border-top: 1px solid #dddddd;
}

/* HubSpot の form-columns: SP 全幅、PC 75% 中央 */
#hubspot-form .hs-form .form-columns-1,
#hubspot-form .hs-form .form-columns-2 {
  max-width: 100%;
  margin: 0;
}

/* PCレイアウト調整（SPスタイルは維持） */
@media (min-width: 1024px) {
  #hubspot-form {
    width: 100%;
    max-width: none;
    margin: 0;
  }

  #hubspot-form .hs-form > .hs-visible-group + .hs-visible-group {
    padding-top: 28px;
  }

  #hubspot-form .hs-form .hs-form-field {
    row-gap: 10px;
    padding-bottom: 24px;
  }

  #hubspot-form .hs-form > fieldset:has(> .hs-form-field + .hs-form-field),
  #hubspot-form .hs-form > .hs_name {
    gap: 20px;
  }

  #hubspot-form .hs-form input[type="text"],
  #hubspot-form .hs-form input[type="email"],
  #hubspot-form .hs-form input[type="tel"],
  #hubspot-form .hs-form input[type="number"],
  #hubspot-form .hs-form select,
  #hubspot-form .hs-form textarea {
    padding: 14px 16px;
    font-size: 16px;
  }

  #hubspot-form .hs-form .actions .hs-button {
    width: 20rem;
    min-width: 0;
    padding: 18px 56px;
  }

  #hubspot-form .hs-form .form-columns-1,
  #hubspot-form .hs-form .form-columns-2 {
    max-width: 75%;
    margin: 0 auto;
  }
}

/* Before/After section visibility toggle (SP/PC) */
.ba-pc-only {
  display: none;
}

@media (min-width: 768px) {
  .ba-sp-only {
    display: none !important;
  }

  .ba-pc-only {
    display: grid !important;
  }
}