@charset "utf-8";

/*-----------------------------------------------
    建築会社ご担当者専用 会員登録
-----------------------------------------------*/
body.vendorMemberRegist {
    background: #f1f1f1;
}

/*-----------------------------------------------
    secVendorMember
-----------------------------------------------*/
.secVendorMember {
    position: relative;
    padding-top: 4rem;
    padding-bottom: 2rem;
}
@media only screen and (max-width: 1215px) {
    .secVendorMember {
        padding-top: 2rem;
        padding-bottom: 0;
    }
}

/*-----------------------------------------------
    ページ見出し＋ログインボタン
-----------------------------------------------*/
.secVendorMember .boxPageHead {
    text-align: center;
}
.secVendorMember .boxPageTit {
    position: relative;
    margin-bottom: 3.4rem;
}
.secVendorMember .boxToLogin {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}
.secVendorMember .btnToLogin {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 14rem;
    height: 5rem;
    padding: 0 2rem;
    background: var(--whiteColor);
    border-radius: 1.5rem;
    box-shadow: 0 0 0.1rem var(--blackColor_10);
    font-size: var(--pcFS12);
    color: var(--linkColor);
    transition: .2s ease-out;
}
.secVendorMember .pageTit {
    margin: 0;
    font-size: var(--pcFS30);
    font-weight: bold;
    line-height: var(--pcLH30_45);
    letter-spacing: 0.08em;
    color: var(--textColor);
}
@media only screen and (max-width: 1215px) {
    .secVendorMember .boxPageTit {
        margin-bottom: 1.7rem;
    }
    .secVendorMember .pageTit {
        font-size: var(--spFS15);
        letter-spacing: 0.04em;
        line-height: var(--spLH15_24);
    }
}

/*-----------------------------------------------
    注意事項
-----------------------------------------------*/
.secVendorMember .boxNotice {
    margin: 0 auto 5rem;
    padding: 5.3rem 13rem 5.5rem;
    background: var(--bgNoticeColor);
    text-align: left;
}
.boxNotice .tit {
    margin-bottom: 0.9rem;
    color: var(--redColor);
    font-size: var(--pcFS18);
    font-weight: bold;
    letter-spacing: 0.04em;
    line-height: var(--pcLH18_32);
    text-align: center;
}
.boxNotice .txt {
    font-size: var(--pcFS12);
    line-height: var(--pcLH12_22);
}
.boxNotice .txtWrapper {
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
}
.boxNotice .txt .circle {
    flex-shrink: 0;
    font-size: var(--pcFS14);
    line-height: 1.6;
}
.boxNotice .txt + .txt {
    margin-top: 1.2rem;
}
@media only screen and (max-width: 1215px) {
    .secVendorMember .boxNotice {
        margin: 0 auto 3rem;
        padding: 2rem 1.5rem;
        border-radius: 0.6rem;
    }
    .boxNotice .tit {
        margin-bottom: 1rem;
        font-size: var(--spFS12);
        letter-spacing: 0;
        line-height: var(--spLH12_20);
    }
    .boxNotice .txt {
        font-size: var(--spFS11);
        line-height: var(--spLH11_16);
    }
    .boxNotice .txtWrapper {
        display: block;
    }
    .boxNotice .txt .circle {
        position: relative;
        top: 0.1rem;
        font-size: var(--spFS12);
    }
    .boxNotice .txt + .txt {
        margin-top: 1rem;
        text-align: left;
    }
}

/*-----------------------------------------------
    フォームカード：vendor用フロー・ボタン色
-----------------------------------------------*/
.secVendorMember .secCmnForm {
    margin-top: 0;
}
.secVendorMember .secCmnForm .flowList::after {
    background: var(--purpleColor);
}
.secVendorMember .secCmnForm .flowList .box {
    border-color: var(--purpleColor);
}
.secCmnForm .flowList .box.active {
    background: var(--purpleColor);
    border-color: var(--purpleColor);
    color: var(--whiteColor);
}
.secVendorMember .vendorForm .cmnCoBtn a {
    background: var(--loginBtnColor_gradient_2);
    color: var(--whiteColor);
}
.secVendorMember .vendorForm .cmnCoBtn a:hover {
    background: var(--loginBtnColor_gradient_2);
    background-size: 200% 100%;
    background-position: 100% 50%;
}
@media only screen and (max-width: 1215px) {
    .secVendorMember .secCmnForm {
        margin-top: 0;
    }
}

/*-----------------------------------------------
    所在地：郵便番号行
-----------------------------------------------*/
.secVendorMember .boxFlex.is_zip {
    align-items: flex-start;
}
.boxFlex.is_zip .txtLeft {
    padding-top: 1.8rem;
}
.secVendorMember .boxZipIn {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1.5rem 2rem;
    width: 100%;
}
.boxZipIn input {
    flex: 0 0 auto;
}
.boxZipIn .boxNote {
    flex: 1 1 28rem;
}
@media only screen and (max-width: 1215px) {
    .secVendorMember .boxFlex {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.8rem;
    }
    .secFormTable .boxFlex + .boxFlex {
        margin-top: 2.1rem;
    }
    .secVendorMember .boxFlex .txtLeft {
        min-width: 0;
        padding-top: 0;
        margin-bottom: 0;
        font-size: var(--spFS13);
    }
    .boxFlex.is_zip .txtLeft {
        padding-top: 0;
        margin-bottom: 0;
    }
    .secVendorMember .boxZipIn {
        flex-direction: column;
        align-items: stretch;
        gap: 0.8rem;
        width: 100%;
    }
    .boxZipIn input {
        width: 100%;
    }
    .boxZipIn .boxNote {
        flex: none;
        width: 100%;
    }
}

/*-----------------------------------------------
    事前登録内容（二次情報）
-----------------------------------------------*/
.secVendorMember .boxPreRegist {
    margin: 0 0 6rem;
    padding: 3.5rem 4.5rem 4rem;
    background: #f7f7f7;
    border-radius: 1rem;
}
.boxPreRegist .titPre {
    margin-bottom: 0.6rem;
    color: var(--purpleColor);
    font-size: var(--pcFS20);
    font-weight: bold;
    letter-spacing: 0.04em;
}
.boxPreRegist .listPre {
    margin: 0;
}
.boxPreRegist .itemPre {
    display: flex;
    align-items: flex-start;
    gap: 3rem;
    padding: 2rem 0;
    border-top: 1px solid #e5e5e5;
}
.boxPreRegist .itemPre:first-child {
    border-top: none;
}
.boxPreRegist .itemPre:last-child {
    padding-bottom: 0;
}
.boxPreRegist .itemPre dt {
    flex: 0 0 16rem;
    font-size: var(--pcFS14);
    font-weight: bold;
    letter-spacing: var(--pcLS14);
    line-height: var(--pcLH14_22);
}
.boxPreRegist .itemPre dd {
    flex: 1 1 auto;
    margin: 0;
    font-size: var(--pcFS14);
    font-weight: normal;
    letter-spacing: var(--pcLS14);
    line-height: var(--pcLH14_22);
}
.boxPreRegist .txtZip {
    display: inline-block;
}
@media only screen and (max-width: 1215px) {
    .secVendorMember .boxPreRegist {
        margin: 0 0 4rem;
        padding: 2rem 1.5rem 2.2rem;
        border-radius: 0.8rem;
    }
    .boxPreRegist .titPre {
        margin-bottom: 1rem;
        font-size: var(--spFS14);
        letter-spacing: 0;
    }
    .boxPreRegist .itemPre {
        gap: 1.5rem;
        padding: 1.5rem 0;
    }
    .boxPreRegist .itemPre dt {
        flex: 0 0 9rem;
        font-size: var(--spFS12);
        letter-spacing: 0;
        line-height: var(--spLH12_20);
    }
    .boxPreRegist .itemPre dd {
        font-size: var(--spFS12);
        letter-spacing: 0;
        line-height: var(--spLH12_20);
    }
}

/*-----------------------------------------------
    二次情報：その他入力欄の余白・注釈サイズ
-----------------------------------------------*/
.secFormTable th .titLabel {
    display: inline;
    gap: 0;
}
.secFormTable th .txtMulti {
    font-size: var(--pcFS16);
    letter-spacing: var(--pcLS16);
}
.secVendorMember .secFormTable .txtNote2 {
    font-size: var(--pcFS16);
    letter-spacing: var(--pcLS16);
    line-height: var(--pcLH16_24);
    font-weight: bold;
    margin-top: 3rem;
    margin-bottom: 3rem;
    margin-left: 0;
}
.secVendorMember .secForm .boxCheck .txt,
.secVendorMember .secForm .boxRadio .txt {
    white-space: normal;
}
@media only screen and (max-width: 1215px) {
    .secFormTable th .txtMulti {
        font-size: var(--spFS12);
        letter-spacing: 0;
    }
    .secVendorMember .secFormTable .txtNote2 {
        font-size: var(--spFS12);
        letter-spacing: 0;
        line-height: var(--spLH12_20);
        margin-top: 2rem;
        margin-bottom: 0.8rem;
    }
}

@media only screen and (max-width: 1215px) {
    .secFormTable tr + tr {
        padding-top: 4rem;
    }
}

/*-----------------------------------------------
    validationEngine：エラー表示を1行に
-----------------------------------------------*/
.formError .formErrorContent {
    width: auto;
    min-width: 14em;
    white-space: nowrap;
}

@media only screen and (max-width: 1215px) {
    .ok .txtOk {
        font-size: var(--spFS15);
    }
}

@media only screen and (max-width: 350px) {
    .ok .boxRed {
        padding: 1rem;
    }
}

/*-----------------------------------------------
    今後の流れ（フロー画像）
-----------------------------------------------*/
.ok .boxFlow {
    margin-top: 4rem;
}
.ok .boxFlow .img {
    text-align: center;
}
.ok .boxFlow img {
    display: block;
    margin: 0 auto;
}

/* scrollItem */
@media only screen and (max-width: 1215px) {
    .ok .boxFlow {
        margin-top: 2rem;
    }
    .scrollItem {
        position: relative;
        width: 100%;
        height: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        -ms-overflow-style: none;
        scrollbar-width: none;
    }
    .scrollItem::-webkit-scrollbar {
        display: none;
    }
    .scrollItem::before {
        content: "";
        display: block;
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        background: url(../img/vendor/member/iconScroll.png) center center / 145px auto no-repeat;
        transition: all 0.2s ease-out 0.2s;
        animation: scrollItemAnimation 1s linear infinite;
        z-index: 10;
        pointer-events: none;
    }
    .scrollItem.scrolled::before {
        opacity: 0;
    }
    .scrollItem .img {
        width: 88rem;
        text-align: left;
    }
    .scrollItem .imgR {
        width: 100%;
        max-width: none;
        height: auto;
        margin: 0;
    }
    @keyframes scrollItemAnimation {
        0% { transform: translateX(0); }
        25% { transform: translateX(10px); }
        50% { transform: translateX(0); }
        75% { transform: translateX(-10px); }
        100% { transform: translateX(0); }
    }
}