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

    /*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;
    }


    /* ===== ↓スマホ最適化 追加（各ページ） ===== */

    /*------- index -------*/
    .index .mainimg h2 {
        position: static;
        left: auto;
        bottom: auto;
        font-size: 2.6rem;
        line-height: 1.5;
        margin: 0 0 2rem;
        -webkit-text-stroke: 0.1rem #fff;
    }
  .index .mainimg .pic{height:initial;}
    .index .mainimg .slider .pic {
        margin: 0 1rem;
    }
    .index_cnt1 {
        padding: 6rem 0 4rem;
    }
    .index_cnt1 .inner .col2 .right {
        height: auto;
        max-height: 40rem;
    }
    .index_cnt1 .inner .col2 .right .dl {
        display: block;
        gap: 1rem;
        padding: 1.5rem 0.5rem;
    }
    .index_cnt1 .inner .col2 .right .dt {
        width: 100%;
    }
    .index_cnt1 .inner .col2 .right .dd {
        width: 100%;
    }
    .index_cnt2 {
        padding: 5rem 0;
    }
    .index_cnt2 .inner .col2 .left .pic1 {
        width: 70%;
    }
    .index_cnt2 .inner .col2 .left .pic2 {
        top: auto;
        bottom: 0;
        right: 0;
        width: 45%;
    }
    .index_cnt2 .inner .col2 .right h4 {
        font-size: 2.6rem;
        margin: 0 0 2rem;
    }
    .index_cnt2 .inner .col2 .right>p:not(.buttonA) {
        margin: 0 0 3rem;
    }
    .index_cnt3 {
        padding: 5rem 0;
    }
    .index_cnt3 .inner .flex {
        display: block;
        margin: 0 0 4rem;
    }
    .index_cnt3 .inner .grid .set {
        margin: 0 0 5rem;
    }
    .index_cnt3 .inner .grid .set::before {
        font-size: 4rem;
    }
    .index_cnt3 .inner .grid .set h4 {
        font-size: 2.1rem;
    }
    .index_cnt4 {
        padding: 5rem 0;
    }
    .index_cnt4 .inner .window {
        padding: 4rem 0 6rem;
    }
    .index_cnt4 .inner .window h4 {
        font-size: 2.4rem;
        padding: 1.5rem 5%;
    }
    .index_cnt4 .inner .window .titleA,
    .index_cnt4 .inner .window>p,
    .index_cnt4 .inner .window .button {
        padding-left: 5%;
        padding-right: 5%;
    }
    .index_cnt4 .inner .window .marquee p {
        font-size: 5rem;
    }
    .index_cnt5 {
        padding: 5rem 0 8rem;
    }
    .index_cnt5 .inner .col2 .left .grid {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr);
        gap: 1rem;
        margin: 0 auto 3rem;
    }
    .index_cnt5 .inner .col2 .left .grid .figure .figcaption {
        font-size: 1.6rem;
    }
    .index_cnt5 .inner .col2 .right {
        margin: 3rem 0 0;
    }
    .index_cnt5 .inner .col2 .right h4.fukidashi,
    .index_cnt5 .inner .col2 .right h4.fukidashi::before {
        width: 24rem;
    }
    .index_cnt5 .inner .col2 .right h4.fukidashi {
        font-size: 1.9rem;
    }
.index_cnt6 .inner .titleA{
    padding: 2rem;
    background:#fff;
    width: initial;
    height: initial;
}
    .index_cnt6 .sliderB,
    .index_cnt6 .sliderB .set,
    .index_cnt6 .sliderB .pic {
        height: 44rem;
    }
    .index_cnt6 .sliderB .set .catch {
        font-size: 2.2rem;
        padding: 0 5%;
        -webkit-text-stroke: 0.1rem #fff;
    }
    .index_cnt6 .sliderB .set .post,
    .index_cnt6 .sliderB .set .buttonC,
    .index_cnt6 .inner .titleA {
        left: 5%;
    }
    .index_cnt6 .sliderB .slick-prev::before,
    .index_cnt6 .sliderB .slick-next::before {
        width: 4rem;
    }
    .index_cnt6 .sliderB .slick-prev {
        bottom: 5rem;
        top: initial;
        left: calc(50% - 5rem);
    }
    .index_cnt6 .sliderB .slick-next {
        bottom: 5rem;
        top: initial;
        right: calc(50% - 5rem);
    }
    .index_cnt7 {
        padding: 8rem 0 5rem;
    }
    .index_cnt7 .inner .webgene-blog {
        grid-template-columns: repeat(2, 1fr);
        gap: 2rem 1.5rem;
    }
    .index_cnt7 .inner .webgene-blog .webgene-item {
        padding: 0 0 3rem;
        margin: 0 0 3rem;
        border-bottom: 0.1rem dashed #ccc;
    }
    .index_cnt7 .inner .webgene-blog .webgene-item .dt {
        font-size: 1.5rem;
    }

    /*------- service -------*/
    .service_cnt1 {
        padding: 5rem 0;
    }
    .service_cnt1 .inner h3 {
        font-size: 2.4rem;
        margin: 0 auto 3rem;
    }
    .service_cnt1 .inner h3::after{
        min-width: 3rem;
    }
    .service_cnt2 {
        padding: 5rem 0;
    }
    .service_cnt2 .inner .dt {
        font-size: 2.2rem;
    }
    .service_cnt3 {
        padding: 6rem 0;
    }
    .service_cnt3 .inner .set {
        margin: 0 0 5rem;
    }
    .service_cnt3 .inner .set .col2 .left {
        aspect-ratio: 16 / 10;
        margin: 0 0 1.5rem;
    }
    .service_cnt3 .inner .set .col2 .right h4 {
        font-size: 2.4rem;
        margin: 0 0 2rem;
    }
    .service_cnt3 .inner .set .col2 .right .catch {
        font-size: 2.1rem;
        margin: 0 0 2rem;
    }
    .service_cnt3 .inner .set .windowA {
        display: block;
    }
    .service_cnt3 .inner .set .windowA h5 {
        margin: 0 0 1.5rem;
    }
    .service_cnt3 .inner .set [class^="window"] .ul {
        flex-wrap: wrap;
    }
    .service_cnt3 .inner .set [class^="window"] .li {
        font-size: 1.6rem;
        padding: 0.8rem 1.2rem;
    }
    .service_cnt3 .inner .set .windowA .listA .li,
    .service_cnt3 .inner .windowA .listB .li {
        width: 100%;
    }
    .service_cnt3 .inner .set .windowA .listA li {
        width: 100%;
    }
    .service_cnt3 .inner .set .windowB .grid .dl {

        padding: 0 0 3rem;
        margin: 0 0 3rem;
        border-bottom: 0.1rem dashed #ccc;
    }
    .service_cnt3 .inner .set .windowB .grid .dt {
        font-size: 2.2rem;
    }
    .service_cnt3 .inner .set .windowB .grid2 {
        width: 100%;
        display: block;
    }
    .service_cnt3 .inner .set .windowB .grid2 .dl {
        padding: 0.5rem 0 1rem;
    }
    .service_cnt3 .inner .set .windowB .grid2 .dl::before {
        left: 0;
    }
    .service_cnt3 .inner .set .windowB .grid2 .dl::after {
        display: none;
    }
    .service_cnt3 .inner .set .windowB .grid2 .dt {
        font-size: 2.2rem;
        text-align: left;
        padding-left: 4rem;
    }
    .service_cnt3 .inner .set .windowB .grid2 .dd {
        text-align: left;
        padding: 0;
    }
    .service_cnt4 {
        padding: 6rem 0;
    }
    .service_cnt4 .inner .ul {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr;
        gap: 4rem;
        margin: 0 auto 6rem;
    }
    .service_cnt4 .inner .li {
        writing-mode: horizontal-tb;
        min-height: auto;
        font-size: 2rem;
        padding: 1.5rem;
    }
    .service_cnt4 .inner .li:not(:last-of-type)::after {
        width: 2.4rem;
        height: 2.4rem;
        top: auto;
        right: auto;
        bottom: -3.2rem;
        left: calc(50% - 1.2rem);
        transform: rotate(90deg);
    }
    .service_cnt4 .inner .window {
        width: 100%;
    }
    .service_cnt4 .inner .window h4 {
        font-size: 2.4rem;
    }

    /*------- works -------*/
    .works_cnt1 {
        padding: 6rem 0;
    }
    .works_cnt1 .inner .grid {
        gap: 4rem;
    }
    .works_cnt1 .inner .grid .dl {
        padding: 0 0 3rem;
        margin: 0 0 3rem;
        border-bottom: 0.1rem dashed #ccc;
    }
    .works_cnt2 {
        padding: 6rem 0;
    }
    .works_cnt2 .inner .grid {
        gap: 4rem;
        margin: 0 auto 6rem;
    }
    .works_cnt2 .inner .grid .figure {
        padding: 0 0 3rem;
        margin: 0 0 3rem;
        border-bottom: 0.1rem dashed #ccc;
    }

    /*------- recruit -------*/
    .recruit_cnt1 {
        padding: 5rem 0;
    }
    .recruit_cnt1 .inner .pic {
        aspect-ratio: 12 / 7;
    }
    .recruit_cnt2 {
        padding: 5rem 0;
    }
    .recruit_cnt2 .inner .dl {
        padding: 4rem 0 2rem;
    }
    .recruit_cnt2 .inner .dl::before {
        font-size: 3.6rem;
        left: 0;
        top: 0;
    }
    .recruit_cnt2 .inner .dt {
        height: auto;
        font-size: 2.4rem;
    }
    .recruit_cnt3 {
        padding: 5rem 0;
    }
    .recruit_cnt3 .inner .col2 .left {
        aspect-ratio: 6 / 4;
    }
    .recruit_cnt3 .inner .dl {
        grid-template-columns: 30% 1fr;
    }
    .recruit_cnt3 .inner .dt {
        font-size: 2.2rem;
    }
    .recruit_cnt3 .inner .window {
        display: block;
    }
    .recruit_cnt3 .inner .window h4 {
        margin: 0 0 1.5rem;
    }
    .recruit_cnt3 .inner .window .li {
        width: 100%;
        font-size: 1.6rem;
    }
    .recruit_cnt4 {
        padding: 5rem 0;
    }
    .recruit_cnt4 .inner .titleA {
        margin: 0 auto 4rem;
    }
    .recruit_cnt4 .grid .dl {
        margin: 0 0 2rem;
        transform: none !important;
    }
    .recruit_cnt4 .grid .dt {
        font-size: 2.2rem;
        height: 6rem;
    }
    .recruit_cnt5 {
        padding: 6rem 0;
    }
    .recruit_cnt5 .inner .grid::after {
        display: none;
    }
    .recruit_cnt5 .inner .grid .dl {
        margin: 0 0 2rem;
    }
    .recruit_cnt5 .inner .grid .dl::before {
        font-size: 3.6rem;
    }
    .recruit_cnt5 .inner .grid .dt {
        font-size: 2.2rem;
        margin: 0 0 2rem;
    }

    /*------- environment -------*/
    .environment_cnt1 {
        padding: 6rem 0;
    }
    .environment_cnt1 .inner [class^="col2"] :is(.left, .right) .set {
        border-width: 0.5rem;
        padding: 1.5rem;
    }
    .environment_cnt1 .inner [class^="col2"] :is(.left, .right) .set .flex {
        flex-wrap: wrap;
    }
    .environment_cnt1 .inner [class^="col2"] :is(.left, .right) .set .flex>p:not(.span, .em) {
        font-size: 4.6rem;
    }
    .environment_cnt1 .inner [class^="col2"] :is(.left, .right) .set .flex .span {
        font-size: 2.6rem;
    }
    .environment_cnt1 .inner .col2.btm .left .set .span {
        white-space: normal;
    }
    .environment_cnt1 .inner [class^="col2"] :is(.left, .right) .set .em {
        width: 100%;
        display: block;
    }
    .environment_cnt1 .inner .col2b {
        display: block;
    }
    .environment_cnt2 {
        padding: 6rem 0;
    }
    .environment_cnt3 {
        padding: 6rem 0;
    }
    .environment_cnt3 .inner .dl {
        padding: 2.5rem 0 2rem 4rem;
    }
    .environment_cnt3 .inner .dl::after {
        left: 1.3rem;
    }
    .environment_cnt3 .inner .dt {
        font-size: 2.2rem;
    }
    .environment_cnt3 .inner .time {
        position: static;
        margin: 0 0 0.5rem;
    }
    .environment_cnt4 {
        padding: 6rem 0;
    }
    .environment_cnt4 .inner .grid {
        gap: 2rem;
    }
    .environment_cnt4 .inner .grid .dl {
        grid-template-columns: 35% 1fr;
        margin: 0 0 3rem;
    }
    .environment_cnt4 .inner .grid .dt {
        font-size: 2.2rem;
    }
    .environment_cnt5 {
        padding: 6rem 0;
    }
    .environment_cnt5 .inner .window h4 {
        font-size: 2.4rem;
    }

    /*------- voice -------*/
    [class^="voice_cnt"] {
        padding: 6rem 0;
    }
    [class^="voice_cnt"] .inner .col2 {
        gap: 2rem;
        margin: 0 0 4rem;
        display: grid !important;
    }
    [class^="voice_cnt"] .inner .col2 .left p:not(.msg, .name) {
        grid-row: 1;
    }
    [class^="voice_cnt"] .inner .col2 .left .name {}
    [class^="voice_cnt"] .inner .col2 .left .name {
        grid-row: 2;
        font-size: 2.2rem;
        margin: 0 0 1.5rem;
    }
    [class^="voice_cnt"] .inner .col2 .left .msg {
        margin: 0 0 1rem;
        font-size: 2rem;
        white-space: normal;
    }
    [class^="voice_cnt"] .inner .col2b {
        display: block;
    }
    [class^="voice_cnt"] .inner .col2b .left,
    [class^="voice_cnt"] .inner .col2b .right {
        width: 100%;
    }
    [class^="voice_cnt"] .inner .col2b .left {
        margin: 0 0 2rem;
    }
    [class^="voice_cnt"] .inner .dt {
        font-size: 1.7rem;
    }
    [class^="voice_cnt"] .inner .question {
        font-size: 2.2rem;
    }
    [class^="voice_cnt"] .inner>.pic {
        aspect-ratio: 12 / 6;
    }
    [class^="voice_cnt"] .inner .col2 .left {
        display: grid !important;
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    [class^="voice_cnt"] .inner .col2 .right {
        grid-row: 1;
    }
    /*------- company -------*/
    .company_cnt1 {
        padding: 6rem 0;
    }
    .company_cnt1 .inner .window {
        aspect-ratio: 12 / 7;
    }
    .company_cnt1 .inner .msg {
        width: 90%;
        margin: -5rem auto 3rem;
        padding: 2rem;
    }
    .company_cnt1 .inner .msg p {
        font-size: 2.2rem;
    }
    .company_cnt1 .inner .msg .eng {
        font-size: 1.9rem;
    }
    .company_cnt3 {
        padding: 6rem 0;
    }
    .company_cnt3 .inner dl,
    .company_cnt4 .inner .dl {
        display: block;
        padding: 1.5rem 0;
    }
    .company_cnt3 .inner dt,
    .company_cnt4 .inner .dt {
        width: 100%;
        min-width: 0;
        padding: 0;
        margin: 0 0 0.5rem;
    }
    .company_cnt3 .inner dd,
    .company_cnt4 .inner .dd {
        width: 100%;
    }
    .company_cnt3 .inner .map {
        aspect-ratio: 4 / 3;
    }
    .company_cnt4 {
        padding: 6rem 0;
    }
    .company_cnt4 .inner .dt {
        font-size: 2.2rem;
    }

    /*------- blog / blogdetail -------*/
    :is(.blog_cnt1, .blogdetail_cnt1) {
        padding: 5rem 0;
    }
    :is(.blog_cnt1, .blogdetail_cnt1) .inner {
        display: block;
    }
    :is(.blog_cnt1, .blogdetail_cnt1) .inner h3 {
        width: 100%;
        margin: 0 0 1.5rem;
    }
    :is(.blog_cnt1, .blogdetail_cnt1) .inner .webgene-blog {
        flex-wrap: wrap;
        gap: 1rem;
    }
    :is(.blog_cnt1, .blogdetail_cnt1) .inner .webgene-blog .webgene-item {
        width: 100%;
    }
    :is(.blog_cnt1, .blogdetail_cnt1) .inner .webgene-blog .webgene-item .buttonA {
        width: 100%;
        text-align: center;
    }
    .blog_cnt2 .inner .webgene-blog {
        display: block;
    }
    .blog_cnt2 .inner .webgene-blog .webgene-item {
        padding: 0 0 3rem;
        margin: 0 0 3rem;
        border-bottom: 0.1rem dashed #ccc;
    }
    .blog_cnt2 .inner .webgene-blog .webgene-item .dt {
        font-size: 1.5rem;
    }
    .webgene-pagination ul {
        margin: 6rem auto 0;
    }
    .blogdetail_cnt2 {
        padding: 0 0 6rem;
    }
    .blogdetail_cnt2 .inner .webgene-blog .webgene-item .dt {
        font-size: 2.1rem;
    }

    /*------- contact / form -------*/
    .contact_cnt1 {
        padding: 6rem 0;
    }
    .contact_cnt1 .inner .tel a {
        font-size: 3rem;
    }
    .contact_cnt1 .inner>p:not(.tel) {
        padding: 0;
    }
    .contact_cnt2 {
        padding: 6rem 0;
    }
    form .dl {
        display: block;
        padding: 1.5rem 0;
    }
    form .dl .dt {
        width: 100%;
        min-width: 0;
        min-height: 0;
        padding: 0;
        margin: 0 0 1rem;
        justify-content: flex-start;
        gap: 1rem;
    }
    form .dl .dd {
        width: 100%;
    }
    form input.zipInput {
        width: 60%;
    }
}

/* ===== スマホ（〜600px）細部調整 ===== */
@media screen and (max-width: 600px) {
    .index_cnt7 .inner .webgene-blog,
    .blog_cnt2 .inner .webgene-blog {}
    .service_cnt4 .inner .li {
        font-size: 1.8rem;
    }
    [class^="voice_cnt"] .inner .col2 .left .msg {
        font-size: 1.8rem;
    }
    .index_cnt2 .inner .col2 .left .pic1 {
        width: 75%;
    }
  
  /*---------------------------------*/
  .index_cnt5 .inner .col2 .left .grid .figure .pic img {
    width: 60%;
    justify-self: center;
}
  h2 {font-size: 2.2rem !important;}
  h3{font-size: 2rem !important;}
  h4 {font-size: 1.8rem !important;}
      .index_cnt6 .sliderB .set .catch,.works_cnt1 .inner .grid .dt,.works_cnt2 .inner .grid .figcaption,[class^="voice_cnt"] .inner .question {font-size: 2rem;}
  .sp_voice01,.sp_voice02  {object-position: -25rem 0rem !important;}
.service_cnt2 .inner .dl {
    display: block;
    justify-items: center;
}
  .service_cnt2 .inner .dt {
        text-align: center;
            margin: 0 auto;
    }
  .service_cnt2 .inner .pic {margin: 1rem 0;}
  .works_cnt1 .inner .grid .pic {aspect-ratio: auto;}
  .index_cnt3 .inner .grid .set h4 br{display:none;}
}
@media screen and (max-width: 1024px){
  .pc_br br{display:none;}

}
@media screen and (min-width: 1025px){
  .spbr br{display:none;}
  .index_cnt6 .sliderB .set {
    width: 100%;
    height: 75rem;}
  .index_cnt6 .sliderB .set .catch {
    font-size: 3rem;
    -webkit-text-stroke: 0.10rem #fff;}
}
@media screen and (min-width: 1400px){
    .sp_voice01 {object-position: 0rem -10rem !important;}
  .sp_voice02 {
    object-position: 0rem -5rem !important;
}
}
@media (min-width:1025px) and (max-width:1600px){
  [class^="voice_cnt"] .inner .col2 .left .msg{
    font-size: 2.3rem;}
}
@media screen and (min-width: 1700px){
  .pc_br br{display:none;}
}