@charset "UTF-8";
@media screen and (max-width:1480px) {
    .index_cnt1 .inner .col2 {
        align-items: start;
    }
    .index_cnt1 .inner .col2 .left {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: initial;
        border-radius: 0 50% 0 50%;
        overflow: hidden;
    }
    .index_cnt1 .inner .col2 .left [class^="pic"] {
        position: initial;
        width: 100%;
        aspect-ratio: 1/1;
    }
}
@media screen and (max-width: 1024px) {



    /*top*/
    .index_cnt1 {
        padding: 2rem !important;
    }
    .index_cnt1 .inner .col2 .right h2 {
        font-size: 2.2rem;
    }
    .index_cnt2 .inner .col2 .right {
        padding: 0;
        position: relative;
    }
    .index_cnt1 .inner .col2 .right .l2r {
        font-size: 4rem;
        height: initial;
    }
    .index_cnt1 .inner .col2 .right .l2r:nth-of-type(2) {
        margin: 0 0 1rem 10%;
    }
    .index_cnt1 .inner .col2 .right .l2r:nth-of-type(3) {
        margin: 0 0 1rem 20%;
    }
    .index_cnt2 .inner .col2 .left .pic {
        width: 100%;
    }
    .index_cnt2 .inner .col2 .left .pic img {
        width: 100%;
    }
    .index_cnt2 .inner .col2 .left .logo {
        position: relative;
        left: initial;
        width: 50%;
        margin: 0 auto 3rem;
    }
    .index_cnt3 .inner {
        width: 80%;
    }
    .index_cnt3 .inner .col2 .left .pic {
        width: 100%;
    }
    .index_cnt3 .inner .col2 .left .pic img {
        width: 100%;
    }
    .index_cnt3 .inner .col2 .left .logo {
        position: relative;
        right: initial;
        width: 50%;
        margin: 0 auto 3rem;
    }
    .index_cnt3 .inner .col2 .right {
        padding: 0;
    }
    /*インスタ*/
    .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;
    }





    /*about*/
    .about_cnt1 {
        padding: 0 0 5rem !important;
    }
    .about_cnt1 .inner .col2 .left {
        width: 100vw !important;
        margin: 0 -10vw 0 !important;
    }
    .about_cnt1 .inner .col2b {
        display: block;
    }
    .about_cnt1 .inner .col2b .left {
        width: 100%;
        margin: 0 0 3rem;
    }
    .about_cnt1 .inner .col2b .right {
        width: 100%;
    }
    .about>.marquee {
        margin: 0;
    }
    .about_cnt3 .inner .window .col2:first-of-type {
        margin: 0 0 3rem;
        border-bottom: 0.1rem dashed #ccc;
    }
    .about_cnt4 {
        padding: 5rem 10% !important;
    }
    .about_cnt4 .inner {
        padding: 0;
    }
    .about_cnt4 .col2 .left {
        padding: 0;
    }
    .about_cnt4 .col2 .left .dl {
        display: block;
    }
    .about_cnt4 .col2 .left .dl .dt {
        width: 100%;
        border: none;
        min-height: initial;
    }
    .about_cnt4 .col2 .left .dl .dd {
        width: 100%;
        min-height: initial;
    }





    /*analysis*/
    .analysis_cnt1 {
        padding: 0 0 5rem !important;
    }
    .analysis .inner .mainmovie {
        width: 100vw;
        margin: 0 0 3rem;
        transform: translate(-10%, 0);
    }
    .analysis_cnt2 .inner .grid {
        display: block;
    }
    .analysis_cnt2 .inner .grid .dl {
        margin: 0 0 3rem;
        padding: 0 0 3rem;
        border-bottom: 0.1rem dashed #ccc;
    }
    .analysis_cnt2 .inner .grid .dt {
        font-size: 2.1rem;
    }
    .analysis_cnt2 .inner .grid .pic {
        /*width: 100vw;
        margin: 0 -10vw 3rem;*/
    }
    .analysis_cnt3 {}
    .analysis_cnt3 .inner {
        margin: auto;
    }
    .analysis_cnt3 .inner .set .window h5 {
        min-width: initial;
    }
    .analysis_cnt3 .inner .set .window .grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .analysis_cnt3 .inner .set .window .ul {
        display: block;
    }
    .analysis_cnt4 .slider {
        margin: 0 3rem 17rem 3rem;
        width: 85%;
    }




    /*wear*/
    .wear_cnt1 {
        padding: 0 0 5rem !important;
    }
    .wear_cnt1 .inner .mainmovie {
        width: 100vw;
        margin: 0 0 3rem;
        transform: translate(-10%, 0);
    }
    .wear_cnt1 .inner .grid {
        display: block;
    }
    .wear_cnt1 .inner .grid .set {
        margin: 0 0 3rem;
    }
    .wear_cnt1 .inner .grid .set .dt {
        font-size: 2.2rem;
    }




    /*guide*/
    .guide_cnt1 .inner h4 {
        display: block;
    }
    .guide_cnt1 .inner h4 span {
        /*width: 100%;
        display: block;*/
    }
    .guide_cnt1 .inner h4::before {
        width: 2rem;
        min-width: 2rem;
        height: 2rem;
    }
    .guide_cnt1 .inner> :is(.col2, .col2b) :is(.left, .right) {
        margin: 0 0 3rem;
    }
    .guide_cnt1 .inner .grid {
        display: block;
    }
    .guide_cnt1 .inner .grid .set:not(:last-of-type) {
        margin: 0 0 3rem;
    }
    .guide_cnt1 .inner .grid .set>.strong {
        font-size: initial;
    }
    .guide_cnt1 .inner .grid .set h5 {
        font-size: 2rem;
        text-align: center;
    }
    .guide_cnt1 .inner .grid .set .flex {
        display: flex;
        flex-wrap: wrap;
    }
    .guide_cnt1 .inner .grid .set .flex .strong {
        width: 100%;
              text-align: center;
    }
    .guide_cnt1 .inner .pack {
        display: block;
    }
    .guide_cnt1 .inner .pack h5 {
        font-size: 2rem;
        text-align: center;
    }
    .guide_cnt1 .inner .pack>.strong {
        font-size: initial;
    }
    .guide_cnt1 .inner .pack .flex {
        flex-wrap: wrap;
    }
    .guide_cnt1 .inner .pack .flex .strong {
        width: 100%;
        text-align: center;
    }
    .guide_cnt1 .inner>.col2b {
        display: block;
    }
    .guide_cnt1 .inner>.col2b :is(.left, .right) .flex {
        flex-wrap: wrap;
    }
    .guide_cnt1 .inner>.col2b :is(.left, .right) .flex .strong {
        width: 100%;
        text-align: center;
    }
    .guide_cnt1 .inner> :is(.col2, .col2b) {
        width: 100%;
    }
    .guide_cnt1 .inner> :is(.col2, .col2b) :is(.left, .right) {
        width: 100%;
    }
    .guide_cnt1 .inner> :is(.col2, .col2b) :is(.left, .right) h5 {
        font-size: 2rem;
        text-align: center;
    }
    .guide_cnt2 .inner .dt {
        padding: 0 3rem 0 7rem;
    }
    .guide_cnt2 .inner .dd {
        padding: 0 0 2rem 7rem;
    }
    form .dl {
        display: block;
    }
    form .dl .dt {
        width: 100%;
        border: none;
        padding: 0;
    }
    form .dl .dd {
        width: 100%;
        padding: 0;
    }
    form .privacyLabel {
        font-size: 1.3rem;
    }
    .privacyformError {
        margin-top: -36.5px !important;
    }


.about_cnt1 .inner .col2 .right h4 {
  margin-bottom: 2rem;
  }
   .titleA p {
 margin-top: 2rem;
}
.guide_cnt1 .inner .beginner {
    margin: 0;
  }

}

@media screen and (max-width: 765px) {
  .index_cnt3 .inner {
  width: 90%;
}
  .index>.marquee {
        margin: 0 auto 10rem;
  }

  .inner {
    width: 90%;
  }
  .about_cnt1 .inner .col2b .left .ceo .dd {
    font-size: 2rem;
  }
  .about_cnt3 .inner .window .col2 .right .dt {
    font-size: 2.2rem;
  }
  body {
    font-size: 1.6rem;
  }
  .guide_cnt1 .inner> :is(.col2, .col2b) :is(.left, .right) .flex .badge img {
    width: 60%;
  }
  .wear_cnt1 .inner .grid .set .price {
    font-size: 1.8rem;
  }
      .wear_cnt1 .inner .grid .set .dt {
        font-size: 2rem;
  }
  .wear_cnt1 .inner .grid .set .dl {
  gap: 0.2rem;
  }
  .wear_cnt1 .inner .grid .set .pic::after {
        height: 45%;
  }
  
  .wear_cnt2 .inner p:not(.catch, .buttonA) {
    font-size: 2rem;
  }
  .p1773130949915{
    font-size: 1.8rem;
    line-height: 2 !important;
  }
  .index_cnt1 .inner .col2 .right h2 {
      margin: 5rem 0 5rem;
  }
  .analysis_cnt3 .inner .set .window h5 {
    font-size: 1.8rem;
  }
  .guide_cnt1 .inner> :is(.col2, .col2b) :is(.left, .right) .flex .price ,
  .guide_cnt1 .inner .grid .set .flex .price {
    font-size: 2.3rem;
  }
  .analysis_cnt3 .inner .set .window .grid .figure .figcaption {
    font-size: 1.5rem;
  }
}
@media screen and (max-width: 768px) {
  .wear_cnt2 .inner .catch {
      height: 30rem;
    font-size: 6rem;
  }
}