.header a,section a,.footer_nav a{
    color:#1a1a1a!important;
}

.header,section,.footer_nav{
    font-family: "NotoSansJP", sans-serif;
}

a {
  text-decoration: none!important;
}

ol, ul {
  list-style: none;
}


/*ナビの設定*/
.nav ul ,.content_box_item ul{
  padding: 0 0 0 0;
  margin:0;
  list-style: none; /* デフォルトのリストスタイルを削除 */
  display: grid; /* グリッドコンテナとして設定 */
  grid-auto-flow: column; /* 自動フローを列方向に設定 */
  overflow-x: scroll; /* 横方向のスクロールを有効にする */
  white-space: nowrap; /* 要素が改行されないようにする */
  scrollbar-width: none; /* Firefox用のスクロールバーを非表示にする */
  -ls-overflow-style: none; /* IE/Edge用のスクロールバーを非表示にする */
  -webkit-overflow-scrolling: touch; /* スマートフォンでのタッチスクロールを有効にする */
  align-items: center; /* 上下中央寄せ */
  justify-content: start;
}

.nav li,.content_box_item li{
  display: inline-block; /* インラインブロック要素として設定 */
}

.nav li:first-child,.content_box_item li:first-child{
margin-left:1.5vw;
}

.content_box_item li{
  position:relative;
}

.nav li img,.content_box_item img{
border-radius: 100vw; /* 画像を丸くするために50%を指定 */
width: 18vw;
height: 18vw;
background:#fff;
margin: 0 auto;
display: block;
object-fit: cover; 
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
margin-top: 3vw;
}


#section01 {
    height: 146vw;
}

.content_box_item li:first-child,.content_box_item li {
  margin-top: 13vw;
}

.content_box{
width:100%;
height: 204vw;
background:#F5F7F8;
background-repeat: no-repeat;
background-position: 48vw -10vw; 
background-size: 95vw auto; 
}


.content_box_item ul{
white-space: normal;
gap: 0px; /* 項目間のスペースを設定 */
}

/*カードレイアウト*/
.content_box_item li {
    width: 52vw;
    height: auto;
    background: #fff;
    margin: 4vw 0 5vw 2.5vw;
    padding: 0;
    border-radius: 1.8vw;
}

.content_box_item li:first-child {
    margin: 4vw 0vw 5vw 3vw;
    padding: 0;
}

.content_box_item img {
    width: 46vw;
    height: 46vw;
    border-radius: 0;
    margin: 3vw 3vw 0 3vw;
    display: block;
    border-radius: 0.6vw;
}


/*商品説明*/
.item_text {
    font-size: 3.2vw;
    padding: 0vw 3vw;
    text-align: justify;
    display: block;
    overflow-wrap: break-word;
    line-height: 4.5vw;
    margin: 0.5vw 0 0 0;
}

.item_price {
    font-size: 4.5vw;
    text-align: right;
    font-weight: bold;
    color: #a50c17;
    padding: 1vw 3.2vw 0 1vw;
    line-height: 6vw;
}

.item_price span{
font-size:3.7vw;
color:#a50c17;
padding-left:0.6vw;
}

/*ブランド*/
.item_material {
    width: 43.5vw;
    font-size: 2.8vw;
    margin-top: 2.5vw;
    margin: 1vw 4vw 0 auto;
    padding: 2vw 0 0.5vw 0;
    text-align: right;
    border-top: 1px solid #e8e8e8;
    color: #a5a4a4;
    letter-spacing: 0.13vw;
    line-height: 2vw;
}

.brand {
    font-size: 2.8vw;
    padding: 0 4.2vw 1.8vw 0;
    text-align: right;
    color: #a5a4a4;
}

li p{
  display: -webkit-box !important; /* Flexboxベースの表示方法 */
  -webkit-box-orient: vertical; /* 垂直方向にボックスを配置 */
  -webkit-line-clamp: 2; /* 行数を3行に制限 */
  overflow: hidden; /* オーバーフローを隠す */
}


.footer_nav li,.content_box_item li,.nav li a img{
      border: 1px solid #ebeced;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}


@media (min-width: 780px) {
main{
  background: #F5F7F8;
}

ul {
    list-style: block;
}

.header,.content_box {
    max-width: 1060px;
    margin: 0 auto;
}

.content_box_item li {
  width: 240px;
  height: auto;
  background: #fff;
  margin: 4vw 2.5vw 5vw 2.5vw;
  padding: 0;
  border-radius: 10px;
}

.content_box_item img {
      width: 210px;
      height: auto;
      border-radius: 0;
      margin: 15px 15px 10px 15px;
      display: block;
      border-radius: 3px;
}

section ul {
  margin-top: 50px!important;
}

h3 {
font-size: 18px;
padding: 0 20px 0 20px;
}

.item_text {
  font-size: 15px;
  padding: 3px 20px;
  line-height: 24px;
}

.item_price {
  font-size: 20px;
  padding: 0;
  line-height: 25px;
  margin:0 20px;
}

.item_price span {
  font-size: 16px;
  padding-left: 1px;
}

.item_material {
  width: auto;
  font-size: 14px;
  margin-top: 2.5vw;
  margin: 4px 20px 0 20px;
  padding: 5px 0 0 0;
  border-top: 1px solid #e8e8e8;
  letter-spacing: 0px;
  line-height: 19px;
}

.brand {
  font-size: 14px;
  padding: 0px 20px;
  letter-spacing: 0;
}

.content_box_item li,.content_box_item li:first-child{
  padding: 0 0 10px 0;
  margin-top: 0vw!important;
  margin: 30px 0 0 10px;
}



.content_box_item{
overflow-x: scroll;
padding: 0 0 10px 0;
}

section ul{
width: 2500px;
}

section .content_box_item::-webkit-scrollbar {
height: 7px;
background:#ddd;
display:none;
}

::-webkit-scrollbar-thumb {
background: #aaa;
border-radius: 5px;
display:none;
}


button.arrow-button.arrow_right {
    left: 1042px;
    top: -265px;
}

button.arrow-button.arrow_left {
    left: -15px;
    top: -226px;
}

.item_text {
    margin-top: 0;
}

.arrow-button {
    display: block;
    width: 40px;
    height: 40px;
    font-size: 25px;
    position: relative;
    font-weight: 300;
    border-radius: 1000px;
    border: none;
    color: #777;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
    background: #fcfcfc;
    opacity: 0.8;
    transition: 0.5s;
}

button.arrow-button.arrow_right {
    left: 1042px;
    top: -265px;
}
}