@charset "UTF-8";
@media (max-width: 768px) {
    .onlysp{
        display: block;
    }
    .onlypc{
        display: none;
    }
    #cta.wrapper {
        gap: 1rem;
    }
    .button-Container {
      gap: 0.5rem;
    }
    .sec-Title{
      margin-bottom: 2rem;
    }
    .sec-Title h2 {
        font-size: 1.2rem;
        margin: 0;
    }
    .sec-Container {
      padding: 12rem 1.5rem 2.5rem;
    }
    .sec-Container > img {
      top: -2.25rem;
      left: 50%;
      transform: translateX(-50%);
      width: 12.75rem;
      height: 12.75rem;
    }

    /* FV */
    .carousel-main{
      height: 60vh;
    }
    .carousel-track.no-transition{
      height: 100%;
    }
    .image-wrapper{
      height: 100%;
    }
    .image-wrapper img{
      height: 100%;
      object-fit: cover;
    }
    .carousel-item {
      flex: 0 0 85%;
      padding: 0 8px;
    }
    .carousel-arrow { 
      width: 30px; height: 30px; 
    }
    .prev-arrow { 
      left: 2%; 
    }
    .next-arrow { 
      right: 2%; 
    }
    .static-Catchphrase{
      width: 82%;
    }
    .static-Catchphrase p{
      font-size: 1.2rem;
    }

    /* 固定ボタン */
    #fixed-Btn{
      flex-direction: row;
      gap: 0;
      bottom: 0;
      right: 0;
      width: 100%;
    }
    #fixed-Btn a{
      width: 50%;
      padding: 1rem 0.5rem;
      border-radius: 0 0 0 0;
      box-shadow: none;
      writing-mode: horizontal-tb;
      text-align: center;
      box-shadow: 0px -1px 3px rgba(103, 101, 101, 0.5);;
    }
    #fixed-Btn a:hover{
        opacity: 1;
    }

    /* WORRIES */
    #worries .sec-Title{
      margin-bottom: 3rem;
    }
    .worries-List {
        margin-left: 0;
    }

    /* MACHINE */
    .machine-Wrapper.wrapper{
      gap: 2rem;
      padding-bottom: 3.5rem;
    }
    .machine-Title{
      font-size: 1.2rem;
      margin: 0 0 2rem;
    }
    .machine-Content {
      flex-direction: column;
      gap: 1rem;
    }
    .machine-Content > img {
      width: 100%;
      height: auto;
    }
    .explanation{
      width: 100%;
    }
    .explanation-Title{
      margin: 0.5rem;
      padding: 0.625rem 1rem;
      margin: 0 0 0.5rem;
    }
    .text.title{
      margin: 0 0 0.5rem;
    }
    .feature-List {
      justify-content: center;
      gap: 0.5rem;
    }
    .feature-List li{
      width: 5.2rem;
      height: 5.2rem;
    }
    .feature-List li p{
      font-size: 0.7rem;
    }

    /* FEATURE */
    #feature .sectitle-Container .subtitle{
      font-size: 1.2rem;
    }
    #feature .sectitle-Container .sec-Title{
      font-size: 1.2rem;
      margin: 0;
    }
    #feature .text{
      margin: 1rem 0;
      font-size: 1rem;
    }
    #feature .arrow{
      margin-bottom: 0.5rem;
    }
    #feature .figure{
      width: 100%;
    }

    /* CHANGE */
    .change-Content{
      padding: 1rem;
    }
    .change-List {
      grid-template-columns: 1fr;
    }
    #change > .change-Content2 > img{
      width: 75%;
    }
    #change > .change-Content2 > .change-Content2{
      padding: 1rem;
    }
    #change.wrapper,
    #program.wrapper {
      padding: 2.5rem 1.5rem;
    }

    /* PROGRAM */
    .program-Container {
      grid-template-columns: 1fr;
    }

    /* MERIT */
    #merit .merit-List{
      justify-content: center;
      flex-wrap: wrap;
      gap: 0.5rem;
    }
    #merit .merit-List li{
      width: calc(33% - 0.5rem);
    }
    #merit .merit-Title{
      font-size: 0.875rem;
      margin-top: 0;
    }

    /* VOICE */  
    #voice.wrapper {
      padding: 2.5rem 1.5rem;
    }
    .voice-List {
      grid-template-columns: 1fr;
      margin-bottom: 2.5rem;
    }
    .voice-List li{
      padding: 1rem;
    }
    .cta.wrapper {
      gap: 2rem;
    }

    /* BEGINNER */
    .beginner-Container{
      gap: 2rem;
    }
    .beginner-Content{
      flex-direction: column;
      gap: 0.5rem;
    }
    .beginner-Content:nth-child(odd){
      padding-right: 0;
    }
    .beginner-Content:nth-child(even){
      padding-left: 0;
      flex-direction: column;
    }
    .beginner-Content img{
      width: 100%;
    }
    .beginner-Content:nth-child(odd) img{
      padding-right: 8%;
    }
    .beginner-Content:nth-child(even) img{
      padding-left: 8%;
    }
    .beginner-Explanation{
      padding: 0 8%;
    }
    .point{
      margin: 0 0 0.5rem;
    }
    .point span{
      font-size: 2.5rem;
    }
    .beginner-Title{
      font-size: 1.2rem;
    }

    /* FLOW */
    .flow-Container,
    .flow2,
    .flow3,
    .flow4{
      width: 100%;
      max-width: 100%;
      margin: 0 0 2rem;
    }
    .flow1 > img,
    .flow2 > img,
    .flow3 > img,
    .flow4 > img{
      margin-bottom: 1rem;
    }
    .reservation li.flow img:last-child{
      width: 100%;
    }
    .reservation li.arrow{
      padding: 0;
    }
    .flow1-Text{
      margin: 1rem 0 0;
      font-size: 0.875rem;
    }
    .flow2-4{
      padding: 1rem;
      flex-direction: column;
      gap: 0.5rem;
    }
    .flow2-4 img{
      width: 100%;
    }
    .flow2-4 .flow-Text{
      width: 100%;
    }

    /* STORE */
    #store .store-Container{
      padding: 2rem 1rem 1rem 1rem;
    }
    .store-Grid{
      flex-direction: column;
    }
    .store-Card{
      width: 100%;
    }
    #store .store-Info .name{
      margin-top: 0;
    }

    /* FOOTER */
    #footer.wrapper{
      padding-bottom: 16%;
    }
    #footer .copyright{
      font-size: 0.65rem;
    }
}