@charset "UTF-8";
@import url(https://fonts.googleapis.com/earlyaccess/notosansjp.css);

/* CSS Document */
body{ font-family: 'Noto Sans JP',"游ゴシック Medium",YuGothic,YuGothicM,"Hiragino Kaku Gothic ProN","Hiragino Kaku Gothic Pro",メイリオ,Meiryo,sans-serif;font-size: 3.6vw; color: #161616;}
img{ width: 100%; max-width: 100%; display: block;}


@media print, screen and (min-width:769px){

}

/*notfound*/
.page-notfound-block{ min-height: 65vh; display: flex; flex-direction: column; align-items: center;}
.page-notfound-block p{line-height: 2;  font-size: 7vw;font-weight: 700; display: flex; flex-direction: column; align-items: center;}
.page-notfound-block p span{ display: block; font-size: 3.7vw;}
.page-notfound-block p + a{ margin-top: 10vw;}

.soon{ text-align: center; padding: 10vw 0; line-height: 1.6; font-size: .98em;}
/*header
========================================*/

header{ display: flex; align-items: center; padding: 6vw 2.5vw; position: fixed; width: 100%; z-index: 10000; top: 0; background: #fff;}

header .page-ttl{ z-index: 9999; margin-right: .88em;}
header a.bk_home{ border: 1px solid #707070; font-size: .9em; padding: .25em .5em; background: #fff;}
.header_logout{ margin-left: auto; margin-right: 12vw; font-size: .88em;}
/*ナビゲーション*/
.hum-btn{ position: absolute; top: 3.5vw; right: 2.5vw; width: 10vw; height: 10vw; background: #000; border-radius: 50%; display: flex; flex-direction: column;  justify-content: center; align-items: center; z-index: 10000;}

.hum-btn > span{ display: block; width: 58%; background: #fff; height: 3px;transition: all 0.2s ease-in-out;}
.hum-btn > span + span{ margin-top: 1vw;}

.hum-open .hum-btn > span:nth-child(1){ transform:translateY(2px) rotate(-45deg)}
.hum-open .hum-btn > span:nth-child(2){ display: none;}
.hum-open .hum-btn > span:nth-child(3){ transform: translateY(-1px) rotate(45deg); margin-top: 0;}

#sp_nav_block{ display: none;}
#sp_nav_block.js_appear{  position: fixed; top: 0; left: 0; right: 0; bottom: 0; display: block; z-index: 9998;}
.sp_nav_wp{ position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: #fff; overflow: auto; -webkit-overflow-scrolling: touch; display: flex; flex-direction: column; justify-content: center; padding: 10vw;}

.js_fixed { position: fixed; width: 100%; height: 100%;}

#gnav li + li{ margin-top: 4em;}
#gnav li:not(:last-child) a{ display: flex; align-items: center;}
#gnav li a { font-weight: 700; font-size: 1.24em; display: flex;}
#gnav li a span{ width: 1.24em; margin-right: .5em; display: block;}

/*footer
========================================*/
.footnav_area, footer{ background: #000; color: #fff;}
.footnav_area{ padding: 10vw 8vw;}
.footnav_area li + li{ margin-top: 1.44em;}

/*=======================================================
 content
=======================================================*/

section + section{ margin-top: 20vw;}
h1{ font-size: 20px; font-weight: 800; text-align: center;}
h1.icn{ display: flex; justify-content: center; align-items: center;}
h1.icn > span{ width: 1.44em; margin-right: .5em;}

.sec-ttl{ text-align: center; font-weight: 800; font-size: 20px;}
.inner{ width: 780px; max-width: 100vw; margin: 0 auto;}
.wrap{ padding: 25vw 0;}

.btn_set{ width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center;}
.btn_set.in_price{ flex-direction: row; justify-content: center;}

a.btn_bk{ color: #fff; text-align: center; background: #000; width: 70vw; padding: 1.24em 0;  border-radius: 30px;}
.btn_set a + a,.btn_set input + a{ margin-top: 1.44em;}
.btn_set input + p.att{ margin-top: 1.44em;}
.btn_set p.att a{ text-decoration: underline;}

.btn_set.in_price a.btn_bk{ margin-right: 5vw;}
.btn_set.in_price p.price{ color: #707070; padding: .5em; border: 1px solid #707070;}

.sec_top{ margin-top: 10vw;}

/*アラート*/
#alert-bar{ position: fixed; top: 0; width: 100%; background: #1E61BD; z-index: 10001; }
#alert-bar.error{ background: #EF0081;}
#alert-bar p{ padding: 7vw 5vw; color: #fff; line-height: 1.4;}
#alert-bar p.bktop{ display: flex; align-items: center; justify-content: space-between;}
#alert-bar p.bktop span{ font-size: .88em;}


/*TOPページ
====================================*/

/*アーティスト*/
.sec-artist-box{ width: 92%; margin: 0 auto; position: relative; padding: 5vw 5vw 10vw; display: flex; flex-direction: column; align-items: center;}

.sec-artist-box > div + div{ margin-top: 8vw;}
.sec-artist-box::after{ content: ""; position: absolute; display: block; width: 100%; bottom: 0; padding-top: 120%; box-shadow: 0 19px 21px rgba(0,0,0,0.2);z-index: -1;}

.sec-artist-box p.thum{box-shadow: 0 10px 15px rgba(0,0,0,0.12);}
.artist_deta{ width: 100%; margin-top: 5vw; display: flex; justify-content: space-between; align-items: center; font-weight:700;}
.artist_deta p.fans{ color: #EF0081; font-size: 1.14em;}
.artist_deta p.fans span{ padding-left: 1em;}
.artist_deta p.prof{ display: flex; font-size: .88em; align-items: center;}
.artist_deta p.prof a{ text-decoration: underline; color: #707070;}
.artist_deta p.prof span{ display: block; width: 1.66em; margin-right: .5em;}

/*ストア*/
.store-list{ display: flex; flex-wrap: wrap; width: 92%; margin: 8vw auto 10vw;}
.store-list li{ width: 47%; margin-bottom: 6%;}
.store-list li:nth-child(even){ margin-left: 6%;}
.store-list li p.thum{ margin-bottom: 1em;}
.store-list li .cmnt{ border-left: 2px solid #707070; padding: 0 1em;}
.store-list li .cmnt p + p{ padding-top: 13px;}
.store-list li .cmnt p.date{ font-size: .8em; color: #707070;}
.store-list li .cmnt p.ttl{ font-size: 1.14em; font-weight: 700;}


/*新規登録　・ 会員情報編集　・　ログイン
====================================*/

input{ display: block;}
input[type='text'],input[type='email'],input[type='password'],textarea{ width: 100%; border: 1px solid #707070; font-size: 16px; padding: .5em; box-sizing: border-box;}

input[type="submit"], input[type="button"]{ background: #000; color: #fff; text-align: center; width: 78vw; padding: 1.2em 0; border-radius: 30px; font-size: 1em;}
input.page-bk{ background: none; color: #000; width: auto; display: block;}

/* 送信ボタン - 押せないとき */

input[type="submit"][disabled],input[type="button"][disabled]{
opacity: .5;
cursor: default;
}
.reg_form{ margin-bottom: 10vw;}
.reg_form li p:first-child{ background: #F5F5F5; padding: 1em;}
.reg_form li > div{ padding: 1.5em 1em; display: flex; flex-direction: column; justify-content: space-around;}

.reg_form li > div.pass{ flex-direction: column; align-items: center;}
.reg_form li > div label{ width: 92%; box-sizing: border-box; line-height: 1.6; margin: 0 auto;}

.reg_form li p.f-input{ width: 92%; padding: 1.5em 1em; box-sizing: border-box; line-height: 1.6; margin: 0 auto;}

.reg_form li > p.f-input span.alert{ color: #EF0081; font-size: .8em; margin-top: .5em;}
.reg_form li > div span.alert{ color: #EF0081; font-size: .8em; margin-top: .5em;}
.reg_form li > span.alert{ display: block; color: #EF0081; font-size: .8em; margin-top: -1em; padding: 0 0 1em 3em;}
.reg_form .pass_in{ width: 92%; display: flex; align-items: center; margin-top: .5em;}
.reg_form .pass_in label{ display: flex; align-items: center; width: 100%;}

#pass-check{ display: none;}
.check-input{ display: none; }
.check-parts{ padding-left: 1.88em; position:relative; }
.check-parts::before{ content: ""; display: block; position: absolute; top: 0; left: 0; width: 1.5em; height: 1.5em;
  background: #000;}

.check-input:checked + .check-parts::after{
  content: ""; display: block; position: absolute; top: 2.5px; left: 5.5px; width: 5px; height: 10px; transform: rotate(40deg); border-bottom: 3px solid #fff; border-right: 3px solid #fff;}

/*modal*/
.modal{display: none; height: 100vh; position: fixed; top: 0; width: 100%; z-index: 10001}
.modal__bg{ background: rgba(255,255,255,0.8); height: 100vh; position: absolute; width: 100%;}
.modal__content{ background: #fff; left: 50%; padding: 8vw 5vw; position: absolute; top: 50%; transform: translate(-50%,-50%); width: 90vw; max-width: 500px; min-height: 30vh; box-shadow: 0 15px 30px -15px rgba(0,0,0,0.2);}

.closebtn{ position: absolute; top: 2.5vw; right: 2.5vw}
.closebtn .fa-times{ font-size: 1.44em;}
.modal p.modal_txt{ text-align: center; font-weight: 700; font-size: 1.44em; line-height: 1.4; margin-bottom: 2em;}
.modal li{ border-bottom: 1px solid #B4B4B4;}
.modal li a{ display: flex; align-items: center; padding-bottom: 1em;}
.modal li a::after{ content: ">"; position: absolute; right: 0; transform: scale(1,1.5); color: #B4B4B4}

/*ストア
====================================*/
.store-tab{ display: flex; justify-content: center; margin: 10vw 0 8vw;}
.store-tab a{ display: block; padding: 0 1em 1em; border-bottom: 2px solid #707070; opacity: .2;}
.store-tab a.active{ opacity: 1;font-weight: bold;}

.deta-list-block{ padding: 0 5vw;}
.acc-sort{ display: none;transition: all 0.2s ease-in-out; position: absolute; bottom: -320%; background: #fff; width: 100%; z-index: 1;box-shadow: 0 15px 30px -15px rgba(0,0,0,0.2);}


.acc-sort li{ display: flex; justify-content: space-between; flex-direction: row-reverse; align-items: center; padding: 1.5em 0 ; margin: 0 1.5em;}
.acc-sort li + li{ border-top: 1px solid #707070;}
.acc-sort.open{ display: block;}

.sort-btn p{ border: 1px solid #707070; padding: 1.44em 1em; display: flex; align-items: center;}
.sort-btn p::after{ content: ">"; display: block; position: absolute; right: 1em; top: 50%; transform: translate(0,-50%) rotate(90deg) scale(1,1.5);}
.sort-btn p.down::after{ transform:translate(0,-50%) rotate(-90deg) scale(1,1.5);}

.tab-deta-list{ margin-top: 2.5vw;}
.tab-deta-list li{ padding: 1em 0; border-bottom: 1px solid #707070; display: flex; align-items: center;}
.tab-deta-list li .thum{ width: 20%; background: #000; overflow: hidden; display: flex; justify-content: center; align-items: center;}
.tab-deta-list li .thum img{ position: absolute; width: auto; height: 100%; max-width: none;}
.tab-deta-list li .thum::after{ content: ""; display: block; padding-top: 100%;}

.tab-deta-list li .cmnt { padding:0 1em; width: 80%;}
.tab-deta-list li .cmnt p + p{ padding-top: .5em;}
.tab-deta-list li .cmnt p.date{font-size: .8em; color: #707070;}
.tab-deta-list li .cmnt p.ttl{ font-size: 1.14em; font-weight: 700; line-height: 1.2;}
.tab-deta-list li .cmnt p.ttl span{ font-size: .8em; padding-left: .5em;}
.tab-deta-list li .cmnt p.ttl span::before{ content: '/';}
.tab-deta-list li p.price{ margin-left: auto; border: 1px solid; color: #707070; width: 20%; font-size: .85em; text-align: center; padding: .65em 0;}

.tab-deta-list li a{ width: 100%;display: flex; align-items: center;}
.tab-deta-list li a.deta_link::after{ content: ">"; display: block; position: absolute; right: 0; transform: scale(1,1.5);}
.radio-input{
  display: none;
}
.radio-input + label{ width: 100%; display: flex; justify-content: space-between; position:relative;}
.radio-input + label::before{ content: ""; display: block; position: absolute; top: 0; right: 0; width: 1.5em; height: 1.5em; background: #000;}

.radio-input:checked + label::after{
  content: ""; display: block; position: absolute; top: 2.5px; right: 5.5px; width: 5px; height: 10px; transform: rotate(40deg); border-bottom: 3px solid #fff; border-right: 3px solid #fff;
}

/*購入画面*/
.storebuy-head{ display: flex;}
.sec-detail-box .storebuy-head p.thum{ width: 28%;}
.storebuy-head .indeta{ width: 72%; display: flex; padding-left: 1em; flex-direction: column; align-items: flex-start;}
.storebuy-head .indeta h1{ font-weight: 600;}
.sec-detail-box .storebuy-head p.deta{ align-items: flex-start;}

.jp-type-playlist{ padding-bottom: 5vw;}
#jp_container_ad > .btn_set,#jp_container_list > .btn_set.in_price{ position: fixed; width: 100%; bottom: 0; border-top: 1px solid #B4B4B4;
  padding: 5vw 0 8vw; background: #fff;}



/*購入情報の確認*/
.store_buy_head{ display: flex; margin: 5vw 0 0; padding: 0 5vw 5vw;}
.store_buy_head p.thum{ width: 25%;}
.store_buy_head .item_deta{ width: 75%; padding-left: 2.5vw; display: flex; flex-direction: column;}

.store_buy_head .item_deta p + p{ padding-top: 1em;}
.store_buy_head .item_deta p.ttl{ font-size: 1.14em; font-weight: 700;}
.store_buy_head .item_deta p.date{ font-size: .95em; color: #707070; line-height: 1.6}
.store_buy_head .item_deta p.price{ margin-top: auto; margin-left: auto; font-weight: 700;}

.store_buy_userdeta .inttl,.store_buy_payment .inttl{ background: #000; color: #fff; padding: .88em; text-align: center;}
.store_buy_userdeta{ background: #f5f5f5; padding-bottom: 5vw;}
.store_buy_userdeta .inbox{ width: 92%; margin: 5vw auto 0; padding: 5vw; border: solid 1px; background: #fff;}
.store_buy_userdeta .inbox > div{ display: flex; line-height: 1.6;}
.store_buy_userdeta .inbox > div p:nth-child(1){ width: 38%;}
.store_buy_userdeta .inbox > div p:nth-child(2){ width: 62%; padding-left: 1em;}
.store_buy_userdeta .inbox > div p:nth-child(2)::before{ content: ":"; padding-right: 1em;}

.buy_payment_box p.sub_ttl{ background: #f7f7f7; padding: .88em; text-align: center;}
.buy_payment_cat{ padding: 5vw;}

.credit_deta{ overflow: hidden; padding: 1em;}
.credit_switch{padding: 1em; display: flex;}
.credit_switch label{ display: flex; align-items: center;}
.credit_switch label + label{ margin-left: 1em;}

.card-change{ display: none;}
.c-input{ display: block;}

.credit_deta_edit{display: flex; justify-content: flex-end; margin-top: 5vw;}
.credit_deta_edit a{ padding-left: 1em;}
.credit_deta_edit a::before{ content: ">";position: absolute; left: 0; transform: scale(.6,1)}

.credit_delete_box{ width: 90%; margin:0 auto 10vw; /*display: flex; flex-direction: column; align-items: center;*/}
.credit_delete_box p.intxt{ text-align: center; padding-bottom: 10vw;}
.credit_delete_box .check-parts{ font-size: 1.1em; padding-left: 2.5em}
.card_delete-link{ display: flex; justify-content: center;}
.card_delete-link a{ background: #000; padding: .5em 1em; color: #fff; border-radius: 3px;}
.card_delete-link a + a{margin-left: 1em;}

.select-box{padding: .5em;border: 1px solid #707070; border-radius: 2px; background: #fff; display: flex; align-items: center;}
.select-box select{ font-size: 16px; width: 100%; padding-right: 1em; cursor: pointer; border: none; background-image: none; box-shadow: none; background-color: #fff; -webkit-appearance:none; appearance:none;}

.credit_deta span.att{ display: block; font-size: .85em; margin-bottom: 1em;}
.credit_deta.limit{ display: flex; justify-content: space-between;}
.credit_deta.limit .select-box{ width: 48%;}
.select-box select::-ms-expand{ display: none;}
.select-box::before{position: absolute; right: 0.9em; width: 0; height: 0; padding: 0; content: ''; border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 6px solid #666666; pointer-events: none;}

.kiyakubox{ width: 92%; margin: 5vw auto 0; padding-bottom: 1em; max-height: 40vw; overflow-y: scroll}
.kiyakubox p{ font-size: .88em; line-height: 1.4;}

/*クレジットカード編集*/
.my-credit-deta{ margin-bottom: 10vw;}
.credit-list li + li{ margin-top: .5em;}
.credit-list li > p{ padding: 1em 3em 1em 1em; background: #F5F5F5; display: flex; justify-content: space-between;}
.credit-list li > p::after{ content: "\f107"; font-family: 'Font Awesome 5 free'; font-weight: bold; position: absolute; right: 1em;}
.credit-list li > p.down::after{ content: "\f106";}
.ac-contents{display: none; padding: 5vw;}

/*購入済リスト
====================================*/
.sec-detail-box{ display: flex; flex-direction: column; align-items: center; padding-bottom: 8vw;}
.sec-detail-box p.thum{ width: 60%; margin-bottom: 8vw;}
.sec-detail-box p.deta{ font-size: .95em; color: #707070; display: flex; flex-direction: column; align-items: center;
margin: 5vw 0;}
.sec-detail-box p.deta_txt{ width: 92%; max-width: 600px; margin-bottom: 10vw; line-height: 1.6; color: #707070;}
.sec-detail-box p.deta span{ display: block;}
.sec-detail-box p.deta span + span{ margin-top: 1em;}

.sec-detail-box ul.playlist{ width: 100%; display: flex; flex-direction: column; align-items: center;}
.sec-detail-box ul.playlist li{ width: 90%;border-bottom:1px solid #B4B4B4;}

.sec-detail-box ul.playlist li a{ display: flex; justify-content: space-between; align-items: center; padding: 1em 0;}
.sec-detail-box ul.playlist li a::after{content: ">"; transform: scale(1,1.5); color: #B4B4B4}
.sec-detail-box ul.playlist.add li a::after{ content: none;}
.sec-detail-box ul.playlist.shicho li a::after{ content: none;}
.sec-detail-box ul.playlist li a p{ display: flex; align-items: center; font-size: .88em;}
.sec-detail-box ul.playlist li a p span{ width: 1.44em; margin-right: .5em;}
.sec-detail-box > .btn_set{position: fixed; width: 100%; bottom: 0;border-top: 1px solid #B4B4B4; padding: 5vw 0 8vw; background: #fff;}

.sec-detail-box ul.playlist li a .check-parts{ width: 100%; display: block; padding-left: 0; position: relative;}
.sec-detail-box ul.playlist li a label{ width: 100%; position: relative; display: flex; align-items: center; justify-content: space-between;}

.sec-detail-box ul.playlist label{ display: flex; flex-direction: row-reverse; width: 100%; padding: 1em 0;}
.sec-detail-box ul.playlist .check-parts{ width: 100%; padding-left: 0;}
.sec-detail-box ul.playlist .check-parts::before{ left: auto; right: 0;}
.sec-detail-box ul.playlist .check-input:checked + .check-parts::after{ left: auto; right: 5.5px;}

/*empty*/
.store-cat-block.empty{ display: flex; flex-direction: column; align-items: center;}
.store-cat-block.empty p.icn{ width: 50%;}
.store-cat-block.empty p.intxt{ font-weight: 700; font-size: 1.14em; padding: 8vw 0 10vw;}

/*backnumber*/
.list_bknumber{padding-top: 5vw;}
.list_bknumber .tab-deta-list li .cmnt{ margin-bottom: auto;}

/*お問い合わせ
====================================*/
.sec-contact-form li{ padding: 1em;}
.sec-contact-form li p:first-child{padding-bottom: .5em;}
.page-contact-block .btn_set{ margin-top: 5vw;}
.sec-contact-form li span.alert{ color: #EF0081; font-size: .8em; margin-top: .5em;}

.sec-contact-form.check p.inttl{background: #F5F5F5; padding: 1em;}
.sec-contact-form.check p.intxt{ padding: 1em; line-height: 1.6;}
/*下層情報ページ
====================================*/
.mypage-nav-box{ margin-top: 8vw;border-bottom: 1px solid #707070;}
.mypage-nav-box p.ttl{background: #F5F5F5; padding: 1em;}
.mypage-nav-box p.inttl,.mypage-deta-box p.inttl{ background: #F5F5F5; padding: 1em;}
.mypage-nav-box a{ display: flex; padding: 1em; align-items: center;}
.mypage-nav-box a + a{ border-top: 1px solid #707070;}
.mypage-nav-box a::after{ content: ">"; display: block; position: absolute; top: 50%; right: 1em; transform:translate(0,-50%) scale(1.14,1.66);}

.mypage-deta-box{ margin-top: 8vw;}
.mypage-deta-box span.alert{ display: block; color: #EF0081; font-size: .8em; padding: 0 0 1em 1em;}

.sec-mydeta-block .btn_set{ margin-top: 10vw;}

.sec-mydeta-block p.about-txt{margin: 8vw 0 5vw; text-align: center;}
.mypage-deta-box p.intxt{ padding: 1em; line-height: 1.4;}
.sec-page-box{ width: 92%; margin: 8vw auto 0; line-height: 1.6; text-align: justify;}

.mypage-deta-box + div.btn_set { margin-top: 10vw;}

/*特定商取引*/

.sec-page-box .about-txt{ margin-bottom: 5vw; text-align: justify;}
.sec-page-box .about_box{ margin-bottom: 5vw;}
.sec-page-box .about_box dd p{ padding: .5em;}
.sec-page-box .about_box dd p:nth-child(1){ background: #f7f7f7; font-weight: bold;}

.sec-page-box p.inttl{font-weight: bold; display: flex; flex-direction: column;}
.sec-page-box > p.inttl::after{ content: ""; display: inherit; width: 100%; height: 1px; background: #707070; position: absolute; bottom: 0;}

.sec-page-box > p.inttl + p.intxt,.sec-page-box p.intxt + p.inttl{ margin-top: 1em;}
.sec-page-box p.intxt{ padding: 0 1em; text-align: justify;}
.sec-page-box p.intxt span{ display: block; padding-left: 1.14em;}
.sec-page-box p.intxt span::before{ content: "・"; position: absolute; left: 0;}
.sec-page-box p.intxt span.att{ padding-left: 0;}
.sec-page-box p.intxt span.att::before{ content: none;}

.kiyakubox{border: 1px solid #EAEAEA;}
.kiyakubox .sec-page-box{ width: 100%; margin-top: 0; padding: 1em;}
.kiyakubox .sec-page-box p.inttl{ text-align: left; color: inherit; background: none;}
.sec-mydeta-block .kiyakubox p.about-txt{ margin-top: 0;}

.sec-page-box + .btn_set{ margin-top: 8vw;}