#trial_short{
    margin: 100px 0 0;
}
#trial_short .flow article{
    margin: 0 0 40px;
}
#trial_short .flow ol.flow_list{
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: trialNum 0;
    display: flex;
    flex-direction: column;
}
#trial_short .flow ol.flow_list li{
    margin-left: 20px;
    padding-left: 40px;
    position: relative;
    border-left: 1px solid #0f3568;
}
#trial_short .flow ol.flow_list li::before{
    content: counter(trialNum);
    counter-increment: trialNum 1;
    color: #fff;
    font-size: 2rem;
    text-align: center;
    line-height: 40px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #0f3568;
    display: block;
    position: absolute;
    left: -20px;
    top: 0;
}
#trial_short .flow ol.flow_list li:last-child::after{
    content: "";
    width: 20px;
    height: 1px;
    background: #0f3568;
    display: block;
    position: absolute;
    bottom: 0;
    left: -10px;
}
#trial_short .flow ol.flow_list li .inner .ttl h3{
    margin: 0;
    line-height: 40px;
    font-size: 2rem;
}
#trial_short .flow ol.flow_list li .inner .detail{
    margin: 20px 0;
    padding: 20px;
    background: #fafafa;
    border-radius: 4px;
}
#trial_short .flow ol.flow_list li .inner .detail p{
    margin: 0;
}
#trial_short .flow .sample{
    margin: 60px 0;
    padding: 20px 60px 40px;
    background: #fafafa;
    border: 1px solid #eee;
    border-radius: 8px;
}
#trial_short .flow .sample h3{
    text-align: center;
}
#trial_short .flow .sample h3 + p{
    text-align: center;
}
#trial_short .flow .sample .sample_set{
    margin: 20px 0 0;
}
#trial_short .flow .sample .sample_set .inner table{
    width: 100%;
    border-collapse: collapse;
    box-shadow: 0 0 10px rgb(0 0 0 / 20%);
}
#trial_short .flow .sample .sample_set .inner table th,
#trial_short .flow .sample .sample_set .inner table td{
    padding: 16px;
    border: 1px solid #0f3568;
    color: #0f3568;
}
#trial_short .flow .sample .sample_set .inner table th{
    background: #eee;
}
#trial_short .flow .sample .sample_set .inner table td{
    background: #fff;
}
#trial_short .flow .sample .sample_set .inner table th.ttl{
    padding: 4px;
    background: #0f3568;
    color: #fff;
}
#trial_short .probability{
    margin: 60px 0;
}
#trial_short .probability h2{
    text-align: center;
}
#trial_short .probability p{
    font-size: 1.6rem;
    text-align: center;
}
#trial_short .probability p small{}
#trial_short .probability p.percent{
    font-size: 2.4rem;
}
#trial_short .probability p.percent strong{
    font-size: 3.2rem;
}
#trial_short .probability p.percent strong small{}
#trial_short .graph{
    margin: 60px 0;
}
#trial_short .graph h2{
    text-align: center;
}
#trial_short .graph p{
    font-size: 2rem;
    text-align: center;
}
#trial_short .graph p > small{
    font-size: 1.28rem;
}
#trial_short .graph p strong{
    font-size: 3.2rem;
    margin-left: 10px;
}
#trial_short .graph p strong small{}
#trial_short .graph figure{
    margin: 0;
    text-align: center;
}
#trial_short .graph figure img{
    max-width: 400px;
}

#trial_short .value{
    margin: 60px 0 100px;
}
#trial_short .value h2{
    text-align: center;
}
#trial_short .value .set{
    max-width: 440px;
    margin: 40px auto;
    overflow: hidden;
}
#trial_short .value .set .inner{
    width: 200px;
    float: left;
    text-align: center;
    display: flex;
    flex-direction: column-reverse;
}
#trial_short .value .set .inner + .inner{
    margin-left: 40px;
}
#trial_short .value .set .inner .sub{
    font-size: 1.6rem;
}
#trial_short .value .set .inner .main{
    font-size: 10rem;
    font-weight: 600;
    color: #af1e2b;
    line-height: 1;
}
#trial_short .value .set .inner .main span{}
#trial_short .value .set .inner .main small{
    margin-left: 10px;
    font-size: 60%;
}
#trial_short .value .set{}
#trial_short .value p.note{
    text-align: center;
    font-size: 1.2rem;
}
#trial_short .value p.point{
    text-align: center;
    font-size: 1.6rem;
    font-weight: 600;
    color: #af1e2b;
}


#trial_short .form{
    padding: 60px 0;
    background: #fafafa;
}
#trial_short .form input[type="text"],
#trial_short .form input[type="tel"],
#trial_short .form input[type="email"],
#trial_short .form textarea,
#trial_short .form select{
    width: 100%;
    line-height: 1.5;
    padding: 10px;
    border: none;
    background: #fafafa;
    box-shadow: inset 0 2px 2px rgba(0,0,0,0.05);
    border-radius: 4px;
}
#trial_short .form textarea{
    min-height: 200px;
}
#trial_short .form .top{
    margin: 0 0 40px;
}
#trial_short .form .top h2{
    margin: 0 0 40px;
    text-align: center;
}
#trial_short .form .top .tel p{
    margin: 0;
    text-align: center;
}
#trial_short .form .top .tel a{
    max-width: 480px;
    margin: 20px auto 0;
    padding: 10px 0;
    display: flex;
    flex-direction: column;
    text-align: center;
    text-decoration: none;
    line-height: 1.2;
    border-radius: 4px;
    transition: all 0.2s ease;
    background: #eee;
    position: relative;
    box-shadow: 0 1px 4px 0 rgba(0,0,0,0.2);
}
#trial_short .form .top .tel a::before{
    content: "\f0da";
    font-family: "font awesome 5 free";
    font-weight: 600;
    font-size: 1.2rem;
    line-height: 16px;
    text-align: center;
    color: #fff;
    width: 16px;
    height: 16px;
    margin-top: -8px;
    display: block;
    background: #af1e2b;
    position: absolute;
    top: 50%;
    right: 16px;
}
#trial_short .form .top .tel a:hover{
    background: #e5e5e5;
    box-shadow: 0 1px 3px 0 rgba(0,0,0,0.4);
}
#trial_short .form .top .tel a span{
    color: #111;
    font-weight: 600;
    font-size: 2.4rem;
}
#trial_short .form .top .tel a small{
    color: #666;
}
#trial_short .form :where(ul.form_list, ul.inquiry_list){
    margin: 0;
    padding: 0;
    list-style: none;
    background: #fff;
}
#trial_short .form :where(ul.form_list, ul.inquiry_list) ul{
    margin: 0;
    padding: 0;
    list-style: none;
}
#trial_short .form :where(ul.form_list, ul.inquiry_list) > li{
    padding: 20px 40px;
    border-top: 1px solid #f5f5f5;
}
#trial_short .form :where(ul.form_list, ul.inquiry_list) > li:first-child{
    border-top: none;
}
#trial_short .form :where(ul.form_list, ul.inquiry_list) > li .ttl label{
    width: 100%;
    display: inline-block;
    font-weight: 600;
}
#trial_short .form :where(ul.form_list, ul.inquiry_list) > li .ttl.required label,
#trial_short .form :where(ul.form_list, ul.inquiry_list) > li .ttl label.required{
    position: relative;
}
#trial_short .form :where(ul.form_list, ul.inquiry_list) > li .ttl.required label::before,
#trial_short .form :where(ul.form_list, ul.inquiry_list) > li .ttl label.required::before{
    content: "必須";
    color: #fff;
    font-size: 1.2rem;
    padding: 2px 4px;
    background: #0f3568;
    position: absolute;
    right: 0;
}
#trial_short .form :where(ul.form_list, ul.inquiry_list) > li :where(.input, .detail){
    padding: 10px 0 0;
}
#trial_short .form :where(ul.form_list, ul.inquiry_list) > li :where(.input, .detail) p.attention{
    margin: 4px 0 0;
    color: #666;
    font-size: 1.2rem;
}
#trial_short .form :where(ul.form_list, ul.inquiry_list) > li :where(.input, .detail).zip input[type="text"]{
    width: 200px;
}
#trial_short .form :where(ul.form_list, ul.inquiry_list) > li :where(.input, .detail).policy{
    text-align: center;
}
#trial_short .form :where(ul.form_list, ul.inquiry_list) > li :where(.input, .detail).policy label{
    margin: 10px 0 10px;
    padding: 10px 16px;
    display: inline-block;
    border: 1px solid #ddd;
    border-radius: 4px;
    cursor: pointer;
}
#trial_short .form :where(ul.form_list, ul.inquiry_list) > li :where(.input, .detail).policy label:hover{
    background: #fafafa;
}
#trial_short .form :where(ul.form_list, ul.inquiry_list) > li :where(.input, .detail).policy label input[type="checkbox"]{
    margin-right: 10px;
    position: relative;
    top: 1px;
}
/*
#trial_short .form :where(ul.form_list, ul.inquiry_list) > li:last-child{
    border-width: 20px;
    padding: 0;
}
*/
#trial_short .form :where(ul.form_list, ul.inquiry_list) > li:last-child :where(.input, .send){
    padding: 0;
}
#trial_short .form :where(ul.form_list, ul.inquiry_list) > li:last-child :where(.input, .send) input[type="submit"]{
    width: 100%;
    height: 60px;
    display: block;
    border: none;
    background: #af1e2b;
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    transition: opacity 0.2s ease;
    cursor: pointer;
}
#trial_short .form :where(ul.form_list, ul.inquiry_list) > li:last-child :where(.input, .send) input[type="submit"]:hover{
    opacity: 0.8;
}
#trial_short .form :where(ul.form_list, ul.inquiry_list) ul.name_list{
    display: flex;
    flex-direction: row;
    gap: 20px;
}
#trial_short .form :where(ul.form_list, ul.inquiry_list) ul.name_list li{
    flex: 1;
    display: flex;
    flex-direction: row;
    gap: 10px;
}
#trial_short .form :where(ul.form_list, ul.inquiry_list) ul.name_list li .ttl{
    width: 40px;
}
#trial_short .form :where(ul.form_list, ul.inquiry_list) ul.name_list li .ttl label{
    padding: 10px 0;
    text-align: right;
}
#trial_short .form :where(ul.form_list, ul.inquiry_list) ul.name_list li .input{
    flex: 1;
    padding: 0;
}

#trial_short .form p.reCAPTHA{
    max-width: 720px;
    margin: 40px auto 0;
    font-size: 1.2rem;
}

#trial_short .form .select_nav{
    padding: 20px 40px;
    background: #fff;
    border-bottom: 1px solid #f5f5f5;
}
#trial_short .form .select_nav h3{
    font-size: 1.4rem;
}
#trial_short .form .select_nav select{
    font-size: 1.6rem;
}
#trial_short .form ul.select_form{
    margin: 0;
    padding: 0;
    list-style: none;
}
#trial_short .form ul.select_form > li{ display: none;}
#trial_short .form ul.select_form > li.active{ display: block;}

#trial_short .topimg{
    margin: -100px 0 100px;
    background: #fafafa;
    position: relative;
    overflow: hidden;
}
#trial_short .topimg::before,
#trial_short .topimg::after{
    content: "";
    width: 100%;
    height: 10px;
    display: block;
    box-shadow: 0 0 10px rgba(0,0,0,0.05);
    position: absolute;
    left: 0;
}
#trial_short .topimg::before{
    top: -10px;
}
#trial_short .topimg::after{
    bottom: -10px;
}
#trial_short .topimg .set{
    position: relative;
    z-index: 1;
}
#trial_short .topimg img{
    display: block;
}
#trial_short .greeting{
    margin: 100px 0;
}
#trial_short .greeting h1{
    margin: 0 0 40px;
    text-align: center;
    position: relative;
}
#trial_short .greeting h1::before{
    content: "";
    width: 100%;
    height: 1px;
    display: block;
    background: #ddd;
    position: absolute;
    top: 50%;
    left: 0;
}
#trial_short .greeting h1 span{
    padding: 0 20px;
    display: inline-block;
    background: #fff;
    position: relative;
    z-index: 1;
}
#trial_short .greeting p{
    font-size: 1.6rem;
    text-align: center;
}
#trial_short .about{
    margin: 100px 0;
}
#trial_short .about ul.about_list{
    margin: 0;
    padding: 0;
    list-style: none;
}
#trial_short .about ul.about_list li{
    display: flex;
    flex-direction: row;
    gap: 40px;
}
#trial_short .about ul.about_list li + li{
    margin: 40px 0 0;
}
#trial_short .about ul.about_list li .img{
    width: 300px;
}
#trial_short .about ul.about_list li .img img{
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
}
#trial_short .about ul.about_list li .detail{
    flex: 1;
}
#trial_short .about article{}
#trial_short .about article h2{}
#trial_short .about article p{
    text-align: justify;
    font-size: 1.6rem;
    line-height: 1.8;
}
#trial_short .about article p.caption{
    margin: 20px 0 0;
}
#trial_short .about article p.caption + h2{
    margin: 0 0 40px;
    font-size: 3rem;
}
#trial_short .about article{}
#trial_short .about article{}
#trial_short .about{}
#trial_short .about{}
#trial_short .about{}
#trial_short .about{}

@media screen and (max-width: 767.98px){
    #trial_short{
        margin: 0;
    }
    #trial_short .flow ol.flow_list li{
        margin-left: 15px;
        padding-left: 25px;
    }
    #trial_short .flow ol.flow_list li::before{
        line-height: 30px;
        width: 30px;
        height: 30px;
        left: -15px;
    }
    #trial_short .flow ol.flow_list li:last-child::after{
        width: 30px;
        left: -15px;
    }
    #trial_short .flow ol.flow_list li .inner .ttl h3{
        line-height: 30px;
    }
    #trial_short .flow ol.flow_list li .inner .detail{
        margin: 20px 0;
        padding: 12px;
    }
    #trial_short .flow ol.flow_list li .inner .detail p{
        line-height: 1.8;
    }
    #trial_short .flow .sample{
        margin: 40px 0;
        padding: 20px 20px;
    }
    #trial_short .flow .sample h3{
        text-align: left;
    }
    #trial_short .flow .sample h3 + p{
        text-align: left;
    }
    #trial_short .flow .sample .sample_set .inner table th,
    #trial_short .flow .sample .sample_set .inner table td{
        padding: 16px 4px;
    }
    #trial_short .flow .sample .sample_set .inner table th{
        width: 90px;
        font-size: 1.2rem;
    }
    #trial_short .form{
        padding: 40px 0;
    }
    #trial_short .form input[type="text"],
    #trial_short .form input[type="tel"],
    #trial_short .form input[type="email"],
    #trial_short .form textarea,
    #trial_short .form select{
        font-size: 1.6rem;
    }
    #trial_short .form :where(ul.form_list, ul.inquiry_list) > li{
        padding: 20px 20px;
    }

    #trial_short .topimg{
        margin: 0 0 60px;
    }
    #trial_short .topimg .set{
        width: calc(100% + 40px);
        margin-left: -20px;
    }
    #trial_short .greeting{
        margin: 60px 0 100px;
    }
    #trial_short .greeting h1{
        margin: 0 0 40px;
    }
    #trial_short .greeting h1::before{
        display: none;
    }
    #trial_short .greeting h1 span{
        padding: 0;
    }
    #trial_short .greeting p{
        font-size: 1.6rem;
        text-align: center;
    }
    #trial_short .about{
        margin: 60px 0;
    }
    #trial_short .about ul.about_list li{
        flex-direction: column;
        gap: 20px;
    }
    #trial_short .about ul.about_list li + li{
        margin: 40px 0 0;
    }
    #trial_short .about ul.about_list li .img{
        width: 100%;
    }
    #trial_short .about article p.caption + h2{
        margin: 0 0 20px;
    }

    #trial_short .result{
        width: calc(100% + 40px);
        margin-left: -20px;
        text-align: center;
    }
    #trial_short .result img{
    }
    #trial_short .value{
        margin: 60px 0;
    }
    #trial_short .value .set{
        width: 100%;
        max-width: 340px;
        margin: 40px auto;
    }
    #trial_short .value .set .inner{
        width: 100%;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-end;
    }
    #trial_short .value .set .inner + .inner{
        margin-left: 0;
    }
    #trial_short .value .set .inner .sub{
        padding: 0 0 16px;
        font-size: 1.6rem;
        text-align: left;
    }
    #trial_short .value .set .inner .main{
        font-size: 12rem;
    }
    #trial_short .value p.point{
        font-size: 2rem;
    }
    
}