/* ファイルアップロードのボタン部分 */
.form-control[type="file"]::file-selector-button {
  background-color: var(--bs-primary);
  color: white;
}

/* ファイルアップロードコンポーネント */
.file-upload-label {
    cursor: pointer;
    caret-color: transparent;
    background-color: #fff;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

.file-upload-label:hover {
    border-color: #86b7fe;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

.upload-file-button {
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border-top-right-radius: 0px 0px;
    border-bottom-right-radius: 0px 0px;
}


/* ステップの矢印 */
.step{
    display: flex;
    flex-wrap: wrap;
    list-style: none;
}
.step li{
    position: relative;
    padding: 10px 10px;
    margin: 0 25px 10px 0;
    background: #cccccc;
    width: 10rem;
}

/* 進行方向 */
.step li::after{
    content: "";
    position: absolute;
    top: 0;
    right: -30px;
    border-width: 33px 15px;
    border-color: transparent transparent transparent #cccccc ;
    border-style: solid;
}

/* アクティブステップ */
.step li.current_step{
    /* background: #3d85c6 ; */
    background: #ec0000 ;
}
.step li.current_step::after{
    /* border-color: transparent transparent transparent #3d85c6 ; */
    border-color: transparent transparent transparent #ec0000 ;
}

/* bootstrapのチェックボックスのチェック時の色を変更 */
.form-check-input.check-black:checked[type=checkbox] {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e");
}
/* bootstrapのラジオボタンのチェック時の色を変更 */
.form-check-input.check-black:checked[type=radio] {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23000'/%3e%3c/svg%3e");
}

/* 入力欄の枠線の色を変更 */
input.form-control,
input.form-check-input,
select.form-select,
textarea.form-control
{
    border: 1px solid #000000 !important;
}

/* PCだけフォントを小さく */
.fs-pc-xs {
    font-size: .9rem;
}

/* セクションのフォントサイズ */
.fs-section {
    font-size: 20px;
    font-weight: bold;
}
/* 項目タイトルのフォントサイズ */
.fs-title {
    font-size: 16px;
}
/* 備考(項目タイトル下)のフォントサイズ */
.fs-note {
    font-size: 12px;
}
/* 入力ラベルのフォントサイズ */
.fs-label {
    font-size: 16px;
    font-weight: bold;
}

.required-col {
    width: 3.8rem;
}

.ubo-member-container {
    border: 1px solid #000000;
}

.required-documents-container {
    border : 1px solid #000000 !important;
}

@media (max-width: 767px) {
    .title-bg-sp {
        background-color: #E7E6E6;
    }

    .step li{
        width: 5rem;
        padding: 5px 3px;
        margin: 0 16px 10px 0;
    }
    .step li::after{
        border-width: 28px 15px;
    }
}
@media (min-width: 768px) {
    .input-container, .section-container {
        width: 60rem;
    }
    .input-head-width {
        width: 25rem;
    }
    .input-area-width {
        width: 35rem;
    }

    /* .title-area-width {
        width: 24rem;
    } */
    .input-title-width {
        width: 21.3rem;
    }

    .input-width {
        width: 20rem !important;
    }

    .ubo-group-container {
        width: 62rem;
    }

    .ubo-member-container {
        width: 61rem;    }

    /* PCだけフォントを小さく */
    .fs-pc-xs{
        font-size: .7rem;
    }

    .input-require {
        background-color: #EB0001;
        color: white;
    }

    .input-container {
        border: 1px solid #0000002d;
    }

    .border-pc {
        border-left: 1px solid #0000002d;
    }

    .input-container > div > .border-pc:first-child {
        border-left: none;

        /* margin-left: -1px; */
    }

    .input-container + .input-container, .h-adr + .input-container, .h-adr > .input-container {
        /* border-top: none; */
        margin-top: -1px !important;
    }

    .fs-sp-xs{
        font-size: .9rem;
    }

    .fs-sp-xxs{
        font-size: .8rem;
    }


    /* .border-pc {
        border: 1px solid #000000;
    } */

    /* .border-pc + .border-pc, .title-sp + .border-pc {
        // margin-left: -1px;   // .border-pc + .border-pcに効かなかった
        border-left: none;
    } */

    /* .input-container + .input-container .border-pc, .input-container + .input-container .border-pc, .input-container + .h-adr .border-pc, .h-adr + .input-container .border-pc {
    border-top: none;
} */
}