@charset "utf-8";

/*------基本CSS（PC用記述記載）------*/
#cool-index .contentsWrap {
    font-family: "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", YuGothic, "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif !important;
}

#cool-index .contentsWrap h2,
#cool-index .contentsWrap .mainText,
#cool-index .contentsWrap .subText {
    font-family: 'Shippori Mincho', serif !important;
    font-weight: 500;
}

#cool-index .contentsWrap .fvBnr {
    width: 830px;
}

#cool-index nav ul {
    margin-bottom: 5.5rem;
}

#cool-index nav li img {
    width: 65px;
}

#cool-index section {
    width: 780px;
    margin-bottom: 9rem;
}

#cool-index section h2 {
    color: #5ab0d4;
}

#cool-index #ladies h2 {
    background: url(../img/230523/Ladies.png?$staticlink$) center/contain no-repeat;
}

#cool-index #inner h2 {
    background: url(../img/230523/inner.png?$staticlink$) center/contain no-repeat;
}

#cool-index #mens h2 {
    background: url(../img/230523/mens.png?$staticlink$) center/contain no-repeat;
}

#cool-index #interior h2 {
    background: url(../img/230523/int.png?$staticlink$) center/contain no-repeat;
}

#cool-index #recommend h2 {
    background: url(../img/230523/reco.png?$staticlink$) center/contain no-repeat;
}

#cool-index section h2 span {
    font-size: 20px;
    color: #333 !important;
}

#cool-index .itemContainer::before {
    content: '';
    top: 2%;
    right: 15%;
    left: 15%;
    position: absolute;
    background: url(../img/230523/bg.jpg) center/contain;
    /* background: linear-gradient(100deg, #f4fffc 0%, #def8ff 100%); */
    height: 95%;
    z-index: -1;
}

#cool-index .itemContainer > div {
    margin-bottom: 7.5rem;
    position: relative;
}

#cool-index .itemContainer > div:first-child {
    margin-bottom: 6.5rem;
}

#cool-index .itemContainer .mainImage {
    margin-bottom: -5rem;
}

#cool-index .itemContainer .slide {
    position: relative;
    width: 100%;
    padding-top: 112%;
    overflow: hidden;
}

#cool-index #interior .itemContainer .slide {
    padding-top: 100%;
}

@keyframes slideshow {
    0% {
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    28% {
        opacity: 1
    }

    38% {
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}

#cool-index .itemContainer .slide img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: auto;
    opacity: 0;
    animation: slideshow 9s linear infinite;
}

#cool-index .itemContainer .slide img:nth-child(2) {
    animation-delay: 3s;
}

#cool-index .itemContainer .slide img:last-child {
    animation-delay: 6s;
}

#cool-index .itemContainer .slide:hover img {
    animation-play-state: paused;
}

#cool-index .itemContainer .mainText,
#cool-index .itemContainer .subText {
    text-shadow: 1.5px 1.5px 0.5px #fff;
}

#cool-index .itemContainer .subText {
    bottom: 5rem;
}

#cool-index .itemContainer .subText.rightText {
    right: 0;
}

#cool-index .itemContainer .itemSpec3 a {
    text-decoration: none;
}

#cool-index .itemContainer .subItem .itemSpec3 {
    bottom: 1rem;
}

#cool-index .itemContainer .subItem .itemSpec3.rightItem {
    right: 0;
}

#cool-index .itemContainer .mainText img,
#cool-index .itemContainer .subText img {
    width: 200px;
    margin-bottom: -3rem;
}

#cool-index .itemContainer .saleprice {
    display: block;
    color: #fb0000;
}

#cool-index .itemContainer .price_down {
    color: #fb0000;
    padding: 2px 4px;
    display: block;
    font-size: 12px;
}

#cool-index .itemContainer .clickBtn {
    line-height: 1.4;
    background: #fdbb55;
    color: #fff;
}

#cool-index .moreContents .button a {
    font-size: 14px!important;
}

#cool-index .boxlink_sold .clickBtn {
    display: none;
}

#cool-index .boxlink_sold .slide,
#cool-index .boxlink_sold .subImage img {
    opacity: 0.6;
}

#cool-index .boxlink_sold .slide::after,
#cool-index .boxlink_sold .subImage::after {
    content: "sold out";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: Verdana,'Lucida Grande';
    font-size: 24px;
    letter-spacing: -0.5px;
}


/*------横幅が520px以下CSS（SP用記述記載）------*/
@media screen and (max-width: 520px) {

    #cool-index section {
        margin-bottom: 7rem;
    }

    #cool-index .contentsWrap h2,
    #cool-index .contentsWrap .mainText,
    #cool-index .contentsWrap .subText {
        font-weight: 600;
    }

    #cool-index nav ul {
        margin-bottom: 3.5rem;
    }

    #cool-index nav li img {
        width: 45px;
    }

    #cool-index section h2 span {
        font-size: 14px;
    }

    #cool-index .itemContainer > div {
        margin-bottom: 5rem;
    }

    #cool-index .itemContainer > div:first-child {
        margin-bottom: 5rem;
    }

    #cool-index .itemContainer::before {
        right: 10%;
        left: 10%;
    }

    #cool-index .itemContainer .subItemInner {
        margin-bottom: 3rem;
    }

    #cool-index .itemContainer .mainImage {
        margin-bottom: -2rem;
    }

    #cool-index .itemContainer .mainText {
        margin-bottom: 2rem!important;
    }

    #cool-index .itemContainer .mainText,
    #cool-index .itemContainer .subText {
        text-shadow: 1px 1px 0px #fff;
    }

    #cool-index .itemContainer .mainText img,
    #cool-index .itemContainer .subText img {
        width: 130px;
        margin-bottom: -2.5rem;
    }

    #cool-index .itemContainer .subText {
        bottom: -2.5rem;
    }

    #cool-index .itemContainer .subItem .itemSpec3 {
        position: static!important;
    }

    #cool-index .moreContents .button a {
        height: 63px;
    }

    #cool-index .itemContainer .boxlink_sold {
        margin-bottom: 6rem;
    }


}