@charset "UTF-8";
@media screen and (max-width: 1024px) {
    /*index*/
    .index .mainimg {
        width: 100%;
        height: calc(100vh - 8rem);
    }
    .index .mainimg .title {
        min-width: initial;
        bottom: initial;
        right: 10%;
        top: 10%;
        display: flex;
        flex-direction: row-reverse;
        align-items: start;
    }
    .index .mainimg .title h2 {
        height: fit-content;
        display: grid;
        align-items: center;
        padding: 1em 0.5em;
        background: rgba(255, 255, 255, 0.7);
        writing-mode: vertical-rl;
    }
    .index .mainimg .title p {
        height: fit-content;
        display: grid;
        align-items: center;
        padding: 1em 0.5em;
        background: rgba(255, 255, 255, 0.7);
        writing-mode: vertical-rl;
    }
    .index_cnt2 .inner .col2 .left {
        margin: 0 auto 5rem !important;
        padding: 0 0 5rem;
    }
    .index .mainimg .title h2 {
        font-size: 1.7rem !important;
    }
    .index .mainimg .title p {
        font-size: 1.7rem;
    }
    .index_cnt1 .inner .col2 .right h3 {
        font-size: 2.4rem;
    }
    .index_cnt4 .inner .webgene-blog {
        display: block;
    }
    .index_cnt4 .inner .webgene-blog .webgene-item {
        margin: 0 0 3rem;
        padding: 0 0 3rem;
        border-bottom: 0.1rem dashed #ccc;
    }
    .index_cnt5 .inner h4 {
        font-size: 2.2rem;
    }
    .index_cnt5 .inner .col2 .left h5 {
        font-size: 2rem;
    }

    .index_cnt5 .inner .col2 .right h5 {
        font-size: 2rem;
    }




    /*commit*/
    .commit_cnt1 .inner .col2 .right h3 {
        font-size: 2.4rem;
    }
    .commit_cnt1::after {
        background-size: initial;
    }
    .commit_cnt2 .inner .col2:not(:last-of-type) {
        padding: 0 0 3rem;
        margin: 0 0 3rem;
        border-bottom: 0.1rem dashed #ccc;
    }
    .commit_cnt2 .inner .col2 .left {
        border: 0.5rem solid #fff;
        box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.2);
    }
    .commit_cnt2 .inner .col2 .right h4 {
        font-size: 2.2rem;
    }






    /*media*/
    .media_cnt1 .inner .col2 :is(.left, .right) h4 {
        font-size: 2.2rem !important;
        padding: 1rem;
    }
    .media_cnt1::after {
        background-size: initial;
    }
    .media_cnt2 .inner .webgene-blog {
        display: block;
    }
    .media_cnt2 .inner .webgene-blog .webgene-item {
        padding: 0 0 3rem;
        margin: 0 0 3rem;
        border-bottom: 0.1rem dashed #ccc;
    }




    /*company*/
    .company_cnt1::after {
        background-size: initial;
    }
    .company_cnt1 .inner .col2 .right h3 {
        font-size: 2.4rem;
    }






    /*crops*/
    .crops_cnt1::after {
        background-size: initial;
    }
    .crops_cnt1 .inner .col2 .left h4 {
        font-size: 2rem;
        min-width: 100%;
    }

    .crops_cnt2::after {
        background-size: initial;
    }

    /*facility*/
    .facility_cnt1 .inner .col2 {
        display: grid !important;
    }
    .facility_cnt1 .inner .col2 .left h4 {
        font-size: 2rem;
        min-width: 100%;
    }
    .facility_cnt1 .inner .col2 .left .dt {
        width: 100%;
    }
    .facility_cnt1 .inner .col2 .right {
        grid-row: 1/2;
        min-height: 0;
        min-width: 0;
    }
    /*blog & blogdetail共通*/
    :is(.blog_cnt1, .blogdetail_cnt1) .inner .webgene-blog {
        width: 100%;
    }
    :is(.blog_cnt1, .blogdetail_cnt1) .inner .webgene-blog .webgene-item {
        width: 100%;
    }
    :is(.blog_cnt1, .blogdetail_cnt1) .inner .webgene-blog .webgene-item .buttonB {
        min-height: initial;
        border: initial;
    }



    /*blog*/
    .blog_cnt2 .inner .webgene-blog {
        display: block;
    }
    .blog_cnt2 .inner .webgene-blog .webgene-item .dl {
        margin: 0 auto 3rem;
        padding: 0 0 3rem;
        border-bottom: 0.1rem dashed #ccc;
    }
    .webgene-pagination {
        width: 100%;
        grid-template-columns: initial;
    }
    .webgene-pagination :is(.prev, .next) {
        width: 2em;
        height: 2em;
        margin: auto;
    }
    .webgene-pagination ul .number.selected {
        width: 2em;
        height: 2em;
    }
    .webgene-pagination ul .number {
        width: 2em;
        height: 2em;
        margin: 0 0.25rem;
    }





    /*blogdetail*/
    .blogdetail_cnt2 .inner .webgene-blog .webgene-item .dl {
        gap: 1rem;
    }
    .blogdetail_cnt2 .inner .webgene-blog .webgene-item .dt {
        font-size: 2.4rem;
    }





    /*beginner*/
    .beginner_cnt2 .inner .grid {
        display: block;
    }
    .beginner_cnt2 .inner .grid .set {
        margin: 0 auto 3rem;
    }
    .beginner_cnt2 .inner .grid .set::before {
        font-size: 3rem;
        width: 5rem;
        height: 5rem;
    }
    .beginner_cnt2 .inner .grid .set h4 {
        font-size: 2.2rem;
    }
    .beginner_cnt3 .inner .col2 :is(.left, .right) h4 {
        font-size: 2.2rem;
    }
    .beginner_cnt4 .inner .col2 .right h3 {
        font-size: 2.4rem;
    }





    /*application*/
    .application>p {
        width: 80%;
        margin: auto;
    }
    .application_cnt2 .inner .grid {
        display: block;
    }
    .application_cnt2 .inner .grid .dl::before {
        font-size: 3rem;
        width: 5rem;
        height: 5rem;
    }
    .application_cnt2 .inner h4 {
        font-size: 2.2rem;
    }
    .application_cnt2 .inner .col2 .left h5 {
        font-size: 2rem;
    }
    .application_cnt3::after {
        background-size: initial;
    }
    .application_cnt3 .inner .col2 :is(.left, .right) h4 {
        font-size: 2.2rem;
    }





    /*contact*/
    .contact_cnt1 .inner .col2 .left p a {
        font-size: 2.7rem;
    }
    .contact_cnt1 .inner .col2 .right {
        height: initial;
    }
    .contact_cnt1 .inner .col2 .right img {
        width: 100%;
    }
    .privacyformError {
        margin-top: -36.5px !important;
    }
    form .dl {
        display: block;
    }
    form .dl .dt {
        width: 100%;
    }
    form .dl .dd {
        width: 100%;
    }
    form .terms {
        height: 30rem;
        padding: 2rem;
    }
    form .col label {
        font-size: 1.2rem;
    }

}



/*--------------------------------*/
@media screen and (max-width: 520px){
  .inner {
    width: 90%;
  }
  .media_cnt1 .inner>p,.media_cnt1 .inner .col2 :is(.left, .right) p {
    text-align: left;
  }
  .beginner_cnt1 .inner .calender {
    overflow: auto;
    max-width: 100%;
    max-height: 400px;
    scrollbar-color: #276db6 #e2740e;
}
  .beginner_cnt1 .inner .calender img {
    width: auto;
    height: auto;
}
  .beginner_cnt2 .inner .grid .set h4,.beginner_cnt3 .inner .col2 :is(.left, .right) h4 {
    padding: 1rem 1em;
  }
  .application_cnt2 .inner .grid .dt {
    text-align: center;
  }
}
@media (min-width:768px) and (max-width:1024px){
form .dl {
    display: flex;
}
      form .dl .dt {
        width: 50%;
    }
}
@media screen and (min-width: 960px){
  .spbr br{
    display:none;
  }
  
}
@media screen and (min-width: 1800px){
.index_cnt1 .inner .col2 .right {
    margin-top: 10rem;
}
  .index_cnt2 .inner .col2 :is(.left, .right) .dt {
    left: 2rem;
  }
  .index_cnt3 .inner .col2 .right {
    margin-left: 10rem;
  }
  .index_cnt4 .inner .titleA h3,.company_cnt2 .inner .titleA h3 {
    text-align: left;
  }
  .index_cnt4 .inner .titleA,.company_cnt2 .inner .titleA{
    margin: 5rem 0;
  }
  .index_cnt4 {
    padding: 6rem 0 40.5rem;
}
  .beginner_cnt1 {
    padding: 10rem 0;
  }
  .beginner_cnt1 {
    padding-top: 7rem;
}
  .beginner_cnt1 .inner>p {
    margin: 0 auto 5rem;
        margin-left: 2rem;
    }
  .application_cnt1 .inner .col2,.application_cnt4 .inner .col2 {
    align-items: center;
}
  .application_cnt3 {
    padding-top: 0rem;
}
  .media_cnt1 .inner .col2:not(:last-of-type) {
    margin-bottom: 5rem;
}
  .commit_cnt1 .inner .col2 {
    gap: 5.6vw;
}
  .crops_cnt1 .inner>p {
    text-align: center;
    font-size: 3.9rem;
    font-family: "Zen Maru Gothic", sans-serif;
    font-weight: 500;
    line-height: 1.5;
    margin: 0 0 10rem;
}
  .crops_cnt1 .inner .col2:not(:last-of-type) {
    margin: 0 auto 10rem;
}
}