@media screen and (max-width: 880px) {
    .section_main .title h2 {
        font-size: 32px;
    }
}

.sol_form_main{
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 95%;
    max-width: 640px;
}
.sol_form_main .sol_form_top_deco{
    display: flex;
    gap: 24px;
    align-items: center;
}
.sol_form_main .sol_form_top_deco .miniformtitlebox{
    display: none;

}
.sol_form_main .sol_form_top_deco .miniformtitlebox h2{
    color: var(--blue, #0974E8);
    text-align: center;
    font-size: 24px;
    line-height: normal;
}

.sol_form_main .sol_form_top_deco .imgbox{
    display: flex;
}
.sol_form_main .sol_form_top_deco .imgbox img{
    display: block;
    width: 100%;
    height: auto;
    max-width: 140px;
}
.sol_form_main .sol_form_top_deco .txtbox{
    
}
.sol_form_main .sol_form_top_deco .txtbox > span{
    color: var(--black, #252729);
    text-align: center;
    font-size: 24px;
    line-height: normal;
}
.sol_form_main .sol_form_top_deco .txtbox > ul{
    display: flex;
    flex-direction: column;
    list-style: disc;
    padding: revert;
    padding-left: 27px;
}
.sol_form_main .sol_form_top_deco .txtbox > ul > li{
    color: var(--black, #252729);

    font-size: 16px;
    font-weight: 400;
    line-height: 200%; /* 32px */
}

.sol_form_main .sol_form_top_deco .txtbox p{
    display: flex;
    flex-direction: column;
}
.sol_form_main .sol_form_top_deco .txtbox p span{
    color: var(--black, #252729);
    font-size: 24px;
    line-height: normal;
    width: 95%;
}
.sol_form_main .sol_form_top_deco .txtbox .sol_public_txt{
    color: var(--black-0, #252729);
    font-size: 16px;
    font-weight: 400;
    line-height: 200%; /* 32px */
    margin-top: 16px;
    display: flex;
}


.sol_form_main .sol_form_area{
    display: flex;
    padding-top: 80px;
    padding-bottom: 80px;
    flex-direction: column;
    border-radius: 6px;
    background: var(--white, #FFF);
    gap: 40px;
}
.sol_form_main .sol_form_area .title{
    display: flex;
    flex-direction: column;
    text-align: center;
}
.sol_form_main .sol_form_area .title h2{
    color: var(--blue, #0974E8);
    text-align: center;

    font-size: 20px;
    line-height: normal;
}
.sol_form_main .sol_form_area .title .blue_txt_lgr{
    font-size: 40px;
}

/* bottom form custom */
.sol_form_main .sol_form_area .bot_form_main{
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
}
.sol_form_main .sol_form_area .bot_form_main .hbspt-form{
    display: flex;
    justify-content: center;
    width: 100%;
    margin-bottom: 16px;
}
.sol_form_main .sol_form_area .bot_form_main .hbspt-form form{
    gap: 16px;
}
.sol_form_main .sol_form_area .bot_form_main .btndiv{
    display: flex;
    width: 100%;
    justify-content: center;
}
.sol_form_main .sol_form_area .bot_form_main .btndiv button{
    max-width: 360px;
}
.sol_form_main .sol_form_area .bot_form_main .btndiv button span{
    color: var(--white,  #FFF);
    text-align: center;

    font-size: 14px;
    line-height: normal;
}

@media screen and (max-width: 650px) {
    .sol_form_main {
        gap: 0px;
    }
    .sol_form_main .sol_form_area .bot_form_main .hbspt-form form {
        width: 91.79%;
    }
    .sol_form_main .sol_form_top_deco {
        flex-direction: column;
    }
    .sol_form_main .sol_form_top_deco .txtbox > span {
        display: flex;
        justify-content: center;
        font-size: 20px;
    }
    .sol_form_main .sol_form_area {
        background: transparent;
        padding-bottom: 0;
        padding-top: 32px;
    }
    .sol_form_main .sol_form_top_deco .miniformtitlebox{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    .sol_form_main .sol_form_area .title {
        display: none;
    }
    .sol_form_main .sol_form_top_deco .imgbox img {
        max-width: 240px;
    }

    .sol_form_main .sol_form_top_deco .txtbox p span {
        font-size: 20px;
        text-align: center;
        width: 100%;
    }
    
    .sol_form_main .sol_form_top_deco .txtbox .sol_public_txt{
        margin-top: 0;
        text-align: left;
    }
    .sol_form_main .sol_form_area .bot_form_main .btndiv {
        width: 91.79%;
    }
}
@media screen and (max-width: 450px) {
    .sol_form_main .sol_form_top_deco .txtbox {
        width: 91.79%;
        display: flex;
        flex-direction: column;
        gap: 8px;
    }
}

.demo_cols{
    display: flex;
    width: 95%;
    max-width: 1104px;
    gap: 64px;
    margin-top: 80px;
    align-items: center;
    justify-content: center;
}
.demo_cols .section_main_left{
    display: flex;
    flex-direction: column;
    width: 100%;
}
.demo_cols .section_main_left h1{
    color: var(--Blue-0, #0974E8);
    font-size: 48px;
    line-height: normal;
}   
.demo_cols .section_main_left p{
    display: flex;
    flex-direction: column;
    margin-top: 16px;
    margin-bottom: 32px;
}
.demo_cols .section_main_left p span{
    color: var(--Blue-0, #0974E8);

    font-size: 24px;
    line-height: normal;
}
.demo_cols .section_main_left .btn_box{
    display: flex;
}
.demo_cols .section_main_left .btn_box a{
    height: 75px;
    text-align: center;
    font-size: 24px;
    max-width: unset;
    border-radius: 40px;
    align-items: center;
    padding: 0;
    max-width: 396px;
}

.demo_cols .section_main_right{
    display: flex;
    justify-content: center;
    max-width: 560px;
    width: 100%;
}
.demo_cols .section_main_right img{
    width: 100%;
    height: auto;
    display: block;
}
@media screen and (max-width: 1100px) {
    .demo_cols {
        gap: 40px;
    }
    .demo_cols .section_main_left h1 {
        font-size: 40px;
    }
}

@media screen and (max-width: 880px) {
    .demo_cols {
        flex-direction: column;
        width: 87.202%;
        gap: 24px;
        margin-top: 64px;
    }
    .demo_cols .section_main_left {
        align-items: center;
    }
    .demo_cols .section_main_left .btn_box {
        width: 100%;
        justify-content: center;
    }
    .demo_cols .section_main_left p {
        text-align: center;
        margin-top: 8px;
        margin-bottom: 24px;
    }
    .demo_cols .section_main_left h1 {
        font-size: 32px;
    }
    .demo_cols .section_main_left p span {
        font-size: 18px;
    }
    .demo_cols .section_main_left .btn_box a {
        height: 48px;
        max-width: 327px;
        font-size: 14px;
    }
}

/* トライアルの流れ */
.demo_flow_cols{
    display: flex;
    flex-direction: column;
    padding-top: 32px;
    padding-bottom: 32px;
    background: var(--white, #FFF);
    max-width: 1280px;
    align-items: center;
    width: 95%;
}
.demo_flow_cols .demo_flow_inner{
    display: flex;
    flex-direction: column;
    gap: 32px;
    width: 95%;
    align-items: center;
    /* max-width: 1170px; */
}
.demo_flow_cols .demo_flow_inner .timeline_main{
    display: flex;
    width: 100%;
    max-width: 1094px;
}
.demo_flow_cols .demo_flow_inner .timeline_main .timeline_itm{
    display: flex;
    flex-direction: column;
    /* width: 100%; */
}
.demo_flow_cols .demo_flow_inner .timeline_main .timeline_itm .timeline_itm_top{
    border-left: 1px dashed var(--blue-15,#3C92EF);
    display: flex;
    flex-direction: column;
    padding-left: 16px;
    padding-bottom: 16px;
}
.demo_flow_cols .demo_flow_inner .timeline_main .timeline_itm .timeline_itm_top h3{
    display: flex;
    color: var(--blue-15,#3C92EF);
    font-size: 18px;
    font-weight: 700;
    line-height: 130%;

    align-items: end;
    padding-bottom: 8px;
    margin-bottom: 8px;
    max-width: 124px;
    border-bottom: 1px solid rgba(37, 39, 41, 0.20);
}
.demo_flow_cols .demo_flow_inner .timeline_main .timeline_itm .timeline_itm_top h3 span{
    color: var(--blue-15,#3C92EF);
    font-size: 26px;
    font-weight: 700;
    line-height: 130%; /* 33.8px */
}
.demo_flow_cols .demo_flow_inner .timeline_main .timeline_itm .timeline_itm_top p{
    color: var(--black,#252729);
    font-size: 14px;
    font-weight: 400;
    line-height: 130%; /* 18.2px */
}
.demo_flow_cols .demo_flow_inner .timeline_main .timeline_itm .timeline_itm_top p br{
}

.demo_flow_cols .demo_flow_inner .timeline_main .timeline_itm .timeline_itm_bot{
    display: flex;
    width: 100%;
    height: 90px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    background: var(--blue-20,#005FC6);
}
.demo_flow_cols .demo_flow_inner .timeline_main .timeline_itm .timeline_itm_bot p{
    color: var(--white,#fff);
    text-align: center;
    font-size: 24px;
    font-weight: 700;
    line-height: 130%; /* 31.2px */
}
.demo_flow_cols .demo_flow_inner .timeline_main .timeline_itm .timeline_itm_bot p br{
    display: none;
}
.demo_flow_cols .demo_flow_inner .timeline_main .first_itm{
    width: 23.767%;
}
.demo_flow_cols .demo_flow_inner .timeline_main .first_itm .timeline_itm_bot{
    background: var(--blue-15,#3C92EF);
}
.demo_flow_cols .demo_flow_inner .timeline_main .second_itm{
    width: 47.533%;
}
.demo_flow_cols .demo_flow_inner .timeline_main .second_itm .timeline_itm_top .pc_ver{

}
.demo_flow_cols .demo_flow_inner .timeline_main .second_itm .timeline_itm_top .sp_ver{
    display: none;
}
.demo_flow_cols .demo_flow_inner .timeline_main .second_itm .timeline_itm_top h3,
.demo_flow_cols .demo_flow_inner .timeline_main .second_itm .timeline_itm_top h3 span {
    color: var(--blue,#0974E8);
}
.demo_flow_cols .demo_flow_inner .timeline_main .second_itm .timeline_itm_bot{
    background: var(--blue,#0974E8);
}
.demo_flow_cols .demo_flow_inner .timeline_main .third_itm{
    width: 28.703%;
}
.demo_flow_cols .demo_flow_inner .timeline_main .third_itm .timeline_itm_top h3,
.demo_flow_cols .demo_flow_inner .timeline_main .third_itm .timeline_itm_top h3 span {
    color: var(--blue-20,#005FC6);
}

.demo_flow_cols .demo_flow_inner .timeline_main .third_itm .timeline_itm_bot_type2{
    display: flex;
    width: 100%;
}
.demo_flow_cols .demo_flow_inner .timeline_main .third_itm .timeline_itm_bot_type2 .blue_subbox{
    display: flex;
    width: 100%;
    background: var(--blue-20,#005FC6);
    align-items: center;
    justify-content: center;
}
.demo_flow_cols .demo_flow_inner .timeline_main .third_itm .timeline_itm_bot_type2 .blue_subbox p{
    color: var(--white,#fff);
    text-align: center;
    font-size: 24px;
    font-weight: 700;
    line-height: 130%; /* 31.2px */
}
.demo_flow_cols .demo_flow_inner .timeline_main .third_itm .timeline_itm_bot_type2 .blue_subbox p br{
    display: none;
}
.demo_flow_cols .demo_flow_inner .timeline_main .third_itm .timeline_itm_bot_type2 svg{
    max-width: 34px;
    width: 100%;
    display: block;
    height: auto;
}

@media screen and (max-width: 880px) {
    .demo_flow_cols {
        padding: 20px;
        width: 77.6%;
        padding-left: 13px;
        padding-right: 13px;
    }
    .demo_flow_cols .demo_flow_inner {
        width: 100%;
    }

    .demo_flow_cols .demo_flow_inner .timeline_main .timeline_itm .timeline_itm_bot p br,
    .demo_flow_cols .demo_flow_inner .timeline_main .third_itm .timeline_itm_bot_type2 .blue_subbox p br{
        display: block;
    }

    .demo_flow_cols .demo_flow_inner .timeline_main .first_itm .timeline_itm_top h3{
        width: 80%;
    }
}
@media screen and (max-width: 750px) {
    .demo_flow_cols .demo_flow_inner .timeline_main .timeline_itm .timeline_itm_bot p,
    .demo_flow_cols .demo_flow_inner .timeline_main .third_itm .timeline_itm_bot_type2 .blue_subbox p {
        font-size: 12.209px;
        line-height: 130%; /* 15.872px */
    }
    .demo_flow_cols .demo_flow_inner .timeline_main .timeline_itm .timeline_itm_bot,
    .demo_flow_cols .demo_flow_inner .timeline_main .third_itm .timeline_itm_bot_type2 .blue_subbox {
        height: 53.415px;
    }
    .demo_flow_cols .demo_flow_inner .timeline_main .third_itm .timeline_itm_bot_type2 svg {
        max-width: 20.3px;
    }
    .demo_flow_cols .demo_flow_inner .timeline_main .second_itm .timeline_itm_top .pc_ver{
        display: none;
    }
    .demo_flow_cols .demo_flow_inner .timeline_main .second_itm .timeline_itm_top .sp_ver{
        display: block;
    }
}
@media screen and (max-width: 580px) {
    .demo_flow_cols .demo_flow_inner .timeline_main .timeline_itm .timeline_itm_top p {
        font-size: 9.403px;
    }
    .demo_flow_cols .demo_flow_inner .timeline_main .timeline_itm .timeline_itm_top {
        padding-left: 5.94px;
        padding-bottom: 7.63px;
    }
    .demo_flow_cols .demo_flow_inner .timeline_main .timeline_itm .timeline_itm_top h3 {
        font-size: 9.898px;
        padding-bottom: 6.1px;
        margin-bottom: 5.12px;
    }
    .demo_flow_cols .demo_flow_inner .timeline_main .timeline_itm .timeline_itm_top h3 span{
        font-size: 15.837px;
    }
    .demo_flow_cols .demo_flow_inner .timeline_main .first_itm .timeline_itm_top h3{
        width: 60%;
    }
    .demo_flow_cols .demo_flow_inner .timeline_main .second_itm .timeline_itm_top h3{
        width: 60%;
    }
    .demo_flow_cols .demo_flow_inner .timeline_main .third_itm .timeline_itm_top h3{
        width: 70%;
    }
}
@media screen and (max-width: 350px) {
    .demo_flow_cols .demo_flow_inner .timeline_main .timeline_itm .timeline_itm_top h3 {
        font-size: 8.898px;
    }
}


/* 課題解決の事例（仮） */
.demo_cases_cols{
    display: flex;
    gap: 32px;
    padding-top: 32px;
    padding-bottom: 64px;
    /* width: 95%; */
    padding-left: 32px;
    max-width: 1216px;
    padding-right: 32px;
}
.demo_cases_cols .demo_case_inner{
    display: flex;
    gap: 32px;
}
.demo_cases_cols .demo_case_inner .imgbox{
    display: flex;
    justify-content: center;
    max-width: 592px;
    width: 100%;
    align-items: center;
}
.demo_cases_cols .demo_case_inner .imgbox img{
    width: 100%;
    height: auto;
    display: block;
}
.demo_cases_cols .demo_case_inner .txtbox{
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 16px;
    padding-top: 24px;
    padding-bottom: 24px;
}
.demo_cases_cols .demo_case_inner .txtbox > h3{
    color: var(--black-0, #252729);
    font-size: 24px;
}
.demo_cases_cols .demo_case_inner .txtbox p{
    color: var(--black-0, #252729);

    /* Body 1 */
    font-family: "Noto Sans JP";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 200%; /* 32px */
}
@media screen and (max-width: 880px) {
    .demo_cases_cols .demo_case_inner {
        flex-direction: column;
        align-items: center;
        gap: 16px;
        width: 85.628%;
    }
    .demo_cases_cols {
        padding: 24px;
        padding-top: 32px;
        justify-content: center;
    }
    .demo_cases_cols .demo_case_inner .txtbox {
        padding-top: 0;
        padding-bottom: 0;
    }
    .demo_cases_cols .demo_case_inner .txtbox > h3 {
        font-size: 18px;
    }
    .demo_cases_cols .demo_case_inner .txtbox p {
        font-size: 14px;
    }
}