/* --------------------------------------------------------------------------
  FORM LAYOUT
-------------------------------------------------------------------------- */

@media all and (min-width: 820px), print {
  
  input, select, textarea {
    appearance: none;
    cursor: pointer;
    /* outline: none; */
  }

  label,button{
    cursor: pointer;
  }
  .c-form input[type="text"],
  .c-form input[type="number"],
  .c-form select,
  .c-form textarea{
    padding: calc(10 / var(--font-size) * 1rem) calc(15 / var(--font-size) * 1rem);
    font-size: calc(var(--text-size-m) / var(--font-size) * 1rem);
    background-color: var(--color-white);
    padding:calc(8 / var(--font-size) * 1rem) calc(16 / var(--font-size) * 1rem);
    border:calc(2 / var(--font-size) * 1rem) solid var(--color-border);
    font-size:calc(var(--text-size-s) / var(--font-size) * 1rem);
    width:100%;
  }

  .c-form-error{
    font-size: calc(var(--text-size-s) / var(--font-size) * 1rem);
    font-weight: 500;
    color:var(--color-btn-02);
    margin-top: calc(6 / var(--font-size) * 1rem);
  }

  /* -----------------------------
    プライバシーチェック
  ----------------------------- */

  .c-privacy-check {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .c-privacy-check__inner{

  }
  .c-privacy-check input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
  }
  .c-privacy-check label {
    padding-left: calc(25 / var(--font-size) * 1rem);
    font-weight: 700;
    color: var(--color-btn-02);
    position: relative;
  }
  .c-privacy-check label:before {
    content: "";
    background-color: var(--color-white);
    border: calc(2 / var(--font-size) * 1rem) solid var(--color-btn-02);
    border-radius: calc(2 / var(--font-size) * 1rem);
    display: block;
    width: calc(14 / var(--font-size) * 1rem);
    height: calc(14 / var(--font-size) * 1rem);
    position: absolute;
    top: calc(7 / var(--font-size) * 1rem);
    left: 0;
  }
  .c-privacy-check label:after {
    content: "";
    background-image: url(/site_norlevo/img/form/ico_check_sp.svg);
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    display: block;
    width: calc(18 / var(--font-size) * 1rem);
    height: calc(16 / var(--font-size) * 1rem);
    position: absolute;
    top: calc(4 / var(--font-size) * 1rem);
    left: calc(-1 / var(--font-size) * 1rem);
    display: none;
  }
  .c-privacy-check input[type="checkbox"]:checked + label:after {
    display: block;
  }
  .c-privacy-check.is-error .c-privacy-check__inner{
    background-color: var(--color-valid);
    padding:calc(3 / var(--font-size) * 1rem) calc(19 / var(--font-size) * 1rem);
  }

  .c-privacy-check input[type="checkbox"]:disabled + label,
  .c-privacy-check input[type="checkbox"][aria-disabled='true'] + label{
    color: #B7B7B7;
  }
  .c-privacy-check input[type="checkbox"]:disabled + label:before,
  .c-privacy-check input[type="checkbox"][aria-disabled='true'] + label:before {
    border: calc(2 / var(--font-size) * 1rem) solid #B7B7B7;
  }
  .c-privacy-check input[type="checkbox"]:disabled + label:after,
  .c-privacy-check input[type="checkbox"][aria-disabled='true'] + label:after {
    background-image: url(/site_norlevo/img/form/ico_check_disable_sp.svg);
  }

  /* -----------------------------
    確認チェック（モーダル）
  ----------------------------- */

  .c-confirm-check {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .c-confirm-check__inner{
  }
  .c-confirm-check input[type="checkbox"] {
    position: absolute;
    /* opacity: 0; */
    /* pointer-events: none; */
  }
  .c-confirm-check label {
    padding-left: calc(30 / var(--font-size) * 1rem);
    font-size:calc(24 / var(--font-size) * 1rem);
    font-weight: 700;
    position: relative;
  }
  .c-confirm-check label:before {
    content: "";
    background-color: var(--color-white);
    border: calc(2 / var(--font-size) * 1rem) solid var(--color-black);
    border-radius: calc(2 / var(--font-size) * 1rem);
    display: block;
    width: calc(18 / var(--font-size) * 1rem);
    height: calc(18 / var(--font-size) * 1rem);
    position: absolute;
    top: calc(10 / var(--font-size) * 1rem);
    left: 0;
  }
  .c-confirm-check label:after {
    content: "";
    background-image: url(/site_norlevo/img/form/ico_check_sp.svg);
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    display: block;
    width: calc(20 / var(--font-size) * 1rem);
    height: calc(18 / var(--font-size) * 1rem);
    position: absolute;
    top: calc(8 / var(--font-size) * 1rem);
    left: calc(0 / var(--font-size) * 1rem);
    display: none;
  }
  .c-confirm-check input[type="checkbox"]:checked + label:after {
    display: block;
  }
  .c-confirm-check.is-error .c-confirm-check__inner{
    background-color: var(--color-valid);
    padding:calc(3 / var(--font-size) * 1rem) calc(19 / var(--font-size) * 1rem);
  }

  /* -----------------------------
    ラジオボタン
  ----------------------------- */

  .c-radio-button {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .c-radio-button input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
  }
  .c-radio-button label {
    background-color: var(--color-white);
    border:calc(2 / var(--font-size) * 1rem) solid var(--color-border);
    border-radius:calc(56 / var(--font-size) * 1rem);
    font-size:calc(var(--text-size-s) / var(--font-size) * 1rem);
    font-weight: 700;
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    height:100%;
    transition:0.3s ease;
  }
  .c-radio-button label:hover{
    opacity:0.7;
  }
  .c-radio-button input[type="radio"]:checked + label {
    background-color: var(--color-btn-02);
    color:var(--color-white);
  }
  .c-radio-button input[type="radio"]:checked + label:hover{
    opacity:1;
  }

  /* -----------------------------
    チェックボックスボタン
  ----------------------------- */

  .c-checkbox-button {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .c-checkbox-button input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
  }
  .c-checkbox-button label {
    background-color: var(--color-white);
    border:calc(2 / var(--font-size) * 1rem) solid var(--color-border);
    border-radius:calc(56 / var(--font-size) * 1rem);
    font-size:calc(var(--text-size-s) / var(--font-size) * 1rem);
    font-weight: 700;
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    height:100%;
  }
  .c-checkbox-button input[type="checkbox"]:checked + label {
    background-color: var(--color-btn-02);
    color:var(--color-white);
  }

  /* -----------------------------
    カレンダー
  ----------------------------- */

  .c-calender-button{
    position: relative;
  }
  .c-calender-button__icon{
    max-width:calc(20 / var(--font-size) * 1rem);
    width:100%;
    height:calc(20 / var(--font-size) * 1rem);
    position: absolute;
    top:0;
    right:calc(11 / var(--font-size) * 1rem);
    bottom:0;
    display:flex;
    align-items:center;
    justify-content:center;
    margin:auto 0;
  }
  .form-calender__component.--time .c-calender-button__icon{
    max-width:calc(18 / var(--font-size) * 1rem);
    width:100%;
    height:calc(20 / var(--font-size) * 1rem);
    right:calc(12 / var(--font-size) * 1rem);
  }

  .c-calender-button__column{
    display: flex;
    align-items: center;
    gap: calc(4 / var(--font-size) * 1rem);
    margin-right: calc(40 / var(--font-size) * 1rem);
  }

  /* -----------------------------
    送信ボタン
  ----------------------------- */

  .c-form-send-button {
    background-color: var(--color-btn-02);
    border:calc(2 / var(--font-size) * 1rem) solid var(--color-btn-02);
    border-radius:calc(56 / var(--font-size) * 1rem);
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    height:100%;
    position: relative;
    transition:0.3s ease;
  }
  .c-form-send-button__label{
    font-size:calc(var(--text-size-s) / var(--font-size) * 1rem);
    font-weight: 700;
    color:var(--color-white);
  }
  .c-form-send-button__icon{
    background-color: var(--color-white);
    mask-image:url(/site_norlevo/img/form/ico_button_cursor.svg);
    mask-size:contain;
    mask-position:center center;
    mask-repeat:no-repeat;
    max-width:calc(20 / var(--font-size) * 1rem);
    width:100%;
    height:calc(20 / var(--font-size) * 1rem);
    position: absolute;
    top:0;
    right:calc(18 / var(--font-size) * 1rem);
    bottom:0;
    margin:auto 0;
  }

  .c-form-send-button:disabled,
  .c-form-send-button[aria-disabled='true']{
    background-color: #ECECEC;
    border-color:var(--color-border);
    cursor: pointer;
    pointer-events: visible;
  }
  .c-form-send-button:disabled .c-form-send-button__label,
  .c-form-send-button[aria-disabled='true'] .c-form-send-button__label{
    color: #C8C8C8;
  }
  .c-form-send-button:disabled .c-form-send-button__icon,
  .c-form-send-button[aria-disabled='true'] .c-form-send-button__icon{
    background-color: #C8C8C8;
  }

  .c-form-send-button--white{
    background-color: var(--color-white);
    border:calc(2 / var(--font-size) * 1rem) solid var(--color-border);
  }
  .c-form-send-button--white .c-form-send-button__label{
    color:var(--color-black);
  }
  .c-form-send-button--white .c-form-send-button__icon{
    background-color: var(--color-border);
  }

  .c-form-send-button:hover{
    opacity:0.7;
  }
}

@media all and (max-width: 819px) {
  
  input, select, textarea {
    appearance: none;
    cursor: pointer;
    /* outline: none; */
  }

  label,button{
    cursor: pointer;
  }

  .c-form input[type="text"],
  .c-form input[type="number"],
  .c-form select,
  .c-form textarea{
    padding: calc(10 / var(--font-size) * 1rem) calc(15 / var(--font-size) * 1rem);
    font-size: calc(var(--text-size-m) / var(--font-size) * 1rem);
    background-color: var(--color-white);
    padding:calc(8 / var(--font-size) * 1rem) calc(16 / var(--font-size) * 1rem);
    border:calc(2 / var(--font-size) * 1rem) solid var(--color-border);
    font-size:calc(var(--text-size-s) / var(--font-size) * 1rem);
    width:100%;
  }

  .c-form-error{
    font-size: calc(var(--text-size-s) / var(--font-size) * 1rem);
    font-weight: 500;
    color:var(--color-btn-02);
    margin-top: calc(6 / var(--font-size) * 1rem);
  }

  /* -----------------------------
    プライバシーチェック
  ----------------------------- */

  .c-privacy-check {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .c-privacy-check__inner{

  }
  .c-privacy-check input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
  }
  .c-privacy-check label {
    padding-left: calc(25 / var(--font-size) * 1rem);
    font-weight: 700;
    color: var(--color-btn-02);
    position: relative;
  }
  .c-privacy-check label:before {
    content: "";
    background-color: var(--color-white);
    border: calc(2 / var(--font-size) * 1rem) solid var(--color-btn-02);
    border-radius: calc(2 / var(--font-size) * 1rem);
    display: block;
    width: calc(14 / var(--font-size) * 1rem);
    height: calc(14 / var(--font-size) * 1rem);
    position: absolute;
    top: calc(7 / var(--font-size) * 1rem);
    left: 0;
  }
  .c-privacy-check label:after {
    content: "";
    background-image: url(/site_norlevo/img/form/ico_check_sp.svg);
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    display: block;
    width: calc(18 / var(--font-size) * 1rem);
    height: calc(16 / var(--font-size) * 1rem);
    position: absolute;
    top: calc(4 / var(--font-size) * 1rem);
    left: calc(-1 / var(--font-size) * 1rem);
    display: none;
  }
  .c-privacy-check input[type="checkbox"]:checked + label:after {
    display: block;
  }
  .c-privacy-check.is-error .c-privacy-check__inner{
    background-color: var(--color-valid);
    padding:calc(3 / var(--font-size) * 1rem) calc(19 / var(--font-size) * 1rem);
  }

  .c-privacy-check input[type="checkbox"]:disabled + label,
  .c-privacy-check input[type="checkbox"][aria-disabled='true'] + label{
    color: #B7B7B7;
  }
  .c-privacy-check input[type="checkbox"]:disabled + label:before,
  .c-privacy-check input[type="checkbox"][aria-disabled='true'] + label:before {
    border: calc(2 / var(--font-size) * 1rem) solid #B7B7B7;
  }
  .c-privacy-check input[type="checkbox"]:disabled + label:after,
  .c-privacy-check input[type="checkbox"][aria-disabled='true'] + label:after {
    background-image: url(/site_norlevo/img/form/ico_check_disable_sp.svg);
  }

  /* -----------------------------
    確認チェック（モーダル）
  ----------------------------- */

  .c-confirm-check {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .c-confirm-check__inner{

  }
  .c-confirm-check input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    /* pointer-events: none; */
  }
  .c-confirm-check label {
    padding-left: calc(30 / var(--font-size) * 1rem);
    font-size:calc(24 / var(--font-size) * 1rem);
    font-weight: 700;
    position: relative;
  }
  .c-confirm-check label:before {
    content: "";
    background-color: var(--color-white);
    border: calc(2 / var(--font-size) * 1rem) solid var(--color-black);
    border-radius: calc(2 / var(--font-size) * 1rem);
    display: block;
    width: calc(18 / var(--font-size) * 1rem);
    height: calc(18 / var(--font-size) * 1rem);
    position: absolute;
    top: calc(10 / var(--font-size) * 1rem);
    left: 0;
  }
  .c-confirm-check label:after {
    content: "";
    background-image: url(/site_norlevo/img/form/ico_check_sp.svg);
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    display: block;
    width: calc(20 / var(--font-size) * 1rem);
    height: calc(18 / var(--font-size) * 1rem);
    position: absolute;
    top: calc(8 / var(--font-size) * 1rem);
    left: calc(0 / var(--font-size) * 1rem);
    display: none;
  }
  .c-confirm-check input[type="checkbox"]:checked + label:after {
    display: block;
  }
  .c-confirm-check.is-error .c-confirm-check__inner{
    background-color: var(--color-valid);
    padding:calc(3 / var(--font-size) * 1rem) calc(19 / var(--font-size) * 1rem);
  }

  /* -----------------------------
    ラジオボタン
  ----------------------------- */

  .c-radio-button {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .c-radio-button input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
  }
  .c-radio-button label {
    background-color: var(--color-white);
    border:calc(2 / var(--font-size) * 1rem) solid var(--color-border);
    border-radius:calc(56 / var(--font-size) * 1rem);
    font-size:calc(var(--text-size-s) / var(--font-size) * 1rem);
    font-weight: 700;
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    height:100%;
  }
  .c-radio-button input[type="radio"]:checked + label {
    background-color: var(--color-btn-02);
    color:var(--color-white);
  }

  /* -----------------------------
    チェックボックスボタン
  ----------------------------- */

  .c-checkbox-button {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .c-checkbox-button input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
  }
  .c-checkbox-button label {
    background-color: var(--color-white);
    border:calc(2 / var(--font-size) * 1rem) solid var(--color-border);
    border-radius:calc(56 / var(--font-size) * 1rem);
    font-size:calc(var(--text-size-s) / var(--font-size) * 1rem);
    font-weight: 700;
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    height:100%;
  }
  .c-checkbox-button input[type="checkbox"]:checked + label {
    background-color: var(--color-btn-02);
    color:var(--color-white);
  }

  /* -----------------------------
    カレンダー
  ----------------------------- */

  .c-calender-button{
    position: relative;
  }
  .c-calender-button__icon{
    max-width:calc(20 / var(--font-size) * 1rem);
    width:100%;
    height:calc(20 / var(--font-size) * 1rem);
    position: absolute;
    top:0;
    right:calc(11 / var(--font-size) * 1rem);
    bottom:0;
    display:flex;
    align-items:center;
    justify-content:center;
    margin:auto 0;
  }
  .form-calender__component.--time .c-calender-button__icon{
    max-width:calc(18 / var(--font-size) * 1rem);
    width:100%;
    height:calc(20 / var(--font-size) * 1rem);
    right:calc(12 / var(--font-size) * 1rem);
  }
  .c-calender-button__column{
    display: flex;
    align-items: center;
    gap: calc(4 / var(--font-size) * 1rem);
    margin-right: calc(40 / var(--font-size) * 1rem);
  }

  /* -----------------------------
    送信ボタン
  ----------------------------- */

  .c-form-send-button {
    background-color: var(--color-btn-02);
    border:calc(2 / var(--font-size) * 1rem) solid var(--color-btn-02);
    border-radius:calc(56 / var(--font-size) * 1rem);
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    height:100%;
    position: relative;
  }
  .c-form-send-button__label{
    font-size:calc(var(--text-size-s) / var(--font-size) * 1rem);
    font-weight: 700;
    color:var(--color-white);
  }
  .c-form-send-button__icon{
    background-color: var(--color-white);
    mask-image:url(/site_norlevo/img/form/ico_button_cursor.svg);
    mask-size:contain;
    mask-position:center center;
    mask-repeat:no-repeat;
    max-width:calc(20 / var(--font-size) * 1rem);
    width:100%;
    height:calc(20 / var(--font-size) * 1rem);
    position: absolute;
    top:0;
    right:calc(18 / var(--font-size) * 1rem);
    bottom:0;
    margin:auto 0;
  }

  .c-form-send-button:disabled,
  .c-form-send-button[aria-disabled='true']{
    background-color: #ECECEC;
    border-color:var(--color-border);
    cursor: pointer;
    pointer-events: visible;
  }
  .c-form-send-button:disabled .c-form-send-button__label,
  .c-form-send-button[aria-disabled='true'] .c-form-send-button__label{
    color: #C8C8C8;
  }
  .c-form-send-button:disabled .c-form-send-button__icon,
  .c-form-send-button[aria-disabled='true'] .c-form-send-button__icon{
    background-color: #C8C8C8;
  }

  .c-form-send-button--white{
    background-color: var(--color-white);
    border:calc(2 / var(--font-size) * 1rem) solid var(--color-border);
  }
  .c-form-send-button--white .c-form-send-button__label{
    color:var(--color-black);
  }
  .c-form-send-button--white .c-form-send-button__icon{
    background-color: var(--color-border);
  }

  .c-form-send-button--return .c-form-send-button__icon{
    right: 0;
    left:calc(18 / var(--font-size) * 1rem);
    transform: rotate(180deg);
  }
}

button:focus-visible,
a:focus-visible,
input:focus-visible + label,
.custom-select__trigger:focus-visible,
.custom-select__option.is-highlighted,
.c-confirm-check input[type="checkbox"]:focus-visible + label{
  outline: 2px solid rgb(0, 95, 204) !important;
}

@media (hover: none) and (pointer: coarse) {
  button:focus-visible,
  a:focus-visible,
  input:focus-visible + label,
  .custom-select__trigger:focus-visible,
  .custom-select__option.is-highlighted,
  .c-confirm-check input[type="checkbox"]:focus-visible + label{
    outline: none !important;
  }
}