@charset "utf-8";
.fair-container {
    background-color:ivory;
    padding-top: 45px;
    padding-bottom: 55px;
}

.fair-container h2::after {
    content: '';
    display: block;
    width: 80%;
    height: 1px;
    background-color: #000000;
    margin-top: 20px;
    margin-left: auto;
    margin-right: auto;
}


.item-wrap {
    overflow: hidden;
    position: relative;
}



.item-list {
    height: 800px;
    margin-left: 50%;
    padding-top: 40px;
    padding-bottom: 10px;
    padding-left: 40px;
    padding-right: 40px;
    list-style: none;
}


.item-list li {
    margin-left: -500px;
    margin-right: -400px;
    height: 450px;
}

.item-list img {
    width: 400px;
}

.item-wrap2 {
    width: 100%;
}

.item-list2 {
    display: flex;
    overflow: scroll;
    list-style: none;
}

.item-list2 li {
    width: 400px;
}

.item-list2 img {
    width:400px;
    padding-left: 3px;
    padding-right: 3px;
    margin-bottom: 3px;
}

.btn-wrap {
    position: relative;
}

.arrow-right {
    position: absolute;
    top: 180px;
    right: 12%;
    display: inline-block;
    width: 18px;
    height: 18px;
    margin: 0 10px;
    border-top: 4px solid #808080;
    border-right: 4px solid #808080;
    border-left: 0px;
    border-bottom: 0px;
    transform: rotate(45deg);
    z-index: 9;
  }

  .arrow-left {
    position: absolute;
    top: 180px;
    left: 12%;
    display: inline-block;
    width: 18px;
    height: 18px;
    margin: 0 10px;
    border-left: 4px solid #808080;
    border-bottom: 4px solid #808080;
    border-right: 0px;
    border-top: 0px;
    transform: rotate(45deg);
    z-index: 30;
  }



.slider_hakama {
    display: flex;
    width: 100%;
    overflow: scroll;
} 

.slider_hakama img {
    width: 400px;
    padding-left: 3px;
    padding-right: 3px;
    margin-bottom: 40px;

}

.slider_hakama_p {
    text-align: center;
    font-size: larger;
    margin-bottom: 30px;

}

.slider_hakama_p h3::after {
    content: '';
    display: block;
    width: 80%;
    height: 1px;
    background-color: #000000;
    margin-top: 1px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

@media (max-width: 2300px) {
    .item-list li {
        margin-left: -1300px;
        margin-right: -500px;
        height: 400px;
    }
    
    .item-list img {
        width: 350px;
    }
}

@media (max-width: 2200px) {
    .item-list li {
        margin-left: -1200px;
        margin-right: -500px;
        height: 400px;
    }
    
    .item-list img {
        width: 350px;
    }
}

@media (max-width: 2100px) {
    .item-list li {
        margin-left: -1100px;
        margin-right: -500px;
        height: 400px;
    }
    
    .item-list img {
        width: 350px;
    }
}

@media (max-width: 2000px) {
    .item-list li {
        margin-left: -1000px;
        margin-right: -500px;
        height: 400px;
    }
    
    .item-list img {
        width: 350px;
    }
}

@media (max-width: 1900px) {
    .item-list li {
        margin-left: -900px;
        margin-right: -500px;
        height: 400px;
    }
    
    .item-list img {
        width: 350px;
    }
}

@media (max-width: 1800px) {
    .item-list li {
        margin-left: -900px;
        margin-right: -400px;
        height: 400px;
    }
    
    .item-list img {
        width: 350px;
    }
}

@media (max-width: 1600px) {
    .item-list li {
        margin-left: -700px;
        margin-right: -300px;
        height: 400px;
    }
    
    .item-list img {
        width: 350px;
    }
}


@media (max-width: 1350px) {
    .item-list li {
        margin-left: -550px;
        margin-right: -300px;
        height: 400px;
    }
    
    .item-list img {
        width: 350px;
    }

}

@media (max-width: 1199px) {
    .item-list li {
        margin-left: -450px;
        margin-right: -300px;
        height: 400px;
    }
    
    .item-list img {
        width: 300PX;
    }

}

@media (max-width: 1100px) {
    .item-list li {
        margin-left: -450px;
        margin-right: -300px;
        height: 300px;
    }
    
    .item-list img {
        width: 250PX;
    }

}

@media (max-width: 999px) {
    .item-list li {
        margin-left: -380px;
        margin-right: -300px;
        height: 300px;
    }
    
    .item-list img {
        width: 250px;
    }

}

@media (max-width: 950px) {
    .item-list li {
        margin-left: -300px;
        margin-right: -300px;
        height: 300px;
    }
    
    .item-list img {
        width: 250px;
    }

}
@media (max-width: 880px) {
    .item-list li {
        margin-left: -300px;
        margin-right: -200px;
        height: 300px;
    }
    
    .item-list img {
        width: 250px;
    }

}


@media (max-width: 767px) {
    .item-list li {
        margin-left: -250px;
        margin-right: -200px;
        height: 300px;
    }
    
    .item-list img {
        width: 250px;
    }

    .titletokuten {
        font-size: 35px;
    }

    .slider_hakama img {
        width: 220px;
    }

}

@media (max-width: 700px) {
    .item-list li {
        margin-left: -200px;
        margin-right: -200px;
        height: 300px;
    }
    
    .item-list img {
        width: 250px;
    }

    .titletokuten {
        font-size: 35px;
    }

    .item-list2 li {
        width: 200px;
    }
    
    .item-list2 img {
        width:200px;
        padding-left: 3px;
        padding-right: 3px;    
    }
    .arrow-right {
        right: 5%;
        top:85px;
      }
    
      .arrow-left {
        left: 5%;
        top:85px;
      }



}


@media (max-width: 640px) {
    .item-list li {
        margin-left: -150px;
        margin-right: -150px;
        height: 300px;
    }
    
    .item-list img {
        width: 250px;
    }

    .titletokuten {
        font-size: 35px;
    }

}

@media (max-width: 529px) {
    .item-list li {
        margin-left: -100px;
        margin-right: -100px;
        height: 300px;
    }
    
    .item-list img {
        width: 250px;
    }

    .titletokuten {
        font-size: 20px;
    }

    @media (max-width: 429px) {
        .item-list li {
            margin-left: -70px;
            margin-right: -70px;
            height: 300px;
        }
        
        .item-list img {
            width: 250px;
        }
    
        .titletokuten {
            font-size: 20px;
        }



}



   




@media (max-width: 800px) {
    .item-list {
        padding-left: 20px;
        padding-right: 20px;
    }

    .li {
        margin-left: 10px;}

    .item-list img {
        width: 220px;
        margin-left: 20px;

    }
}