/* ヘッダー用CSS打消し用 */
#contentsArea12base {
    width: 95%;
    min-width: 1024px;
}

    #contentsArea12base #mainLeft {
        width: 100%;
    }

/* ページ構成用 */
.main-content-area {
    display: flex;
    margin: auto;
    width: 1200px;
    padding: 14px 18px 18px;
    color: #232323;
}

.main-left-area {
    padding: 0 10px;
}

.main-right-area {
    width: 50%;
    padding: 0 10px;
}

/* ページ共通 */
.button {
    background: #F5F5F5;
    color: #535353;
    display: flex;
    align-items: center;
    white-space: nowrap;
    text-align: center;
    padding: 0 .8em;
    border-radius: 2px;
    box-shadow: 0px 2px 2px rgba(0,0,0,0.2);
    justify-content: center;
    width: 235px;
    height: 50px;
}

    .button:hover {
        opacity: .6;
        transition: .2s;
        cursor: pointer;
    }

    .button img {
        height: 1.5em;
        margin-right: 10px;
    }

/* 左側エリア */
/* ジャケ写タイトルブロック */
.feature-block {
    display: flex;
    width: 100%;
    padding-bottom: 30px;
}

.jacket-photo-section {
}

.gallery {
    margin: 0 0 10px 0;
}

    .gallery dt {
        text-align: center;
        margin: 0 0 15px 0;
    }

.swiper-slide {
    display: flex;
}

    .swiper-slide div {
        margin-right: 5px;
    }

        .swiper-slide div:last-child {
            margin-right: 0;
        }

.gallery .thumbnail-photo {
    width: 205px;
    height: 205px;
    border: 0.1px solid #DCDCDC;
    text-align: center;
    vertical-align: middle;
    display: table-cell;
}

.gallery .main-image {
    height: 99%;
    width: 99%;
    object-fit: contain;
}

.thumbnail-list {
    width: 65px;
    height: 65px;
    text-align: center;
    vertical-align: middle;
    border: 0.1px solid #DCDCDC;
    margin: 0 5px 0 0;
}

.thumbnail {
    height: 98%;
    width: 98%;
    object-fit: contain;
}

.slider-section {
    height: 70px;
}

.format-genre {
    display: flex;
    align-items: center;
}

.item-feature-section {
    padding: 0 10px 0 20px;
}

div.item-format {
    min-width: initial;
    background: #232323;
}

.item-genre {
    padding-left: 20px;
    font-size: 13px;
    font-weight: bold;
}

.item-title {
    padding: 10px 0;
    font-size: 19px;
    line-height: 1.2;
}
.item-artist {
    font-size: 13px;
}
    .item-title a {
        /*font-weight:bold;*/
    }
    .item-title a,
    .item-artist a {
        color: #232323;
    }
        .item-title a:hover,
        .item-artist a:hover {
            color: #D60024;
        }

.item-medal {
    transition: all 0.3s ease 0s;
    padding: 10px 0 0;
    position: relative;
    /*position: absolute;
    top: 0;
    right: 0;*/
}
    .item-medal .gold-medal {
        height: 50px;
    }
    .item-medal .silver-medal,
    .item-medal .bronze-medal {
        height: 50px;
    }
    .item-medal .crown {
        height: 80px;
    }

    .medal-fukidashi {
        display: none;
        min-width: 120px;
        color: #fff;
        font-size: 11px;
        box-sizing: border-box;
        border-radius: 5px;
        word-wrap: break-word;
        white-space: nowrap;
        position: absolute;
        left: 75px;
        top: 20px;
        border-radius: 2px;
        padding: 10px;
        background: #232323;
        color: #fff;
        filter: drop-shadow(1px 1px 2px rgba(0,0,0,0.3));
        animation: tooltip-show .1s linear 0s;
    }

.medal-icon.crown ~ .medal-fukidashi {
    left: 88px;
    top: 30px;
}
    .medal-fukidashi:before {
        content: "";
        position: absolute;
        top: 50%;
        left: -21px;
        margin-top: -12px;
        border: 12px solid transparent;
        z-index: 2;
    }

    .medal-fukidashi:after {
        position: absolute;
        top: 4px;
        width: 0;
        height: 0;
        left: -28px;
        margin-left: 10px;
        border: solid transparent;
        border-color: rgba(51, 204, 153, 0);
        border-right-color: #232323;
        border-width: 10px;
        pointer-events: none;
        content: " ";
    }

.item-medal .medal-icon:hover + .medal-fukidashi {
    display: block;
}
.item-medal .medal-icon {
    transition: all 0.3s ease 0s;
}

.item-medal .medal-icon:hover {
    cursor: help;
    opacity: .8;
}
@keyframes tooltip-show {
    from {
        opacity: 0;
    }

    to {
        opacity: .8;
    }
}
/* アイテム情報ブロック */
.item-info-block {
}

    .item-info-block .block-common-inner {
        padding: 5px 20px 50px 0px;
    }

    .item-info-block .item-info-inner {
        display: flex;
        flex-wrap: wrap;
    }

        .item-info-block .item-info-inner .group {
            width: 50%;
            display: flex;
            margin-top: 20px;
        }

.group .label {
    font-weight: bold;
    width: 100px;
    margin-right: 10px;
}

.group .content {
    width:180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.block-title {
    padding: 0 0 5px 5px;
    border-bottom: 1px solid #DCDCDC;
}

    .block-title h2 {
        font-size: 15px;
        font-weight: bold;
        letter-spacing: 1.2px;
    }

.item-unit-block {
    width: 100%;
}

.item-unit-group {
    font-weight: bold;
    padding: 20px 0 10px 0;
}

.item-track .row {
    display: flex;
    width: 100%;
    margin-top: 10px;
}

    .item-track .row .track-number {
        flex-basis: 40px;
    }

    .item-track .row .track-name {
        margin-right: auto;
    }

    .item-track .row .track-perf-time {
        flex-basis: 80px;
        text-align: right;
    }

/* 右側エリア */
.main-right-area .block-common {
    padding: 0 0 40px 5px;
}

    .main-right-area .block-common .block-inner {
        padding: 20px 5px 20px 20px;
    }

.main-right-area .block-title {
    display: flex;
    align-items: center;
}

    .main-right-area .block-title img {
        width: 25px;
        margin-right: 30px;
    }

    .main-right-area .block-title h2 {
        margin-right: auto;
    }
    .main-right-area .block-title div {
        align-self:flex-end;
        font-size: 12px;
    }

    .statistics-result {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        padding-bottom: 10px;
    }

.result-counts {
    text-align: right
}

    .result-counts div {
        margin-bottom: 10px;
    }
    .result-counts div:last-child span  {
        font-size: 14px;
    }

    .counts {
        font-size: large;
    }

.actions {
    display: flex;
    justify-content: center;
}

.want-list-button {
    margin-right: 20px;
}

.gallery-inner {

}

.notes-text {
    overflow: hidden;
    margin: 5px 0;
}

    .notes-text p {
        line-height: 1.5em;
        word-break: break-all;
        white-space: pre-wrap;
    }

.notes-close-btn, .notes-open-btn {
    padding: 8px 0;
    cursor: pointer;
}

.gallery-block-inner {
    display: flex;
    flex-wrap: wrap;
    padding: 13px;
}


.gallery-block-inner-next {
    padding-top: 0px;
    margin-top: -13px;
}

.gallery-block-inner .gallery-outer {
    display: flex;
    justify-content: center;
    align-items: center;
    /*width: 79.8px;
    height: 79.8px;
    border: 0.1px solid #DCDCDC;*/
    margin: 4px;
}

    .gallery-block-inner .gallery-outer:last-child {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 80px;
        height: 80px;
        border: 0.1px solid #DCDCDC;
    }

    .gallery-block-inner .gallery-outer img {
        width: 80px;
        height: 80px;
        object-fit: cover;
    }
.gallary-inner {
    margin: 13px 0;
}

.block-footer {
    display: flex;
    justify-content: flex-end;
    font-weight: bold;
    color: #535353;
    font-size: 12px;
}
.other-sum{
    color: #535353;
    font-size: 12px;
    white-space: nowrap;
}
    .other-sum span {
        color: #232323;
        font-size: 13px;
    }

    .other-sum .wow {
        font-size: 14px;
        margin: 0 5px;
    }

    .next-open-btn {
        cursor: pointer;
    }

    .next-open-btn:hover {
        color: red;
        font-weight: bold;
    }
.notes-inner {
    padding: 10px;
    margin: 10px;
}
.notes-upper-part {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
}

.notes-lower-part {
    padding: 10px 0;
    line-height: 1.7;
    word-break: break-all;
}

.user-name-block {
    display: flex;
    font-size: 12px;
}

.user-name {
    margin-right: 20px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
a.user-name {
    color: #D60024;
}

.collection-lower-part {
    display: flex;
    justify-content: space-between;
    padding: 10px 0 0 0;
    word-break: break-all;
}

.collection-notes-refer-btn {
    color: #fff;
    font-size: 12px;
    border: solid 1px #a9a9a9;
    background: #a9a9a9;
    border-radius: 3px;
    padding: 5px 3px 5px 10px;
    line-height: 1.5;
    letter-spacing: 1.1px;
    transition: .2s;
    cursor: pointer;
}
    .collection-notes-refer-btn:hover {
        opacity: .8;
        background-color: #007bff;
        border-color: #007bff;
    }

.collection-notes-refered-btn {
    color: #fff;
    font-size: 12px;
    border: solid 1px #1b6ec2;
    background: #1b6ec2;
    border-radius: 3px;
    padding: 5px 3px 5px 10px;
    line-height: 1.5;
    letter-spacing: 1.1px;
    transition: .2s;
    font-weight: bold;
    cursor: pointer;
}
    .collection-notes-refered-btn:hover {
    }

.loader {
    margin: 100px auto;
    font-size: 25px;
    width: 1em;
    height: 1em;
    border-radius: 50%;
    position: relative;
    text-indent: -9999em;
    -webkit-animation: load5 1.1s infinite ease;
    animation: load5 1.1s infinite ease;
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
}

@-webkit-keyframes load5 {
    0%,
    100% {
        box-shadow: 0em -2.6em 0em 0em #d60024, 1.8em -1.8em 0 0em rgba(214,0,36, 0.2), 2.5em 0em 0 0em rgba(214,0,36, 0.2), 1.75em 1.75em 0 0em rgba(214,0,36, 0.2), 0em 2.5em 0 0em rgba(214,0,36, 0.2), -1.8em 1.8em 0 0em rgba(214,0,36, 0.2), -2.6em 0em 0 0em rgba(214,0,36, 0.5), -1.8em -1.8em 0 0em rgba(214,0,36, 0.7);
    }

    12.5% {
        box-shadow: 0em -2.6em 0em 0em rgba(214,0,36, 0.7), 1.8em -1.8em 0 0em #d60024, 2.5em 0em 0 0em rgba(214,0,36, 0.2), 1.75em 1.75em 0 0em rgba(214,0,36, 0.2), 0em 2.5em 0 0em rgba(214,0,36, 0.2), -1.8em 1.8em 0 0em rgba(214,0,36, 0.2), -2.6em 0em 0 0em rgba(214,0,36, 0.2), -1.8em -1.8em 0 0em rgba(214,0,36, 0.5);
    }

    25% {
        box-shadow: 0em -2.6em 0em 0em rgba(214,0,36, 0.5), 1.8em -1.8em 0 0em rgba(214,0,36, 0.7), 2.5em 0em 0 0em #d60024, 1.75em 1.75em 0 0em rgba(214,0,36, 0.2), 0em 2.5em 0 0em rgba(214,0,36, 0.2), -1.8em 1.8em 0 0em rgba(214,0,36, 0.2), -2.6em 0em 0 0em rgba(214,0,36, 0.2), -1.8em -1.8em 0 0em rgba(214,0,36, 0.2);
    }

    37.5% {
        box-shadow: 0em -2.6em 0em 0em rgba(214,0,36, 0.2), 1.8em -1.8em 0 0em rgba(214,0,36, 0.5), 2.5em 0em 0 0em rgba(214,0,36, 0.7), 1.75em 1.75em 0 0em #d60024, 0em 2.5em 0 0em rgba(214,0,36, 0.2), -1.8em 1.8em 0 0em rgba(214,0,36, 0.2), -2.6em 0em 0 0em rgba(214,0,36, 0.2), -1.8em -1.8em 0 0em rgba(214,0,36, 0.2);
    }

    50% {
        box-shadow: 0em -2.6em 0em 0em rgba(214,0,36, 0.2), 1.8em -1.8em 0 0em rgba(214,0,36, 0.2), 2.5em 0em 0 0em rgba(214,0,36, 0.5), 1.75em 1.75em 0 0em rgba(214,0,36, 0.7), 0em 2.5em 0 0em #d60024, -1.8em 1.8em 0 0em rgba(214,0,36, 0.2), -2.6em 0em 0 0em rgba(214,0,36, 0.2), -1.8em -1.8em 0 0em rgba(214,0,36, 0.2);
    }

    62.5% {
        box-shadow: 0em -2.6em 0em 0em rgba(214,0,36, 0.2), 1.8em -1.8em 0 0em rgba(214,0,36, 0.2), 2.5em 0em 0 0em rgba(214,0,36, 0.2), 1.75em 1.75em 0 0em rgba(214,0,36, 0.5), 0em 2.5em 0 0em rgba(214,0,36, 0.7), -1.8em 1.8em 0 0em #d60024, -2.6em 0em 0 0em rgba(214,0,36, 0.2), -1.8em -1.8em 0 0em rgba(214,0,36, 0.2);
    }

    75% {
        box-shadow: 0em -2.6em 0em 0em rgba(214,0,36, 0.2), 1.8em -1.8em 0 0em rgba(214,0,36, 0.2), 2.5em 0em 0 0em rgba(214,0,36, 0.2), 1.75em 1.75em 0 0em rgba(214,0,36, 0.2), 0em 2.5em 0 0em rgba(214,0,36, 0.5), -1.8em 1.8em 0 0em rgba(214,0,36, 0.7), -2.6em 0em 0 0em #d60024, -1.8em -1.8em 0 0em rgba(214,0,36, 0.2);
    }

    87.5% {
        box-shadow: 0em -2.6em 0em 0em rgba(214,0,36, 0.2), 1.8em -1.8em 0 0em rgba(214,0,36, 0.2), 2.5em 0em 0 0em rgba(214,0,36, 0.2), 1.75em 1.75em 0 0em rgba(214,0,36, 0.2), 0em 2.5em 0 0em rgba(214,0,36, 0.2), -1.8em 1.8em 0 0em rgba(214,0,36, 0.5), -2.6em 0em 0 0em rgba(214,0,36, 0.7), -1.8em -1.8em 0 0em #d60024;
    }
}

@keyframes load5 {
    0%,
    100% {
        box-shadow: 0em -2.6em 0em 0em #d60024, 1.8em -1.8em 0 0em rgba(214,0,36, 0.2), 2.5em 0em 0 0em rgba(214,0,36, 0.2), 1.75em 1.75em 0 0em rgba(214,0,36, 0.2), 0em 2.5em 0 0em rgba(214,0,36, 0.2), -1.8em 1.8em 0 0em rgba(214,0,36, 0.2), -2.6em 0em 0 0em rgba(214,0,36, 0.5), -1.8em -1.8em 0 0em rgba(214,0,36, 0.7);
    }

    12.5% {
        box-shadow: 0em -2.6em 0em 0em rgba(214,0,36, 0.7), 1.8em -1.8em 0 0em #d60024, 2.5em 0em 0 0em rgba(214,0,36, 0.2), 1.75em 1.75em 0 0em rgba(214,0,36, 0.2), 0em 2.5em 0 0em rgba(214,0,36, 0.2), -1.8em 1.8em 0 0em rgba(214,0,36, 0.2), -2.6em 0em 0 0em rgba(214,0,36, 0.2), -1.8em -1.8em 0 0em rgba(214,0,36, 0.5);
    }

    25% {
        box-shadow: 0em -2.6em 0em 0em rgba(214,0,36, 0.5), 1.8em -1.8em 0 0em rgba(214,0,36, 0.7), 2.5em 0em 0 0em #d60024, 1.75em 1.75em 0 0em rgba(214,0,36, 0.2), 0em 2.5em 0 0em rgba(214,0,36, 0.2), -1.8em 1.8em 0 0em rgba(214,0,36, 0.2), -2.6em 0em 0 0em rgba(214,0,36, 0.2), -1.8em -1.8em 0 0em rgba(214,0,36, 0.2);
    }

    37.5% {
        box-shadow: 0em -2.6em 0em 0em rgba(214,0,36, 0.2), 1.8em -1.8em 0 0em rgba(214,0,36, 0.5), 2.5em 0em 0 0em rgba(214,0,36, 0.7), 1.75em 1.75em 0 0em #d60024, 0em 2.5em 0 0em rgba(214,0,36, 0.2), -1.8em 1.8em 0 0em rgba(214,0,36, 0.2), -2.6em 0em 0 0em rgba(214,0,36, 0.2), -1.8em -1.8em 0 0em rgba(214,0,36, 0.2);
    }

    50% {
        box-shadow: 0em -2.6em 0em 0em rgba(214,0,36, 0.2), 1.8em -1.8em 0 0em rgba(214,0,36, 0.2), 2.5em 0em 0 0em rgba(214,0,36, 0.5), 1.75em 1.75em 0 0em rgba(214,0,36, 0.7), 0em 2.5em 0 0em #d60024, -1.8em 1.8em 0 0em rgba(214,0,36, 0.2), -2.6em 0em 0 0em rgba(214,0,36, 0.2), -1.8em -1.8em 0 0em rgba(214,0,36, 0.2);
    }

    62.5% {
        box-shadow: 0em -2.6em 0em 0em rgba(214,0,36, 0.2), 1.8em -1.8em 0 0em rgba(214,0,36, 0.2), 2.5em 0em 0 0em rgba(214,0,36, 0.2), 1.75em 1.75em 0 0em rgba(214,0,36, 0.5), 0em 2.5em 0 0em rgba(214,0,36, 0.7), -1.8em 1.8em 0 0em #d60024, -2.6em 0em 0 0em rgba(214,0,36, 0.2), -1.8em -1.8em 0 0em rgba(214,0,36, 0.2);
    }

    75% {
        box-shadow: 0em -2.6em 0em 0em rgba(214,0,36, 0.2), 1.8em -1.8em 0 0em rgba(214,0,36, 0.2), 2.5em 0em 0 0em rgba(214,0,36, 0.2), 1.75em 1.75em 0 0em rgba(214,0,36, 0.2), 0em 2.5em 0 0em rgba(214,0,36, 0.5), -1.8em 1.8em 0 0em rgba(214,0,36, 0.7), -2.6em 0em 0 0em #d60024, -1.8em -1.8em 0 0em rgba(214,0,36, 0.2);
    }

    87.5% {
        box-shadow: 0em -2.6em 0em 0em rgba(214,0,36, 0.2), 1.8em -1.8em 0 0em rgba(214,0,36, 0.2), 2.5em 0em 0 0em rgba(214,0,36, 0.2), 1.75em 1.75em 0 0em rgba(214,0,36, 0.2), 0em 2.5em 0 0em rgba(214,0,36, 0.2), -1.8em 1.8em 0 0em rgba(214,0,36, 0.5), -2.6em 0em 0 0em rgba(214,0,36, 0.7), -1.8em -1.8em 0 0em #d60024;
    }
}



.notes-upddate-part {
    font-size:11px;
    color: #777;
    text-align: end;
}
.notes-inner {
    border-bottom: 1px dotted #dadada;
}

.notes-open-btn {
    color: #858585;
    text-align: center;
    padding: 10px 0;
}

.notes-close-btn {
    color: #858585;
    text-align: center;
}