/*共通*/
#denimmix {
    width: 100%;
    margin: 0 auto;
    color: #142869;
    background: #F5F5F5;
    text-align: center;
    font-family: 'メイリオ', 'Meiryo','ＭＳ ゴシック','Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3',sans-serif;
    line-height: 1.7;
    z-index: 0;
    position: relative;
}
#denimmix *{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
#denimmix img {
    width: 100%;
    line-height: 1px;
}
#denimmix ul, #denimmix li {
    padding: 0;
    margin: 0;
    list-style-type: none;
}
#denimmix a { text-decoration: none; }
#denimmix .sp { display: none; }
#denimmix .pc { display: block; }

/*メインイメージ*/
#denimmix article.kv {
    width: 100%;
    max-width: 1500px;
    margin: 0 auto;
}

/* リード */
#denimmix article.read {
    width: 960px;
    height: 690px;
    margin: 106px auto 0 auto;
    background: #FFF;
    padding: 58px 0;
    position: relative;
}
#denimmix article.read::before {
    display: block;
    content: "";
    width: 928px;
    height: 660px;
    border: 1px solid #142869;
    position: absolute;
    top: 15px;
    left: 15px;
}
#denimmix article.read p {
    font-size: 20px;
    line-height: 210%;
    letter-spacing: 0.04em;
    font-weight: bold;
}
#denimmix article.read p span {
    background: linear-gradient(transparent 50%, #CCD3E8 50%);
}
#denimmix article.read img {
    margin-top: 26px;
    width: 600px;
}

/* NEW ARRIVAL */
#denimmix article.newarrival {
    width: 960px;
    margin: 100px auto 0 auto;
    padding-bottom: 70px;
    background: #FFF;
}
#denimmix article.newarrival .item {
    display: flex;
    width: 815px;
    justify-content: space-between;
    margin: 70px auto 0 auto;
}
#denimmix article.newarrival .item .item-img {
    width: 450px;
    flex-shrink: 0;
    position: relative;
}
#denimmix article.newarrival .item .item-img .gallery li p {
    font-size: 16px;
    border: 2px solid #142869;
    font-weight: bold;
    line-height: 1;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
}
#denimmix article.newarrival .item .item-img .gallery li p.back { padding: 8px 19px; }
#denimmix article.newarrival .item .item-img .gallery li p.front { padding: 8px 13px; }
#denimmix article.newarrival .item .item-img .gallery .slick-arrow {
    content: "";
    background: url(../img/arrow.jpg) no-repeat;
    background-size: cover;
    width: 14.5px;
    height: 29.5px;
    position: absolute;
    right: -2px;
    top: 211px;
    cursor: pointer;
}
#denimmix article.newarrival .item .item-txt {
    width: 315px;
    flex-shrink: 0;
    text-align: left;
    position: relative;
}
#denimmix article.newarrival .item:nth-of-type(1) .item-txt { margin-top: 91px; }
#denimmix article.newarrival .item:nth-of-type(2) .item-txt ,#denimmix article.newarrival .item:nth-of-type(3) .item-txt { margin-top: 98px; }
#denimmix article.newarrival .item .item-txt dl dt {
    font-size: 30px;
    font-weight: bold;
    line-height: 150%;
}
#denimmix article.newarrival .item:nth-of-type(1) .item-txt dl dt { letter-spacing: -0.06em; }
#denimmix article.newarrival .item:nth-of-type(3) .item-txt dl dt { letter-spacing: -0.06em; }
#denimmix article.newarrival .item .item-txt dl dd {
    font-size: 20px;
    font-weight: bold;
    line-height: 176%;
}
#denimmix article.newarrival .item:nth-of-type(1) .item-txt dl dd,
#denimmix article.newarrival .item:nth-of-type(2) .item-txt dl dd { margin-top: 17px; }
#denimmix article.newarrival .item:nth-of-type(3) .item-txt dl dd { margin-top: 26px; }
#denimmix article.newarrival .item .item-txt img {
    width: 125px;
    position: absolute;
    right: -17.5px;
}
#denimmix article.newarrival .item:nth-of-type(1) .item-txt img,
#denimmix article.newarrival .item:nth-of-type(2) .item-txt img { top: 135px; }
#denimmix article.newarrival .item:nth-of-type(3) .item-txt img { top: 145px; }
#denimmix article.newarrival .item .item-txt a {
    display: inline-block;
    background: #142869;
    color: #FFF;
    font-size: 18px;
    font-weight: bold;
    line-height: 180%;
    border-radius: 4px;
    padding: 2px 22px 0px 22px;
    margin-top: 34px;
    transition: .3s;
}
#denimmix article.newarrival .btn {
    background: #283663;
    border-radius: 10px;
    padding: 11px 103px 7px 103px;
    color: #FFF;
    font-size: 28px;
    font-weight: bold;
    line-height: 180%;
    display: inline-block;
    margin-top: 70px;
    transition: .3s;
}
#denimmix article.newarrival .item .item-txt a:hover,
#denimmix article.newarrival .btn:hover { opacity: 0.8; }

/* パンくず */
#denimmix .breadcrumb {
    position: relative;
    max-width: 1200px;
    margin: 129px auto 0 auto;
    padding: 20px 0;
}

/*レスポンシブ対応*/
@media screen and (max-width: 780px) {
    #denimmix .sp { display: block; }
    #denimmix .pc { display: none; }
    
    /* リード */
    #denimmix article.read {
        width:calc(335 / 375 * 100vw);
        height: calc(567 / 375 * 100vw);
        margin-top: calc(50 / 375 * 100vw);
        padding: calc(41 / 375 * 100vw) 0;
    }
    #denimmix article.read::before {
        width: calc(313 / 375 * 100vw);
        height: calc(544 / 375 * 100vw);
        top: calc(10 / 375 * 100vw);
        left: calc(10 / 375 * 100vw);
    }
    #denimmix article.read p {
        font-size: calc(16 / 375 * 100vw);
        line-height: 200%;
    }
    #denimmix article.read img {
        margin-top: calc(19 / 375 * 100vw);
        width: calc(284 / 375 * 100vw);
    }

    /* NEW ARRIVAL */
    #denimmix article.newarrival {
        width: calc(335 / 375 * 100vw);
        margin-top: calc(50 / 375 * 100vw);
        padding-bottom: calc(60 / 375 * 100vw);
    }
    #denimmix article.newarrival .item {
        width: calc(260 / 375 * 100vw);
        flex-direction: column;
    }
    #denimmix article.newarrival .item:nth-of-type(1) { margin-top: calc(50 / 375 * 100vw) }
    #denimmix article.newarrival .item:nth-of-type(2),#denimmix article.newarrival .item:nth-of-type(3) { margin-top: calc(60 / 375 * 100vw); }
    #denimmix article.newarrival .item .item-img { width: 100%; }
    #denimmix article.newarrival .item .item-img .gallery li img {
        width: calc(260 / 375 * 100vw);
        margin: calc(10 / 375 * 100vw) 0 0 calc(5 / 375 * 100vw);
    }
    #denimmix article.newarrival .item .item-img .gallery li p {
        font-size: calc(14 / 375 * 100vw);
        border: calc(0.76 / 375 * 100vw) solid #142869;
    }
    #denimmix article.newarrival .item .item-img .gallery li p.back { padding: calc(6 / 375 * 100vw) calc(12 / 375 * 100vw); }
    #denimmix article.newarrival .item .item-img .gallery li p.front { padding: calc(5 / 375 * 100vw) calc(7 / 375 * 100vw) calc(6 / 375 * 100vw) calc(7 / 375 * 100vw); }
    #denimmix article.newarrival .item .item-img .gallery .slick-arrow {
        width: calc(9 / 375 * 100vw);
        height: calc(18 / 375 * 100vw);
        right: calc(-8 / 375 * 100vw);
        top: calc(137 / 375 * 100vw);
    }
    #denimmix article.newarrival .item .item-txt {
        width: 100%;
        text-align: center;
    }
    #denimmix article.newarrival .item:nth-of-type(1) .item-txt { margin-top: calc(10 / 375 * 100vw); }
    #denimmix article.newarrival .item:nth-of-type(2) .item-txt,#denimmix article.newarrival .item:nth-of-type(3) .item-txt { margin-top: 0; }
    #denimmix article.newarrival .item .item-txt dl dt {
        font-size: calc(20 / 375 * 100vw);
        margin-top: 0;
    }
    #denimmix article.newarrival .item:nth-of-type(3) .item-txt dl dt { letter-spacing: -0.029em; }
    #denimmix article.newarrival .item .item-txt dl dd {
        font-size: calc(16 / 375 * 100vw);
        line-height: 160%;
    }
    #denimmix article.newarrival .item:nth-of-type(1) .item-txt dl dd,#denimmix article.newarrival .item:nth-of-type(2) .item-txt dl dd { margin-top: calc(8 / 375 * 100vw); }
    #denimmix article.newarrival .item:nth-of-type(3) .item-txt dl dd { margin-top: calc(10 / 375 * 100vw); }
    #denimmix article.newarrival .item .item-txt img {
        width: calc(76 / 375 * 100vw);
        right: calc(-25 / 375 * 100vw);
    }
    #denimmix article.newarrival .item:nth-of-type(1) .item-txt img { top: calc(111 / 375 * 100vw); }
    #denimmix article.newarrival .item:nth-of-type(2) .item-txt img { top: calc(111 / 375 * 100vw); }
    #denimmix article.newarrival .item:nth-of-type(3) .item-txt img { top: calc(113 / 375 * 100vw); }
    #denimmix article.newarrival .item .item-txt a {
        font-size: calc(15 / 375 * 100vw);
        border-radius: calc(4 / 375 * 100vw);
        padding: calc(5 / 375 * 100vw) calc(26 / 375 * 100vw) calc(3 / 375 * 100vw) calc(26 / 375 * 100vw);
        margin-top: calc(22 / 375 * 100vw);
    }
    #denimmix article.newarrival .btn {
        border-radius: calc(8 / 375 * 100vw);
        padding: calc(6 / 375 * 100vw) calc(58 / 375 * 100vw);
        font-size: calc(18 / 375 * 100vw);
        margin-top: calc(59 / 375 * 100vw);
    }

    /* パンくず */
    #denimmix .breadcrumb {
        max-width: calc(355 / 375 * 100vw);
        margin-top: calc(76 / 375 * 100vw);
        padding: calc(10 / 375 * 100vw) 0;
    }
}