/* scroll */

/* .carousel {
  overflow-x: auto;
        
        
  scroll-snap-type: x mandatory;
  
  > li {
    scroll-snap-align: center;
    list-style:none;
  }
} */

/* #wrap #display-wrap .title-wrap .scroll-layou{
  padding-left: 100px;
} */


#wrap #display-wrap .next {
    display: flex;
    align-items: center;
    position: absolute;
    top: 60%;
    left: 0;
    transform: translate(-32px, -50%);
    line-height: 1;
    letter-spacing: 1px;
    cursor: pointer;
}

  #wrap #display-wrap  .arrow {
    display: inline-block;
    width: 100px;
    height: 1px;
    background-color: #fff;
    margin-right: 20px;
    position: relative;
    transition: .3s;
  }

    #wrap #display-wrap  .arrow::before {
    content: "";
    width: 15px;
    height: 1px;
    position: absolute;
        background-color: #fff;
    top: -5px;
    left: -2px;
    transform: rotate(-45deg);
}

  #wrap #display-wrap .title-wrap .txt {
    padding-left: 100px;
    padding-bottom:40px;
    
  }

  #wrap #display-wrap .title-wrap .scroll-layout .content {
        padding-left: 170px;
  }




@layer support.demo {
  /* html, body {
    block-size: 100%;
  } */
  
  /* body {
    display: grid;
    place-content: start center;
    margin: 0;
    padding: 10vmin;
  } */
  
  .scroll-layout {
    display: grid;
    grid-template-areas: 
      "left scroll right"
      ". markers .";
    
    grid-template-areas: 
      "scroll scroll scroll"
      "left markers right";
    
    grid-template-columns: auto 1fr auto;

    .carousel {
      grid-area: scroll;
    } 

  }

  /*スクロールバー非表示（Chrome・Safari）*/
  .scroll-layout::-webkit-scrollbar{
  display:none;
}
  
  .carousel {
    max-inline-size: 80cqi;
    overscroll-behavior-x: contain;
    scroll-behavior: smooth;

     /*要素の高さを指定*/
  height: 300px;

    /*はみ出した要素ををスクロールさせる*/
  overflow-x: scroll;

  /*スクロールバー非表示（IE・Edge）*/
  -ms-overflow-style: none;
  
  /*スクロールバー非表示（Firefox）*/
  scrollbar-width: none;


  }

  .content {
    display: grid;
    grid: 40vmin / auto-flow 60vmin;
    /* grid-template-columns: repeat(auto-fit, 40px); */
    /* gap: 35px; */
    /* padding: 0;
    margin: 0; */

     > li {
      list-style-type: none;
   /*       border: 3px solid #888;  */
    }  
  }
}
.carousel {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  
  > li {
    scroll-snap-align: center;
    list-style:none;
  }
}
    
     .content  img {
    /* width: 540px; */
    height: 340px;
    padding-right: 0 10px 0 0;
      }

      
      /* #wrap #display-wrap .slider .img {
    width: 100%;
    height: 360px;
}  */
      
      /* li  .slider .img {
    width: 100%;
    height: 360px;
} */

  @media screen and (max-width: 768px) {
  #wrap #display-wrap .next {
    display: flex;
    align-items: center;
    position: absolute;
    top: 60%;
    left: 0;
    transform: translate(-32px, -50%);
    line-height: 1;
    letter-spacing: 1px;
    cursor: pointer;
}

  #wrap #display-wrap  .arrow {
    display: inline-block;
    width: 100px;
    height: 1px;
    background-color: #fff;
    margin-right: 20px;
    position: relative;
    transition: .3s;
  }

    #wrap #display-wrap  .arrow::before {
    content: "";
    width: 15px;
    height: 1px;
    position: absolute;
        background-color: #fff;
    top: -5px;
    left: -2px;
    transform: rotate(-45deg);
}

  
    .content img{
 height: 250px;
  }


}

@media screen and (min-width:480px) { 
  .slider {
    display: none;
  }
}


@media screen and (max-width: 480px) {
  .scroll-layout ,#wrap #display-wrap .next ,.arrow{
    display: none;
  }
  
}