section{
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
}

.section_blue{
    background: var(--blue-50, #F1F8FE);
}
.section_blue_45{
    background: var(--blue-45, #D9EAFE);
}
.section_public_cta{
    margin-bottom: 80px;
}

@media screen and (max-width: 880px) {
    .section_public_cta{
        margin-bottom: 64px;
    }
}

span{
    color: var(--black, #252729);
    font-family: "Noto Sans JP";
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}
h2{
    font-family: "Noto Sans JP";
    font-style: normal;
    font-weight: 700;
}

.contact_itms .itm .txtbox .btn_div {
    display: flex;
    justify-content: center;
}

.section_main{
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    padding-top: 80px;
    padding-bottom: 80px;
    gap: 40px;
    width: 100%;
}
.section_main .title{
    color: var(--black, #252729);
    text-align: center;

}
.section_main .title span,
.section_main .title h2{
    font-size: 40px;
    line-height: normal;
    color: var(--black, #252729);
}
.section_main .title span br,
.section_main .title h2 br{
    display: none;
}
@media screen and (max-width: 1023px) {
    .section_main #blu_title span br,
    .section_main #blu_title h2 br{
        display: block;
    }
}
@media screen and (max-width: 880px) {
    .section_main .title span,
    .section_main .title h2{
        font-size: 24px;
    }
    .section_main {
        padding-top: 64px;
        padding-bottom: 64px;
        gap: 24px;
    }
}
@media screen and (max-width: 780px) {
    .section_main .title span br,
    .section_main .title h2 br{
        display: block;
    }
}

.about_second{
    padding-top: 0;
}
.about_second .txtbox .about_second_title span{
    color: var(--black, #252729);
    text-align: center;
    font-size: 32px;
    line-height: normal;
}
.about_second_type2{
    gap: 40px;
}

@media screen and (max-width: 880px) {
    .about_second_type2{
        gap: 32px;
    }
    .section_main_type_about{
        gap: 32px;
    }
}

.inforbox{
    display: flex;
    justify-content: flex-start;
    gap: 40px;
    width: 95%;
    max-width: 1040px;
    margin-top: 56px;
    position: relative;
}
.inforbox .infortxtbox{
    display: flex;
    flex-direction: column;
    width: 100%;
}
.inforbox .infortxtbox .infor_txt{
    display: flex;
    flex-direction: column;
}
.inforbox .infortxtbox .infor_txt span{
    color: var(--black, #252729);

    font-size: 14px;
    font-weight: 400;
    line-height: 200%; /* 28px */
}
.inforbox .infortxtbox .infor_txt span br{
    display: block;
}
.inforbox .infortxtbox .infor_subtitle{
    display: flex;
}    
.inforbox .infortxtbox .infor_subtitle span{
    color: var(--blue, #0974E8);
    font-size: 24px;
    line-height: 200%; /* 28px */
}
.inforbox .infortxtbox  h1{
    display: flex;
    flex-direction: column;
    /* margin-top: 16px; */
    margin-bottom: 32px;
}
.inforbox .infortxtbox  h1 {
    color: var(--blue, #0974E8);
    font-size: 48px;
    line-height: 1.2;
}
.inforbox .inforimgbox{
    width: 100%;
    max-width: 400px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    right: 0;
}
.inforbox .inforimgbox img{
    width: 100%;
    display: block;
    height: auto;
}
@media screen and (max-width: 1020px) {
    .inforbox .infortxtbox{
        width: 100%;
    }
    .inforbox .infortxtbox .infor_subtitle span {
        font-size: 18px;
    }
    /* .inforbox .infortxtbox h1 span {
        font-size: 32px;
    } */
    .inforbox .infortxtbox .infor_txt {
        width: 54%;
    }
}
@media screen and (max-width: 880px) {
    .inforbox {
        flex-direction: column;
        gap: 16px;
        margin-top: 36px;
    }
    .inforbox .inforimgbox {
        position: relative;
        align-self: center;
    }
    .inforbox .infortxtbox .infor_txt {
        width: 100%;
    }
    .inforbox .infortxtbox h1 {
        margin-top: 8px;
        margin-bottom: 16px;
        display: block;
    }
    .inforbox .infortxtbox h1 br{
        display: none;
    }
    .inforbox .infortxtbox {
        width: 91.79%;
        align-self: center;
    }
    .inforbox .infortxtbox .infor_txt span br{
        display: none;
    }
}
@media screen and (max-width: 767px) {
    .inforbox .infortxtbox h1 {
        font-size: 32px;
    }
}

@media screen and (max-width: 500px) {
    .inforbox .inforimgbox {
        max-width: 200px;
    }
}


/* テックタッチの想い */
.detailsbox{
    display: flex;
    justify-content: flex-start;
    gap: 24px;
    width: 95%;
    max-width: 984px;
    position: relative;
}
.detailsbox .detailsimgbox{
    width: 100%;
    max-width: 480px;
    display: flex;
    align-items: center;
    align-self: flex-start;
}
.detailsbox .detailsimgbox img{
    width: 100%;
    display: block;
    height: auto;
}
.detailsbox .detailstexts{
    display: flex;
    flex-direction: column;
    width: 100%;
}
.detailsbox .detailstexts span{
    color: var(--black, #252729);
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 200%;
}

@media screen and (max-width: 880px) {
    .detailsbox {
        flex-direction: column;
        width: 87.204%;
        gap: 16px;
    }
    .detailsbox .detailsimgbox {
        align-self: center;
    }
}
@media screen and (max-width: 500px) {
    .detailsbox .detailstexts span {
        font-size: 14px;
        line-break: strict;
    }
}

/* Maximize the power of tech */
.titlebox{
    display: flex;
    flex-direction: column;
    align-items: center;
}
.titlebox .subtitle_top{
    display: flex;
    color: var(--gray, #8C9197);
    text-align: center;
    font-size: 16px;
    font-weight: 400;
    line-height: normal;
}
.titlebox > h2{
    display: flex;
    color: var(--blue, #0974E8);
    text-align: center;
    font-size: 40px;
    line-height: normal;
}
.about_second_type2 h2 br{
    display: none;
}
.titlebox .subtitle{
    display: flex;
    color: var(--black, #252729);
    text-align: center;
    font-size: 24px;
    line-height: normal;
    margin-top: 8px;
}
@media screen and (max-width: 880px) {
    .about_second_type2 h2 br{
        display: block;
    }
}
@media screen and (max-width: 500px) {
    .titlebox > h2 {
        font-size: 32px;
    }
    .titlebox .subtitle {
        font-size: 20px;
    }
    .titlebox .subtitle_top {
        font-size: 14px;
    }
}

/* システム導入をしてみたものの… */
.intro_cols{
    display: flex;
    justify-content: flex-start;
    gap: 24px;
    width: 95%;
    max-width: 984px;
    flex-direction: column;
    align-items: center;
}
.intro_cols .intro_itm{
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 800px;
    border-radius: 6px;
    background: var(--white, #FFF);
    padding-top: 32px;
    padding-bottom: 32px;
    align-items: center;
}
.intro_cols .intro_itm_main{
    display: flex;
    width: 95%;
    gap: 32px;
    max-width: 736px;
}
.intro_cols .intro_itm_main .intro_imgbox{
    width: 100%;
    max-width: 160px;
}
.intro_cols .intro_itm_main .intro_imgbox img{
    width: 100%;
    display: block;
    height: auto;
}
.intro_cols .intro_itm_main .intro_txtbox{
    display: flex;
    flex-direction: column;
    width: 100%;
}
.intro_cols .intro_itm_main .intro_txtbox h3{
    color: var(--red, #FF595E);
    font-size: 24px;
    line-height: normal;
}
.intro_cols .intro_itm_main .intro_txtbox h3 br{
    display: none;
}
.intro_cols .intro_itm_main .intro_txtbox ul{
    display: flex;
    flex-direction: column;
    margin-top: 16px;
    list-style: disc;
    padding-left: 28px;
}
.intro_cols .intro_itm_main .intro_txtbox ul li{
    color: var(--black, #252729);
    font-size: 16px;
    font-weight: 400;
    line-height: 200%; /* 32px */
}
.intro_cols .intro_itm_main .mini_intro_txt{
    display: none;
}
@media screen and (max-width: 880px) {
    .intro_cols .intro_itm_main .intro_imgbox {
        max-width: 240px;
    }
    .intro_cols .intro_itm {
        width: 91.79%;
        padding-top: 24px;
        padding-bottom: 24px;
    }
    .intro_cols .intro_itm_main {
        width: 85.322%;
        flex-direction: column;
        align-items: center;
        gap: 16px;
    }
    .intro_cols .intro_itm_main .intro_txtbox h3 {
        display: none;
    }
    .intro_cols .intro_itm_main .intro_txtbox ul {
        margin-top: 0px;
        padding-left: 25px;
    }
    .intro_cols .intro_itm_main .mini_intro_txt{
        display: flex;
        width: 100%;
        justify-content: center;
        align-items: center;
    }
    .intro_cols .intro_itm_main .mini_intro_txt span{
        color: var(--red, #FF595E);
        text-align: center;
        font-size: 18px;
        line-height: normal;
    }
    .intro_cols {
        gap: 16px;
    }
}
@media screen and (max-width: 560px) {
    .intro_cols .intro_itm_main .intro_txtbox ul li {
        font-size: 14px;
    }
}

.triangle_box{
    display: flex;
    justify-content: center;
    align-items: center;
}

/* テックタッチが解決！ */
.intro_type2{
    display: flex;
    justify-content: flex-start;
    gap: 24px;
    width: 95%;
    max-width: 1040px;
}
.intro_type2 .intro_cols_type2{
    display: flex;
    justify-content: flex-start;
    gap: 24px;
    width: 100%;
    flex-direction: column;
}
.intro_type2 .intro_cols_type2 .intro_itm_type2{
    display: flex;
    width: 100%;
    max-width: 560px;
    border-radius: 6px;
    background: var(--white, #FFF);
    padding-top: 32px;
    padding-bottom: 32px;
    justify-content: center;
}
.intro_type2 .intro_cols_type2 .intro_itm_type2 .intro_itm_main{
    display: flex;
    flex-direction: column;
    width: 88.572%;
}
.intro_type2 .intro_cols_type2 .intro_itm_type2 .intro_itm_main .intro_txtbox{
    display: flex;
    flex-direction: column;
    width: 100%;
}
.intro_type2 .intro_cols_type2 .intro_itm_type2 .intro_itm_main h3{
    color: var(--blue, #0974E8);
    font-size: 24px;
    line-height: normal;
}
.intro_type2 .intro_cols_type2 .intro_itm_type2 .intro_itm_main ul{
    display: flex;
    flex-direction: column;
    margin-top: 16px;
    list-style: disc;
    padding-left: 28px;
}
.intro_type2 .intro_cols_type2 .intro_itm_type2 .intro_itm_main ul li{
    color: var(--black, #252729);
    font-size: 16px;
    font-weight: 400;
    line-height: 200%; /* 32px */
}
.intro_type2 .intro_imgbox_type2 {
    width: 100%;
    justify-content: center;
    align-items: center;
    display: flex;
    max-width: 440px;
}
.intro_type2 .intro_imgbox_type2 img{
    width: 100%;
    display: block;
    height: auto;
    max-width: 440px;
}
.intro_type2 .intro_cols_type2 .intro_itm_type2 .intro_itm_main h3 br{
    display: none;
}
@media screen and (max-width: 880px) {
    .intro_type2 {
        flex-direction: column;
        align-items: center;
        gap: 16px;
    }
    .intro_type2 .intro_cols_type2 {
        align-items: center;
        width: 91.79%;
        gap: 16px;
    }

    .intro_type2 .intro_cols_type2 .intro_itm_type2 {
        padding-top: 24px;
        padding-bottom: 24px;
        max-width: unset;
    }
    .intro_type2 .intro_imgbox_type2 {
        max-width: 320px;
    }
    .intro_type2 .intro_cols_type2 .intro_itm_type2 .intro_itm_main h3 {
        text-align: center;
    }
    .intro_type2 .intro_cols_type2 .intro_itm_type2 .intro_itm_main ul {
        margin-top: 14px;
        padding-left: 27px;
    }
    .intro_type2 .intro_cols_type2 .intro_itm_type2 .intro_itm_main {
        width: 85.322%;
    }
}
@media screen and (max-width: 600px) {
    .intro_type2 .intro_cols_type2 .intro_itm_type2 .intro_itm_main h3 br{
        display: block;
    }
}

@media screen and (max-width: 500px) {
    .intro_type2 .intro_imgbox_type2 {
        max-width: 240px;
    }
    .intro_type2 .intro_cols_type2 .intro_itm_type2 .intro_itm_main h3 {
        font-size: 18px;
    }
    .intro_type2 .intro_cols_type2 .intro_itm_type2 .intro_itm_main ul li {
        font-size: 14px;
    }
}

.dap_titlebox{
    display: flex;
    flex-direction: column;
    align-items: center;
    font-feature-settings: normal;
    letter-spacing: inherit;
}
.dap_titlebox span{
    color: var(--blue, #0974E8);
    text-align: center;
    font-size: 32px;
    line-height: normal;
}
.dap_imgbox{
    position: relative;
    width: 100%;
    max-width: 984px;
    padding-bottom: 200px;
}
.dap_imgbox .peoplebox{
    position: absolute;
    left: 0;
    z-index: 2;
    bottom: 0%;
}
.dap_imgbox .videobox{
    display: flex;
    width: 100%;
    justify-content: center;
}
.dap_imgbox .videobox video{
    width: 80%;
    display: block;
    height: auto;
    max-width: 684px;
}
.dap_imgbox .wallbox{
    position: absolute;
    left: 0;
    bottom: 28%;
    z-index: -1;
}
.dap_cols{
    display: flex;
    justify-content: flex-start;
    gap: 24px;
    width: 95%;
    max-width: 1336px;
}
.dap_cols .dap_itm{
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 480px;
    background: var(--Color, #FFF);
    box-shadow: 0px 0px 16px 0px rgba(0, 0, 0, 0.10);
    padding-top: 32px;
    padding-bottom: 32px;
    align-items: center;
}
.dap_cols .dap_itm .dap_itm_main{
    display: flex;
    width: 83.854%;
    gap: 20px;
    align-items: center;
}
.dap_cols .dap_itm .dap_itm_main .dap_itm_imgbox{
    width: 100%;
    max-width: 120px;
}
.dap_cols .dap_itm .dap_itm_main .dap_itm_imgbox img{
    width: 100%;
    display: block;
    height: auto;
}
.dap_cols .dap_itm .dap_itm_main .dap_itm_txtbox{
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 8px;
}
.dap_cols .dap_itm .dap_itm_main .dap_itm_txtbox .dap_itm_title{
    color: var(--blue, #0974E8);
    font-size: 18px;
    line-height: normal;
    letter-spacing: inherit;
    font-feature-settings: normal;
}
.dap_cols .dap_itm .dap_itm_main .dap_itm_txtbox .dap_itm_txt{
    color: var(--black, #252729);
    font-size: 12px;
    line-height: 200%;  
    font-weight: 400;
}
.dap_cols .dap_itm:hover{
    transition: box-shadow .2s ease-in;
    cursor: pointer;
    box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.2);
}
@media screen and (max-width: 1023px) {
    .dap_cols .dap_itm .dap_itm_main {
        flex-direction: column-reverse;
        gap: 16px;
    }
}

@media screen and (max-width: 880px) {
    .dap_cols {
        flex-direction: column;
        align-items: center;
        gap: 16px;
    }
    .dap_cols .dap_itm {
        max-width: unset;
        width: 91.79%;
        padding-top: 24px;
        padding-bottom: 24px;
    }
    .dap_cols .dap_itm .dap_itm_main {
        width: 85.322%;
    }
    .dap_titlebox span{
        font-size: 25px;
    }
}
@media screen and (max-width: 780px) {
    .dap_imgbox {
        padding-bottom: 23%;
        overflow: hidden;
    }
    .dap_imgbox .videobox video {
        width: 87.204%;
    }
    .dap_imgbox .peoplebox {
        overflow: hidden;
        width: 125%;
        left: -13%;
        bottom: -2%;
    }
}
@media screen and (max-width: 650px) {
    .dap_titlebox span{
        font-size: 20px;
    }
    .dap_titlebox {
        display: block;
        width: 87.201%;
        text-align: center;
    }
    .dap_titlebox span br{
        display: none;
    }
}

@media screen and (max-width: 880px) {
    .section_main #blu_title{
        text-align: center
    } 
    .contact_itms {
        gap: 16px;
    }
}
@media screen and (max-width: 450px) {
    .section_main #blu_title{
        text-align: left;
        width: 87.203%;
    } 
}

.casetype{
    padding-bottom: 0;
}
.casetype .logos-box{
    width: 87.47%;
    max-width: 1188px;
    display: grid;
    grid-template-columns: repeat(6, 1fr);

    /* margin-top: 24px;
    margin-bottom: 48px; */
    gap: 8px;
    row-gap: 2.4rem;
}
.casetype .customer-logo-md{
    max-width: 14rem;
    width: 100%;
    justify-items: center;
}
.casetype .customer-logo-md img{
    height: auto;
    max-height: 70px;
    max-width: 100%;
    vertical-align: middle;
    display: block;
}
.casetype .btn_div{
    display: flex;
    justify-content: center;
    width: 100%;
}
@media screen and (max-width: 880px) {
    .casetype .logos-box {
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
    }
    .casetype .customer-logo-md {
        height: 70px;
        align-content: center;
    }
}
@media screen and (max-width: 400px) {
    .casetype .customer-logo-md {
        height: 60px;
        align-content: center;
    }
}


/* dap banner box : DAP白書 */
.about_dap_banner{
    display: flex;
    gap: 40px;
    margin-top: 40px;
    width: 95%;
    justify-content: center;
}
.about_dap_banner .about_dap_banner_lft{
    display: flex;
    flex-direction: column;
}
.about_dap_banner .about_dap_banner_lft h2{
    color: var(--blue-0, #0974E8);

    font-size: 40px;
    font-weight: 700;
    line-height: normal;
}
.about_dap_banner .about_dap_banner_lft p{
    color: var(--black-0, #252729);
    font-size: 16px;
    font-weight: 400;
    line-height: 200%; /* 32px */
    margin: 0;
    margin-top: 24px;
    margin-bottom: 32px;
}
.about_dap_banner .about_dap_banner_lft .btnbox{
    display: flex;
    /* justify-content: center; */
    justify-content: left;
}
.about_dap_banner .about_dap_banner_lft .btnbox a{
    max-width: 240px;
}
.about_dap_banner .about_dap_banner_right{
    display: flex;
    width: 100%;
    max-width: 170px;
    align-items: center;
}
.about_dap_banner .about_dap_banner_right img{
    display: block;
    width: 100%;
    border-radius: 4px;
    box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.25);
    height: auto;
}
.about_dap_banner .about_dap_banner_sp_txt{
    display: none;
}
.about_dap_banner .about_dap_banner_sp_txt h2{
    text-align: center;
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}
@media screen and (max-width:880px) {
    .about_dap_banner {
        width: 91.79%;
    }
}
@media screen and (max-width:680px) {
    .about_dap_banner {
        gap: 16px;
        width: 87.201%;
        flex-direction: column-reverse;
    }
    .about_dap_banner .about_dap_banner_lft .btnbox a {
        max-width: 327px;
    }
    .about_dap_banner .about_dap_banner_sp_txt{
        display: flex;
        justify-content: center;
    }
    
    .about_dap_banner .about_dap_banner_right {
        align-self: center;
    }
    .about_dap_banner .about_dap_banner_lft h2{
        display: none;
    }
    .about_dap_banner .about_dap_banner_lft p{
        margin-top: 0;
        margin-bottom: 24px;

        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: 200%; /* 28px */
    }
    .about_dap_banner .about_dap_banner_lft .btnbox {
        justify-content: center;
    }
}