@charset "UTF-8";
@media screen and (max-width: 1024px) {



    /*index*/
    .index .mainimg {
        height: 88vw;/*33*/
    }
    .index .mainimg::before {
        width: 92%;
        left: 4%;
    }
    .index .mainimg h2 {
        font-size: 3rem;
        margin: 10rem auto 0;
    }
    .index_cnt1 {
        padding: 8rem 0 5rem;
    }
    .index_cnt1 .inner .col2 {
        flex-direction: column !important;
        display: flex !important;
    }
    .index_cnt1 .inner .col2 .left,
    .index_cnt1 .inner .col2 .right {
        width: 100% !important;
        margin: 0 !important;
    }
    .index_cnt2 {
        padding: 6rem 0 10rem;
    }
    .index_cnt2 .inner .grid {
        grid-template-columns: 1fr;
        gap: 3rem;
        margin: 0 auto 3rem;
    }
    .index_cnt2 .inner .grid .set h4 {
        width: 20rem;
        height: 20.4rem;
        font-size: 2rem;
        margin: 0 auto 2rem;
    }
    .index_cnt3 {
        padding: 10rem 0;
    }
    .index_cnt3::before {
        width: 100%;
        left: 0;
    }
    .index_cnt3 .inner .grid {
        grid-template-columns: 1fr;
        gap: 3rem;
    }
    .index_cnt4 {
        padding: 8rem 0 0;
    }
    .index_cnt4 .inner h4 {
        font-size: 2.8rem;
        margin: 0 0 3rem;
    }
    .index_cnt4 .inner h4 span::before {
        display: none;
    }
    .index_cnt4 .marquee {
        margin: 6rem 0 0;
        height: 10vw;
    }
    .index_cnt5 {
        padding: 8rem 0;
    }
    .index_cnt5 .inner .webgene-blog .webgene-item .buttonA {
        position: initial;
    }
    .index_cnt5 .inner .webgene-blog .webgene-item .buttonA a {
        border-radius: 1.9rem;
    }

    /*service*/
    .service_cnt1 {
        padding: 8rem 0 5rem;
    }
    .service_cnt1 .inner .col2 {
        flex-direction: column !important;
    }
    .service_cnt1 .inner .col2 .left,
    .service_cnt1 .inner .col2 .right {
        width: 100% !important;
        margin: 0 !important;
    }
    .service_cnt2 {
        padding: 6rem 0 10rem;
    }
    .service_cnt2 .inner .grid {
        grid-template-columns: 1fr;
        gap: 5rem;
        margin: 0 auto 5rem;
    }
    .service_cnt2 .inner .grid .dl:nth-of-type(1),
    .service_cnt2 .inner .grid .dl:nth-of-type(3) {
        transform: none;
    }
    .service_cnt2 .inner .col2 {
        flex-direction: column !important;
    }
    .service_cnt2 .inner .col2 .left,
    .service_cnt2 .inner .col2 .right {
        width: 100% !important;
    }
    .service_cnt2 .inner .col2 .right p:not(.buttonA) {
        font-size: 3rem;
    }
    .service_cnt3 {
        padding: 10rem 0;
    }
    .service_cnt3::before{
        width: 100%;
    }
    .service_cnt3::after{
        width: 100%;
    }
    .service_cnt3 .inner .col2 {
        flex-direction: column !important;
        gap: 1.5rem;
    }
    .service_cnt3 .inner .col2 .left,
    .service_cnt3 .inner .col2 .right {
        width: 100% !important;
    }
    .service_cnt4 {
        padding: 12rem 0 8rem;
    }
    .service_cnt4 .inner h4 {
        font-size: 3rem;
    }
    .service_cnt5 {
        padding: 8rem 0 4rem;
    }
    .service_cnt5 .marquee {
        height: 10vw;
        margin: 8rem 0 0;
    }


    /*recruit*/
    .recruit_cnt1 {
        padding: 8rem 0;
    }
    .recruit_cnt1 .inner .col2 {
        flex-direction: column !important;
    }
    .recruit_cnt1 .inner .col2 .left {
        width: 100% !important;
        height: auto;
        position: relative;
        overflow: hidden;
        margin: 0 0 3rem !important;
        aspect-ratio: 16/9;
    }
    .recruit_cnt1 .inner .col2 .left .pic1 {
        position: relative;
        left: auto;
        width: 100%;
        aspect-ratio: 16/9;
    }
    .recruit_cnt1 .inner .col2 .left .pic2 {
        display: none;
    }
    .recruit_cnt1 .inner .col2 .right {
        width: 100% !important;
    }
    .recruit_cnt1 .inner .col2 .right h4 {
        font-size: 2.5rem;
    }
    .recruit_cnt2 {
        padding: 6rem 0 10rem;
    }
    .recruit_cnt2 .inner .ul {
        grid-template-columns: repeat(2, 1fr);
        width: 100%;
    }
    .recruit_cnt3 {
        padding: 10rem 0 8rem;
    }
    .recruit_cnt3::before{
        width: 100%;
    }
    .recruit_cnt3 .inner .ul {
        grid-template-columns: 1fr;
    }
    .recruit_cnt3 .inner .li {
        height: auto;
        min-height: 7rem;
        padding: 1.5rem 4%;
    }
    .recruit_cnt3 .inner .li:nth-of-type(1),
    .recruit_cnt3 .inner .li:nth-of-type(3) {
        border-right: none;
    }
    .recruit_cnt3 .inner .li:nth-of-type(3) {
        border-bottom: 0.3rem solid #26486a;
    }
    .recruit_cnt4 {
        padding: 8rem 0;
        background-size: 60%;
        background-position: top right;
    }
    .recruit_cnt4 .inner h4 {
        font-size: 3rem;
    }
    .recruit_cnt5 {
        padding: 8rem 0;
    }
    .recruit_cnt5 .inner .dl {
        flex-direction: column;
        gap: 0;
    }
    .recruit_cnt5 .inner .dt {
        width: 100%;
        min-height: 4rem;
        padding: 1rem 4%;
        border-bottom: none;
        border-top: 0.1rem solid #2a7092;
    }
    .recruit_cnt5 .inner .dd {
        width: 100%;
        min-height: 5rem;
        padding: 1rem 4%;
        border-bottom: 0.1rem solid rgba(42, 112, 146, 0.3);
    }
    .recruit_cnt6 {
        padding: 8rem 0;
    }


    /*profile*/
    .profile_cnt1 {
        padding: 8rem 0 10rem;
    }
    .profile_cnt1::after{
        width: 100%;
    }
    .profile_cnt1 .inner .pic {
        aspect-ratio: 16/9;
    }
    .profile_cnt1 .inner>p {
        margin: 0 0 5rem;
    }
    .profile_cnt1 .inner .window .name {
        font-size: 2.8rem;
        margin: 0 2rem 3rem 0;
    }
    .profile_cnt2 {
        padding: 10rem 0 8rem;
    }
    .profile_cnt2 .inner .col2 {
        flex-direction: column !important;
    }
    .profile_cnt2 .inner .col2 .left,
    .profile_cnt2 .inner .col2 .right {
        width: 100% !important;
    }
    .profile_cnt2 .inner .col2 .left img {
        max-width: 100%;
    }
    .profile_cnt3 {
        padding: 8rem 0;
    }


    /*works*/
    :is(.blog_cnt1, .blogdetail_cnt1) .inner .webgene-blog {
        display: block;
    }
    :is(.blog_cnt1, .blogdetail_cnt1) .inner .webgene-blog .webgene-item:not(:last-of-type) {
        margin: 0 0 1rem;
    }
    .works_cnt2 {
        padding: 0 0 8rem;
    }
    .works_cnt2 .inner .webgene-blog .webgene-item .dl {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        gap: 1rem;
    }
    .works_cnt2 .inner .webgene-blog .webgene-item .pic {
        grid-row: auto;
        grid-column: auto;
        margin: 0 0 1rem;
    }
    .works_cnt2 .inner .webgene-blog .webgene-item .day {
        grid-row: auto;
        grid-column: auto;
    }
    .works_cnt2 .inner .webgene-blog .webgene-item .dt {
        grid-row: auto;
        grid-column: auto;
        font-size: 2.2rem;
    }
    .works_cnt2 .inner .webgene-blog .webgene-item .cmt {
        grid-row: auto;
        grid-column: auto;
    }


    /*blog*/
    .webgene-pagination :is(.prev, .next),
    .webgene-pagination ul .number.selected,
    .webgene-pagination ul .number {
        width: 2em;
        height: 2em;
        margin: 0;
    }
    .webgene-pagination ul {
        width: 100%;
        justify-content: space-between;
    }
    .webgene-pagination .prev {
        margin: 0;
    }
    .webgene-pagination .next {
        margin: 0;
    }




    /*company*/
    .company_cnt1 {
        padding: 8rem 0 0 !important;
    }
    .company_cnt1 .inner .dl {
        flex-direction: column;
        gap: 0;
    }
    .company_cnt1 .inner .dt {
        width: 100%;
        min-height: 4rem;
        padding: 1rem 4%;
        border-bottom: none;
        border-top: 0.1rem solid #2a7092;
    }
    .company_cnt1 .inner .dd {
        width: 100%;
        min-height: 5rem;
        padding: 1rem 4%;
        border-bottom: 0.1rem solid rgba(30, 31, 31, 0.3);
    }
    .company_cnt1 .map {
        height: 25rem;
        margin: 5rem auto 0;
    }






    /*contact*/
    .contact_cnt1 {
        padding: 8rem 0 3rem;
    }
    .contact_cnt1 .inner .window .tel a {
        font-size: 3rem;
        flex-wrap: wrap;
    }
    .contact_cnt2 {
        padding: 3rem 0 8rem;
    }
    .contact_cnt2 .inner h4 {
        font-size: 2.2rem;
    }
    form .dl {
        flex-direction: column;
        gap: 0;
    }
    form .dl .dt {
        width: 100%;
        min-height: 4rem;
        padding: 1rem 0;
        border-bottom: none;
        border-top: 0.1rem solid #686868;
        justify-content: flex-start;
        gap: 1rem;
    }
    form .dl .dd {
        width: 100%;
        padding: 1rem 0;
        border-bottom: 0.1rem solid #686868;
    }
    form .dl .dd .radioArea {
        flex-direction: column;
        gap: 1rem;
    }
    form input[type="text"],
    form input[type="email"],
    form textarea {
        height: 4.5rem;
    }
    form input.zipInput {
        width: 40%;
    }
    form .col label {
        font-size: 1rem;
    }
    .privacyformError {
        margin-top: -36.5px !important;
    }
}


@media screen and (max-width: 700px){
    .index .mainimg::before {width: 160%;}
    .index .mainimg h2 {
        font-size: 2.5rem;
        margin: 6rem auto 0;}
    .inner {width: 90%;}
    .buttonA :is(a, span)::after {bottom: 1rem;}
    .index_cnt5 .inner .webgene-blog .webgene-item .dt,.index_cnt4 .inner h4,.service_cnt1 .inner .set h4,
    .service_cnt2 .inner .col2 .right p:not(.buttonA),.service_cnt5 .inner h4,.recruit_cnt1 .inner .col2 .right h4{font-size: 2.4rem;}
    :is(.works_cnt1, .worksdetail_cnt1) .inner .webgene-blog {display: grid;}
    .works_cnt2 .inner .webgene-blog .webgene-item {padding: 2rem 0rem;}
    .worksdetail_cnt2 .inner .webgene-blog .webgene-item .dl {padding: 3rem 0 5rem;}
    .fileArea input {
    width: 100%;
    }
}
@media screen and (max-width: 1024px){
    .index .mainimg::before {
        left: 50%;
        transform: translateX(-50%);}
    .form textarea{height: 12.5rem;}
    form .col label {
        font-size: 1.6rem;
    }
}
@media screen and (min-width: 768px){
    .spbr br{display:none;}
}
@media (min-width:768px) and (max-width:1024px){
    .index .mainimg::before {width: 100%;}
    .index_cnt2 .inner .grid {grid-template-columns: 1fr 1fr 1fr;}
    .index_cnt2 .inner .buttonA,.service_cnt2 .inner .col2 {margin: 0 0 2rem 0;}
    .bottom .col2,:is(.blog_cnt1, .blogdetail_cnt1) .inner .webgene-blog {display: flex !important;}
    .recruit_cnt5 .inner .dt,.company_cnt1 .inner .dt {
        width: 25%;
        border-bottom: 0.1rem solid #2a7092;
        border-top: none;}
    .recruit_cnt5 .inner .dl,form .dl,form .dl .dd .radioArea,.company_cnt1 .inner .dl {
        flex-direction: row;
        display: flex;
        gap: 0.5rem;
}
    form .dl .dt{width: 40%;}
}