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





    /*index*/
    .index .mainimg {
        height: 70vh;
    }
    .index .mainimg h2 {
        top: 15rem;
    }
    .index>.flex {
        height: initial;
        padding: 1rem 10%;
    }
    .index>.flex .blog {
        margin: 0 auto 3rem;
    }
    .index_cnt1 .inner .col2 a {
        width: 100% !important;
        margin: 0 0 3rem;
    }
    .index_cnt2 .inner .col2 .right {
        display: flex;
        gap: 2.6vw;
    }
    .index_cnt2 .inner .col2 .left p {
        position: relative;
        z-index: 1;
    }
    .index_cnt2 .inner .col2 .left>p:not(.buttonA) {
        /*margin: 0 0 15rem;*/
    }
    /*
    .index_cnt2 .inner .col2 .right .pic1 {
        width: 55%;
        bottom: 1rem;
        left: 3rem;
    }
    .index_cnt2 .inner .col2 .right .pic2 {
        width: 30%;
        top: initial;
        left: initial;
        right: 3rem;
        bottom: 10rem;
    }*/
    .index_cnt2 .inner .col2 .right .pic1 {
        width: 50%;
        aspect-ratio: 3/2;
        overflow: hidden;
        position: initial;
    }
    .index_cnt2 .inner .col2 .right .pic2 {
        width: 50%;
        aspect-ratio: 3/2;
        overflow: hidden;
        position: initial;
    }
    .index_cnt3 .inner .col2 {
        padding: 0 0 3rem;
        margin: 0 0 3rem;
        border-bottom: 0.1rem dashed #000;
    }
    .index_cnt3 .inner .col2 .left {
        border: 0.5rem solid #fff;
    }
    .index_cnt4 .inner .webgene-blog {
        display: block;
    }
    .index_cnt4 .inner .webgene-blog .webgene-item {
        padding: 0 0 3rem;
        margin: 0 0 3rem;
        border-bottom: 0.1rem dashed #000;
    }
    .index_cnt6 .inner .flex {
        display: block;
    }
    .index_cnt6 .inner .flex .pic {
        width: 100%;
        margin: 0 0 3rem;
    }
    .index_cnt6 .inner .flex .pic img {
        height: initial;
        width: 100%;
    }
    .index_cnt6 .inner .flex .webgene-blog {
        width: 100%;
        display: block;
    }
    .index_cnt6 .inner .flex .webgene-blog .webgene-item {
        width: 100%;
        padding: 0 0 3rem;
        margin: 0 0 3rem;
        border-bottom: 0.1rem dashed #000;
    }
    .index .banner{
        background: #f6ede5;
        padding: clamp(1rem,1.04vw,2rem);
    }
    .index .banner .flex {
        width: 90%;
        margin: auto;
        position: initial;
    }
    .index .banner .flex [class^="button"] {
        width: 100%;
        margin: 0 0 2rem;
    }




    /*about*/
    .about_cnt1 .inner .col2 .left {
        border: 0.5rem solid #fff;
        box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.2);
    }
    .about_cnt1 .inner .illust {
        position: initial;
    }
    .about_cnt3 .inner .illust {
        position: initial;
        width: 50%;
    }
    .about_cnt3 .inner .illust img {
        width: 100%;
    }
    .about_cnt4 .inner .window {
        display: block;
    }
    .about_cnt4 .inner .window .left {
        width: 100%;
        margin: 0 0 3rem;
    }
    .about_cnt4 .inner .window .right {
        width: 100%;
        border: 0.5rem solid #fff;
    }
  .about_cnt4 .inner .window .right img{
    width:100%;}





    /*blog & blogdetail共通*/
    :is(.blog_cnt1, .blogdetail_cnt1) .inner .webgene-blog {
        display: block;
    }
    :is(.blog_cnt1, .blogdetail_cnt1) .inner .webgene-blog .webgene-item {
        margin: 0 0 1rem;
    }






    /*blog*/
    .blog_cnt2 .inner .webgene-blog .webgene-item .dl {
        display: block;
    }
    .blog_cnt2 .inner .webgene-blog .webgene-item .dt {
        margin: 0 0 1rem;
    }
    .blog_cnt2 .inner .webgene-blog .webgene-item .pic {
        margin: 0 0 1rem;
    }
    .blog_cnt2 .inner .webgene-blog .webgene-item .cate {
        margin: 0 0 1rem;
    }
    .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*/
    .contact_cnt1 .inner .col2 .left {
        margin: 0 0 3rem;
        padding: 0 0 3rem;
        border-bottom: 0.1rem dashed #000;
    }
    .contact_cnt1 .inner .col2 .right .insta {
        width: 100%;
    }
    form .dl {
        display: block;
    }
    form .dl .dt {
        width: 100%;
    }
    form .dl .dd {
        width: 100%;
    }
    form .privacyLabel {
        /*font-size: 1rem;*/
      
        font-size: 1.5rem;
    }
    .privacyformError {
        margin-top: -36.5px !important;
    }




}

/* 初期状態 */
.index .mainimg .slider .pic .pic_sp,.mainimg .pic .pic_sp {display:none;}
.index .mainimg .slider .pic .pic_pc,.mainimg .pic .pic_pc {display:block;}

/* SP */
@media screen and (max-width: 767px){
.index .mainimg .slider .pic .pic_pc,.mainimg .pic .pic_pc {display:none;}
.index .mainimg .slider .pic .pic_sp,.mainimg .pic .pic_sp {display:block;}
}


@media screen and (max-width: 520px){
.inner,.index .banner {width: 90%;}
.index>.flex {padding: 1rem 5%;}
.index_cnt2 .inner .col2 .right {display: block;}
.index_cnt2 .inner .col2 .right .pic1 {
        width: 80%;
        position: static;
        aspect-ratio: 8.6 / 5.8;
        overflow: hidden;
    }
  .index_cnt2 .inner .col2 .right .pic2 {
        width: 50%;
        aspect-ratio: 3 / 2;
        overflow: hidden;
        position: relative;
        left: 45.5625vw;
        bottom: 5.85vw;
    }
  .index_cnt2 .inner .col2 .right .illust {
        width: 13.37vw;
        bottom: 25vw;
}
  
  .index_cnt3 .inner .illust2 {
                width: 21.18vw;
        bottom: -24.5vw;
}
  .index_cnt5 .inner .illust {
        width: 14.95vw;
        position: absolute;
        right: 0;
        bottom: 12vw;
}
  .about_cnt1 .inner .illust img {width: 15vw;}
  .about_cnt1 .inner .col2:not(:last-of-type),.about_cnt3 .inner>p,.about_cnt5 .inner .col2 .right p { margin: 0 0 2rem;}
  .about_cnt3 .inner .illust {
        position: static;
        width: 38%;
        margin-bottom: 2rem;
    }
  .about_cnt4 .inner .window .left h4::after{content:none;}
  .index .mainimg h2 {top: 10rem;}
  .blog_cnt2 .inner .webgene-blog .webgene-item .dt p a {font-size: 2rem !important;}
  .blogdetail_cnt2 .inner .webgene-blog .webgene-item .dt {font-size: 2.5rem;}
  .about_cnt2 {background-position: center top;}

}

@media screen and (max-width: 1023px){
.banner::before {
    content: "";
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    bottom: 10px;
    border: 2px solid #ead99f;
    pointer-events: none;
}
}
@media screen and (min-width: 1000px){
.index .banner .flex {
    display: flex !important;
    gap: 1rem;
    position: absolute;
           left: revert-rule;
        bottom: 1.3vw;
        z-index: 1;
        top: auto;
        width: auto;
}
  .index_cnt3 .inner .illust2 {
    bottom: -10.5vw;
}
}

@media screen and (max-width: 1024px){
.header.scroll-nav {background: rgb(255 255 255 / 40%);}
  .index>.flex .blog {
    align-items: center;
    margin: 0 auto 1rem;}
  .index_cnt3 .inner .illust1 {width: 13.979vw;}
  .index_cnt3 .inner .col2 .right h4::after {font-size: 2rem;}
.index_cnt3 {padding: 5rem 0 10rem 0 !important;}
  .index_cnt6 .inner .flex .webgene-blog {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}
  .index_cnt3 .inner .col2:nth-last-child(2) {
    border-bottom: none;
}
}
@media (min-width:768px) and (max-width:1024px){
  .header .nav {max-width: inherit;}
  .index_cnt2 .inner .col2 .right .illust{display:none;}
      [class^="button"] {
        width: 80%;
    }
  .about_cnt3 .inner .illust {width: 30%;}
}
@media screen and (min-width: 1025px){
  .spbr br{display:none;}
  .index_cnt5 .inner .grid {width: 80.5vw;}
  }