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


    /*index*/
    .index .mainimg h2 {
        font-size: 3rem;
    }
    .index_cnt1 .inner .col2 .left {
        position: initial;
    }
    .index_cnt1 .inner .col2 .right {
        padding: 0;
        margin: auto;
    }
    .index_cnt2 .inner .flex {}
    .index_cnt2 .inner .flex .buttonA {
        min-width: initial;
    }
    .index_cnt2 .inner .webgene-blog {
        grid-template-columns: repeat(2, 1fr);
    }
    .index_cnt3 .inner .col2 {
        display: grid !important;
    }

    .index_cnt3 .inner .col2 .left {
        position: initial;
    }
    .index_cnt3 .inner .col2 .left .illust {
        right: 0;
    }
    .index_cnt3 .inner .col2 .right {
        padding: 0;
        margin: auto;
        grid-row: 1/2;
    }
    .index_cnt3 .inner .col2 .right h3 {
        font-size: 2.7rem;
    }
    .index_cnt3 .inner .col2 .right .dl {
        gap: 1rem;
        height: 5rem;
    }
    .index_cnt3 .inner .col2 .right .dt {
        font-size: 1.8rem;
        width: initial;
        padding: 0;
    }
    .index_cnt3 .inner .col2 .right .dd {
        font-size: 1.4rem;
    }
    .index_cnt4 .inner .col2 :is(.left, .right) {
        padding: clamp(2rem, 2.6vw, 5rem);
        background: #fff;
        border-radius: 1rem;
    }
    .index_cnt5 .inner .col2 .left {
        position: initial;
    }
    .index_cnt5 .inner .col2 .right {
        padding: 0;
        margin: auto;
    }
    .index_cnt5 .inner .col2 .right .catch {
        font-size: 2.4rem;
    }
    .index_cnt5 .marquee p {
        font-size: 3rem;
    }




    /*about*/
    .about_cnt1 .inner h3{
        font-size: 2.4rem;
    }
    .about_cnt2 .inner .set {
        padding: clamp(1.5rem, 2.6vw, 5rem);
        background: #fff;
        border-radius: 1rem;
    }
    .about_cnt2 .inner .set>.col2 .left {
        position: initial;
    }
    .about_cnt2 .inner .set .col2 .right {
        padding: 0 !important;
    }
    .about_cnt3 .inner .col2 {
        display: grid !important;
    }
    .about_cnt3 .inner .col2 .left {
        grid-row: 2/3;
    }
.about_cnt2 .inner .set .window{
    width: 100%;
    border-radius: 1rem;
    background: #efe9e7;
}





    /*services*/
    :is(.services_cnt1, .services_cnt5) .inner .col2 .left {
        max-width: initial;
        position: initial;
        padding: 0;
    }
    :is(.services_cnt1, .services_cnt5) .inner .col2 .right {
        padding: 0;
    }
    .services_cnt2 .inner .col2 .left {
        position: initial;
        max-width: initial;
    }
    .services_cnt2 .inner .col2 .right {
        padding: 0;
    }
    .services_cnt2 .inner .illust{
        bottom: initial;
        top: -2rem;
    }
    .services_cnt3 .inner .grid {
        display: block;
    }
    .services_cnt3 .inner .grid .dl:not(:last-of-type) {
        margin: 0 auto 3rem;
    }
    .services_cnt3 .inner .grid .dt {
        font-size: 2rem;
        padding: 0 1.5rem;
    }
    .services .bg1 {
        background-attachment: initial;
        height: 30rem;
    }
    .services_cnt6 .inner .grid {
        display: block;
    }
    .services_cnt6 .inner .grid .dl:not(:last-of-type) {
        margin: 0 auto 3rem;
    }
    .services_cnt6 .inner .grid .dt {
        display: block;
        font-size: 2rem;
        padding: 0 1.5rem;
    }




    /*methods*/
    .methods_cnt1 .inner .col2 .left {
        max-width: initial;
        position: initial;
        margin: 0 auto 3rem;
    }
    .methods_cnt1 .inner .col2 .right {
        padding: 0;
    }
    .methods_cnt2 .inner .col2 {
        padding: clamp(2rem, 2.6vw, 5rem);
        background: #fff;
        border-radius: 1rem;
    }
    .methods_cnt2 .inner .col2:not(:last-of-type) {
        margin: 0 auto 3rem;
    }
    .methods_cnt2 .inner .col2 .left {
        position: initial;
    }
    .methods_cnt2 .inner .col2 .right {
        padding: 0 !important;
    }
    :is(.methods_cnt3, .methods_cnt5) .inner .dt {
        font-size: 1.8rem;
        padding: 0 1.5rem;
    }
    .methods_cnt4 .inner .col2 .left {
        position: initial;
    }
    .methods_cnt4 .inner .col2 .right {
        padding: 0;
    }


























    /*staff*/
    :is(.staff_cnt1, .staff_cnt2) .inner .grid .staff .modalBtn .dl {

        padding: clamp(2rem, 2.6vw, 5rem);
        background: #fff;
        border-radius: 1rem;
    }
    :is(.staff_cnt1, .staff_cnt2) .inner .grid {
        display: block;
    }
    :is(.staff_cnt1, .staff_cnt2) .inner .grid .staff {
        margin: 0 auto 5rem;
    }
    .staff .intModalBox {
        display: block;
    }
    .staff .intModalL {
        width: 100%;
    }
    .staff .intModalR {
        width: 100%;
    }
    /*works & worksdetail共通*/
    :is(.works_cnt1, .worksdetail_cnt1) .inner .flex .webgene-blog {
        width: 100%;
    }
    :is(.works_cnt1, .worksdetail_cnt1) .inner .flex .webgene-blog .webgene-item {}
    :is(.works_cnt1, .worksdetail_cnt1) .inner .flex .webgene-blog .webgene-item .buttonB {
        min-height: initial;
        border: initial;
    }




    /*recruit*/
    .recruit_cnt1 {
        height: 30rem;
    }
    .recruit_cnt1 .inner .catch {
        font-size: 2.4rem;
    }
    .recruit_cnt2 {
        background: #fff;
        display: grid;
        height: initial;
        padding: 0 0 5rem !important;
    }
    .recruit_cnt2:before {
        content: "";
        width: 100%;
        height: 30rem;
        background: url(/system_panel/uploads/images/recruit_cnt2_bg.jpg);
        background-size: cover;
        display: block;
    }
    .recruit_cnt2 .inner {
        width: 80%;
        margin: auto;
    }
    .recruit_cnt2 * {
        color: initial !important;
    }
    .recruit_cnt2 .inner .catch {
        font-size: 2.4rem;
    }
    .recruit_cnt3 .inner .grid {
        display: block;
    }
    .recruit_cnt3 .inner .grid .dl:not(:last-of-type) {
        margin: 0 auto 3rem;
    }
    .recruit_cnt3 .inner .grid .dt {
        font-size: 1.8rem;
        padding: 0 1.5rem;
    }
    /*
.recruit_cnt4 .inner .dt{
    width:10em;
    padding: 0;
}
.recruit_cnt4 .inner .dd{
    padding: 0;
}*/
    .recruit_cnt4 .inner .dl {
        display: block;
        min-height: initial;
        margin: 0 0 3rem;
    }
    .recruit_cnt4 .inner .dt {
        width: 100%;
        padding: 0;
        border: none;
    }
    .recruit_cnt4 .inner .dd {
        width: 100%;
        padding: 0;
    }
    .recruit_cnt5 .inner .catch {
        font-size: 3rem;
    }





    /*contact*/
    .contact_cnt1 .inner .window .tel a {
        font-size: 3rem;
    }
    form .dl {
        display: block;
    }
    form .dl .dt {
        width: 100%;
        border: none;
    }
    form .dl .dd {
        width: 100%;
    }
    form .checkArea {
        display: block;
    }
    form .checkArea div {
        margin: 0 0 1rem;
    }
    form .col label {
        font-size: 1.2rem;
    }









    /*works*/
    :is(.works_cnt1, .worksdetail_cnt1) .inner .flex {
        display: block;
        margin: 0 0 1rem;
    }
    :is(.works_cnt1, .worksdetail_cnt1) .inner .flex .webgene-blog .webgene-item {
        width: 100%;
    }
    :is(.works_cnt1, .worksdetail_cnt1) .inner .flex>.buttonA {
        width: 100%;
        margin: 0 auto 1rem;
    }
    .works_cnt2 .inner .webgene-blog {
        display: block;
    }
    .works_cnt2 .inner .webgene-blog {
        display: block;
    }
    .works_cnt2 .inner .webgene-blog .webgene-item {
        margin: 0 0 3rem;
        padding: 0 0 3rem;
        border-bottom: 0.1rem dashed #ccc;
    }
    .webgene-pagination :is(.prev, .next),
    .webgene-pagination ul .number.selected,
    .webgene-pagination ul .number {
        width: 2em;
        height: 2em;
        margin: 0;
    }
    .webgene-pagination {}
    .webgene-pagination ul {
        width: 100%;
        justify-content: space-between;
    }
    .webgene-pagination .prev {
        margin: 0;
    }
    .webgene-pagination .next {
        margin: 0;
    }






    /*worksdetail*/
    .worksdetail_cnt2 .inner .webgene-blog .webgene-item .dt {
        font-size: 2rem;
        padding: 1rem;
    }





    /*company*/
    .company_cnt1 .inner .col2 .left {
        position: initial;
        max-width: initial;
    }
    .company_cnt1 .inner .col2 .right {
        padding: 0;
    }
    .company_cnt2 .inner .dt {
        min-width: 6em;
        padding: 0;
        align-self: stretch;
    }
    .company_cnt2 .inner .dd {
        padding: 0;
    }
    .company_cnt3 .inner .col2 :is(.left, .right)>.dl>.dd>.dl>.dt {
        min-width: 5em;
        padding: 0;
        align-self: stretch;
    }
    .company_cnt3 .inner .col2 :is(.left, .right)>.dl>.dd>.dl>.dd {
        padding: 0;
    }

    /*contact*/
    .privacyformError {
        margin-top: -36.5px !important;
    }

    .footer .inner .col2 .left .logo {
        font-size: 2.5rem;
  }
body {
      font-size: 1.4rem;
}
   .company_cnt3 .inner .col2 :is(.left, .right)>.dl>.dt {
    font-size: 2.5rem;
  }

}
@media screen and (max-width: 600px) {
.worksdetail_cnt2 .inner .webgene-blog .webgene-item .cate{
 padding: 0 1em;
 font-size: 1.2rem;
  }

  .header {
    width: 100%;
    height: 8.5rem;

}
  .index_cnt3 .inner .col2 .left .illust {
    width: 21.28vw;
  }
  .index_cnt5 .inner .illust {
    width: 29.19vw;
    position: absolute;
    top: -6rem;
    right: 2.9375vw;
  }
  .footer .inner .col2 .left .logo {
    font-size: 2.5rem;
  }
  .about_cnt2 .inner .set>.col2 .right h4 {
    margin: 0 0 3rem;
}
  .about_cnt2 .inner .set .window h5 {
        padding: 2px 1.6vw;
  }
  .services_cnt6 .inner .illust {
    width: 28.229vw;
    position: absolute;
    right: -2.41vw;
    bottom: -8rem;
  }
      .services_cnt2 .inner .illust {
        bottom: initial;
        top: -6rem
        ;width: 16.28vw;

    }
  .services_cnt6 .inner .grid .dt .span,
  .services_cnt3 .inner .grid .dt .span {
        font-size: 1.6rem;
  }
  .services_cnt4 .inner .grid,
  .services_cnt7 .inner .grid {
    display: block;
  }
  .services_cnt3 .inner .grid .dl,
  .services_cnt6 .inner .grid .dl,
  :is(.methods_cnt3, .methods_cnt5) .inner .dl ,
.recruit_cnt3 .inner .grid .dl {
        padding: 4.08vw;
  }
  .staff .modal-body {
    padding: 2rem;
}
  .company_cnt1 .inner .col2 .right .flex .name {
    font-size: 2rem;
}
 
  .company_cnt1 .inner .illust {
    width: 24.86vw;
    min-width: 5rem;
    position: absolute;
    bottom: -1rem;
    left: 70%;
  }
      .services_cnt3 .inner .grid .dt {
        font-size: 1.8rem;
        padding: 0 1.5rem;
    }
      .services_cnt6 .inner .grid .dt {
        display: block;
        font-size: 1.8rem;
        padding: 0 1.5rem;
    }

}