@charset "UTF-8";



@media screen and (max-width: 1024px) {

    /*index*/
    .index .mainimg .window {
        width: 100%;
        top: 12rem;
        padding: 2rem;
        background: rgba(15, 15, 15, 0.7);
    }
    .index .mainimg .window .catch {
        font-size: 2rem;
    }
    .index .mainimg .window>p {
        font-size: 1.4rem;
    }
  .index .mainimg .window .flex{
    margin: 0 0 1rem;
  }
    .index .mainimg .window .flex p {
        font-size: 2.4rem;
    }
    .index .mainimg .window .flex .logo {
        max-width: 18rem;
    }

    .index_cnt1 {
        padding: 8rem 0;
    }
    .index_cnt1 .inner h3 {
        font-size: 2.4rem;
        line-height: 1.5;
        margin: 0 auto 4rem;
    }
    .index_cnt1 .inner .grid {}
    .index_cnt1 .inner .catch {
        height: auto;
        padding: 1.5rem 6%;
        font-size: 2.2rem;
        line-height: 1.5;
        position: initial;
        margin: 3rem 0 0;
    }
    .index_cnt1 .inner .grid .figure .pic {
        border: 0.5rem solid #fff;
        box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.4);
    }
    .index_cnt2 {
        padding: 8rem 0;
    }
    .index_cnt2 .inner>p {
        margin: 0 auto 5rem;
    }
    .index_cnt2 .inner .col2 .left .li {
        min-height: 3rem;
    }
    .index_cnt2 .inner .col2 .right {
        width: 100% !important;
        position: static;
        aspect-ratio: 9.3/5;
    }

    .index_cnt3 {
        padding: 8rem 0;
    }
    .index_cnt3 .inner .grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 4rem 2rem;
    }
    .index_cnt3 .inner .grid .dl:nth-of-type(2n) {
        border-right: none;
    }
    .index_cnt3 .inner .grid .pic {
        width: 8rem;
    }
    .index_cnt3 .inner .grid .dt {
        font-size: 2rem;
    }

    .index_cnt4 {
        padding: 8rem 0;
    }
    .index_cnt4 .inner .window form {
        display: block;
    }
    .index_cnt4 .inner .window form input {
        width: 100%;
        margin: 0 0 1rem;
    }
    .index_cnt4 .inner .window form button {
        width: 100%;
    }
    .index_cnt4 .inner .window .ul {
        grid-template-columns: 1fr;
    }

    .index_cnt5 {
        padding: 8rem 0 6rem;
    }
    .index_cnt5 .inner .col2 :is(.left, .right) {
        width: 100% !important;
        padding: 8% 6%;
    }

    .index_cnt6 {
        padding: 6rem 0;
    }
    .index_cnt6 .inner .dl {
        display: block;
        padding: 1.5rem 0;
    }
    .index_cnt6 .inner .dt {
        width: 100%;
        text-align: left;
        margin: 0 0 0.5rem;
    }
    .index_cnt6 .inner .dd {
        width: 100%;
    }

    .index_cnt7 {
        padding: 6rem 0 10rem;
    }
    .index_cnt7 .inner .webgene-blog .webgene-item .dl {
        flex-wrap: wrap;
        gap: 1rem 1.5rem;
    }
    .index_cnt7 .inner .webgene-blog .webgene-item .day {
        width: auto;
        text-align: left;
    }
    .index_cnt7 .inner .webgene-blog .webgene-item .cate {
        width: auto;
        padding: 0 1em;
    }
    .index_cnt7 .inner .webgene-blog .webgene-item .dt {
        width: 100%;
    }
.webgene-search-form-block{
    width: 100% !important;
}




    /*service*/
    .service_cnt1 {
        padding: 8rem 0;
    }
    .service_cnt1 .inner h3 {
        font-size: 2.4rem;
        line-height: 1.5;
    }
    .service_cnt1 .inner .flex {
        flex-wrap: wrap;
        gap: 1.5rem;
    }

    .service_cnt2 {
        padding: 8rem 0 10rem;
    }
    .service_cnt2 .inner .set {
        padding: 0 0 6rem;
    }
    .service_cnt2 .inner .set h5 {
        font-size: 2.2rem;
        margin: 6rem 0 2rem;
    }
    .service_cnt2 .inner .set .col2 {
        padding: 0 0 3rem;
        margin: 0 0 3rem;
        border-bottom: 0.1rem dashed #ccc;
    }
    .service_cnt2 .inner .set .col2 .left {
        border: 0.5rem solid #fff;
        box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.4);
    }
    .service_cnt2 .inner .set .col2 .right h4 {
        margin: 0 0 2rem;
    }
    .service_cnt2 .inner .set .grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .service_cnt2 .inner .set .dd .ul {
        display: block;
    }
    .service_cnt2 .inner .set .grid .pic {
        border: 0.5rem solid #fff;
        box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.4);
    }
    .service_cnt3 {
        padding: 8rem 0;
    }
    .service_cnt3 .inner .grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .service_cnt3 .inner .ul {
        display: block;
    }

    .service_cnt4 {
        padding: 8rem 0;
    }
    .service_cnt4 .col2 {
        width: 90%;
    }
    .service_cnt4 .col2 .right {
        display: none;
    }
    .service_cnt3 .inner .grid .pic {
        border: 0.5rem solid #fff;
        box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.4);
    }




    /*strength*/
    .strength_cnt1 {
        padding: 8rem 0 4rem;
    }
    .strength_cnt1 .inner .titleB h3 {
        font-size: 2.4rem;
        line-height: 1.5;
    }
    .strength_cnt2 {
        padding: 4rem 0 10rem;
    }
    .strength_cnt2 .inner .col2 {
        padding: 0 0 3rem;
        margin: 0 0 3rem;
        border-bottom: 0.1rem dashed #ccc;
    }
    .strength_cnt2 .inner .col2 .left {
        border: 0.5rem solid #fff;
        box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.4);
    }

    .strength_cnt2 .inner .col2 .right {
        margin: 2rem 0 0;
    }
    .strength_cnt2 .inner .col2 .right h4 {}
    .strength_cnt2 .inner .col2 .right h4::before {
        font-size: 4.4rem;
    }




    /*recruit*/
    .recruit_cnt1 {
        padding: 8rem 0;
    }
    .recruit_cnt1 .inner h3 {
        font-size: 2.4rem;
        line-height: 1.5;
    }
    .recruit_cnt1 .inner .flex {
        flex-wrap: wrap;
        gap: 1.5rem;
    }
    .recruit_cnt2 {
        padding: 8rem 0 10rem;
    }
    .recruit_cnt2 .inner .titleB {
        margin: 0 auto 5rem;
    }
    .recruit_cnt2 .inner .col2:not(:last-of-type) {
        padding: 0 0 3rem;
        margin: 0 0 3rem;
        border-bottom: 0.1rem dashed #ccc;
    }
    .recruit_cnt2 .inner .col2 .left {
        border: 0.5rem solid #fff;
        box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.4);
    }
    .recruit_cnt2 .inner .col2 .right {
        margin: 2rem 0 0;
    }
    .recruit_cnt2 .inner .col2 .right h4 {}
    .recruit_cnt2 .inner .col2 .right h4::before {
        font-size: 6rem;
    }
    .recruit_cnt2 .inner .window h4 {
        line-height: 1.5;
    }
    .recruit_cnt3 {
        padding: 8rem 0 10rem;
    }
    .recruit_cnt3 .inner .dl .dt {
        font-size: 1.9rem;
        display: block;
    }
    .recruit_cnt3 .inner .dl .dd:has(.table) {
        overflow-x: scroll;
    }
    .recruit_cnt3 .inner .dl .dd .table {
        min-width: 100rem;
    }
    .recruit_cnt3 .inner .dl .dd .table .tr {}
    .recruit_cnt3 .inner .dl .dd .table .tr .th {}
    .recruit_cnt4 {
        padding: 8rem 0;
    }




    /*contact / フォーム共通*/
    .contact_cnt1 {
        padding: 8rem 0;
    }
    .contact_cnt1 .inner .titleB * {
        text-align: center;
    }
    .contact_cnt1 .inner .tel {
        max-width: 100%;
    }
    .contact_cnt1 .inner .tel p a {
        font-size: 2.8rem;
    }
    .contact_cnt2 {
        padding: 8rem 0;
    }
    .contact_cnt2 .inner>p {
        margin: 0 0 5rem;
    }
    form .dl {
        display: block;
    }
    form .dl .dt {
        width: 100%;
        justify-content: flex-start;
        gap: 1rem;
        border-bottom: none;
        margin: 0 0 0.5rem;
    }
    form .dl .dd {
        width: 100%;
        padding-top: 0;
    }
    form input.zipInput {
        width: 60%;
    }
    form .col label {
        font-size: 1.2rem;
    }



    /*company*/
    .company_cnt1 {
        padding: 8rem 0;
    }
    .company_cnt1 .inner>p {
        margin: 0 0 4rem;
    }
    .company_cnt1 .inner .ceo .name {
        font-size: 2.3rem;
    }
    .company_cnt1 .inner .col2 {
        width: 90%;
    }
    .company_cnt1 .inner .col2 :is(.left, .right) {
        width: 100% !important;
        margin: 0 0 2rem;
        border: 0.5rem solid #fff;
        box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.4);
    }

    .company_cnt2 {
        padding: 8rem 0 10rem;
    }
    .company_cnt2 .inner .dl {
        display: block;
    }
    .company_cnt2 .inner .dt {
        width: 100%;
        min-height: 0;
        justify-content: flex-start;
        border-bottom: none;
        padding-bottom: 0;
    }
    .company_cnt2 .inner .dd {
        width: 100%;
        min-height: 0;
    }

    .company_cnt3 {
        padding: 8rem 0 4rem;
    }
    .company_cnt3 .inner .dl {
        flex-wrap: wrap;
        padding: 0 0 4rem 8vw;
    }
    .company_cnt3 .inner .dl::before {
        left: 3vw;
    }
    .company_cnt3 .inner .dl::after {
        left: calc(3vw - 0.75rem);
    }
    .company_cnt3 .inner .dt {
        min-width: 0;
        font-size: 1.8rem;
    }
    .company_cnt3 .inner .cmt {
        width: 100%;
        margin: 1rem 0 0;
    }

    .company_cnt4 {
        padding: 4rem 0;
    }
    .company_cnt4 .inner .dd .col2 :is(.left, .right) {
        width: 100% !important;
    }
    .company_cnt5 {
        padding: 4rem 0 8rem;
    }




    /*blog & blogdetail*/
    :is(.blog_cnt1, .blogdetail_cnt1) {
        padding: 8rem 0 4rem;
    }
    :is(.blog_cnt1, .blogdetail_cnt1) .inner {
        display: block;
    }
    :is(.blog_cnt1, .blogdetail_cnt1) .inner h3 {
        width: 100%;
        margin: 0 0 2rem;
    }
    :is(.blog_cnt1, .blogdetail_cnt1) .inner .webgene-blog {
        flex-wrap: wrap;
        gap: 1.5rem;
        padding: 0;
    }
    :is(.blog_cnt2, .blogdetail_cnt2) {
        padding: 0 0 10rem;
    }
    .blog_cnt2 .inner .webgene-blog .webgene-item {
        border: none;
    }
    .blog_cnt2 .inner .webgene-blog .webgene-item .dl {
        display: block;
    }
    .blog_cnt2 .inner .webgene-blog .webgene-item .day {
        margin: 1rem 0 0;
    }
    .blog_cnt2 .inner .webgene-blog .webgene-item .cate {
        margin: 0.5rem 0;
    }
    .blog_cnt2 .inner .webgene-blog .webgene-item .pic {
        max-width: 40rem;
        margin: 0 0 1.5rem;
    }
    .blog_cnt2 .inner .webgene-blog .webgene-item .dl {
        padding: 0 0 3rem;
        margin: 0 0 3rem;
        border-bottom: 0.1rem dashed #ccc;
    }
    .blog_cnt2 .inner .webgene-blog .webgene-item .pic {
        border: 0.5rem solid #fff;
        box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.4);
    }



    /*product*/
    .product_cnt1 {
        padding: 8rem 0;
    }
    .product_cnt1 .inner .window form {
        display: block;
    }
    .product_cnt1 .inner .window form input {
        width: 100%;
        margin: 0 0 1rem;
    }
    .product_cnt1 .inner .window form button {
        width: 100%;
    }
    .product_cnt1 .inner .window .ul {
        grid-template-columns: 1fr;
    }
    .product_cnt2 {
        padding: 8rem 0 10rem;
    }
    .product_cnt2 .inner .webgene-blog {
        display: block;
    }
    .product_cnt2 .inner .window {
        width: 100%;
    }




    /*productdetail*/
    .productdetail_cnt1 {
        padding: 8rem 0 10rem;
    }
    .productdetail_cnt1 .inner .dl {
        gap: 1rem;
    }
    .productdetail_cnt1 .inner .dt {
        width: 35%;
    }
    .productdetail_cnt1 .inner .dd {
        width: 65%;
    }
    .productdetail_cnt1 .inner .window {
        width: 100%;
    }
    .product_cnt2 .inner .webgene-blog .webgene-item .dl {
        padding: 0 0 3rem;
        margin: 0 0 3rem;
        border-bottom: 0.1rem dashed #ccc;
    }
    .product_cnt2 .inner .webgene-blog .webgene-item .pic {
        border: 0.5rem solid #fff;
        box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.4);
    }
    /*works*/
    .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;
    }





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




}

/* スマホ */
@media screen and (max-width: 767px) {
  .header {height: 7rem;}
  .index_cnt1 .inner .grid {
    grid-template-columns: 1fr;
    gap: 5.08vw;
  }
  .index_cnt1 .inner h3,.service_cnt1 .inner h3,.titleB h3 {font-size: 2.2rem !important;}
  .index_cnt3 .inner .grid,.service_cnt2 .inner .set .grid,.service_cnt3 .inner .grid {grid-template-columns: 1fr;}
  .index_cnt3 .inner .grid .dl {border-right: none;}
  .footer .inner>p:not(.copyright) {font-size: 1.5rem;}
  .service_cnt2 .inner .set .col2 .right .sub,.company_cnt4 .inner .dt {font-size: 2rem;}
  .strength_cnt2 .inner .col2 .right h4::before,.recruit_cnt2 .inner .col2 .right h4::before {content: none !important;}

}
/* タブレット */
@media (min-width:767px) and (max-width:1024px){
  .index_cnt5 .inner .col2,.bottom .inner .flex,.company_cnt1 .inner .col2,.company_cnt2 .inner .dl,form .dl {
    display: flex !important;}
  .index_cnt5 .inner .col2 .left,.company_cnt1 .inner .col2 :is(.left, .right) {
    margin: 0 !important;}
  .bottom .inner * {
        text-align: left;
    }
  .product_cnt2 .inner .webgene-blog {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5625vw;
}
      .company_cnt2 .inner .dt {
        width: 25%;
        border-bottom: 0.1rem solid #c2c2c2;}
  form .dl .dt {
    width: 40%;
      border-bottom: 0.1rem solid #c2c2c2;
  margin: 0;}
}
@media screen and (max-width: 1024px) {
  /*.index_cnt1 .inner .grid .figure .pic,.service_cnt2 .inner .set .col2 .left,.service_cnt2 .inner .set .grid .pic,
  .service_cnt3 .inner .grid .pic,.strength_cnt2 .inner .col2 .left,.company_cnt1 .inner .col2 :is(.left, .right),
  .recruit_cnt2 .inner .col2 .left,.product_cnt2 .inner .webgene-blog .webgene-item .pic{border: none;}*/
      .service_cnt2 .inner .set .dd .ul {
        display: block;
        overflow-y: auto;
        scrollbar-color: var(--blue_dark) var(--grey);
        max-height: 375px;
    }
    .calendar-box iframe {
    width: 100%;
    aspect-ratio: 1 / 1;
    border: none;
}
}
/* PC（768px以上） */
@media screen and (min-width: 768px) {
  .spbr br{display:none;}
}
/* PC（1025px以上） */
@media screen and (min-width: 1025px) {
}