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





    /*index*/
    .index .mainimg,
    .index .mainimg .slider img {
        height: 60rem;
    }
    .index .mainimg .window {
        left: 6%;
        top: auto;
        bottom: 8rem;
    }
    .index .mainimg .window h2 {
        font-size: 3.6rem;
    }
    .index .mainimg .window .en {
        font-size: 1.4rem;
        letter-spacing: 0.02em;
        margin: 0 0 1.6rem;
    }
    .index .mainimg .window .tag .li {
        height: 3.2rem;
        font-size: 1.6rem;
        padding: 0 1rem;
    }

    .index_cnt1 {
        padding: 6rem 0 4rem;
    }
    .index_cnt1 .col2 {
        flex-direction: column;
        gap: 0;
        margin: 0 0 4rem;
    }
    .index_cnt1 .col2 .left {
        width: 80% !important;
        max-width: 50.3rem;
        margin: 0 0 14rem;
    }
    .index_cnt1 .col2 .left .pic2 {
        width: 70%;
        left: auto;
        right: -20%;
        bottom: -10rem;
    }
    .index_cnt1 .col2 .right {
        width: 100%;
        max-width: none;
        padding: 0;
    }
    .index_cnt1 .col2 .right h3 {
        font-size: 2.3rem;
        line-height: 1.7;
        margin: 0 0 2rem;
    }
    .index_cnt1 .col2 .right .cmt {
        margin: 0 0 3rem;
    }
    .index_cnt1 .col2 .right .cmt br {
        display: none;
    }
    .index_cnt1 .loop .track p {
        font-size: 6rem;
        padding: 0 0 0 3rem;
    }

    .index_cnt2 {
        padding: 6rem 0 8rem;
    }
    .index_cnt2::before {
        width: 16rem;
        height: 5.8rem;
        left: auto;
        right: 2%;
        top: 4rem;
    }
    .index_cnt2 h3 {
        font-size: 2.4rem;
        margin: 0 0 3rem;
    }
    .index_cnt2 .grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 2.4rem 1.6rem;
        margin: 0 0 4rem;
    }
    .index_cnt2 .grid .li .arrow {
        font-size: 1.4rem;
        gap: 0.8rem;
    }
    .index_cnt2 .grid .li .arrow::after {
        width: 3rem;
        height: 3rem;
    }

    .index_cnt3 {
        padding: 6rem 0;
    }
    .index_cnt3 .col2 {
        flex-direction: column;
        gap: 3rem;
    }
    .index_cnt3 .col2 .left {
        width: 100% !important;
    }
    .index_cnt3 .col2 .right {
        width: 100%;
        max-width: none;
        padding: 0;
    }
    .index_cnt3 .col2 .right h3 {
        font-size: 2.4rem;
        margin: 0 0 2rem;
    }
    .index_cnt3 .col2 .right .cmt {
        margin: 0 0 3rem;
    }

    .index_cnt4 {
        padding: 6rem 0;
    }
    .index_cnt4 h3 {
        font-size: 2.4rem;
        margin: 0 0 3rem;
    }
    .index_cnt4 .webgene-blog {
        grid-template-columns: 1fr;
        gap: 3rem;
        margin: 0 0 4rem;
    }

    .index_cnt5 {
        padding: 0 0 6rem;
    }
    .index_cnt5 .banner {
        height: auto;
        background-size: 18rem;
        flex-direction: column;
    }
    .index_cnt5 .banner .pic {
        width: 100%;
        aspect-ratio: 360/248;
    }
    .index_cnt5 .banner .txt {
        padding: 2.4rem 2rem 3rem;
    }
    .index_cnt5 .banner h3 {
        font-size: 2.4rem;
        margin: 0 0 1.6rem;
    }
    .index_cnt5 .banner .txt p {
        font-size: 1.4rem;
        line-height: 1.9;
    }
    .index_cnt5 .banner .txt p br {
        display: none;
    }





    /*service*/
    .service_cnt1 {
        padding: 6rem 0;
    }
    .service_cnt1 h3 {
        font-size: 2.3rem;
        line-height: 1.6;
        margin: 0 0 2rem;
    }
    .service_cnt1 .cmt br {
        display: none;
    }

    /*緑背景の共通装飾（松・波）service&natural&nakayama*/
    :is(.service_cnt3, .natural_cnt2, .nakayama_cnt3)::before {
        width: 16rem;
        height: 5.8rem;
        left: auto;
        right: 2%;
        top: 4rem;
    }

    :is(.service_cnt2, .service_cnt3) .col2 {
        flex-direction: column;
        gap: 2rem;
    }
    :is(.service_cnt2, .service_cnt3) .col2:not(:last-child) {
        margin: 0 0 3rem;
        padding:0 0 3rem;
        border-bottom: 0.1rem dashed #ccc;
    }
    :is(.service_cnt2, .service_cnt3) .col2 .right {
        width: 100% !important;
        order: -1;
    }
    :is(.service_cnt2, .service_cnt3) .col2 h4 {
        font-size: 2rem;
        line-height: 1.6;
        margin: 0 0 1rem;
    }
    :is(.service_cnt2, .service_cnt3) .col2 .cmt {
        margin: 0 0 2rem;
    }
    :is(.service_cnt2, .service_cnt3) .col2 .cmt br {
        display: none;
    }
    .service_cnt2 {
        padding: 6rem 0;
    }
    :is(.service_cnt2, .service_cnt3) .titleA {
        margin: 0 0 3rem;
    }
    .service_cnt3 {
        padding: 6rem 0 8rem;
    }





    /*product&blog&blogdetail共通（左カテゴリ＋右一覧）*/
    :is(.product_cnt1, .blog_cnt1, .blogdetail_cnt1) {
        height: auto;
    }
    :is(.product_cnt1, .blog_cnt1, .blogdetail_cnt1) .inner h3 {
        font-size: 1.8rem;
        margin: 0 0 1rem;
    }
    :is(.product_cnt1, .blog_cnt1, .blogdetail_cnt1) .inner .webgene-blog {
        display: flex;
        flex-wrap: wrap;
        gap: 0 2.4rem;
    }
    :is(.product_cnt1, .blog_cnt1, .blogdetail_cnt1) .inner .webgene-item {
        line-height: 2.6;
    }
    :is(.product_cnt1, .blog_cnt1, .blogdetail_cnt1) .inner .webgene-item::before {
        width: 0.7rem;
        height: 0.7rem;
        margin: 0 1rem 0 0;
    }
    :is(.product_cnt2, .blog_cnt2, .blogdetail_cnt2) .inner .webgene-blog {
        padding: 0 !important;
    }
    :is(.product_cnt2, .blog_cnt2) .inner .webgene-pagination {
        margin: 4rem 0 0 !important;
    }

    /*product*/
    .product_cnt1 .inner {
        padding: 5rem 0 3rem;
    }
    .product_cnt2 {
        padding: 0 0 6rem;
    }
    .product_cnt2 .inner .webgene-blog {
        grid-template-columns: repeat(2, 1fr);
        gap: 2.4rem 1.6rem;
    }
    .product_cnt2 .inner .webgene-item .dt {
        font-size: 1.4rem;
    }





    /*productdetail*/
    .productdetail_cnt1 {
        padding: 4rem 0 6rem;
    }
    .productdetail_cnt1 .inner .webgene-item .dl {
        display: flex;
        flex-direction: column;
    }
    .productdetail_cnt1 .inner .webgene-item .dt {
        width: 100%;
        font-size: 2.2rem;
        margin: 0 0 3rem;
    }
    .productdetail_cnt1 .inner .webgene-item .pic {
        width: 100%;
        margin: 0 0 3rem;
    }
    .productdetail_cnt1 .inner .webgene-item .catch {
        font-size: 2rem;
        line-height: 1.7;
        margin: 0 0 1.6rem;
    }
    .productdetail_cnt1 .inner .webgene-item .cmt {
        margin: 0 0 4rem;
    }
    .productdetail_cnt1 .inner .webgene-item .feature {
        margin: 0 0 4rem;
    }
    .productdetail_cnt1 .inner .webgene-item :is(.feature, .info) h3 {
        font-size: 2rem;
        margin: 0 0 1.4rem;
    }
    .productdetail_cnt1 .inner .webgene-item :is(.feature, .info) p {
        line-height: 2.2;
    }
    .productdetail_cnt1 .inner .webgene-blog {
        margin: 0 0 5rem;
    }





    /*natural*/
    .natural_cnt1 {
        padding: 5rem 0 6rem;
    }
    :is(.natural_cnt1, .natural_cnt2) .read {
        line-height: 2.2;
        margin: 0 0 3rem;
    }
    .natural_cnt1 .grid {
        grid-template-columns: 1fr;
        gap: 2.4rem;
    }
    .natural_cnt1 .grid .dt {
        height: 4.6rem;
        margin: 0 0 1.6rem;
        font-size: 2rem;
    }
    .natural_cnt1 .grid .pic {
        margin: 0 1.6rem 1.4rem;
    }
    .natural_cnt1 .grid .catch {
        font-size: 1.9rem;
        margin: 0 0 1rem;
    }
    .natural_cnt1 .grid .list {
        padding: 0 1.6rem;
    }
    .natural_cnt1 .grid .list .li {
        font-size: 1.4rem;
        line-height: 2;
    }
    .natural_cnt1 .grid .list .li::before {
        width: 2.2rem;
    }

    .natural_cnt2 {
        padding: 6rem 0 8rem;
    }
    .natural_cnt2 .titleA {
        margin: 0 0 2rem;
    }
    .natural_cnt2 .window {
        margin: 0 0 5rem;
    }
    .natural_cnt2 .window h4 {
        font-size: 2.2rem;
        margin: 0 0 2rem;
        padding: 0 0 0.6rem;
    }
    .natural_cnt2 .window .col2 {
        flex-direction: column;
        gap: 2rem;
    }
    .natural_cnt2 .window .col2 .left {
        width: 100%;
    }
    .natural_cnt2 .window .col2 .right {
        padding: 0;
    }
    .natural_cnt2 .window .col2 .right p:not(.buttonB) {
        line-height: 2;
        margin: 0 0 2.4rem;
    }
    .natural_cnt2 .window .col2 .right p br {
        display: none;
    }
    .natural_cnt2 .grid {
        grid-template-columns: 1fr;
        row-gap: 3.6rem;
    }
    .natural_cnt2 .grid .dl {
        grid-template-columns: 12rem 1fr;
        column-gap: 1.6rem;
    }
    .natural_cnt2 .grid .dt {
        font-size: 2rem;
        margin: 0 0 1.4rem;
    }
    .natural_cnt2 .grid .cmt {
        font-size: 1.4rem;
        line-height: 1.9;
        margin: 0;
    }

    .natural_cnt3 {
        padding: 6rem 0;
    }
    .natural_cnt3 .col2 {
        flex-direction: column;
    }
    .natural_cnt3 .col2 .left {
        width: 100%;
        margin: 0 0 3rem;
    }
    .natural_cnt3 .col2 .left h3 {
        font-size: 2.4rem;
        margin: 0 0 1.4rem;
    }
    .natural_cnt3 .col2 .left .read br {
        display: none;
    }
    .natural_cnt3 .col2 .left .read {
        line-height: 2;
        margin: 0 0 2.4rem;
    }
    .natural_cnt3 .col2 .right {
        width: calc(100% + 6%);
        margin: 0;
    }
    .natural_cnt3 .slider .li {
        width: 24rem;
        margin: 0 1.6rem 0 0;
    }





    /*blog*/
    .blog_cnt1 .inner {
        padding: 5rem 0 3rem;
    }
    .blog_cnt2 {
        padding: 0 0 6rem;
    }
    .blog_cnt2 .inner .webgene-blog {
        grid-template-columns: repeat(2, 1fr);
        gap: 3rem 1.6rem;
    }

    /*blogdetail*/
    .blogdetail_cnt1 .inner {
        padding: 5rem 0 3rem;
    }
    .blogdetail_cnt2 {
        padding: 0 0 6rem;
    }
    .blogdetail_cnt2 .inner .webgene-blog {
        margin: 0 0 5rem;
    }
    .blogdetail_cnt2 .inner .webgene-item .dt {
        font-size: 1.9rem;
        line-height: 1.6;
    }
    .blogdetail_cnt2 .inner .webgene-item .pic {
        margin: 0 0 2.4rem;
    }
    .blogdetail_cnt2 .inner .webgene-item .cmt {
        line-height: 2.2;
        padding: 0;
    }





    /*nakayama*/
    .nakayama_cnt1 {
        padding: 6rem 0;
    }
    .nakayama_cnt1 .col2 {
        flex-direction: column;
        gap: 3rem;
    }
    .nakayama_cnt1 .col2 .left {
        width: 100% !important;
    }
    .nakayama_cnt1 .col2 .right {
        width: 100%;
        max-width: none;
        padding: 0;
    }
    .nakayama_cnt1 .col2 .right h3 {
        font-size: 2.4rem;
        margin: 0 0 1.6rem;
    }
    .nakayama_cnt2 {
        padding: 6rem 0;
    }
    .nakayama_cnt2 .caution {
        height: auto;
        min-height: 3.4rem;
        font-size: 1.4rem;
        margin: 0 0 2rem;
        padding: 0.4rem 1.4rem;
    }
    .nakayama_cnt2 .titleA {
        margin: 0 0 1.6rem;
    }
    .nakayama_cnt2 .read {
        line-height: 2.2;
        margin: 0 0 3rem;
    }
    .nakayama_cnt2 .read br {
        display: none;
    }
    :is(.nakayama_cnt2, .nakayama_cnt3) .grid {
        grid-template-columns: 1fr;
        gap: 3.6rem;
    }
    :is(.nakayama_cnt2, .nakayama_cnt3) .grid .dt {
        font-size: 1.9rem;
    }
    .nakayama_cnt3 {
        padding: 6rem 0 8rem;
    }
    .nakayama_cnt3 .titleA {
        margin: 0 0 3rem;
    }





    /*company*/
    .company_cnt1 {
        padding: 5rem 0 7rem;
    }
    .company_cnt1 .titleA {
        margin: 0 0 2.4rem;
    }
    .company_cnt1 .col2 {
        flex-direction: column;
        gap: 3rem;
        margin: 0 0 4rem;
    }
    .company_cnt1 .col2 .left,
    .company_cnt1 .col2 .right {
        width: 100% !important;
        max-width: none;
    }
    .company_cnt1 .col2 .right h4 {
        font-size: 2.1rem;
    }
    .company_cnt1 .col2 .right .read {
        line-height: 2;
        margin: 0 0 2rem;
    }
    :is(.company_cnt1, .company_cnt2) .info .dl {
        flex-direction: column;
        line-height: 1.8;
        padding: 1.2rem 0.4rem !important;
    }
    :is(.company_cnt1, .company_cnt2) .info .dt {
        width: 100% !important;
        margin: 0 0 0.4rem;
    }
    .company_cnt1 .map iframe {
        height: 30rem;
    }
    .company_cnt2 {
        padding: 0 0 7rem;
    }
    .company_cnt2 .col2 {
        flex-direction: column;
        gap: 2rem;
    }
    .company_cnt2 .titleA {
        margin: 0;
    }
    .company_cnt2 .info {
        width: 100%;
    }
    .company_cnt3 {
        padding: 0 0 6rem;
    }
    .company_cnt3 .titleA {
        margin: 0 0 3rem;
    }
    .company_cnt3 .grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.6rem;
    }
    .company_cnt3 .grid p {
        font-size: 1.4rem;
        padding: 0 0 0 0.4rem;
    }





    /*contact&formcomplete*/
    .contact_cnt1 {
        padding: 5rem 0 0;
    }
    .contact_cnt1 .read {
        line-height: 2;
        margin: 0 0 3rem;
    }
    .contact_cnt1 .grid {
        flex-direction: column;
    }
    .contact_cnt1 .grid > .dl {
        width: 100%;
        height: auto;
        padding: 2.4rem 0;
    }
    .contact_cnt1 .grid .tel .dl {
        gap: 1.6rem;
    }
    .contact_cnt1 .grid .tel .telA .dd,
    .contact_cnt1 .grid .fax .dd {
        font-size: 2.6rem;
    }
    .contact_cnt1 .grid .tel .telB .dd {
        width: 18.8rem;
        font-size: 1.7rem;
    }
    .contact_cnt2 {
        padding: 5rem 0 6rem;
    }
    .contact_cnt2 form > .dl {
        flex-direction: column;
        align-items: stretch !important;
        padding: 1.6rem 0;
    }
    .contact_cnt2 form > .dl .dt {
        width: 100%;
        padding: 0 !important;
        margin: 0 0 1rem;
    }
    .contact_cnt2 .labelText01 {
        width: auto;
        margin: 0 1rem 0 0;
    }
    .contact_cnt2 .radioArea {
        flex-direction: column;
        gap: 1.2rem;
        padding: 0;
    }
    .contact_cnt2 :is(.formInput, .formTextArea) {
        padding: 0 1.2rem;
    }
    .contact_cnt2 .formTextArea {
        padding: 1.2rem;
    }
    .contact_cnt2 .terms {
        height: 24rem;
        font-size: 1.3rem;
        margin: 2.4rem 0 3rem;
        padding: 1.2rem;
    }
    .contact_cnt2 .col {
        margin: 0 0 4rem;
    }
    .contact_cnt2 .privacyLabel {
        font-size: 1.4rem;
    }
    .contact_cnt2 .inner > p {
        line-height: 2.2;
    }
}