/****************************************
    ==== -1920px
****************************************/

@media screen and (min-width: 1920px) {
    
.item-list li {
    width: 16.66% ;
}
#recommend_ul li,
#newest_ul li,
#brand_ul li,
#search_ul li,
#game-list .item-list li { width: 16.66% ; }
#goods_ul li { width: 33.33% ; }

}

/****************************************
    ==== +1200px
****************************************/

@media screen and (min-width: 1200px) {

}

/****************************************
    ==== -1200px
****************************************/

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

aside {
    width: 3.5rem ;
}
aside .item .title {
}
aside .item .title::after,
aside .item .title.open::after {
    display: none ;
}
aside .item .title span.item-icon {
    margin: 0 auto ;
    width: 1.4rem ;
    height: 1.4rem ;
    background-size: 1.4rem 1.4rem ;
}
aside .item .title span.item-name,
aside .item .contents ul li .txt,
aside .item .contents ul li .viewing .viewing-num,
aside .item.archive .contents ul li .viewing {
    display: none ;
}
aside .item .contents ul li .img {
    margin: 0 auto ;
}
aside .item .contents ul li .viewing {
    width: 1rem ;
    height: 1rem ;
    background: #00b4ff;
    position: absolute ;
    bottom: -0.2rem ;
    right: -0.2rem ;
    border-radius: 50% ;
    box-sizing: border-box ;
    padding: 0.1rem ;
}
aside .item .contents ul li .viewing .viewing-icon {
    width: 0.8rem ;
    height: 0.8rem ;
    display: inline-block ;
    background: url("../images/lounge/viewing_white.gif") no-repeat center center;
    background-size: 0.8rem 0.8rem ;
    padding: 0 ;
    margin: auto ;
}
aside .item.ranking .contents ul li .box::before {
    position: absolute ;
    padding-left: 0 ;
    z-index: 2;
    bottom: -0.2rem ;
    right: -0.2rem ;
}
main {
    width: calc(100% - 3.5rem) ;
}
footer nav#fnav dl {
    width: 33.33% ;
}
.item-list li {
    width: 33.33% ;
}
#recommend_ul li,
#newest_ul li,
#brand_ul li,
#search_ul li,
#game-list .item-list li { width: 25% ; }
#goods_ul li { width: 50% ; }

}

/****************************************
    ==== +768px
****************************************/

@media screen and (min-width: 768px) {

.img-hover a .img::after {
    content: "" ;
    background: url("../images/lounge/icon_0009_0001.svg") no-repeat center center ;
    width: 3rem ;
    height: 3rem ;
    opacity: 0;
        -webkit-transition:    all .2s ease;
    transition: all .2s ease;
    transform: scale(1.2) !important;
    position: absolute ;
}
#game-list .img-hover a .img::after {
    background: url("../images/lounge/icon_0010_0001.svg") no-repeat center center ;
}
#liver-list .img-hover a .img::after {
    background: url("../images/lounge/icon_0002_0002.svg") no-repeat center center ;
}
.img-hover a:hover .img::after {
    opacity: 1;
    transform: scale(1) !important;
}

}


/****************************************
    ==== -767px
****************************************/

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

html, body {
    font-size: 16px;
}
.img-hover a .caption {
    padding: 0.2rem 0.4rem ;
}
.slider_liver .img-hover a {
    padding: 0.25rem ;
}
header .header-container{
    padding: 0.5rem ;
}
header .logo {
    width: 25% ;
    min-width: 10rem ;
}
header .menu {
    width: 12% ;
}
header .menu,
aside {
    display: none;
}
main {
    width: 100% ;
}
section {
    padding: 0.5rem 0.25rem 1rem ;
}
section .contents {
    padding: 0.5rem ;
}
.btn-more {
    right: 0.5rem ;
}
.item-list li {
    width: 50% ;
    padding: 0 0.25rem 1rem ;
}
#recommend_ul li,
#newest_ul li,
#brand_ul li,
#search_ul li,
#game-list .item-list li { width: 33.33% ; }
#goods_ul li { width: 100% ; }
body#home #info {
    padding: 0.5rem 0 ;
    flex-direction: column ;
}
body#home #info section {
    width: 100% ;
    padding: 0.5rem 0 ;
}
body#home #info section h1 {
    padding-left: 0.5rem ;
}
body#home #info section .contents {
    border-radius: 0 ;
}
.hamburger {
    display : block;
}
.swiper-button-prev,
.swiper-container-rtl .swiper-button-next {
  left: 10px;
}
.swiper-button-next,
.swiper-container-rtl .swiper-button-prev {
  right: 10px;
}

}


/****************************************
    ==== -576px
****************************************/

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

body#home #gamelist ul li {
}
footer nav#fnav dl {
    width: 50% ;
}
body#home #gamelist .btn-category { display: none ; }
.hamburger {
    display : block;
}

}


/****************************************
    ==== #ls-list_oripa 専用スタイル
****************************************/

/* スマートフォン（767px以下）: 1カラム */
@media screen and (max-width: 767px) {
    #ls-list_oripa .item-list li {
        width: 100% !important;
        padding: 0 0.25rem 1rem !important;
    }
}

/* タブレット（768px以上1200px未満）: 2カラム */
@media screen and (min-width: 768px) and (max-width: 1199px) {
    #ls-list_oripa .item-list li {
        width: 50% !important;
        padding: 0 0.5rem 1rem !important;
    }
}

/* PC（1200px以上）: 3カラム */
@media screen and (min-width: 1200px) {
    #ls-list_oripa .item-list li {
        width: 33.33% !important;
        padding: 0 0.5rem 1rem !important;
    }
}

/* #ls-list_oripa 内の画像の縦横比を3:2に設定 */
#ls-list_oripa .wps-container {
    /* aspect-ratio: 3/2 !important; */
    width: 100% !important;
}

#ls-list_oripa .wps-container img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

/* #ls-list_oripa 内のブランド情報とボタンのスタイル */
#ls-list_oripa .brand-info {
    padding: 0.5rem 0;
    text-align: center;
}

#ls-list_oripa .price {
    font-size: 1.2rem;
    font-weight: bold;
    color: #333;
    margin-bottom: 0.3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
}

#ls-list_oripa .price .coin-icon {
    width: 1.2rem;
    height: 1.2rem;
    vertical-align: middle;
}

#ls-list_oripa .remaining {
    font-size: 0.9rem;
    color: #666;
    margin-bottom: 0.5rem;
}

#ls-list_oripa .gacha-buttons {
    display: flex;
    gap: 0.3rem;
    justify-content: center;
    flex-wrap: wrap;
}

#ls-list_oripa .gacha-btn {
    padding: 0.4rem 0.8rem;
    border: none;
    border-radius: 0.3rem;
    font-size: 0.8rem;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
}

#ls-list_oripa .gacha-btn.single {
    background-color: #000;
    color: #fff;
}

#ls-list_oripa .gacha-btn.multi {
    background-color: #e72d3e;
    color: #fff;
}

#ls-list_oripa .gacha-btn:hover {
    opacity: 0.8;
    transform: translateY(-1px);
}

/****************************************
    ==== hover_disabled
****************************************/

a.hover_disabled:hover,
a.hover_disabled:hover .img,
a.hover_disabled:hover img {
    content: none !important;
    transform: scale(1) !important;
}