@charset "UTF-8";

.diagnosis{
    background-color: #0E9DE7;

    .header, .footer{
        width: 100%;
        max-width: 750px;
        text-align: center;
        margin: 0 auto;

        img{
        width: 100%;
        }
    }


    .copyright{
        background-color: #4B4B4B;
        color: #fff;
        width: 100%;
        font-size:clamp( 10px, calc( 9px + 0.25vw ), 12px );
        padding: clamp( 10px, calc( 9px + 0.25vw ), 12px ) 0;

        p{
            margin: 0;
        }
    }


    .form{
        width: 100%;
        max-width: 750px;
        background-color: #fff;
        margin: 0 auto;
        text-align: center;

    }

    .wrapper{
        margin: 0 auto;
        padding: clamp( 32px, calc( 16px + 4vw ), 64px ) 0;
        width: 80vw;
        max-width: 700px;
    }

    figure.wp-block-table{
        display: flex;
        justify-content: center;
    }

    ul{
        list-style: none;
        padding: 0;
        text-align: left;
    }

    li{
        margin-bottom: clamp( 32px, calc( 16px + 4vw ), 64px );
    }

    li:last-child{
        margin-bottom: 0;
    }

    .myform_title{
        display: flex;
        gap: clamp( 8px, calc( 4px + 1vw ), 16px );
        align-items: center;
        margin-bottom:clamp( 20px, calc( 10px + 2.5vw ), 40px );
    }

    .myform_caption{
        margin-top:clamp( -40px, calc( -20px + -5vw ), -80px );
        margin-bottom:clamp( 20px, calc( 10px + 2.5vw ), 40px );
    }

    .required{
        color: #fff;
        background: #E42058;
        padding: clamp( 2px, calc( 1px + 0.25vw ), 4px ) clamp( 4px, calc( 2px + 0.5vw ), 8px );
        border-radius: clamp( 4px, calc( 2px + 0.5vw ), 8px );
        font-weight: 600;
        font-size:clamp( 12px, calc( 10px + 0.5vw ), 16px );
    }

    h3{
        font-weight: bold;
        font-size: clamp( 16px, calc( 12px + 1vw ), 24px );
    }

    .myform_checkbox{
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        padding-left: clamp( 35px, calc( 17.5px + 4.375vw ), 70px );
        gap: clamp( 8px, calc( 4px + 1vw ), 16px );
;
    }

    @media screen and (max-width: 768px) {
         .myform_checkbox{
        display: flex;
        flex-direction: column;
    }
    }

    .mwform-checkbox-field-text{
        font-size: clamp( 14px, calc( 11px + 0.75vw ), 20px );
    }

   .myform_checkbox select, .form-full input[type=text]{
    color: #565656;
    box-sizing: border-box;
    height: 44px;
    width: 100%;
    padding: .3em;
    transition: .3s;
    letter-spacing: 1px;
    border: 1px solid #565656;
    border-radius: clamp( 4px, calc( 2px + 0.5vw ), 8px );
    }

    .form-half input[type=text]{
    color: #565656;
    box-sizing: border-box;
    height: 44px;
    width:  calc(50% - clamp( 8px, calc( 4px + 1vw ), 16px ));
    padding: .3em;
    transition: .3s;
    letter-spacing: 1px;
    border: 1px solid #565656;
    border-radius: clamp( 4px, calc( 2px + 0.5vw ), 8px );
    }

    .form-half{
        flex-direction: row;
        gap: clamp( 8px, calc( 4px + 1vw ), 16px );
    }

    .myform_submit{
        width: 100%;
        margin: clamp( 64px, calc( 32px + 8vw ), 128px ) auto;
    }

    .submit-button{
        position: relative;
        width: 100%;
        font-size: clamp( 16px, calc( 12px + 1vw ), 24px );
        padding:clamp( 16px, calc( 8px + 2vw ), 32px ) 0;
        background: linear-gradient(to right, #FF6902, #F90D76);
        color: #fff;
        border-radius: clamp( 4px, calc( 2px + 0.5vw ), 8px );
        border: none;
        cursor: pointer;
        transition: .3s;
    }

    .submit-button::after{
        content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  right: 30px;
  width: 10px;
  height: 10px;
  margin: auto;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  transform: rotate(45deg);
  box-sizing: border-box;
    }

    .submit-button:hover{
        opacity: .7;
    }

    span.error{
        color: #E42058;
        font-size:clamp( 12px, calc( 10px + 0.5vw ), 16px );
        font-weight: bold;
    }

    .mw_wp_form .horizontal-item + .horizontal-item{
        margin-left: 0;
    }

    /* thanks-page */

    .top-img{
        filter: drop-shadow(0px 0px 4px rgba(0, 0, 0, 0.25));
        margin-bottom: -10px;
    }

    .CTA-top_container{
        position: relative;
        background-color: #D4F1FF;
        width: 100%;
        max-width: 750px;
        margin: 0 auto;

    }

    .bg-top-img{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        object-fit: cover;
        z-index: 1;
    }

    .bg-bottom-img{
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        object-fit: cover;
        z-index: 1;
    }

    .CTA-box{
        position: relative;
        z-index: 2;
        width: 88vw;
        max-width: 750px;
        text-align: center;
        margin: 0 auto;
        padding: clamp( 32px, calc( 16px + 4vw ), 64px ) 0;
    }


    .CTA-tel01{
        margin: clamp( 20px, calc( 10px + 2.5vw ), 40px ) 0;
    }


    .CTA-tel02{
        display: block;
        margin: 0 auto;
        padding: clamp( 32px, calc( 16px + 4vw ), 64px ) 0;
    }

    @media screen and (min-width: 769px) {
        a[href*="tel:"] {
            pointer-events: none;
            cursor: default;
            text-decoration: none;
        }
    }

    .img-sec{
        width: 100%;
        max-width: 750px;
        margin: 0 auto;
    }

}