/* base */
@media screen and (min-width: 767px) {
    .custom-main.reset {
        background-color: #F4F4F4;
        padding-bottom: 306px;
    }
}
@media screen and (max-width: 767px) {
    .custom-main.reset {
        background-color: #F4F4F4;
        padding-bottom: 155px;
    }
}
/* sp */
@media screen and (max-width: 767px) {
    .reset .contents-wrapper {
        width: 100%;
        padding:  0 4%;
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: center;
    }
}
/* tab */
@media screen and (min-width: 767px) and (max-width: 1440px) {
    .reset .contents-wrapper {
        width: 100%;
        padding:  0 23.3%;
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: center;
    }
}
/* pc */
@media screen and (min-width: 1440px) {
    .reset .contents-wrapper {
        width: 100%;
        max-width: 1440px;
        padding:  0 336px;
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: center;
    }
}

/**
 * title
 */
 @media screen and (min-width: 767px) {
     .reset .title-area {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        height: 260px;
        padding: 119px 0 0 0;
     }
     .title-area-main {
        width: 424px;
        height: 54px;
     }
     .title-area-main img {
        width: 100%;
        height: 100%;
     }
     
     .title-area-sub h2 {
        font-weight: 700;
        font-size: 1.375rem;
        line-height: 1.25rem;
     }
 }
 @media screen and (max-width: 767px) {
    .reset .title-area {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        height: 146px;
        padding: 53px 0 0 0;
    }
    .title-area-main {
        width: 280px;
        height: 42px;
    }
    .title-area-main img {
        width: 100%;
        height: 100%;
    }
    
    .title-area-sub h2 {
        font-weight: 700;
        font-size: 1rem;
        line-height: 1.25rem;
    }
 }

/**
 * main
 */
@media screen and (min-width: 767px) {
    .main-area {
        width: 100%;
        padding: 77px 11.32% 66px;
        background-color: white;
        border-radius: 15px;
    }
}
@media screen and (max-width: 767px) {
    .main-area {
        width: 100%;
        padding: 43px 6.37% 38px;
        background-color: white;
        border-radius: 7px;
    }
}

/**
 * sub
 */
@media screen and (min-width: 767px) {
    .sub-area {
        width: 100%;
        padding: 0 11.32% 0;
    }
}
@media screen and (max-width: 767px) {
    .sub-area {
        width: 100%;
        padding: 0 6.37% 0;
    }
}

/**
 * form contents
 */
@media screen and (min-width: 767px) {
    /* formコンテンツ */
    .main-area-form {
        display: block;
        width: 100%;
        margin: 0;
    }
}
@media screen and (max-width: 767px) {
    /* formコンテンツ */
    .main-area-form {
        display: block;
        width: 100%;
        margin: 0;
    }
}
/**
 * 入力エリア
 */
@media screen and (min-width: 767px) {
    /* inputエリア */
    .main-area-form-input {
        width: 100%;
        padding: 0;
        margin: 0;
        display: flex;
        flex-direction: column;
    }
    /* input 各item */
    .main-area-form-input-item {
        width: 100%;
        padding: 0;
        margin: 0;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
    }
    .main-area-form-input-item label {
        font-size: 0.9375rem;
        line-height: 1.25rem;
        color: #383F45;
        margin: 0 0 11px 0;
    }
    .main-area-form-input-item input {
        background-color: #F0F4F5;
        border: 1px solid #BCBCBC;
        border-radius: 2px;
        width: 100%;
        height: 50px;
    }
    .main-area-form-input-item:nth-of-type(2) {
        margin: 32px 0 0 0;
        width: 100%;
        padding: 0;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
    }

    /* 送信ボタンエリア */
    .main-area-form-button {
        margin: 58px 0 0 0;
        padding: 0;
        width: 100%;
    }
    .main-area-form-button-item {
        margin: 0;
        padding: 0;
        width: 100%;
    }
    /* 送信ボタン */
    .main-area-form-button-item-submit {
        display: block;
        width: 100%;
        margin: 0;
        padding: 0;
        border-radius: 2px;
        background-color: #44CDFF;
        font-size: 1.375rem;
        border: none;
        height: 89px;
        font-weight: 700;
        letter-spacing: 0.04em;
    }
}
@media screen and (max-width: 767px) {
    /* inputエリア */
    .main-area-form-input {
        width: 100%;
        padding: 0;
        margin: 0;
        display: flex;
        flex-direction: column;
    }
    /* input 各item */
    .main-area-form-input-item {
        width: 100%;
        padding: 0;
        margin: 0;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
    }
    .main-area-form-input-item label {
        font-size: 0.9375rem;
        line-height: 1.25rem;
        color: #383F45;
        margin: 0 0 11px 0;
    }
    .main-area-form-input-item input {
        background-color: #F0F4F5;
        border: 1px solid #BCBCBC;
        border-radius: 2px;
        width: 100%;
        height: 50px;
    }
    .main-area-form-input-item:nth-of-type(2) {
        margin: 17px 0 0 0;
        width: 100%;
        padding: 0;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
    }

    /* 送信ボタンエリア */
    .main-area-form-button {
        margin: 45px 0 0 0;
        padding: 0;
        width: 100%;
    }
    .main-area-form-button-item {
        margin: 0;
        padding: 0;
        width: 100%;
    }
    /* 送信ボタン */
    .main-area-form-button-item-submit {
        display: block;
        width: 100%;
        margin: 0;
        padding: 0;
        border-radius: 2px;
        background-color: #44CDFF;
        font-size: 1.125rem;
        border: none;
        height: 70px;
        font-weight: 700;
        letter-spacing: 0.04em;
    }
}
/* バリデーション */
.main-area-form .alert.alert-danger {
    margin: 10px 0 0 0;
}

/**
 * 区切り線
 */
 @media screen and (min-width: 767px) {
    .text-punctuation {
        display: flex;
        width: 100%;
        align-items: center;
        max-width: 1440px;
        margin-top: 61px;
        margin-bottom: 47px;
        font-size: 1rem;
        font-weight: 700;
        letter-spacing: 0.04em;
    }
    .text-punctuation::before,
    .text-punctuation::after {
        content: '';
        height: 1px;
        background-color: #000000;
        flex-grow: 1;
    }
    .text-punctuation::before {
        margin-right: 23.5px;
    }
    .text-punctuation::after {
        margin-left: 23.5px;
    }
}
@media screen and (max-width: 767px) {
    .text-punctuation {
        display: flex;
        width: 100%;
        align-items: center;
        max-width: 1440px;
        margin-top: 31px;
        margin-bottom: 28px;
        font-size: 0.875rem;
        font-weight: 700;
        letter-spacing: 0.04em;
    }
    .text-punctuation::before,
    .text-punctuation::after {
        content: '';
        height: 1px;
        background-color: #000000;
        flex-grow: 1;
    }
    .text-punctuation::before {
        margin-right: 15px;
    }
    .text-punctuation::after {
        margin-left: 15px;
    }
}


/**
 * サブコンテンツ
 */
.sub-area-register-button {
    width: 100%;
    padding: 0;
    margin: 0;
}
@media screen and (min-width: 767px) {
    .sub-area-register-button a {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        padding: 0;
        margin: 0;
        height: 89px;
        border: 5px solid #FF5701;
        background-color: white;
        color: #FF5701;
        font-size: 1.375rem;
        letter-spacing: 0.04em;
        text-align: center;
        border-radius: 2px;
        font-weight: 700;
        letter-spacing: 0.04em;
    }
}
@media screen and (max-width: 767px) {
    .sub-area-register-button a {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        padding: 0;
        margin: 0;
        height: 70px;
        border: 3px solid #FF5701;
        background-color: white;
        color: #FF5701;
        font-size: 1.125rem;
        letter-spacing: 0.04em;
        text-align: center;
        border-radius: 2px;
        font-weight: 700;
        letter-spacing: 0.04em;
    }
}