@charset "euc-jp";
/*新着情報*/
.newsWrap{
    width:100%;
    height:280px;
    border:1px solid #ccc;
    margin-bottom:50px;
}
.newsWrap iframe{
    height:278px;    
    padding:15px 0;
}
@media only screen and (max-width:999px) {
    .newsWrap{
        height:180px;
    }
    .newsWrap iframe{
        height:178px;    
        padding:10px 0;
    }    
}
/*売れ筋商品*/
.sellerWrap{    
    margin-bottom:50px;
}
.sellerInner{
    background-color:var(--main-color-light);
    padding:7.5px;
}
.sellerInner ol{
    display:flex;
    flex-wrap: wrap;
    counter-reset : Num 0;
}
.sellerInner ol > li{
    width:calc((100% - 30px) / 2);
    background-color:#fff;
    margin:7.5px;
    padding:0px;
    display:flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    position:relative;
    list-style-type:none;
}
.sellerInner ol > li::before{
    content: counter(Num);
    counter-increment: Num 1;    
    width:55px;
    height:55px;
    display:flex;
    justify-content: center;
    align-items: center;
    position:absolute;
    left:0;
    top:0;
    font-size:2.2rem;
    font-weight:700;
    color:#fff;
    background-color:var(--base-color1);
}
.sellerInner ol > li:nth-child(-n+3)::before{
    background-image:url("https://on-kenhh.heteml.net/shop/images/index/rankbg.webp");
    background-size:45px 36px;
    background-repeat:no-repeat;
    background-position:calc(((55px - 45px)/2) - 1px) calc(((55px - 36px)/2) - 3px);
    height:50px;
    padding-top:5px;
}
.sellerInner ol > li:nth-child(1)::before{
    background-color:var(--ranking-color1);
    color:var(--ranking-color1);
}
.sellerInner ol > li:nth-child(2)::before{
    background-color:var(--ranking-color2);
    color:var(--ranking-color2);
}
.sellerInner ol > li:nth-child(3)::before{
    background-color:var(--ranking-color3);
    color:var(--ranking-color3);
}
.sellerInner a{
    width:100%;
    text-decoration:none;
    display:flex;
    flex-direction: column;
    align-items: center;
    color:var(--base-color0);
    padding:25px 15px 0 55px;
}
.seller-musicName{
    display:block;
    font-size:1.7rem;
    font-weight:800;
    height:calc(1em * 1.7);
    overflow-y: auto;
    width:100%;
    text-align:center;
}
.seller-artistName{
    font-size:1.4rem;    
}
.sellerInner a:hover .seller-musicName,
.sellerInner a:hover .seller-artistName{
    color:var(--main-color);
}
.sellerInner .audioPlayer audio{
    max-width:100%;
    margin:20px 0 20px 40px;
}
@media only screen and (max-width:999px) {
    .sellerWrap{    
        margin-bottom:30px;
    }
    .sellerInner{
        background-color:var(--main-color-light);
        padding:5px;
    }
    .sellerInner ol > li{
        width:100%;
        margin:5px;
        padding:0px;
        flex-wrap: nowrap;
        flex-direction: column;
    }
    .sellerInner ol > li::before{
        width:calc(100% - 15px);
        height:25px;
        display:flex;
        justify-content: flex-start;
        position:absolute;
        font-size:1.6rem;
        font-weight:700;
        padding-left:15px;
    }
    .sellerInner ol > li:nth-child(-n+3)::before{
        width:calc(100% - 35px);
        background-size:19px 15px;
        background-repeat:no-repeat;
        background-position:10px center;
        height:25px;
        padding-top:0px;
        padding-left:35px;
    }
    .sellerInner ol > li:nth-child(1)::before,
    .sellerInner ol > li:nth-child(2)::before,
    .sellerInner ol > li:nth-child(3)::before{
        color:#fff;
    }
    .sellerInner a{
        padding:25px 0px 0 0px;
        width:100%;
    }
    .seller-musicName{
        width:auto;
        margin-top:15px;
    }
    .sellerInner .audioPlayer audio{
        margin:15px 0 10px 0px;
    }
}
/*新譜情報*/
.newReleaseWrap{margin-bottom:50px;}
.newReleaseInner{
    background-color:var(--sub-color-yellow-light);
    padding:7.5px;
}
.newReleaseInner ul{
    display:flex;
    flex-wrap: wrap;
}
.newReleaseInner ul > li{
    width:calc((100% - 45px) / 3);
    background-color:#fff;
    margin:7.5px;
    padding:25px 5px;
    display:flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    border-radius: 15px;
}
.newReleaseInner a{
    text-decoration:none;
    display:flex;
    flex-direction: column;
    align-items: center;
    color:var(--base-color0);
    padding:0 10px;
}
.newReleaseInner a::before{
    content:"";
    width:100px;
    height:100px;
    background-image:url("https://on-kenhh.heteml.net/shop/images/index/onpu.webp");
    background-size:100px 100px;
    background-repeat:no-repeat;
    background-position:center;
    margin-bottom:15px;
}
.newRelease-musicName{
    display:block;
    font-size:1.7rem;
    font-weight:800;
    height:calc(1em * 1.7);
    overflow-y: auto;
}
.newRelease-artistName{
    font-size:1.4rem;
    margin-bottom:10px;    
}
.newRelease-price{
    border:2px solid var(--main-color);
    padding:0 25px;
    color:var(--main-color);
    font-size:2.0rem;
}
.newRelease-discountprice{
    font-size:0.8em;
    color:var(--main-color);
}
.newRelease-soldout{
    
}
.newReleaseInner .audioPlayer audio{
    max-width:100%;
    margin:15px 0 0 0;
}
@media only screen and (max-width:999px) {
    .newReleaseWrap{margin-bottom:30px;}
    .newReleaseInner{
        padding:5px;
    }
    .newReleaseInner ul{
        flex-direction: column;
        flex-wrap:nowrap;
    }
    .newReleaseInner ul > li{
        width:calc(100% - 10px);
        margin:5px;
        padding:15px 5px;
        border-radius: 10px;
    }
    .newReleaseInner a{
        width:100%;
    }
    .newReleaseInner a::before{
        width:50px;
        height:50px;
        background-size:50px 50px;
        margin-bottom:10px;
    }
    .newRelease-musicName{
        font-size:1.6rem;
    }
}
/*お試し楽譜(無料) */
.trialSheetMusicWrap{
}
.trialSheetMusicWrap dl{
    --border-trialSheetMusic-box:15px;
    border-radius: var(--border-trialSheetMusic-box);
    overflow: hidden;
}
.trialSheetMusicWrap dl > dt{
    color:#fff;
    font-weight:700;
    padding:10px;
    text-align: center;
    font-size:2.0rem;
}
.trialSheetMusic-marching > dt{
    background-color:var(--category-color-magenta);
}
.trialSheetMusic-japaneseDrum > dt{
    background-color:var( --category-color-brown);
}
.trialSheetMusicWrap dl > dd{
    display:flex;
    justify-content: center;
    align-items:center;
    flex-direction: column;
    padding:25px 15px 15px;
}
.trialSheetMusic-marching > dd{
    background-color:var(--category-color-magenta-light);
}
.trialSheetMusic-japaneseDrum > dd{
    background-color:var(--category-color-brown-light);
}
.trialSheetMusicBtn{
    margin-bottom:10px;
    width:100%;
}
.trialSheetMusicBtn a{
    --trialSheetMusicBtn-height:60px;
    background-color:rgba(255,255,255,1);
    display:flex;
    justify-content: center;
    align-items:center;
    padding:10px;
    text-decoration:none;
    color:var(--base-color0);
    height:var(--trialSheetMusicBtn-height);
    border-radius: calc(var(--trialSheetMusicBtn-height) / 2);
    width:100%;
    font-weight:500;
    font-size:1.8rem;
    transition: all 0.3s ease;
}
.trialSheetMusic-marching .trialSheetMusicBtn a:hover{
    color:var(--category-color-magenta);
}
.trialSheetMusic-japaneseDrum .trialSheetMusicBtn a:hover{
    color:var( --category-color-brown);
}
.trialSheetMusicBtn a::before{
    content:"\f090";
    font-family: "Material Symbols Rounded";
    display:inline-block;
    margin-right:10px;
    font-size:1.5em;
    color:var(--main-color);
}
.trialSheetMusicWrap dl p > span{
    color:var(--main-color);
    font-size:1.1em;
}
@media only screen and (max-width:999px) {
}