/**
 * カスタムスタイル用 Stylesheat
 * 
 * 追加のスタイルが必要になった場合、このファイルに記述し
 * デフォルトのstyle.cssへの影響を与えないようにします
 */

/* フォーム背景色一部変更 */
#new-request-form form {
  position: relative;
}
#new-request-form form::before {
  content: "";
  position: absolute;
  top: var(--basic-fields-top, 0px);
  left: -16px;
  right: -16px;
  height: var(--basic-fields-height, 0px);
  background-color: rgb(239 246 255);
  border: solid rgb(191 219 254) var(--basic-fields-borderw, 0px);
  border-radius: 12px;
  z-index: -1;
}
#new-request-form form > * {
  position: relative;
}
div:has(> input[name="request[custom_fields][5288157708958]"]):after {
  content: "";
  position: absolute;
  top: -40px;
  left: -16px;
  right: -16px;
  height: var(--additional-info-fields-height, 0px);
  background-color: rgb(237,237,237);
  border: solid rgb(150, 149, 149) var(--additional-info-fields-borderw, 0px);
  border-radius: 12px;
  z-index: -1;
}
/* SP版向けマージン */
@media (max-width: 768px) {
  div:has(> input[name="request[custom_fields][5288157708958]"]):after {
    top: -50px;
  }
}

/**
 * 標準項目(件名、説明)が不要なため、強制的に消去
 * @since 2026/04/23 Inori Sakuma
 */
div:has(> input[name="request[subject]"]),
div:has(> textarea[name="request[description]"]) {
  display: none !important;
} 

/* 必須表示 */
div:has( input[required]) > label > span,
div:has( textarea[required]) > label > span {
  font-size: 0;
}
div:has( input[required]) > label > span::after,
div:has( textarea[required]) > label > span::after {
  content: '必須';
  margin-left: 6px;
  top: -1px;
  background: #fff;
  border: 1px solid #f53816;
  border-radius: 2px;
  color: #f53816;
  font-weight: normal;
  font-size: 11px;
  padding: 1px 3px;
  white-space: nowrap;
  position: relative;
}

/**
 * 横並び対応基礎
 */
form {
  flex-direction: unset! important;
  flex-wrap: wrap;
  gap: 20px;
}

form > div {
  width: 100%;
}

/**
 * 横並び対象の設定(PC版のみ)
 */
@media (min-width: 1024px) {

  /* 5, 9 */
  div:has(> input[name="request[custom_fields][5266005269278]"]),
  div:has(> input[name="request[custom_fields][5266008074654]"]),

  /* 16, 17 代表者役職・氏名 */
  /* div:has(> input[name="request[custom_fields][5266032570014]"]),
  div:has(> input[name="request[custom_fields][5265981047966]"]), */


  /* 以下は動的追加されるため、こちらに一旦記載 */
  /* 出たり消えたりする要素がwhalfとれるので、応急処置 */
  /* 14, 15 */
  div:has(> input[name="request[custom_fields][5266016789662]"]),
  div:has(> input[name="request[custom_fields][5265998889374]"]),
  /* 20, 21 */
  div:has(> input[name="request[custom_fields][5266019190046]"]),
  div:has(> input[name="request[custom_fields][5266012199326]"]),



  /* 電話番号・郵便番号 18, 19 */
  div:has(> input[name="request[custom_fields][5266033161630]"]),
  div:has(> input[name="request[custom_fields][5266011903262]"]),
  /* 利用店舗名 28, 29 */
  div:has(> input[name="request[custom_fields][5266118502942]"]),
  div:has(> input[name="request[custom_fields][5266150763678]"]),
  /* 電話番号・郵便番号 52, 47 */
  div:has(> input[name="request[custom_fields][5429815949214]"]),
  div:has(> input[name="request[custom_fields][5266155517854]"]),
  /* 会社・店舗名 44, 45*/
  div:has(> input[name="request[custom_fields][5266137578654]"]),
  div:has(> input[name="request[custom_fields][5266122746398]"]),
  /* 部署名 50, 51*/
  div:has(> input[name="request[custom_fields][5266123802910]"]),
  div:has(> input[name="request[custom_fields][5266168564638]"]),
  /* 所在地 34,35 */
  div:has(> input[name="request[custom_fields][5266115551902]"]),
  div:has(> input[name="request[custom_fields][5266115649182]"]),
  /* 所在地 48,49 */
  div:has(> input[name="request[custom_fields][5266167978526]"]),
  div:has(> input[name="request[custom_fields][5266123568158]"]),
  /* 申込書送付時の送付先メールアドレス 69, 申込会社SMS認証用携帯電話番号70 */
  div:has(> input[name="request[custom_fields][5268106087838]"]),
  div:has(> input[name="request[custom_fields][5263300548126]"]),
  /* フォームレンダリング後動的にwhalfクラス付与 @new_request_page.hbs */
  div:has(> input[name^="request[custom_fields]"]).whalf {
    width: calc(50% - 10px);
  }
}

/**
 * ラベルの並び順に難がある問題の修正
 * (正当な修正方法があったら廃止してください)
 */

div:has(> div[data-garden-container-id="containers.field.hint"]) {
  display: flex;
  flex-direction: column;
}

div:has(> div[data-garden-container-id="containers.field.hint"]) > label {
  order: 1
}

div:has(> div[data-garden-container-id="containers.field.hint"]) > input,
div:has(> div[data-garden-container-id="containers.field.hint"]) > textarea,
div:has(> div[data-garden-container-id="containers.field.hint"]) > div {
  order: 2
}

div[data-garden-container-id="containers.field.hint"] {
  order: 3 !important
}

/**
 * 特殊なラベルの表示
 */

/* No.27 */
div:has(> input[name="request[custom_fields][5288157708958]"]):before {
  content: '変更項目にチェックをお願いします';
  display: block;
  position: absolute;
  top: -32px;
  width: 100%;
  line-height: 1.42857;
  color: rgb(47, 57, 65);
  font-size: 16px;
  font-weight: 600;
}
div:has(> input[name="request[custom_fields][5288157708958]"]) {
  margin-top: 32px;
}
/* SP版向けマージン */
@media (max-width: 768px) {
  div:has(> input[name="request[custom_fields][5288157708958]"]):before {
    top: -50px;
  }
  div:has(> input[name="request[custom_fields][5288157708958]"]) {
    margin-top: 50px;
  }
}

/* No.32 */
div:has(> input[name="request[custom_fields][5266152731038]"]):before {
  content: '3か月間は旧店名の記載が必要になります';
  display: block;
  position: absolute;
  top: -28px;
  width: 100%;
  line-height: 1.42857;
  color: rgb(47, 57, 65);
  font-size: 16px;
  font-weight: 600;
}
div:has(> input[name="request[custom_fields][5266152731038]"]) {
  margin-top: 30px;
}
/* SP版向けマージン */
@media (max-width: 768px) {
  div:has(> input[name="request[custom_fields][5266152731038]"]):before {
    top: -50px;
  }
  div:has(> input[name="request[custom_fields][5266152731038]"]) {
    margin-top: 50px;
  }
}

/* No.63 */
div[data-garden-id="dropdowns.combobox.field"]:has(
  input[name="request[custom_fields][5268146502558]"][value="同一法人・同一個人のまま_2"]
  ) > div[data-garden-id="dropdowns.combobox.hint"] {
  display: none;
}

/* No.73 */
div:has(> input[name="request[custom_fields][5268154993438]"]):before {
  content: '求人(HOT PEPPER Beauty WORK)掲載をしている場合、求人の請求先も同時に変更になります';
  display: block;
  position: absolute;
  top: -32px;
  width: 100%;
  line-height: 1.42857;
  color: rgb(47, 57, 65);
  font-size: 16px;
  font-weight: 600;
}
div:has(> input[name="request[custom_fields][5268154993438]"]) {
  margin-top: 32px;
}
/* SP版向けマージン */
@media (max-width: 768px) {
  div:has(> input[name="request[custom_fields][5268154993438]"]):before {
    top: -50px;
  }
  div:has(> input[name="request[custom_fields][5268154993438]"]) {
    margin-top: 50px;
  }
}


/* No.26-1, No.26-2 */
/* div:has(> input[name="request[custom_fields][5266095680542]"]):before {
  content: '一緒に変更したいすべての店舗の情報をご記入ください（どちらか必須）';
  display: block;
  position: absolute;
  top: -32px;
  width: 200%;
  line-height: 1.42857;
  color: rgb(47, 57, 65);
  font-size: 16px;
  font-weight: 600;
} */
/* 26-1 content分マージン */
/* div:has(> input[name="request[custom_fields][5266095680542]"]) {
  margin-top: 32px;
} */
/* 26-2 PCのみ横並びのためcontent分マージン */
/* @media (min-width:1024px) {
  div:has(> input[name="request[custom_fields][5266109598366]"]) {
    margin-top: 32px;
  }
} */
/* SP版向けマージン */
/* @media (max-width: 768px) {
  div:has(> input[name="request[custom_fields][5266095680542]"]):before {
    width: 100%;
    top: -50px;
  }
  div:has(> input[name="request[custom_fields][5266095680542]"]) {
    margin-top: 50px;
  }
} */

/* 62-1, 62-2 */
/* div:has(> input[name="request[custom_fields][5268098005534]"])::before {
  content: 'ホットペッパービューティ掲載店舗名・お店ID（Hコード）';
  display: block;
  position: absolute;
  top: -32px;
  width: 200%;
  line-height: 1.42857;
  color: rgb(47, 57, 65);
  font-size: 16px;
  font-weight: 600;
} */

/* div:has(> input[name="request[custom_fields][5268098005534]"]),
div:has(> input[name="request[custom_fields][5268050832926]"]) {
  margin-top: 32px;
} */

/* 68-1, 68-2 */
/* div:has(> input[name="request[custom_fields][5268053956510]"]):before {
  content: '請求書をまとめたいすべての店舗をご記入ください';
  display: block;
  position: absolute;
  top: -32px;
  width: 200%;
  line-height: 1.42857;
  color: rgb(47, 57, 65);
  font-size: 16px;
  font-weight: 600;
} */
/* 68-1 content分マージン */
/* div:has(> input[name="request[custom_fields][5268053956510]"]) {
  margin-top: 32px;
} */
/* 68-2 PCのみ横並びのためcontent分マージン */
/* @media (min-width:1024px) {
  div:has(> input[name="request[custom_fields][5268148351006]"]) {
    margin-top: 32px;
  }
} */

/**
 *
 */
div.gG1SKx_8sRWXWUqBql1Ygd7tnyV_z43E {
  position: fixed;
  top: 10%;
  left: 0;
  right: 0;
  margin: auto auto;
  width: 60%;
}

div.gG1SKx_8sRWXWUqBql1Ygd7tnyV_z43E > div {
  font-size: 40px;
  box-shadow: 1px 1px 10px #000;
  background-image: none;
}

div.gG1SKx_8sRWXWUqBql1Ygd7tnyV_z43E > div > div::before,
div.gG1SKx_8sRWXWUqBql1Ygd7tnyV_z43E > div > div::after {
  top: 8px !important;
  right: 8px !important;
  background-size: 32px !important;
}

div#new-request-form div[data-test-id="suggested-articles"] {
  display: none !important;
}