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




    /*index*/
    .index .mainimg {
        height: 50rem;
    }
    .index .mainimg h2 {
        width: 80%;
        font-size: 2.5rem;
        line-height: 1.5;
        text-align: center;
        margin: 8rem auto 2rem;
    }
    .index .mainimg .read {
        width: 80%;
        font-size: 1.7rem;
        margin: 0 auto 3rem;
    }
    .index .mainimg .slider .pic:nth-last-of-type(even) {
        margin: 2rem 2rem 0;
    }

    .index_cnt1 {
        margin: -8rem 0 0;
        padding: 12rem 0 5rem;
    }
    .index_cnt1 .inner .titleA h3{
        font-size: 2rem !important;
    }
    .index_cnt1 .inner .ul {
        grid-template-columns: 1fr;
        /*repeat(3,1fr)を上書き*/
        gap: 1rem;
        margin: 0 auto 3rem;
    }
    .index_cnt1 .inner .window {
        margin: 0 auto 3rem;
        padding: 1.5em 5em 1.5em 1.5em;
    }
    .index_cnt1 .inner .window::before {
        height: 15rem;
        min-width: 9rem;
    }
    .index_cnt1 .inner .window p {
        font-size: 2rem;
    }
    .index_cnt1 .inner .buttonA {
        margin: 0 auto 3rem;
    }

    .index_cnt2 {
        padding: 5rem 0;
    }
    .index_cnt2 .inner .grid {
        grid-template-columns: repeat(2, 1fr);
        /*repeat(3,1fr)を上書き*/
        gap: 1.5rem;
        margin: 0 auto 3rem;
    }
    .index_cnt2 .inner>p {
        margin: 0 auto 3rem;
    }

    .index_cnt3 {
        padding: 5rem 0;
    }
    .index_cnt3 .inner .col2 {
        flex-direction: column;
        gap: 2.5rem;
    }
    .index_cnt3 .inner .col2 .left,
    .index_cnt3 .inner .col2 .right {
        width: 100%;
    }
    .index_cnt3 .inner .col2 .right .typeA {
        flex-wrap: wrap;
        margin: 0 0 3rem;
    }
    .index_cnt3 .inner .col2 .right .typeB {
        grid-template-columns: 1fr;
        /*repeat(2,1fr)を上書き*/
        gap: 1rem;
    }
    .index_cnt3 .inner .col2 .right .typeB .li {
        font-size: 1.8rem;
    }
    .index_cnt4 {
        padding: 5rem 0;
    }
    .index_cnt4 .inner .webgene-blog {
        grid-template-columns: 1fr;
        /*repeat(3,1fr)を上書き*/
        gap: 2rem;
        margin: 0 auto 3rem;
    }
    .index_cnt4 .inner .webgene-blog .webgene-item {
        margin: 0 0 3rem;
        padding: 0 0 3rem;
        border-bottom: 0.1rem dashed #ccc;
    }
    .index_cnt4 .inner .buttonA {
        margin: 0 auto 3rem;
    }

    .index_cnt5 {
        padding: 5rem 0 8rem;
    }
    .index_cnt5 .inner .col2 {
        flex-direction: column;
        gap: 3rem;
    }
    .index_cnt5 .inner .col2 .left,
    .index_cnt5 .inner .col2 .right {
        width: 100%;
    }
    .index_cnt5 .inner .col2 .left>p:not(.tel, .line) {
        margin: 0 0 3rem;
    }
    .index_cnt5 .inner .col2 .left .tel a {
        max-width: 100%;
    }
    .index_cnt5 .inner .col2 .left .line a {
        max-width: 100%;
    }




    /*form（index_cnt5・contact共通）*/
    form .dl {
        margin: 0 0 1.5rem;
    }
    form input[type="text"],
    form input[type="email"],
    form textarea {
        min-height: 4.5rem;
    }
    form .terms {
        height: 18rem;
        padding: 1.5rem;
    }




    /*about*/
    .about_cnt1 {
        padding: 5rem 0;
    }
    /*【重要】about_cnt1のtitleAはgrid-row指定があるため、SP用にdisplayをblockへ変更*/
    .about_cnt1 .inner .titleA {
        display: block;
    }
    .about_cnt1 .inner .titleA h3 {
        grid-row: initial;
        margin: 0 0 1rem;
    }
    .about_cnt1 .inner .titleA p {
        margin: 0 0 1rem;
    }
    .about_cnt1 .inner .titleA .read {
        font-size: 3rem;
        grid-row: initial;
    }
    .about_cnt1 .inner .titleA .read {
        grid-row: initial;
        font-size: 2.4rem;
    }
    .about_cnt1 .inner [class^="pic"] {
        display: none;
        /*SP では円形画像を非表示*/
    }
    .about_cnt1 .inner>p {
        line-height: 2;
    }

    .about_cnt2 {
        padding: 5rem 0;
    }
    .about_cnt2 .inner .col2 {
        margin: 0 0 3rem;
        padding: 0 0 3rem;
        border-bottom: 0.1rem dashed #ccc;
    }
    .about_cnt2 .inner .col2 .left {
        border: 1rem solid #fff;
    }
    /*【重要】:nth-of-type(even)のflex-direction:row-reverseを上書き*/
    .about_cnt2 .inner .col2,
    .about_cnt2 .inner .col2:nth-of-type(even) {
        flex-direction: column;
        gap: 2rem;
    }
    .about_cnt2 .inner .col2 .left,
    .about_cnt2 .inner .col2 .right {
        width: 100%;
    }
    .about_cnt2 .inner .col2:nth-of-type(2) .left {
        border: none;
    }
    .about_cnt2 .inner .col2:not(:last-of-type) {
        margin: 0 0 5rem;
    }
    .about_cnt2 .inner .col2 .right h4 {
        margin: 0 0 2rem;
    }

    .about_cnt3 {
        padding: 5rem 0;
    }
    /*【重要】flex-direction:row-reverseを上書き*/
    .about_cnt3 .inner .col2 {
        flex-direction: column;
        gap: 3rem;
    }
    .about_cnt3 .inner .col2 .left,
    .about_cnt3 .inner .col2 .right {
        width: 100%;
    }
    .about_cnt3 .inner .col2 .left .pic {
        width: 50%;
        margin: 0 auto 1rem;
    }
    .about_cnt3 .inner .col2 .left p {
        text-align: center;
    }

    .about_cnt4 {
        padding: 5rem 0 0;
    }
    .about_cnt4 .inner .dl {
        flex-direction: column;
        gap: 0;
        min-height: auto;
    }
    .about_cnt4 .inner .dl .dt {
        width: 100%;
        padding: 0.8rem 1rem;
        border-bottom: none;
        background: #f0f6fa;
        font-size: 1.4rem;
    }
    .about_cnt4 .inner .dl .dd {
        width: 100%;
        padding: 0.8rem 1rem;
        line-height: 1.8;
    }
    .about_cnt4 .inner .map {
        height: 25rem;
        margin: 5rem auto 0;
    }




    /*service*/
    .service_cnt1 {
        padding: 5rem 0;
    }
    .service_cnt1 .inner .titleA .read {
        font-size:1.9rem;
    }
    .service_cnt1 .inner .titleA h3 {
        font-size: 1.9rem !important;
    }
    .service_cnt1 .inner .grid {
        display: block;
        margin: 0 auto 3rem;
    }
    .service_cnt1 .inner .grid .set{
        margin: 0 0 3rem;
        padding: 0 0 3rem;
        border-bottom: 0.1rem dashed #ccc;
    }
    .service_cnt1 .inner .grid .set h4 {
        font-size: 1.7rem !important;
    }
    .service_cnt1 .inner>p {
        margin: 0 auto 3rem;
    }
    .service_cnt1 .inner .window {
        padding: 2rem;
        background-size: cover;
    }

    .service_cnt2 {
        padding: 5rem 0;
    }
    .service_cnt2 .inner .dl {
        flex-direction: column;
        gap: 1.5rem;
        padding: 2rem;
    }
    .service_cnt2 .inner .dl:not(:last-of-type) {
        margin: 0 0 4rem;
        /*矢印マーカー分の余白を確保*/
    }
    .service_cnt2 .inner .dt {
        width: 100%;
        font-size: 2.4rem;
        padding: 0 0 0 5rem;
    }
    .service_cnt2 .inner .dd {
        width: 100%;
    }
    .service_cnt2 .inner .catch {
        font-size: 2rem;
    }

    .service_cnt3 {
        padding: 5rem 0;
    }
    .service_cnt3 .inner .dl {
        padding: 1.5rem;
    }
    .service_cnt3 .inner .dt {
        font-size: 2.4rem;
        margin: 0 0 2rem;
    }
    .service_cnt3 .inner .answer {
        font-size: 2rem;
    }

    .service_cnt4 {
        padding: 5rem 0;
    }
    .service_cnt4 .inner .col2 {
        flex-direction: column;
        gap: 4rem;
        margin: 0 auto 2rem;
    }
    .service_cnt4 .inner .col2 :is(.left, .right) {
        width: 100%;
        position: relative;
    }
    /*【重要】dtのposition:absoluteを解除してフロー内に戻す*/
    .service_cnt4 .inner .col2 :is(.left, .right) .dt {
        position: relative;
        left: auto;
        top: auto;
        margin: 0 0 -1.8rem;
        width: fit-content;
    }
    .service_cnt4 .inner .col2 .left::after {
        content: "";
        background: #2a2a2a;
        width: 5rem;
        height: 2.5rem;
        display: inline-block;
        clip-path: polygon(0 0, 100% 0, 50% 100%);
        position: absolute;
        left: calc(50% - 2.5rem);
        bottom: -2.5rem;
    }
    .service_cnt4 .inner .flex {
        flex-wrap: wrap;
        gap: 1rem;
    }

    .service_cnt5 {
        padding: 5rem 0 12rem;
    }
    .service_cnt5 .slider :is(.slick-prev, .slick-next) {
        bottom: -8rem;
    }




    /*blog & blogdetail 共通*/
    :is(.blog_cnt1, .blogdetail_cnt1) .inner {
        flex-direction: column;
        gap: 1rem;
    }
    :is(.blog_cnt1, .blogdetail_cnt1) .inner h3 {
        width: 100%;
    }
    :is(.blog_cnt1, .blogdetail_cnt1) .inner .webgene-blog {
        width: 100%;
        flex-wrap: wrap;
    }




    /*blog*/
    :is(.blog_cnt1, .blogdetail_cnt1) .inner .webgene-blog .webgene-item {
        width: 100%;
    }
    :is(.blog_cnt1, .blogdetail_cnt1) .inner .webgene-blog .webgene-item p {
        width: 100%;
    }
    .blog_cnt2 .inner .webgene-blog {
        grid-template-columns: repeat(2, 1fr);
        /*repeat(3,1fr)を上書き*/
        gap: 1.5rem;
    }
    .webgene-pagination {
        grid-column: span 2;
    }
    .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;
    }




    /*blogdetail*/
    .blogdetail_cnt2 .inner .webgene-blog .webgene-item {
        padding: 2rem;
        margin: 0 auto 3rem;
    }
    .blogdetail_cnt2 .inner .webgene-blog .webgene-item .dt {
        font-size: 2.4rem;
    }
    .blogdetail_cnt2 .inner .webgene-blog .webgene-item .pic {
        margin: 0 0 3rem;
    }
    /*日付とカテゴリのmargin:0 0 0 6emを解除*/
    .blogdetail_cnt2 .inner .webgene-blog .webgene-item .cate {
        margin: 0;
    }




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

}

@media screen and (max-width: 768px) {
.index_cnt1 .inner .li {
  font-size: 1.6rem;
  }
    .index_cnt1 .inner .window p {
        font-size: 1.6rem;
        text-align: left;
    }
  .index_cnt2 .inner .grid .figcaption {
    width: 95%;
    height: 3rem;
  }
.about_cnt3 .inner .col2 .right .catch {
    font-size: 2rem;
  }
  
.service_cnt1 .inner .catch {
    font-size: 1.8rem;
  }
  
  .service_cnt2 .inner .dt::before {
    font-size: 1.3rem;
  }
  .service_cnt2 .inner .dt::after {
      font-size: 2rem;
  } 
      .service_cnt2 .inner .dt {
      font-size: 1.9rem;
  }
      .service_cnt3 .inner .dt {
        font-size: 1.9rem;
  }
      .service_cnt3 .inner .answer {
        font-size: 1.8rem;
  }
}