/*
Theme Name: 株式会社オーイズミフーズ
Theme URI: /
*/

#box_kv_movie{
    position: relative;
    width: 100%;
    height: 590px;
    overflow: hidden;
}

#box_kv_movie video{
    width: 100%;
    height: auto;
    min-width: 100%;
    min-height: 100%;
    object-fit: cover;
}
#box_kv_movie .box_kv_movie_inner{
    height: 100%;
}
.main-copy{
    position: absolute;
    left: 40px;
    bottom: 40px;
    width: 100%;
    max-width: 570px;
}

@media screen and (max-width: 767px) {
    #box_kv_movie{
        height: 570px;
    }
    .main-copy{
        max-width: 250px;
        left: 20px;
        bottom: 20px;
    }
}

#slider{
    position: relative;
    padding: 50px 0;
    width: 100%;
}
/* スライダーの親要素や画像がレスポンシブ対応していることを確認 */
.bxslider img {
  width: 100vw;
  height: auto;
  display: block;
}

/* スマホ表示（画面幅767px以下）の時の調整 */
@media screen and (max-width: 767px) {
  .bx-wrapper {
    max-width: 100vw !important;
  }

  /* 2. 【ここが最重要】 */
  /* 各スライド要素の横幅を100%にし、さらに最大幅の制限（256px）を強制解除する */
  .bx-wrapper .bxslider > div,
  .bx-wrapper .bxslider> li {
    width: 100vw !important;     /* px指定を上書き */
    max-width: 100vw !important; /* JSの slideWidth: 256 による最大幅制限を強制上書き */
    margin-right: 0 !important;  /* 右側の余白（slideMargin）をゼロにする */
  }

  /* 3. 中の画像も横幅いっぱいに引き伸ばす */
  .bx-wrapper .bxslider img {
    width: 100vw !important;
    height: auto !important;
  }


}

.bx-wrapper .bx-pager.bx-default-pager a {
  background: #ccc; /* ドットの背景色 */
  width: 10px; /* ドットの幅 */
  height: 10px; /* ドットの高さ */
  border-radius: 50%; /* ドットを丸くする */
  margin: 0 5px; /* ドット間のスペース */
}

#sp_box_search{
    margin: 8% auto 0%;
}

#category li{
    background: #F4F4F4;
    padding: 15px 0;
    border-bottom: 1px solid #ccc;
    box-sizing: border-box;
    width: calc( ( 100% - 2px ) / 4 );
}
#category li span{
    border: none;
}
#category li.selected{
    background: #fff;
    border-bottom: none;
    border-top: 1px solid #ccc;
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
    
}
#category li.selected span{
    border-bottom: 2px solid #F98611;
}
#shoplist{
    padding-left: 20px;
}


#box_news_ticker{
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #ccc;
}
#box_news_ticker .news-title{
    width: 120px;
    height: 50px;
    background: #F7F4F4;
    display: flex;
    align-items: center;
    justify-content: center;
}
#box_news_ticker .news-title span{
    border-bottom: 2px solid #F98611;
}

#box_news_ticker .news-list{
    flex: 1;
    gap: 30px;
    padding: 0 15px;
}
#box_news_ticker .news-list li a{
    display: flex; 
    align-items: center;
    justify-content: flex-start;
    gap: 15px;
    width: 100%;
}
#box_news_ticker .news-list-ticker{
    height: 100%;
}
#box_news_ticker .slider-controls,
#box_news_ticker .slider-controls-block{
    display: flex;
    justify-content: center;
    justify-content: center;
    gap: 15px;
}
#box_news_ticker .slider-controls{
    min-width: 180px;
}
#box_news_ticker .news-item{
    display: flex;
    align-items: center;
    gap: 15px;
}
#box_news_ticker .news-item .news_txt01{
    font-size: 10px;
    color: #fff;
    display: block;
    min-width: 65px;
    text-align: center;
}
.my-prev-btn{
    text-indent: -999px;
    background: url(/img/home/btn-prev.png) no-repeat center;
    background-size: cover;
    width: 32px;
    height: 32px;
    border: none;
    cursor: pointer;
}
.my-next-btn{
    text-indent: -999px;
    background: url(/img/home/btn-next.png) no-repeat center;
    background-size: cover;
    width: 32px;
    height: 32px;
    border: none;
    cursor: pointer;
}
.slider-counter{
    display: flex;
    align-items: center;
}
.news-more-block{
    display: flex;
    align-items: center;
    justify-content: center;
}

.img-newsweek{
    width: 100%;
    height: auto;
    display: block;
}

.my-prev-btn-kv{
    text-indent: -999px;
    background: url(/img/home/btn-prev.png) no-repeat center;
    background-size: cover;
    width: 32px;
    height: 32px;
    border: none;
    cursor: pointer;
    position: absolute;
    top: 0;
    bottom: 30px;
    left: 10px;
    margin: auto;
    z-index: 10;
}
.my-next-btn-kv{
    text-indent: -999px;
    background: url(/img/home/btn-next.png) no-repeat center;
    background-size: cover;
    width: 32px;
    height: 32px;
    border: none;
    cursor: pointer;
    position: absolute;
    top: 0;
    bottom: 30px;
    right: 10px;
    margin: auto;
    z-index: 10;
}

@media screen and (max-width: 767px) {

.my-prev-btn-kv{
    position: absolute;
    top: auto;
    bottom: 30px;
    left: 10px;
    margin: auto;
    z-index: 10;
}
.my-next-btn-kv{
    position: absolute;
    top: auto;
    bottom: 30px;
    right: 10px;
    margin: auto;
    z-index: 10;
}

}