:root {
    --color-site-back: #FFFFFF;
    --color-btn-unselected: #737378;
    --color-tag-unselected: #ACACAF;
    --color-btn-detail: #78858f;
    --color-tag-selected: #F0F0A0;
    --color-tab-unselected: #8e969b;
    --color-switch: #9BB4F2;
    --color-booth: #34AEAE;
    --color-YT: #FF0000;
    --color-site-main: #000000;
    --color-site-sub: #F6F7FA;
    --color-site-back: #FFFFFF;
    --color-font-main: #5f6368;
    --color-font-lang: #d6d6d6;
    --color-font-link: #537BAB;
    --color-line-main: #DDDDDD;
    --color-font-btn: #ffffff;
    --color-btn-back: #000000;
    --color-back-notice: #fffddc;
    --color-back-image: #d3e3e8;
    --color-audio-set: #000000;
    --color-audio-progress: #65B2FF;
}

html {
    height: 100%;
}

body {
    background-color: #C9D4D9;
    font-family: -apple-system, BlinkMacSystemFont, Roboto, Segoe UI, Helvetica Neue, HelveticaNeue, YuGothic, Yu Gothic Medium, Yu Gothic, Verdana, Meiryo, sans-serif;
    background-size: 450px;
    background-repeat: no-repeat;
    background-position: left bottom;
    margin-top: 54px;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;

}

/* ヘッダー */
#header {
    position: fixed;
    height: 50px;
    width: 100%;
    background-color: var(--color-site-back);
    margin-top: -54px;
    z-index: 1;

}

#header.print{
    position: static;
}

#header .header-area {
    margin: 0 auto;
    width: 950px;
    display: flex;
}

#header .logo {
    height: 30px;
    width: 154px;
    padding-top: 8px;
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    transition: all 0.2s ease;
    cursor: pointer;
}

#header .logo:hover {
    opacity: 0.7;
}

#header ul.header-menu {
    display: flex;
    margin-left: auto;
    padding-top: 12px;
}

#header ul.header-menu li {
    width: 100px;
    text-align: center;
}

#header ul.header-menu li.active {
    font-weight: bold;
}

/* タブ */
div.tab-area {
    width: 950px;
    height: 42px;
    margin: 0 auto;
    display: flex;
    padding-top: 12px;
}

div.tab-area ul.tabs {
    display: flex;
    margin-left: auto;
    margin-bottom: 0px;
}

div.tab-area ul.tabs li {
    width: 120px;
    height: 30px;
    text-align: center;
    font-size: 0.8rem;
    background-color: var(--color-tab-unselected);
    color: #fff;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    margin-left: 14px;
    padding-top: 5px;
}

div.tab-area ul.tabs li.scene {
    margin-left: 0px;
}

div.tab-area ul.tabs li.active {
    background-color: var(--color-site-back);
    color: #212529;
}

div.tab-area ul.tabs li.disabled {
    opacity: 0.3;
}
#header .humburger {
    display: none;
}

/* タグ */
div.tag-area {
    width: 950px;
    min-height: 194px;
    height: auto;
    background-color: var(--color-site-back);
    margin: 0 auto;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    margin-bottom: 6px;

}

div.tag-area.list {
    height: auto;
}

div.tag-area div.unselected-tags-area {
    margin: 0 auto;
    width: 100%;
    height: 130px;
    padding-top: 8px;
    border-top-right-radius: 5px;
    border-top-left-radius: 5px;
}

div.tag-area div.unselected-tags-area {
    min-height: 194px;
    height: auto;
}

div.tag-area div.unselected-tags-area ul.unselected-tags {
    display: flex;
    flex-wrap: wrap;
    margin: 0 auto;
    padding-left: 8px;
}

div.tag-area div.unselected-tags-area ul.unselected-tags.mood {
    display: none;
}

div.tag-area div.unselected-tags-area ul.unselected-tags.stage {
    display: none;
}

div.tag-area div.unselected-tags-area ul.unselected-tags.instrument {
    display: none;
}

div.tag-area div.unselected-tags-area .list {
    display: none;
}

div.tag-area div.unselected-tags-area .bgm {
    display: none;
}

div.tag-area div.unselected-tags-area .list .title {
    margin-bottom: 0px;
    font-size: 0.9rem;
    margin-left: 18px;
    padding-bottom: 0px;
    font-weight: bold;
    margin-top: 10px;
}

div.tag-area div.unselected-tags-area .list .title.top {
    margin-top: 0px;
}

div.tag-area div.unselected-tags-area .bgm-tag-box-area {
    display: flex;
    width: 100%;
    justify-content: space-around;
    flex-wrap: wrap;
    padding-left: 40px;
    padding-right: 40px;
    height: 400px;
    margin-top: 14px;
    overflow: auto;
}

div.tag-area div.unselected-tags-area .bgm-tag-box-area .bgm-tag-box {
    display: flex;
    flex-direction: column;
    border: 1px solid;
    border-color: var(--color-tag-unselected);
    border-radius: 5px;
    font-size: 0.7rem;
    width: 126px;
    text-align: center;
    padding-bottom: 11px;
    margin-bottom: 24px;

    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    transition: all 0.2s ease;
    cursor: pointer
}

div.tag-area div.unselected-tags-area .bgm-tag-box-area .bgm-tag-box:hover:not(.dummy){
    background-color: #ACADF9;
    border-color: #ACADF9;
    color:white;

}

div.tag-area div.unselected-tags-area .bgm-tag-box-area .bgm-tag-box.active{
    background-color: #ACADF9;
    border-color: #ACADF9;
    color:white;
    
}

div.tag-area div.unselected-tags-area .bgm-tag-box-area .bgm-tag-box.active:hover{
    opacity: 0.7;
}

div.tag-area div.unselected-tags-area .bgm-tag-box-area .bgm-tag-box.active{
    background-color: #ACADF9;
    border-color: #ACADF9;
    color:white;
}


div.tag-area div.unselected-tags-area .bgm-tag-box-area .bgm-tag-box.dummy{
    border: none;
    cursor: auto;
}


div.tag-area div.unselected-tags-area .bgm-tag-box-area .bgm-tag-box img{
    width: 100px;
    height: 100px;
    border-radius: 5px;
    margin-left: 13px;
    margin-top: 10px;
    margin-bottom: 6px;
}

div.tag-area div.unselected-tags-area .bgm-tag-box-area .bgm-tag-box .title{
    font-weight: bold;
    width: 115px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    margin-left: 5px;
}

div.tag-area div.unselected-tags-area .bgm-tag-box-area .bgm-tag-box .artist{
    margin-top: -2px;
}

div.tag-area div.unselected-tags-area .recommend-bgm-area {
    padding-top: 5px;
}

div.tag-area div.unselected-tags-area .recommend-bgm-area .title{
    margin-bottom: 0px;
    font-size: 0.9rem;
    margin-left: 18px;
    padding-bottom: 0px;
    font-weight: bold;
    margin-top: 10px;
    
}

div.tag-area div.unselected-tags-area .recommend-bgm-area .recommend-bgm-list{
    display: flex;
    flex-wrap: wrap;
    margin: 0 auto;
    padding-left: 8px;

}

div.tag-area div.unselected-tags-area .recommend-bgm-area .recommend-bgm-list li{
    text-align: center;
    font-size: 0.9rem;
    height: 30px;
    border: 1px solid;
    border-color: var(--color-tag-unselected);
    border-radius: 5px;
    word-wrap: break-word;
    margin-left: 10px;
    padding-top: 3px;
    padding-left: 8px;
    padding-right: 8px;
    margin-top: 8px;
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    transition: all 0.2s ease;
    cursor: pointer
}

div.tag-area div.unselected-tags-area .recommend-bgm-area .recommend-bgm-list li:hover {
    background-color: #ACADF9;
    border-color: #ACADF9;
    color: white;
}

div.tag-area div.unselected-tags-area ul.unselected-tags li {
    text-align: center;
    font-size: 0.9rem;
    height: 30px;
    border: 1px solid;
    border-color: var(--color-tag-unselected);
    border-radius: 5px;
    word-wrap: break-word;
    margin-left: 10px;
    padding-top: 3px;
    padding-left: 8px;
    padding-right: 8px;
    margin-top: 8px;
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    transition: all 0.2s ease;
    cursor: pointer
}

div.tag-area div.unselected-tags-area ul.unselected-tags li:hover {
    background-color: var(--color-tag-selected);
    border-color: var(--color-tag-selected);
}

div.tag-area div.unselected-tags-area ul.unselected-tags li.active {
    border-color: var(--color-tag-selected);
    background-color: var(--color-tag-selected);
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    transition: all 0.2s ease;
    cursor: pointer
}

div.tag-area div.unselected-tags-area ul.unselected-tags li.active:hover {
    opacity: 0.5;
}

div.tag-area div.bottom-tag-area {
    margin-top: 4px;
}

div.tag-area div.selected-tags-area {
    height: 50px;
    margin-top: 20px;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    margin-top: 2px;
    margin-bottom: -6px;
}

div.tag-area div.selected-tags-area ul.selected-tags {
    display: flex;
    margin: 0 auto;
    width: calc(100% - 15px);
    overflow-x: auto;
    
}


div.tag-area div.selected-tags-area ul.selected-tags li {
    text-align: center;
    font-size: 0.9rem;
    height: 30px;
    background-color: var(--color-tag-selected);
    border-radius: 5px;
    word-wrap: break-word;
    margin-left: 10px;
    padding-top: 4px;
    padding-left: 8px;
    padding-right: 8px;
    margin-top: 10px;
    flex-shrink: 0;
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    transition: all 0.2s ease;
    cursor: pointer
}
div.tag-area div.selected-tags-area ul.selected-tags li.bgm {
    background-color: #ACADF9;
    color:white;
    max-width: 140px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

div.tag-area div.selected-tags-area ul.selected-tags li:hover {
    opacity: 0.5;
}

div.tag-area div.selected-tags-area ul.selected-tags li.top {
    margin-left: 0px;
}


div.tag-area .action-btn-area{
    display: flex;
}

div.tag-area .action-btn-area .tag-clear-btn{
    background-color: var(--color-btn-detail);
    color: white;
    text-align: center;
    font-size: 0.9rem;
    height: 30px;
    border-radius: 5px;
    word-wrap: break-word;
    margin-left: 17px;
    padding-top: 4px;
    padding-left: 8px;
    padding-right: 8px;
    margin-top: 10px;
    flex-shrink: 0;
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    transition: all 0.2s ease;
    cursor: pointer;
}

div.tag-area .action-btn-area .tag-clear-btn:hover:not(.disabled){
    opacity: 0.7;
}

div.tag-area .action-btn-area .tag-clear-btn.disabled{
    opacity: 0.4;
}

div.tag-area .action-btn-area .tag-tempo-btn-area {
    display: flex;
    margin-left: auto;
}

div.tag-area .action-btn-area .tag-tempo-btn-area-sp {
    display: none;
}

div.tag-area .action-btn-area .tag-tempo-btn{
    border: 1px solid;
    border-color: var(--color-tag-unselected);
    text-align: center;
    font-size: 0.9rem;
    height: 30px;
    border-radius: 5px;
    word-wrap: break-word;
    margin-left: 6px;
    padding-top: 4px;
    padding-left: 8px;
    padding-right: 6px;
    margin-top: 11px;
    flex-shrink: 0;
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    transition: all 0.2s ease;
    cursor: pointer;
}

div.tag-area .action-btn-area .tag-tempo-btn.active{
    color: #FFFFFF;
    background-color: #ACADF9;
    border-color: #FFFFFF;
}

div.tag-area .action-btn-area .tag-tempo-btn.disabled{
    opacity: 0.4;
    background-color: var(--color-tag-unselected);
}

div.tag-area .action-btn-area .tag-tempo-btn.active:hover{
    opacity: 0.7;
}

div.tag-area div.search-text-area {
        margin-top: 13px;
        padding-left: 12px;
        margin-right: 12px;
}

div.tag-area div.search-text-area .search-text{
    border: none;
    padding-left: 22px;
    border-radius: 15px;
    background-color: #EBE8E8;
    font-size: 12px;
    width: 200px;
    background-image: url(../image/parts/search.png);
    background-repeat: no-repeat;
    background-size: 12px;
    background-position-x: 10px;
    background-position-y: 8px;
    padding-left: 30px;
    padding-right: 33px;
    padding-top: 5px;
    padding-bottom: 4px;
}

div.tag-area div.search-text-area .search-text.disabled{
    opacity: 0.7;
}

div.tag-area div.search-text-area .search-text:focus{
    outline: 1px solid #000;
}

div.tag-area div.search-text-area .search-text::placeholder{
    padding-top: 0px;

}

div.tag-area div.search-text-area .clear{
    width: 28px;
    height: 28px;
    position: absolute;
    opacity: 1;
    margin-top: -27px;
    margin-left: 166px;
    display: none;

}

div.option-btn{
    background-color: #9BB4F2;
    color: white;
    width: 100px;
    height: 30px;
    border-radius: 5px;
    text-align: center;
    font-size: 0.8rem;
    padding-top: 5px;
    margin-top: 12px;
}

div.inst-only-area {
    height: 50px;
    width: 160px;
    display: flex;
    margin-right: 6px;
    margin-top: 1px;
}

div.inst-only-area {
    font-size: 0.75rem;
}

div.inst-only-area span {
    padding-top: 16px;
}

.inst-only-switch {
    position: relative;
    margin: auto;
    width: 50px;
    background: var(--color-tag-unselected);
    border-radius: 30px;
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    transition: all 0.2s ease;
}
.inst-only-switch.disabled{
    opacity: 0.7;
}

.inst-only-switch:hover:not(.disabled){
    opacity: 0.7;
}

.inst-only-switch.checked {
    background: var(--color-switch);
}

.inst-only-switch input[type="checkbox"] {
    display: none;
}

.inst-only-switch label {
    display: block;
    box-sizing: border-box;
    height: 26px;
    border-radius: 30px;
}


.inst-only-switch label span:after {
    padding: 0 0 0 10px;
    color: #999999;
}

.inst-only-switch input[type="checkbox"]:checked+label span:after {
    padding: 0 10px 0 0;
    color: var(--color-site-back);
}

.inst-only-switch .switch-img {
    position: absolute;
    width: 20px;
    height: 20px;
    background: var(--color-site-back);
    top: 3px;
    left: 4px;
    border-radius: 26px;
    transition: .2s;
}

.inst-only-switch input[type="checkbox"]:checked~.switch-img {
    transform: translateX(22px);
    background: var(--color-site-back);
}

/* 新作エリア */
div.new-arrival-area {
    width: 950px;
    height: 292px;
    background-color: var(--color-site-back);
    ;
    margin: 0 auto;
    border-radius: 5px;
    margin-top: 18px;
    margin-bottom: 8px;
    display: flex;
    justify-content: space-around;
    padding-top: 18px;
}

div.new-arrival-area .new-arrival-image {
    width: 400px;
    height: 250px;
    margin: 0 auto;
}

div.new-arrival-area .new-arrival-image iframe {
    width: 400px;
    height: 225px;
}


div.new-arrival-area .new-arrival-detail {
    width: 500px;
    height: 250px;
    padding-left: 18px;
    padding-left: 26px;
    margin-left: -42px;
}


div.new-arrival-area .new-arrival-detail .overview {
    font-size: 0.8rem;
    line-height: 19px;
    margin-left: -2px;
    padding-bottom: 6px;
}

div.new-arrival-area .new-arrival-detail .title {
    margin-left: -2px;
    font-size: 1.2rem;
}

div.new-arrival-area .new-arrival-detail .tracklist {
    display: flex;
}

div.new-arrival-area .new-arrival-detail .tracklist1 .track-no{
    width: 15px;
    display: inline-block;
}

div.new-arrival-area .new-arrival-detail .tracklist1 {
    font-size: 0.7rem;
    padding-left: 0px;
    padding-top: 6px;
    float: left;
    margin-right: 14px;
    width: 218px;
}

div.new-arrival-area .new-arrival-detail .tracklist1 .track-no{
    width: 18px;
    display: inline-block;
}


div.new-arrival-area .new-arrival-detail .tracklist2 {
    font-size: 0.7rem;
    padding-left: 0px;
    padding-top: 6px;
}

div.new-arrival-area .new-arrival-detail .tracklist2 .track-no{
    width: 18px;
    display: inline-block;
}


div.new-arrival-area .new-arrival-detail .others {
    font-size: 0.7rem;
    padding-top: 5px;
    margin-left: -1px;
}

div.new-arrival-area .shoplink {
    display: flex;
    font-size: 0.65rem;
    text-align: center;
    color: #FFFFFF;
    margin-top: -8px;
    width: 400px;
    height: 50px;
    justify-content: center;
    margin-top: 7px;
}

div.new-arrival-area .shoplink .boothlink {
    width: 195px;
    height: 24px;
    background-color: var(--color-booth);
    border-radius: 4px;
    padding-top: 4px;
    margin-right: 9px;
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    transition: all 0.2s ease;
    cursor: pointer;
}

div.new-arrival-area .shoplink .boothlink:hover {
    opacity: 0.7;
}

div.new-arrival-area .shoplink .YTlink {
    width: 195px;
    height: 24px;
    background-color: var(--color-YT);
    border-radius: 4px;
    padding-top: 4px;
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    transition: all 0.2s ease;
    cursor: pointer;
}

div.new-arrival-area .shoplink .YTlink.disabled {
    background-color: var(--color-tag-unselected);
}

div.new-arrival-area .shoplink .YTlink:hover:not(.disabled) {
    opacity: 0.5;
}


/* 検索結果エリア */
div.search-result-box-area {
    overflow: auto;
    min-height: 400px;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

div.search-result-box-area::-webkit-scrollbar {
    display:none;
}
div.search-result-box-area-inner {
    height: calc(100% - 240px);
    -ms-overflow-style: none;
    scrollbar-width: none;

}

div.search-result-box-area-inner::-webkit-scrollbar {
    display:none;
}

div.search-result-box {
    width: 950px;
    height: 100px;
    background-color: var(--color-site-back);
    margin: 0 auto;
    border-radius: 5px;
    margin-top: 10px;
    display: flex;
}

div.search-result-box.top {
    margin-top: 0px;
}

div.search-result-box .artwork {
    width: 100px;
    height: 100px;
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    transition: all 0.2s ease;
    cursor: pointer;
}

div.search-result-box .artwork:hover {
    opacity: 0.7;
}

div.search-result-box .artwork img {
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    float: left;
}

div.search-result-box .artwork .music-control {
    width: 100px;
    height: 100px;
    position: relative;

}


div.search-result-box .artwork .music-control .bk {
    position: absolute;
    opacity: 0.7;
}

div.search-result-box .artwork .music-control .control {
    position: absolute;
}



div.search-result-box .detail {
    font-size: 0.8rem;
    padding-top: 10px;
    padding-left: 28px;
}

div.search-result-box .detail .title-and-desc {
    display: flex;
    width: 800px;
}

div.search-result-box .detail .title {
    font-weight: bold;
    font-size: 1.0rem;
    width: 358px;
}

div.search-result-box .detail .desc {
    width: 425px;
    padding-top: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; 
}

div.search-result-box .detail .sharelink {
        width: 15px;
        padding-top: 3px;
        margin-left: 2px;
}

/* div.search-result-box .detail .sharelink img{
} */

div.search-result-box .detail .overview {
    display: flex;
    width: 600px;
    padding-top: 2px;
}

div.search-result-box .detail .overview .explanation {
    width: 357px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;    
}

div.search-result-box .detail .overview .artist {
    width: 200px;
}

div.search-result-box .detail .tags-and-link {
    display: flex;
}

div.search-result-box .detail .tags {
    height: 50px;
    margin-top: -3px;
    font-size: 0.75rem;
    margin-left: 0px;
    width: 595px;
}


div.search-result-box .detail .tags ul {
    display: flex;
    width: 750px;
    overflow-x: auto;
    padding-left: 0px;
    width: 595px;
    -ms-overflow-style: none;
    scrollbar-width: none;
}
div.search-result-box .detail .tags ul::-webkit-scrollbar{
	display:none;
}


div.search-result-box .detail .tags ul li {
    text-align: center;
    height: 24px;
    background-color: var(--color-tag-selected);
    border-radius: 5px;
    word-wrap: break-word;
    padding-top: 3px;
    padding-left: 10px;
    padding-right: 10px;
    margin-top: 10px;
    flex-shrink: 0;
    margin-right: -8px;
}

div.search-result-box .detail .tags ul li.tempo {
    background-color: #ACADF9;
    color: #FFFFFF;

}


div.search-result-box .shoplink {
    display: flex;
    font-size: 0.65rem;
    text-align: center;
    color: #FFFFFF;
    margin-top: 7px;
    margin-left: 8px;
}

div.search-result-box .shoplink .boothlink {
    width: 95px;
    height: 24px;
    background-color: var(--color-booth);
    border-radius: 4px;
    padding-top: 4px;
    margin-right: 13px;
}


div.search-result-box .shoplink .YTlink {
    width: 95px;
    height: 24px;
    background-color: var(--color-YT);
    border-radius: 4px;
    padding-top: 4px;
}

/* BGM一覧ボックス */
div.bgm-box-area {
    width: 990px;
    margin: 0 auto;
    flex-wrap: wrap;
    display: flex;
    padding-top: 10px;
}

div.bgm-box {
    width: 450px;
    height: 100px;
    background-color: var(--color-site-back);
    ;
    margin: 0 auto;
    border-radius: 5px;
    margin-top: 22px;
    display: flex;
}

div.bgm-box.dummy {
    background-color: transparent;
}



div.bgm-box.top {
    margin-top: 0px;
}

div.bgm-box .artwork {
    width: 100px;
    height: 100px;
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    transition: all 0.2s ease;
    cursor: pointer;
}

div.bgm-box .artwork:hover {
    opacity: 0.7;
}

div.bgm-box .artwork img {
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}

div.bgm-box .detail {
    font-size: 0.8rem;
    padding-top: 7px;
    padding-left: 20px;
}

div.bgm-box .detail .title-and-desc {
    display: flex;
    width: 300px;
}

div.bgm-box .detail .title {
    font-weight: bold;
    font-size: 0.8rem;
    width: 300px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

div.bgm-box .detail .overview {
    display: flex;
    width: 300px;
    padding-top: 2px;
}

div.bgm-box .detail .overview .explanation {
    width: 300px;
    font-size: 0.7rem;
}

div.bgm-box .detail .overview .date {
    width: 112px;
    font-size: 0.7rem;
}

div.bgm-box .detail .overview .artist {
    width: 200px;
    font-size: 0.7rem;
}

div.bgm-box .detail .tags {
    height: 50px;
    margin-top: -3px;
    font-size: 0.75rem;
    margin-left: 0px;
}


div.bgm-box .detail .tags ul {
    display: flex;
    width: 750px;
    overflow-x: auto;
    padding-left: 0px;
}

div.bgm-box .detail .tags ul li {
    text-align: center;
    height: 24px;
    background-color: var(--color-tag-selected);
    border-radius: 5px;
    word-wrap: break-word;
    padding-top: 3px;
    padding-left: 10px;
    padding-right: 10px;
    margin-top: 10px;
    flex-shrink: 0;
    margin-right: -8px;
}

div.bgm-box .shoplink {
    display: flex;
    font-size: 0.65rem;
    text-align: center;
    color: #FFFFFF;
    margin-top: 3px;
}

div.bgm-box .shoplink .detail {
    width: 95px;
    height: 24px;
    background-color: var(--color-btn-detail);
    border-radius: 4px;
    padding-top: 3px;
    margin-right: 13px;
    padding-left: 0px;
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    transition: all 0.2s ease;
    cursor: pointer;
}

div.bgm-box .shoplink .detail:hover {
    opacity: 0.5;
}

div.bgm-box .shoplink .boothlink {
    width: 95px;
    height: 24px;
    background-color: var(--color-booth);
    border-radius: 4px;
    padding-top: 4px;
    margin-right: 13px;
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    transition: all 0.2s ease;
    cursor: pointer;
}

div.bgm-box .shoplink .boothlink:hover {
    opacity: 0.7;
}

div.bgm-box .shoplink .YTlink {
    width: 95px;
    height: 24px;
    background-color: var(--color-YT);
    border-radius: 4px;
    padding-top: 4px;
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    transition: all 0.2s ease;
    cursor: pointer;
}

div.bgm-box .shoplink .YTlink.disabled {
    background-color: var(--color-tag-unselected);
}

div.bgm-box .shoplink .YTlink:hover:not(.disabled) {
    opacity: 0.5;
}


/* ページングエリア */

div.paging-area {
    height: 100px;
    width: 100%;
    text-align: center;
}

div.paging-area p {
    padding-top: 32px;

}

div.bottom-space {
    height: 30px;

}

/* オーバーレイ */
div.overray {
    display: none;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(100, 100, 100, .8);
    z-index: 2;
}

/* ダイアログ */
div.bgm-dialog {
    display: none;
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    background-color: white;
    z-index: 3;
    border-radius: 5px;

    width: 930px;
    height: 316px;
    padding-top: 18px;
    margin-top: -50px;

}

div.bgm-dialog .image {
    width: 400px;
    height: 250px;
    margin: 0 auto;
    margin-top: 6px;
    margin-left: 32px;
}

div.bgm-dialog .image iframe {
    width: 400px;
    height: 225px;
}

div.bgm-dialog img.artwork {
    position: absolute;
    top: 22px;
    height: 225px;
    width: 400px;
    object-fit: cover;

}


div.bgm-dialog .detail {
    width: 474px;
    height: 250px;
    padding-left: 8px;
    margin-top: 6px;

}

div.bgm-dialog .detail ul.overview {
    font-size: 0.8rem;
    line-height: 19px;
    padding: 0;
}

div.bgm-dialog .detail .title {
    line-height: 22px;
    padding-bottom: 8px;
    padding-top: 4px;
    font-size: 16px;
}

div.bgm-dialog .detail .tracklist {
    display: flex;
}

div.bgm-dialog .detail .tracklist1 {
    font-size: 0.7rem;
    padding-left: 0px;
    padding-top: 6px;
    padding-right: 32px;
    width: 218px;
}

div.bgm-dialog .detail .tracklist2 {
    font-size: 0.7rem;
    padding-left: 0px;
    padding-top: 6px;
}

div.bgm-dialog .detail .others {
    font-size: 0.7rem;
    margin-top: 8px;
    display: none;
}

div.bgm-dialog .detail .others.active {
    display: block;
}

div.bgm-dialog .shoplink {
    display: flex;
    font-size: 0.65rem;
    text-align: center;
    color: #FFFFFF;
    margin-top: 17px;
    justify-content: center;
    width: 400px;
}

div.bgm-dialog .shoplink .boothlink {
    width: 225px;
    height: 24px;
    background-color: var(--color-booth);
    border-radius: 4px;
    padding-top: 4px;
    margin-right: 13px;
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    transition: all 0.2s ease;
    cursor: pointer
}

div.bgm-dialog .shoplink .boothlink:hover {
    opacity: 0.7;
}

div.bgm-dialog .shoplink .YTlink {
    width: 225px;
    height: 24px;
    background-color: var(--color-YT);
    border-radius: 4px;
    padding-top: 4px;
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    transition: all 0.2s ease;
    cursor: pointer
}

div.bgm-dialog .shoplink .YTlink.disabled {
    background-color: var(--color-tag-unselected);
}

div.bgm-dialog .shoplink .YTlink:hover:not(.disabled) {
    opacity: 0.5;
}

div.bgm-dialog .detail .close {
    width: 18px;
    height: 40px;
    position: absolute;
    right: 18px;
    top: 14px;
    opacity: 0.8;
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    transition: all 0.2s ease;
    cursor: pointer;
}

div.bgm-dialog .detail .close:hover {
    opacity: 0.5;
}

/* 利用規約セクション */
span.newline1 {
    display: block;
    height: 10px;
}

span.newline2 {
    display: block;
    height: 15px;
}

span.newline3 {
    display: block;
    height: 20px;
}


div.term-area {
    padding-top: 16px;
}

div.term-area .term-section {
    width: 950px;
    height: auto;
    background-color: var(--color-site-back);
    margin: 0 auto;
    border-radius: 5px;
    margin-top: 18px;
    margin-bottom: 18px;
    padding-top: 15px;
    padding-left: 24px;
    padding-right: 24px;
    padding-bottom: 15px;
}

div.term-area .term-section.accordion{
    padding-top: 0px;
    /* padding-left: 24px;
    padding-right: 24px; */
    padding-left: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
}

div.term-area .term-section.accordion .link-button{
    width: 220px;
    height: 40px;
    background-color: var(--color-btn-detail);
    color: #FFFFFF;
    float: right;
    margin-top: -64px;
    border-radius: 5px;
    text-align: center;
    padding-top: 9px;
    font-size: 0.9rem;
    font-weight: bold;
    cursor: pointer;
}

div.term-area .term-section.accordion .link-button:hover {
    opacity: 0.7;
}


div.term-area .term-section.qa{
    padding-top: 0px;
    /* padding-left: 24px;
    padding-right: 24px; */
    padding-left: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
}

div.term-area .term-section.qa .title{
    padding-left: 24px;
    padding-top: 18px;
    padding-right: 0px;
    padding-bottom: 0px;

}

div.term-area .term-section.contact {
    padding-left: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
}

div.term-area .term-section.contact .heading{
    padding-left: 24px;
    padding-right: 24px;
}

div.term-area .term-section.question{
    padding-top: 15px;
    padding-left: 24px;
    padding-right: 24px;
    padding-bottom: 0px;
}


div.term-area .term-section .title {
    font-weight: bold;
}

div.term-area .term-section .detail {
    line-height: 22px;
    font-size: 0.95em;
}

div.term-area .term-section .content {
    max-width: 960px;
}

div.term-area .term-section .title {
    font-size: 1.2rem;
    font-weight: bold;
    margin-bottom: 5px;
}

div.term-area .term-section.profile{
    display: flex;
}

div.term-area .term-section .profile-image{
    width: 300px;
}

div.term-area .term-section .profile-image img{
    border-radius: 5px;
}

div.term-area .term-section .profile-detail{
    padding-left: 0px;
    margin-left: 20px;
    width: 580px;
}
div.term-area .term-section .profile-detail .name{
    font-size: 1.1em;
    font-weight: bold;
}

div.term-area .term-section .profile-detail .detail{
    font-size: 0.90em;
    padding-top: 10px;
}

div.term-area .term-section .profile-detail .links{

}
div.term-area .term-section .profile-detail .links .contact-link{
    display: flex;
    margin-bottom: 8px;
    cursor: pointer;
}

div.term-area .term-section .profile-detail .links .contact-link .name{
    font-size: 0.95rem;
    font-weight: normal;
}

div.term-area .term-section .profile-detail .links .contact-link img.x{
    width: 20px;
    height: 20px;
    margin-right: 20px;
    margin-top: 2px;
    margin-left: 2px;
}

div.term-area .term-section .profile-detail .links .contact-link img.x.nonaisound{
    margin-right: 21px;
}

div.term-area .term-section .profile-detail .links .contact-link img.YT{
    width: 27px;
    height: 19px;
    margin-right: 15px;
    margin-top: 2px;
}

div.term-area .term-section .profile-detail .links .contact-link img.mail{
    width: 24px;
    margin-right: 18px;
    margin-left: 1px;
}


div.term-area .term-section .profile-detail .links .contact-link name{
}

div.term-area .term-section .shoplink{
    font-size: 0.9rem;
    font-weight: bold;
    width: 280px;
    height: 34px;
    text-align: center;
    color: #FFFFFF;
    background-color: var(--color-booth);
    border-radius: 4px;
    padding-top: 6px;
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    transition: all 0.2s ease;
    cursor: pointer;
    margin-top: 14px;
}

div.term-area .term-section .shoplink.booth{
    color: #FFFFFF;
    background-color: var(--color-booth);
}

div.term-area .term-section .shoplink.booth:hover{
    opacity: 0.7;
}

div.term-area .term-section .shoplink.feedback{
    color: #FFFFFF;
    background-color: var(--color-btn-detail);
}

div.term-area .term-section .shoplink.feedback:hover{
    opacity: 0.7;
}

div.term-area .term-section .content.guidance{
    margin-top: 22px;
}

div.term-area .term-section #ac-menu .openarea {
    height: 85px;
    padding-left: 24px;
    padding-right: 24px;
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    transition: all 0.2s ease;
}
div.term-area .term-section #ac-menu .openarea:not(.link):hover{
    background-color: var(--color-switch);
}

div.term-area .term-section .content.guidance #ac-menu .openarea{
    padding-left: 0px;
    height: 60px;
}

div.term-area .term-section.qa .content #ac-menu .openarea{
    height: 60px;
}

div.term-area .term-section.qa .content.guidance #ac-menu .openarea .label{
}

div.term-area .term-section .content.guidance #ac-menu .openarea .label{
    padding-left: 24px;
    height: 85px;
    padding-top: 17px;
    font-weight: normal;
    font-size: 0.95rem;
}

div.term-area .term-section #ac-menu .openarea hr.open-only-median{
    display: none;
    color: var(--color-btn-detail);
}

div.term-area .term-section.qa #ac-menu .openarea hr.open-only-median{
    margin-top: 19px;    
}

div.term-area .term-section #ac-menu .openarea hr.open-only-median.open{
    display: block;
}



div.term-area .term-section #ac-menu li {
}

div.term-area .term-section #ac-menu li.top {
    border-top: none;
}

div.term-area .term-section #ac-menu li:last-child {
    padding-bottom: 17px;
}

div.term-area .term-section #ac-menu .label {
    font-weight: bold;
    position: relative;
    transition: .5s;
    font-size: 1.2em;
    padding-left: 2px;
    padding-bottom: 0px;
    padding-top: 12px;
}

div.term-area .term-section.qa #ac-menu .label {
    padding-top: 16px;
}

div.term-area .term-section.qa #ac-menu .label{
    font-size: 1.0em;
    font-weight: normal;
}

div.term-area .term-section #ac-menu .label:first-child{
    padding-top: 15px;
}

div.term-area .term-section #ac-menu .amendment{
    padding-left: 2px;
    padding-bottom: 15px;
    font-size: 0.9em;
    padding-top: 5px;
}

/*
  ラベル右側のアイコン「＋」を設定
  beforeが横棒
  afterが縦棒
  */
div.term-area .term-section #ac-menu .label:not(.link)::before,
div.term-area .term-section #ac-menu .label:not(.link)::after {
    content: '';
    width: 20px;
    height: 3px;
    background: var(--color-btn-detail);
    position: absolute;
    top: 100%;
    right: 3%;
    transform: translateY(-50%);
}

div.term-area .term-section #ac-menu .label:not(.link)::after {
    transform: translateY(-50%) rotate(90deg);
    transition: .5s;
}

div.term-area .term-section .content.guidance #ac-menu .label:not(.link)::before,
div.term-area .term-section .content.guidance #ac-menu .label:not(.link)::after {
    top: 35%;
}


div.term-area .term-section.qa .content #ac-menu .label:not(.link)::before,
div.term-area .term-section.qa .content #ac-menu .label:not(.link)::after {
    top: 72%;
}


/*
  アコーディオンメニューが開いている場合
  */
div.term-area .term-section #ac-menu .label.open {
}

div.term-area .term-section.qa #ac-menu .label.open{
    margin-bottom: 18px;
}

div.term-area .term-section #ac-menu .label.open::before {
    /* ラベルアイコンの横棒を非表示 */
    opacity: 0;
}

div.term-area .term-section #ac-menu .label.open::after {
    /* ラベルアイコンの縦棒を横向きに回転 */
    transform: rotate(180deg);
}

/*
  アコーディオンメニューのコンテンツ部分は、「display: none;」で非表示にしておく。
  ラベルクリック時にjQueryの「  $(this).next().slideToggle();」で表示に切り替わる
  */
div.term-area .term-section #ac-menu .detail {
    padding: 20px 10px;
    display: none;
    line-height: 27px;
    font-size: 0.9em;
    padding-left: 33px;
    padding-right: 33px;
}

div.term-area .term-section .content.guidance #ac-menu .detail img {
    border-radius: 5px;
    background-image: url("../image/parts/guidance.jpg");
    background-repeat: no-repeat;
    width: 100%;
    height: 262px;
    background-size: 100% auto;

}

div.term-area .term-section #ac-menu .detail hr.median{
    color: var(--color-btn-detail);
}

div.term-area .term-section .content.guidance #ac-menu hr.median{
    margin-left: 21px;
}

div.term-area .term-section.qa .content #ac-menu hr.median.middle{
    margin-top: 19px;
}
div.term-area .term-section.qa .content #ac-menu .top hr.median{
    margin-top: 21px;
}


div.term-area .term-section #ac-menu .detail .cation{
    background-color: #f5f8fa;
    border-radius: 5px;
    padding: 15px 10px;
}

div.term-area .term-section #ac-menu .detail .beggining{
    padding-bottom: 15px;

}

div.term-area .term-section #ac-menu .detail .heading{
    font-weight: bold;
    font-size: 1.2em;
}
div.term-area .term-section #ac-menu .detail .heading:first-child{
    padding-top: 0px;
}

div.term-area .term-section #ac-menu .detail .explanation-secion{
    padding-left: 15px;
}

div.term-area .term-section #ac-menu .detail .no{

}

div.term-area .term-section #ac-menu .detail .explanation{
    padding-bottom: 10px;

}
div.term-area .term-section #ac-menu .detail .explanation:last-child{
    padding-bottom: 0px;
}

/* シェアリンクダイアログ */
div.dialog-overlay{
    display: none;
    height: 100%;
    width: 100%;
    background-color: black;
    opacity: 0.4;
    position: fixed;
    top: 0;
    left: 0;
}

div.sharelink-dialog {
    display: none;
    height: 150px;
    width: 550px;
    background-color: white;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 5px;
}

div.sharelink-dialog .close {
    width: 18px;
    height: 40px;
    position: absolute;
    right: 18px;
    top: 14px;
    opacity: 0.8;
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    transition: all 0.2s ease;
    cursor: pointer;
}

div.sharelink-dialog .msg {
    text-align: center;
    font-size: 0.9rem;
    font-weight: bold;
    margin-top: 33px;
}

div.sharelink-dialog .sharelink-text-area {
    display: flex;
    justify-content: center;
    margin-top: 15px;
}

div.sharelink-dialog .sharelink-text-area input.sharelink-text {
    width: 450px;
    height: 40px;
    font-size: 0.8rem;
}

div.option-dialog {
    display: none;
    height: 150px;
    width: 550px;
    background-color: white;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 5px;
}

div.option-dialog .close {
    width: 18px;
    height: 40px;
    position: absolute;
    right: 18px;
    top: 14px;
    opacity: 0.8;
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    transition: all 0.2s ease;
    cursor: pointer;
}

div.option-dialog .option-area {
    text-align: center;
    font-size: 0.9rem;
    font-weight: bold;
    margin-top: 33px;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}

div.option-dialog .nonai-switch-area{
    width: 300px;
    height: 30px;
    display: flex;

}

div.option-dialog .nonai-switch-area .nonai-switch{
    width: 100px;
}
div.option-dialog .nonai-switch-area .nonai-switch.active{
    background-color: red;
}

div.option-dialog .shivue-switch-area{
    width: 300px;
    height: 30px;
    display: flex;

}

div.option-dialog .shivue-switch-area .shivue-switch{
    width: 100px;
}
div.option-dialog .shivue-switch-area .shivue-switch.active{
    background-color: red;
}


/* 画面下部の余白 */
div.foot-padding {
    width: 100%;
    height: 20px;
}

/* のなちゃん背景 */
div.nona {
    background-image: url(../image/background/nona.png);
    height: 100%;
    width: 100%;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: -1;
    background-size: 450px;
    background-repeat: no-repeat;
    background-position: left bottom;

}


div.tags {
    justify-content: center;
    text-align: center;
    width: 500px;
    margin: 0 auto;
}

div.tags ul {
    display: flex;
    gap: 16px;
}

div.tags ul li.tag {
    display: block;
    text-align: center;
    background: var(--color-site-sub);
    padding: 8px 0;
    border-radius: 38px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 150px;
    cursor: pointer;
}

div.tags ul li:hover {
    background: var(--color-back-image);
}

div.tags ul li.tag.active {
    background: var(--color-audio-progress);
}

div.open-setlist-btn{
    height: 60px;
    width: 60px;
    position: fixed;
    background-image: url("../image/parts/icon_fitting_white.png");
    background-repeat: no-repeat;
    background-size: 100% auto;
    border-radius: 10px;
    right: 10%;
    bottom: 10%;
    text-align: center;
    padding-top: 26px;
    background-color: #34AEAE;
    opacity: 0.8;
    margin-left: 510px;
    left: 50%;
}

div.open-setlist-btn.active{
    background-color: var(--color-tag-unselected);
}

div.setlist-dialog {
    position: fixed;
    background-color: white;
    margin: auto;
    border-radius: 10px;
    overflow: scroll;
    height: 286px;
    width: 950px;
    bottom: -270px;
    left: 50%;
    transform: translateX(-50%);
    transition: bottom 0.5s ease, height 0.5s ease;
    -ms-overflow-style: none;
    scrollbar-width: none;

}
div.setlist-dialog::-webkit-scrollbar{
    display:none;
    
}

div.setlist-dialog.open:not(.print){
    width: 1000px;
    bottom: -50px;

}

div.setlist-dialog.center:not(.print){
    height: 80%;
    bottom: 10%;

}

div.setlist-dialog.print{
    
    width: 100%;
    height: 100%;
    background: none;
    bottom: 0px;
    position: static;
    transform: none;
}

div.setlist-area .fitting-box{
    display: flex;
}

div.setlist-area .fitting-box .sortable-icon{
    opacity: 0;
    width: 18px;
    margin-top: 30px;
}

div.setlist-area .search-result-box .shop-btn{
    display: none;
    width: 95px;
    height: 24px;
    background-color: var(--color-booth);
    border-radius: 4px;
    text-align: center;
    font-size: 0.65rem;
    color: #FFFFFF;
    cursor: pointer;
    padding-top: 4px;
    margin-top: 8px;

}

div.setlist-area .search-result-box .del-btn{
    display: none;
    width: 18px;
    /* background-image: url(../image/parts/icon_delete.png);
    background-repeat: no-repeat; */
    margin-left: 16px;
    margin-right: 18px;
    margin-top: 8px;
    cursor: pointer;

}

div.setlist-overlay{
    display: none;
    height: 100%;
    width: 100%;
    background-color: black;
    opacity: 0.4;
    position: fixed;
    top: 0;
    left: 0;
}

div.content-area {
    padding-top: 16px;
}

div.content-area .content-section {
    width: 900px;
    height: 30px;
    /* background-color: var(--color-site-back); */
    margin: 0 auto;
    border-radius: 5px;
    display: flex;
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    transition: all 0.2s ease;

}

.open div.content-area .content-section{
    width: 950px;
}


div.content-area .content-section .btn-area{
    display: flex;
    margin-left: auto;
    margin-top: 10px;
}

div.content-area .content-section .btn-area .pdf-btn{
    width: 120px;
    height: 30px;
    margin-top: -13px;
    margin-right: 16px;
    background-color: #EE8181;
    border-radius: 5px;
    font-size: 0.8rem;
    padding-top: 6px;
    padding-left: 6px;
    color: white;
}

div.content-area .content-section .btn-area .pdf-btn img{
    float: left;
    width: 13px;
    margin-left: 1px;
    margin-top: 1px;
    margin-right: 4px;
}

.pdf-page{
    width: 100%;
    height: 100%;
    position: fixed;
    background-color: #C9D4D9;
    top: 0;
    z-index: 1;
    display: none;
}

.pdf-page div.search-result-box{
        width: 950px;
        height: 100px;
        background-color: var(--color-site-back);
        margin: 0 auto;
        border-radius: 5px;
        margin-top: 10px;
        display: flex;
}

div.content-area .content-section .btn-area .sharelink-btn{
    width: 126px;
    height: 30px;
    margin-top: -13px;
    margin-right: 16px;
    background-color: #34AEAE;
    border-radius: 5px;
    font-size: 0.8rem;
    padding-top: 6px;
    padding-left: 6px;
    color: white;
}

div.content-area .content-section .btn-area .sharelink-btn img{
    float: left;
    width: 16px;
    margin-left: 3px;
    margin-top: 1px;
    margin-right: 4px;
}


div.content-area .content-section .btn-area .large-btn{
    width: 18px;
    height: 18px;
    margin-top: -8px;
    margin-right: 16px;
}

div.content-area .content-section .btn-area .close-btn{
    width: 18px;
    height: 18px;
    margin-top: -8px;
}


div.content-area .content-section.added-track-area {
    width: 90%;
}

div.content-area .content-section.added-track-area.print {
    margin-top: -40px;
}

div.content-area .content-section .title {
    font-weight: bold;
    font-size: 1.2rem;
    font-weight: bold;
    margin-bottom: 5px;
}

div.content-area .content-section .fitting_title {
    width: 24px;
    float: left;
    margin-top: 2px;
    padding-right: 0px;
    margin-right: 6px;
}

input[type="text"], select{
    font-size: 0.9rem;
    height: 30px;
    border: 1px solid;
    border-color: var(--color-tag-unselected);
    border-radius: 5px;
    word-wrap: break-word;
    padding-left: 8px;
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    transition: all 0.2s ease;
    cursor: pointer;
    margin-right: 6px;
    width: 180px;
}

input[type="text"]:focus, select:focus{
    outline: none;
    border: 1px solid #000;

}

input[type="text"].middle, select.middle{
    width: 400px;
}
input[type="text"].lerge, select.lerge{
    width: 300px;
}
input[type="text"].freememo, select.freememo{
    width: 810px;
}

input[type="button"]{
    width: 100px;
    height: 30px;
    background-color: var(--color-btn-detail);
    color: #FFFFFF;
    float: right;
    border-radius: 5px;
    text-align: center;
    font-size: 0.9rem;
    border: none;
    cursor: pointer;
    margin-left: 10px;
}

.head-area{
    margin-top: 8px;
    margin-bottom: 10px;
}

.head-area .head2{
    margin-top: 8px;
}

.head-area .no-border{
    border: none;
}

.head-area .pdf-btn{
    background-color: #34AEAE;
}

.input-area{
    display: flex;
    margin-top: 8px;    

}

.input-field-area{
    width: 80%;
}

.median{
    margin-top: 20px;
    margin-bottom: 18px;
    opacity: 0.3;
}

.input-field-area .input1{
    margin-bottom: 16px;
}

.input-field-area .input2{
    margin-top: 8px;
    margin-bottom: 16px;
}

.input-field-area .input3{
    margin-top: 6px;
}

.input-field-area .scene-name-area{
    margin-bottom: 6px;
}

.input-field-area .album-area{
    margin-bottom: 6px;

}

.input-area .btn-area{
    padding-top: 164px;
    padding-left: 110px;
}

.feedback-area{
    height: 58px;
}

.feedback-area .feedback-btn{
    width: 300px;
    float: left;
    margin-left: 0px;
    margin-top: 6px;
    background-color: #34AEAE;
}

.head-area .load-btn.edit, .head-area .send-btn.edit, .head-area .pdf-btn.edit, .input-area .add-scene.edit{
    opacity: 0.5;
}

.head-area .load-btn, .head-area .send-btn{
    margin-right: 1px;
}


.input-area .btn-area .add-scene{
    background-color: #ACADF9;
    margin-right: 1px;
    

}
.input-area .btn-area .add-scene:disabled{
    opacity: 0.5;
}


.added-track{
    display: flex;
    /* border-radius: 5px;
    padding: 8px;
    background-color: #EBE8E8;
    font-size: 0.8rem;
    height: 60px;

    width: 97%;
    margin-left: 36px; */
}

.added-track-header{
    display: flex;
    font-weight: bold;
}

.added-track:nth-child(n+2){
    margin-top: 10px;
}

.added-track:last-child{
    margin-bottom: 12px;
}

.added-track .detail{
    display: flex;
    background-color: #EBE8E8;
    border-radius: 5px;
    padding: 8px;
    font-size: 0.8rem;
    height: 60px;
    width: 98%;
}
.added-track-header .detail{
    display: flex;
    padding-left: 8px;
    font-size: 0.8rem;
    height: 40px;
    width: 97%;
}

.added-track-header ul{
    margin-left: -1px;
}

.added-track ul.items, .added-track-header ul.items{
    display: flex;
    width: 930px;
}

.added-track ul.items li, .added-track-header ul.items li{
    margin-right: 10px;
    padding-top: 12px;
}

.added-track div.sortable-icon{
    opacity: 0;
    width: 36px;
    background-image: url(https://nonaisound.com/image/parts/menu.png);
    background-repeat: no-repeat;
    margin-top: 14px;
    margin-left: -14px;
}

.added-track.edit div.sortable-icon{
    visibility: hidden;

}

.added-track-header div.sortable-icon{
    width: 36px;
    margin-left: -8px;
}

.added-track ul.items li.artwork, .added-track-header ul.items li.artwork{
    padding-top: 0px;
    width: 44px;
    width: 60px;
    margin-top: -8px;
    margin-left: -8px;
}

.added-track ul.items li.artwork img.main{
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}

.added-track ul.items li.artwork .music-control{
    display: none;
    margin-top: -60px;
}

.added-track.edit ul.items li.artwork .music-control{
    display: block;
}

.added-track ul.items li.artwork .music-control img.bk{
    position: absolute;
    width: 60px;
    opacity: 0.7;

}

.added-track ul.items li.artwork .music-control img.control{
    position: absolute;
    width: 60px;

}


.added-track ul.items li.no, .added-track-header ul.items li.no{
    width: 22px;
    text-align: center;

}

.added-track ul.items li.scene-name{
    width: 130px;
    margin-left: 6px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;

}

.added-track-header ul.items li.scene-name{
    width: 130px;
}

.added-track ul.items .input-scene-name{
    width: 130px;
    margin-top: 7px;
    font-size: 0.8rem;
}

.added-track ul.items li.scene-type{
    width: 130px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.added-track-header ul.items li.scene-type{
    width: 130px;
}
.added-track ul.items .select-scene{
    width: 130px;
    margin-top: 7px;
    font-size: 0.8rem;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;

}

.added-track ul.items .input-scene-free{
    width: 130px;
    margin-top: 7px;
    font-size: 0.8rem;
}

.added-track ul.items li.album-title{
    width: 120px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    margin-left: -1px;
}

.added-track.edit ul.items li.album-title{
    margin-left: 10px;
}

.added-track-header ul.items li.album-title{
    width: 120px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.added-track ul.items .select-album{
    width: 133px;
    margin-top: 7px;
    font-size: 0.8rem;
}

.added-track ul.items li.track-title{
    width: 230px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;


}
.added-track-header ul.items li.track-title{
    width: 230px;
}

.added-track ul.items .select-track{
    width: 230px;
    margin-top: 7px;
    font-size: 0.8rem;
}

.added-track ul.items .input-track-free{
    width: 230px;
    margin-top: 7px;
    font-size: 0.8rem;
}

.added-track ul.items li.other-free{
    width: 180px;
    overflow-wrap: break-word;
    padding-top: 4px;
    line-height: 12px;
    overflow: hidden;
}

.added-track-header ul.items li.other-free{
    width: 180px;
}

.added-track ul.items .input-other-free{
    width: 186px;
    margin-top: 7px;
    font-size: 0.8rem;
}

.added-track .play-btn{
    width: 60px;
}

.added-track .detail-btn-area{
    display: flex;
    width: 130px;
}

.added-track .edit-btn{
    display: none;
    width: 60px;
    margin-top: 8px;
    background-color: var(--color-booth);

}

.added-track .del-btn{
    display: none;
    width: 60px;
    margin-top: 8px;
    background-color: var(--color-YT);
}

.dropnav{
    width: 90%;
    height: 150px;
    border: 4px dashed #000000;
    border-radius: 10px;
    text-align: center;
    padding-top: 54px;
    font-size: 1.3rem;
    font-weight: bold;
    margin: auto;
    margin-top: 20px;
}

.dropnav.hover{
    background-color: var(--color-tag-selected);
}

.setlist-area{
    width: 90%;
    height: 200px;
    position: absolute;
    overflow: auto;
}

.print .setlist-area{
    height: auto;
}

.setlist-dialog.center .setlist-area{
    height: 90%;
}


.setlist-area .search-result-box{
    background-color: #EBE8E8;
    height: 60px;
    width: 95%;

}
@media print {
    /* .setlist-area .fitting-box:nth-child(2n){
        page-break-after: always;
        break-after: page;
    }
    .setlist-area .fitting-box:nth-child(2n){
        background-color: red;
    } */
    .setlist-area .fitting-box.dummy{
        /* display: block !important;
        page-break-after: always;
        break-after: page; */
        height: 100px;
    }
}
.setlist-area .search-result-box .artwork{
    width: 59px;
    height: 59px;
}

.setlist-area .search-result-box .artwork .music-control{
    width: 59px;
    height: 59px;
}

.setlist-area .search-result-box .detail{
    padding-top: 19px;
}

.setlist-area .search-result-box .detail .title{
    font-size: 0.9rem;
}

.setlist-area .search-result-box .detail .title-and-desc{
    width: 600px;
}

.setlist-area .search-result-box .detail .overview{
    display: none;
}


.setlist-area .search-result-box .detail .tags-and-link{
    display: none;
}

.setlist-area .search-result-box .detail .overview .explanation{
    display: none;
}

.setlist-area .search-result-box .detail .overview .artist {
    display: none;
}

.setlist-area .search-result-box .detail .sharelink {
    display: none;
}

.setlist-sp-dialog{
    display: none;
}

.display-none{
    display: none !important;
}


/* 共通クラス */
.cursor-pointer:not(.disabled){
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    transition: all 0.2s ease;
    cursor: pointer;
}

.disabled{
    background-color: #ACACAF !important;
}

.cursor-pointer:hover:not(.disabled){
    opacity: 0.7 !important;
}