/* -----------------------------------------------------------------------------
**
** SP商品詳細 CSS
**
----------------------------------------------------------------------------- */

.TOL-item-info-SP {
    font-family: Noto sans jp, "roboto";
    margin-bottom: 128px;
    overflow-x: clip;
    overflow-wrap: anywhere;
    word-break: break-all;
}
/* 全体パーツ中央寄せ */
.TOL-item-info-SP > div{
 margin:  0 auto; 
 min-width: 351px;
}
/* width100%でも余白ができるため調整 */
body{
    margin:0;
    padding:0;
    overflow-x: hidden;
}
/* タグ中央揃え */
.TOL-item-info-SP .common-tag {
    align-items: center;
}

/* 商品詳細上部 */
.TOL-item-info-SP-header {
width: 91%;
}
/* パンくずリスト */
.TOL-item-info-SP-breadcrumbs {
    display: flex;
    margin: 10px auto;
    height: auto;
    list-style: none;
    padding-left: 0px;
    flex-wrap: wrap;
}
    .TOL-item-info-SP-breadcrumbs li:not(:last-of-type)::after {
        content: ">";
        margin: 6px;
        color: var(--tr-medium-gray);
    }
    .TOL-item-info-SP-breadcrumbs .SP-item-info-artist-name, 
    .TOL-item-info-SP-breadcrumbs .SP-item-info-artist-name a {
        font-size: 12px;
        color: var(--tr-black);
    }
    .TOL-item-info-SP-breadcrumbs span:not(.is-text-gray){
        color: var(--tr-black);
    }
/* 注文済文言枠 */
.TOL-item-info-SP-orderd-alert {
    background: var(--tr-light-gray);
    margin: 14px auto;
    padding: 4px 20px;
}
/* .TOL-item-info-SP-orderd-alert-message {
} */
.TOL-item-info-SP-orderd-alert-link {
    margin-top: -6px;
}
.TOL-item-info-SP-orderd-alert-link-va {
    vertical-align: -5px; /* アイコンの位置合わせ */
}
.material-symbols-outlined.TOL-item-info-SP-orderd-alert-link-small-icon {
    font-size: 18px; /* アイコンの大きさ調整用 */
}



/* ジャケ写～カートイン部分 */
.SP-item-info-jacket-info-area{
    width: 91%;
    height: auto;
}
    .SP-item-info-genre{
        width: 100%;
        height: auto;
        display: flex;
        position: relative;
        align-items: center;
    }
    .SP-item-info-genre >span{
        margin-left: 10px;
    }
    .SP-item-info-future-area{
        width: auto;
        height: 39px;
        position: absolute;
        right: 0px;
        top: -11px;
    }
    .SP-item-info-future-area ul{
        display: flex;
        column-gap: 5px;
    }
    .SP-item-info-future-area ul li{
        display: inline;
    }
    .SP-item-info-future-area ul li a img{
        height: 37px;
    }

    /* ジャンルtag */
    .SP-item-info-tag{
        margin: 10px 0px;
    }
    .common-tag.is-black.is-light {
        border: 1.5px solid var(--tr-black);
        background: white;
    }
    /* 特集 */
    .SP-item-info-future{
        position: absolute;
        right: 18px;
        top: 85px;
    }
    .SP-item-info-future img{
        height:38px;
    }

    /* ジャケ写エリア */
    .SP-item-info-jacket-area{

    }
    .SP-item-info-jacket-area >p{
        line-height: 12px;
        margin: 2px 40px 0 0;
        max-width: 470px;
    }
    .SP-item-info-jacket-img-area{
        margin-top: 5px;
        width: 100%;
        max-width: 500px;
        position: relative;
        margin-right: auto;
        margin-left: auto;
        aspect-ratio: 1 / 1;
        display: flex;
        border: 1px solid var(--tr-dark-gray);
    }
    .SP-item-info-jacket-img{
        object-fit: contain;
        width: 100%;
        aspect-ratio: 1 / 1;
        margin: auto;
    }
    .SP-item-info-jacket-img.is-actual-size{
        margin: auto;
        width: auto;
        height: auto;
        max-width: 100%;
        max-height: 100%;
    }
    .SP-item-info-jacket-btn{
        position: absolute;
        bottom: -60px;
        right: 4px;
        width: 30px;
        height: 30px;
        border-radius:50%;
        background-color:var(--tr-deep-gray) ;
    }
    .SP-item-info-jacket-btn img{
        position: relative;
        top: 2px;
        height: 15px;
    }
    .SP-item-info-jacket-pagination{
        width: 68%;
        max-width: 290px;
        margin-right: auto;
            margin-left: auto;
            display: flex;
            align-items: center;
    }
        .SP-item-info-jacket-pagination span{
        font-size: 32px;
    }

/* 共通cssの流用 */
.common-pagination {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  width: 100%;
}
.common-pagination-prev,
.common-pagination-next {
  display: flex;
  align-items: center;

}
.common-pagination-prev {
 margin-right: 24px;
}
.common-pagination-next {
 margin-left: 24px;
}
.common-pagination-button.item-info {
  background: var(--tr-medium-gray);
  border-radius: 50px;
  line-height: 1;
  font-size: 14px;
  width: 10px;
  min-width: 10px;
  height: 10px;
}
.common-pagination-button.item-info-small {
    background: var(--tr-medium-gray);
    border-radius: 50px;
    line-height: 1;
    font-size: 14px;
    width: 7px;
    min-width: 7px;
    height: 7px;
}
button.common-pagination-button.item-info.is-active {
  background: var(--tr-red);
}
.common-pagination button {
  color: var(--tr-black);
}
.material-symbols-outlined.item-info {
  font-variation-settings:
  'FILL' 0,
  'wght' 400,
  'GRAD' 0,
  'opsz' 24
}

/* 試し読みボタン */
.SP-common-main-sample-btn {
    border-radius: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
    width: 86px;
    border: 1.5px solid var(--tr-deep-gray);
    background: white;
    margin-top: 8px;
}
.SP-common-main-sample-btn img{
    height: 17px;
     margin-right: 6px;
}
/* タイトル */
.SP-item-info-title-area{
    margin-top: 20px;
    display: inline-grid;
    margin-bottom: 15px;
    width: 100%;
        position: relative;
}
/* アーティスト単体 */
.SP-item-info-artist-single{
    font-size: 16px;
    margin-bottom: 5px;
}
/* アーティスト複数 */
.SP-item-info-artist-multi{
    margin-bottom: 5px;
}
.SP-item-info-artist-multi ul li{
    display: inline;
    list-style: none;
    font-size: 14px;
}
.SP-item-info-artist-multi ul li a{
    font-size: 16px;
}

/* アイテム名 */
.SP-item-info-item-name{
    width: 93%;
}
/* 共有ボタン */
.SP-item-info-share-btn{
    position: absolute;
    right: 5px;
    bottom: -1px;
}
.SP-item-info-share-btn img{
    height: 21px;
}

/* ★ */
.SP-item-info-star-rating-area-detail{
    display: flex;
    margin-top: 6px;
    align-items: center;
    margin-left: -5px;
}
.SP-item-info-star-rating-detail {
    width: 100px;
    height: auto;
    position: relative;
    transform: scale(0.87);
}

.SP-item-info-star-rating-front-detail {
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    height: 100%;
}
.SP-item-info-star-rating-front-detail:before {
    content: "";
    background-image: url(../img/star_yellow.svg);
    background-repeat: no-repeat;
    display: block;
    width: 100px;/*.SP-item-info-star-ratingと同じ幅を指定*/
    height: 100%;
}
.SP-item-info-star-rating-value-detail {
    padding-left: 1px;
    padding-top: 1px;
}

/* 価格エリア */
.SP-item-info-price-area {
    padding-top: 5.5px;
    margin-bottom: 15px;
}
/* 販売価格 */
.SP-item-info-sale-price-area {
    position: relative;
    margin-top: 11px;
    margin-left: 3px;
}
.SP-item-info-price {
    position: absolute;
    display: flex;
    right: 1px;
    top: 5px;
}
.SP-item-info-price.off {
    position: initial;
    margin-left: 10px;
}
.SP-item-info-price-text {
    margin-top: -18px;
}
.SP-item-info-price-text span{
    font-size: 27px;
}
.SP-item-info-price span{
    margin-left: 4px;
}
/* オフ価格 */
.SP-item-info-off-price-area {
    position: relative;
    margin-left: 3px;
    padding-top: 20px;
    display: flex;
    justify-content: flex-end;
}
.SP-item-info-off-price-area p{
    margin: -2px 6px 0;
}
.TOL-item-info-point-sp{
    position: absolute;
    left: 101px;
    top: -3px;
}
.TOL-item-info-zaiko{
    border-top: solid #DCDCDC;
    margin-top: 12px;
    display: flex;
    align-items: baseline;
    padding: 11px 0 5px 0;
}
.TOL-item-info-zaiko span{
    margin-top: 11px;
    margin-left: 11px;
}
.TOL-item-info-shipping-info{
    display: flex;
    align-items: normal;
    margin-bottom: 8px;
    margin-top: 6px;
}
.TOL-item-info-shipping-info > div{
    margin-right: 10px;
        margin-top: 2px;
}
.TOL-item-info-shipping-info > span{
    padding-top: 9px;
}
.tr-icon-text-group >span{
    margin-top: 1.5px;
}
.TOL-item-info-shipping-info-flaget{
    padding-top: 1px;
}
.TOL-item-info-shipping-info-flaget img{
    height: 27px;
}
.common-question-icon-container.is-bottom{
    padding-top: 7px;
    margin-left: -8px;
    transform: scale(1.2);
}
.SP-item-info-shipping-detail p{
    line-height: 1.4;
}
.SP-item-info-shipping-detail-alcohol{
    display: flex;
    margin-top: 16px;
    padding-right: 5px;
    align-items: center;
    margin-bottom: 7px;
}
.SP-item-info-shipping-detail-alcohol p{
    line-height:1.4;
    width: 88%;
    margin-left: 8px;
}
    .common-tag.is-black.is-shipping-SP {
        border: 1.0px solid var(--tr-black);
        background: white;
        height: 15px;
    }
    .common-tag.is-black.is-shipping span{
        margin-left: -2px;
    }


/* 購入上の注意 */
.TOL-item-info-warning {
    display: block;
    margin-top: 8px;
    border-radius: 5px;
    padding: 7px;
    width: 100%;
    position: relative;
}
.common-view-more {
    padding: 8px 0;
}
.common-view-more-button.is-open .material-symbols-outlined{
    transform: rotate(-180deg);
    transition: .5s;
}
.TOL-item-info-warning-text {
    height: 2em;
    overflow: hidden;
    transition: .5s;
}

.TOL-item-info-warning-text span{
    display: block;
}
.TOL-item-info-warning img{
    height: 12px;
    position: relative;
    top: 2px;
    left: -5px;
}

/* カートエリア */
.SP-item-info-cart-area{

}
.SP-item-info-cart-limit{
    width: 100%;
    background-color: var(--tr-light-red);
    text-align: center;
    padding: 0.1px 0px;
}
.SP-item-info-cart-limit p{
    line-height: 2.3;
}
.SP-item-info-cartin{
    display: inline-block;
    width: 100%;
    height: auto;
    background-color: #fff9e0;
    margin-top: 6px;
    padding: 15px 17px;
    box-sizing: border-box;
}
.common-main-button.cart-in{
height: 62px;
}
.common-main-button.is-inactive-SP {
    background: var(--tr-medium-gray);
    cursor: unset;
}
.common-main-button.is-blue.is-inactive {
    background: var(--tr-dark-gray);
}
.SP-item-info-cart-text-area{
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 3px;
}
.SP-item-info-first-edition{
    text-align: center;
}
.SP-item-info-cart-text-area img{
    max-height: 32px;
}
.SP-item-info-stock-display-and-shipping-guideline{
    justify-content: center;
    width: 100%;
    display: flex;
    align-items: center;
}

.SP-item-info-cart-text-zaiko {
    position: relative;
    display: inline-block;
    /* margin: 1.5em 15px 1.5em 0; */
    padding: 1px 8px;
    /* max-width: 100%; */
    font-size: 16px;
    background: var(--tr-yellow);
}
.SP-item-info-cart-text-zaiko:before {
    content: "";
    position: absolute;
    top: 90%;
    left: 97%;
    margin-top: -15px;
    border: 6px solid transparent;
    border-left: 11px solid var(--tr-yellow);
}
.SP-item-info-cart-clock{
    height: 20px;
    margin-left: 12px;
    margin-right: 3px;
}
.material-symbols-outlined.is-market{
    color: var(--tr-medium-gray);
    position: absolute;
    right: 1px;
}
.SP-item-info-cart-listing-area{
    display: flex;
    justify-content: end;
    align-items: center;
    margin-top: 3px;
    width: 100%;
}
.SP-item-info-cart-listing-area.is-keep{
    justify-content: center;
    width: 100%;
}
.SP-item-info-cart-listing-area img{
    height: 9px;
    margin-right: 7px;
}


.SP-item-info-keep-area{
    padding: 15px 17px 15px 17px;
    box-sizing: border-box;
    width: 100%;
}
.material-symbols-outlined.is-keep{
transform: scale(0.7);
}







/* 欲しい物リスト～登録者数 */
.SP-item-info-wish-list{
width: 100%;
margin-bottom: 15px;
}
/* 欲しいものリスト・コレクション このあたりはマージ時要調整と思います */
.TOL-item-info-SP-wish-list-collection-container {
    /* max-width: 375px; */
    margin: 12px;
    margin-bottom: 25px;
}

/* 欲しいものリスト・コレクション追加ボタン */
.TOL-item-info-SP-wish-list-collection-add-button-container {
    display: flex;
    justify-content: space-between;
}

.TOL-item-info-SP-wish-list-collection-add-button {
    display: flex;
    align-items: center;
    width: 49%;
    border: 1.5px solid var(--tr-dark-gray);
    border-radius: 5px;
    position: relative;
}

    .TOL-item-info-SP-wish-list-collection-add-button:hover {
        background: var(--tr-light-gray);
    }

.TOL-item-info-SP-wish-list-collection-add-button-icon {
    background: var(--tr-deep-gray);
    border-radius: 50%;
    width: 26px;
    height: 26px;
    margin: 10px 8px;
    position: relative;
}

    /* 追加済アイコン */
    .TOL-item-info-SP-wish-list-collection-add-button-icon.is-added {
        background: var(--tr-red);
    }

.TOL-item-info-SP-wish-list-collection-add-button-icon-heart {
    width: 16px;
    margin-top: 7px;
}

.TOL-item-info-SP-wish-list-collection-add-button-icon-books {
    width: 14px;
    margin-top: 7px;
}

.TOL-item-info-SP-wish-list-collection-add-button-text {
    text-align: left;
}

/* 欲しいものリストが１つ かつ 追加済の際の吹き出し */
.addWantList-balloon {
    position: absolute;
    display: inline-block;
    margin: 1.5em 0;
    padding: 10px;
    min-width: 120px;
    max-width: 100%;
    color: white;
    font-size: 13px;
    background: #d60024;
    z-index: 1;
    top: -63px;
    left: 10px;
    animation: balloon-fadeOut 3s forwards;
}
.addWantList-balloon:before {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -8px;
    border: 8px solid transparent;
    border-top: 8px solid #d60024;
}
@keyframes balloon-fadeOut {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

/* 欲しいものリスト・コレクション登録者表示 */
.TOL-item-info-SP-wish-list-collection-registrant-container {
    display: block;
    margin-top: 8px;
    border: 1.5px solid var(--tr-dark-gray);
    border-radius: 5px;
    width: 100%;
}

.TOL-item-info-SP-wish-list-collection-registrant-header {
    margin: 12px 12px 0px 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.TOL-item-info-SP-wish-list-collection-registrant-graph-icon {
    width: 18px;
    margin-right: 8px;
}

.TOL-item-info-SP-wish-list-collection-registrant-header:after {
    content: "";
    transition: .5s;
    margin-left: 18px;
    width: 6px;
    height: 6px;
    border-top: solid 2px var(--tr-medium-gray);
    border-right: solid 2px var(--tr-medium-gray);
    transform: rotate(135deg);
}

.TOL-item-info-SP-wish-list-collection-registrant-header.is-open:after {
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    top: 45%;
}

.TOL-item-info-SP-wish-list-collection-registrant-hidden-area {
    margin: 6px;
    display: flex;
    justify-content: space-between;
    height: 0;
    overflow: hidden;
    transition: .5s;
}

.TOL-item-info-SP-wish-list-collection-registrant-count-container {
    display: inline-block;
    background: var(--tr-gray);
    border-radius: 5px;
    width: 48%;
    text-align: center;
    margin:6px;
}

.TOL-item-info-SP-wish-list-collection-registrant-count {
    padding-top: 6px;
}

.TOL-item-info-SP-wish-list-collection-registrant-count-published {
    margin-top:-4px;
    padding-bottom: 14px;
}

/* 詳細表示リンク */
.TOL-item-info-SP-collection-info-link-container {
    display: flex;
    justify-content: space-between;
    margin-top:6px;
}

.TOL-item-info-SP-collection-info-link {
}

.TOL-item-info-SP-collection-qa-link {
}

.TOL-item-info-SP-collection-link-icon {
    vertical-align: -3px /* アイコンの位置合わせ */
}

    .TOL-item-info-SP-collection-link-icon.material-symbols-outlined {
        font-size: 14px;
        -webkit-text-stroke: .8px;
    }







/* キャンペーン、特集 */
.item-detail-campaign-container {
    padding-bottom: 10px;
}

.item-detail-campaign-container .campain-list {
    width: 93%;
    margin: 10px auto 30px auto;
}
    .item-detail-campaign-container .campain-list .campaign-explanation {
        margin-bottom: 10px;
        padding: 8px;
        border: 1px solid var(--tr-deep-gray);
        display: flex;
        flex-direction: column;
    }

.item-detail-campaign-container .special-feature-info {
    width: 96.5%;
    margin: 10px auto;
}
    .item-detail-campaign-container .special-feature-info .special-feature-info-info-link {
        display: flex;
        align-items: center;
        text-decoration: none;
    }
        .item-detail-campaign-container .special-feature-info .special-feature-info-info-link .special-feature-icon {
            margin-right: 5px;
        }





/* バリエーション */
.SP_item_info_05{
width: 100%;
height: 600px;
background-color: rgb(236, 238, 254);
}

/* タブエリア */
/* タブ全体の表示調整用 このあたりはマージ時要調整と思います */
.TOL-item-info-SP-tab {
}

/* --------------------基本情報・収録内容・商品の紹介切り替えタブ-------------------- */
.TOL-item-info-SP-tab-padding {
    padding: 0px 6px;
}
.TOL-item-info-SP-tab-headphone-icon {
    width: 14px;
    vertical-align: -1px;
}
.TOL-item-info-SP-tab-headphone-icon-style {
    fill: none;
    stroke: var(--tr-black);
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.3px;
}
.TOL-item-info-SP-tab .tr-tab-list-item.is-inactive h3 {
    color: var(--tr-medium-gray);
}
.TOL-item-info-SP-tab .tr-tab-list-item {
    flex: 1;
}
/* 収録内容タブがアクティブになったときのヘッドフォンアイコン（色変更） */
.tr-tab-list-item.is-active .TOL-item-info-SP-tab-headphone-icon-style {
    stroke: var(--tr-red);
}
/* 基本情報・収録内容・商品の紹介切り替えタブの内容 */
.TOL-item-info-SP-tab-content {
    display: none;
}
    .TOL-item-info-SP-tab-content.is-show {
        display: block;
    }
/* --------------------基本情報タブの内容-------------------- */
.TOL-item-info-SP-tab-basic-info {
}
/* 基本情報のテーブル（SKUなど） */
.TOL-item-info-SP-tab-basic-info-table {
    margin: 12px 14px;
    width: 92%;
}
.TOL-item-info-SP-tab-basic-info-table-column,
.TOL-item-info-SP-tab-basic-info-table-field {
    border-bottom: 1px solid var(--tr-gray);
}
.TOL-item-info-SP-tab-basic-info-table-column {
    width: 30%;
    padding: 10px 2px;
}
.TOL-item-info-SP-tab-basic-info-table-field {
    width: 70%;
    padding: 10px 20px;
}
/* 注記（基本情報テーブル下の注記） */
.TOL-item-info-SP-tab-basic-info-note {
    margin: 14px;
}
/* 動画表示 */
.TOL-item-info-SP-tab-basic-info-video-area {
    margin: 32px 0px;
    text-align: center;
}
.TOL-item-info-SP-tab-basic-info-video {
    height: 160px;
}
/* バナーエリア */
.TOL-item-info-SP-tab-basic-info-banner-area {
    text-align: center;
    margin: 24px 14px;
}
.TOL-item-info-SP-tab-basic-info-banner {
    height: 80px;
    width: 90%;
    object-fit: contain;
}
/* スペック・特典エリア */
.TOL-item-info-SP-tab-basic-info-hr {
    border: 0;
    border-bottom: 2px solid var(--tr-dark-gray);
}
.TOL-item-info-SP-tab-basic-info-content {
    margin: 14px 14px;
}
.TOL-item-info-SP-tab-basic-info-content.is-common-annotation {
    text-align: justify;
    padding: 12px;
    border: 2px solid var(--tr-dark-gray);
    margin: 18px 12px;
}
.TOL-item-info-SP-tab-basic-info-content.is-common-annotation p:first-child {
    margin-bottom: 6px;
}
.TOL-item-info-SP-tab-basic-info-content-title {
    margin: 20px 0px;
}
.TOL-item-info-SP-tab-basic-info-content-main-text {
    margin: 8px 0px;
}
.TOL-item-info-SP-tab-basic-info-content-sub-text {
    text-align: justify;
}
/* 共通CSSのタグを特典エリア用に調整 */
.TOL-item-info-SP-tab-basic-info-content-tag {
    margin-top: 20px;
    margin-bottom: 10px;
    width: 124px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2px 0px;
}
/* 管理画面から設定するHTMLで使用されている特典情報クラス */
.privilege-text {
    text-align: justify;
}
/* 管理画面から設定するHTMLで記載される画像用 */
.TOL-item-info-SP-tab-basic-info-content img, 
.TOL-item-info-SP-variation-privilege-item-info img {
    height: 300px;
    width: 90%;
    object-fit: contain;
    object-position: 0 0;
}
/* 「特典画像を見る」調整用 */
.TOL-item-info-SP-tab-basic-info-content .lightbox{
    display: inline-block;
    position: relative;
    z-index: 0;
}
/* -------------------------------収録内容タブの内容--------------------------- */
.TOL-item-info-SP-tab-recorded-contents {
    margin: 14px 14px;
}
/* 収録内容の説明 */
.TOL-item-info-SP-tab-recorded-contents-text {
    text-align: justify;
}
/* 収録内容のリスト */
.TOL-item-info-SP-tab-recorded-contents-list {
    margin: 8px 0px;
    list-style: none;
    padding-left: 0;
}
/* 収録内容 ディスクごとの情報 */
.TOL-item-info-SP-tab-recorded-contents-list-text {
    margin: 0;
}
.TOL-item-info-SP-tab-recorded-contents-list-text p {
    margin-top: 4px;
}
/* 収録内容　映像作品情報 */
.TOL-item-info-SP-tab-recorded-contents-audio-data {
    margin-left: 6px;
}
.TOL-item-info-SP-tab-recorded-contents-audio-data-title {
    margin-top: 12px;
    margin-bottom: 8px;
    display: block;
}
.TOL-item-info-SP-tab-recorded-contents-audio-data-info {
    display: flex;
    margin-top: 2px;
}
.TOL-item-info-SP-tab-recorded-contents-audio-data-info:last-child {
    margin-bottom: 8px;
}
.TOL-item-info-SP-tab-recorded-contents-audio-data-info span:first-of-type{
    width: 130px;
}
/* 収録内容のリストのアイテム（盤・グッズ単位） */
.TOL-item-info-SP-tab-recorded-contents-list-item {
    margin: 18px 0px;
}
.TOL-item-info-SP-tab-recorded-contents-list-item-name {
    margin: 8px 0px;
}
.TOL-item-info-SP-tab-recorded-contents-list-item-name-text {
    margin: 0px 3px;
}
.TOL-item-info-SP-tab-recorded-contents-list-item li:nth-child(odd) {
    background: var(--tr-light-gray);
}
/* 収録内容のリストのアコーディオンリストのアイテム（トラック単位） */
.TOL-item-info-SP-tab-recorded-contents-list-track-item {
    list-style: none;
}
.TOL-item-info-SP-tab-recorded-contents-list-track-header {
    display: flex;
    align-items: center;
    padding: 8px 4px;
}
.TOL-item-info-SP-tab-recorded-contents-list-track-main-info {
	display: flex;
}
/* 試聴がない場合の試聴ボタン */
.TOL-item-info-SP-tab-recorded-contents-list-track-listening-btn {
    background: var(--tr-dark-gray);
    border-radius: 50%;
    width: 30px;
    height: 30px;
    margin-left: 2px;
    text-align: center;
    flex-shrink: 0;
}
    .TOL-item-info-SP-tab-recorded-contents-list-track-listening-btn .headphone-icon {
        width: 14px;
        padding: 25%;
    }
    .TOL-item-info-SP-tab-recorded-contents-list-track-listening-btn .headphone-icon-style {
        fill: none;
        stroke: var(--tr-medium-gray);
        stroke-linecap: round;
        stroke-linejoin: round;
        stroke-width: 1.5px;
    }
    /* 試聴可能な場合の試聴ボタン（is-able） */
    .TOL-item-info-SP-tab-recorded-contents-list-track-listening-btn.is-able {
        background: var(--tr-yellow);
    }

        .TOL-item-info-SP-tab-recorded-contents-list-track-listening-btn.is-able .headphone-icon-style {
            stroke: var(--tr-red);
        }
.TOL-item-info-SP-tab-recorded-contents-list-track-number {
    margin-left: 8px;
    width: 30px;
    display: inline-block;
    vertical-align: top;
    flex-shrink: 0;
}
.TOL-item-info-SP-tab-recorded-contents-list-track-title-artist {
    margin-left: 8px;
    width: 170px;
}
.TOL-item-info-SP-tab-recorded-contents-list-track-title {
    overflow-wrap: anywhere;
    word-break: break-all;
    display: inline-block;
    max-width: 88%;
}
.TOL-item-info-SP-tab-recorded-contents-list-track-artist {
    margin-left: 32px;
}
.TOL-item-info-SP-tab-recorded-contents-list-track-length {
    margin: 0 10px 0 auto;
}
.TOL-item-info-SP-tab-recorded-contents-list-track-accordion-btn {
    margin: 0 0 0 0;
    width: 30px;
    height: 40px;
    position: relative;
    display: inline-block;
    flex-shrink: 0;
}
.TOL-item-info-SP-tab-recorded-contents-list-track-accordion-btn-icon {
}

    .TOL-item-info-SP-tab-recorded-contents-list-track-accordion-btn-icon::before,
    .TOL-item-info-SP-tab-recorded-contents-list-track-accordion-btn-icon::after {
        content: '';
        display: inline-block;
        width: 10px;
        height: 1px;
        background-color: var(--tr-red);
        position: absolute;
        left: 8px;
        transform: translateY(-50%);
        transition: opacity 0.5s;
    }
    .TOL-item-info-SP-tab-recorded-contents-list-track-accordion-btn-icon::after {
        transform: translateY(-50%) rotate(90deg);
        transition: transform 0.5s;
    }
.TOL-item-info-SP-tab-recorded-contents-list-track-item.is-open
.TOL-item-info-SP-tab-recorded-contents-list-track-accordion-btn-icon::before {
    opacity: 0;
}
.TOL-item-info-SP-tab-recorded-contents-list-track-item.is-open
.TOL-item-info-SP-tab-recorded-contents-list-track-accordion-btn-icon::after {
    transform: translateY(-50%) rotate(180deg);
}
/* アコーディオンの開閉部 */
.TOL-item-info-SP-tab-recorded-contents-list-track-hidden-area {
    height: 0;
    overflow: hidden;
    transition: .5s;
    overflow-wrap: anywhere;
}
.TOL-item-info-SP-tab-recorded-contents-list-track-hidden-contents-area {
    margin-left: 68px;
    margin-bottom: 14px;
    margin-top: -8px;
}
.TOL-item-info-SP-tab-recorded-contents-list-track-hidden-paragraph {
    margin: 8px 0px;
}
/* 収録内容のリストのアコーディオンではないリストのアイテム（グッズ単位） */
.TOL-item-info-SP-tab-recorded-contents-list-goods-item {
    list-style: none;
    display: flex;
    align-items: center;
    padding: 8px;
}
.TOL-item-info-SP-tab-recorded-contents-list-goods-number {
    margin-left: 8px;
    width: 20px;
}
.TOL-item-info-SP-tab-recorded-contents-list-goods-name {
    margin-left: 8px;
}
/* -----------------------------------------商品の紹介タブの内容------------------------------------ */
.TOL-item-info-SP-tab-product-introduction {
}
.TOL-item-info-SP-tab-product-introduction-title {
    background: var(--tr-light-gray);
    border-top: 1px solid var(--tr-dark-gray);
    padding: 12px 14px;
}
.TOL-item-info-SP-tab-product-introduction-content {
    margin: 14px 14px 24px 14px;
}
.TOL-item-info-SP-tab-product-introduction-paragraph {
    margin: 14px 0px;
}
.TOL-item-info-SP-tab-product-introduction-sub-title {
}
.TOL-item-info-SP-tab-product-introduction-text {
    text-align: justify;
}
.TOL-item-info-SP-tab-product-introduction-source {
    text-align: right;
    margin: 6px;
}
.TOL-item-info-SP-tab-product-introduction-hr-dashed-line {
    background-size: 12px 2px;
    background-image: linear-gradient(to right, var(--tr-dark-gray) 6px, transparent 6px);
    background-repeat: repeat-x;
    background-position: left top;
    margin-top: 12px;
    padding-bottom: 2px;
}












/* 07ホットトピックス～記事枠 */
.SP-item-hot-topics-area{
width: 100%;
}
.item-detail-hot-topics-container {
    width: 100%;
    padding: 25px 0 20px 0;
    position: relative;
    margin-bottom: 20px;
}
    .item-detail-hot-topics-container::before,
    .item-detail-hot-topics-container::after {
        content: "";
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        width: 108%;
        height: 1px;
        background-color: var(--tr-dark-gray);
    }
    .item-detail-hot-topics-container::before {
        top: 0px;
    }
    .item-detail-hot-topics-container::after {
        bottom: 0px;
    }
    .item-detail-hot-topics-container .hot-topics-list {
        width: 91%;
        margin: 0 auto;
    }
    .item-detail-hot-topics-container .section-title-leftline-container {
        margin-bottom: 20px;
        margin-left: 19px;
    }
    .item-detail-hot-topics-container .hot-topics-list .hot-topics-contents {
        display: flex;
        flex-direction: column;
        border-bottom: 1px solid var(--tr-gray);
        padding-top: 7px;
        padding-bottom: 7px;
    }
        .item-detail-hot-topics-container .hot-topics-list .hot-topics-contents:last-of-type {
            border-bottom: none;
        }




/* レコメンドエリア */
.SP-item-info-06{
width: 100%;
height: 300px;
background-color: rgb(207, 248, 234);
}

.SP-item-info-members-review{
width: 100%;
}
/* メンバーズレビュー */
.item-detail-SP-members-review-container {
}

.item-detail-SP-members-review-title {
    background-color: var(--tr-gray);
    height: 60px;
    padding-left: 15px;
    display: flex;
    align-items: center;
}

.item-detail-SP-members-review-contents {
    padding: 0 15px;
}

/* メンバーズレビュー 全体評価欄 */
.item-detail-SP-members-review-contents-summary-number {
    padding: 10px 0;
}

.item-detail-SP-members-review-contents-summary-rating-star {
    padding-bottom: 15px;
    display: flex;
    column-gap: 5px;
}

.item-detail-SP-members-review-contents-summary-rating-star.no-review {
    display: none;
}

/* メンバーズレビュー 評価☆デザイン css*/
.SP-item-info-star-rating-area {
    display: flex;
    margin-top: 6px;
    align-items: center;
    margin-left: 0px;
}

.SP-item-info-star-rating {
    width: 125px;
    height: auto;
    position: relative;
    transform: initial;
}

.SP-item-info-star-rating-front {
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    height: 100%;
}

.SP-item-info-star-rating-front:before {
    content: "";
    background-image: url(../img/star_yellow.svg);
    background-repeat: no-repeat;
    display: block;
    width: 125px;
    /*.SP-item-info-star-ratingと同じ幅を指定*/
    height: 100%;
}

.SP-item-info-star-rating-value {
    padding: 0 3px 3px 12px;
}

/* メンバーズレビュー 全体評価 詳細表示欄 */
.item-detail-SP-members-review-contents-summary-rating-star-details-star {
    display: flex;
    align-items: center;
    height: 18px;
}

.SP-item-info-star-rating.detail-star {
    width: 80px;
    padding-bottom: 4px;
}

.SP-item-info-star-rating-front.detail-star:before {
    width: 80px;
    height: 20px;
    /*.SP-item-info-star-ratingと同じ幅を指定*/
}

.SP-item-info-star-rating.detail-star .SP-item-info-star-rating-back {
    width: 80px;
    height: 13px;
}

/*評価☆数　バー*/
.item-detail-SP-members-review-progress-container {
    background-color: var(--tr-gray);
    overflow: hidden;
    height: 6px;
    width: 70px;
    margin: 0 5px;
}

.item-detail-SP-members-review-progress-bar {
    width: 50%;
    height: 6px;
    background-color: #FFBB00;
}

/* メンバーズレビュー レビュー表示欄 */
.item-detail-SP-members-review-contents-item {
    border-top: 1px solid var(--tr-dark-gray);
    padding: 0 5px;
}

.item-detail-SP-members-review-contents-item.posted_comment {
    animation: changeBackground_posted_comment 2s ease-in-out;
}

@keyframes changeBackground_posted_comment {
    0% {
        background-color: white;
    }

    50% {
        background-color: var(--tr-yellow-hover);
    }

    100% {
        background-color: white;
    }
}

.item-detail-SP-members-review-contents-item-contents {
    padding: 10px 0;
    width: 100%;
}

/*レビュー内　評価☆*/
.SP-item-info-star-rating.item-star {
    width: 100px;
    padding-bottom: 3px;
}

.SP-item-info-star-rating-front.item-star:before {
    width: 100px;
    /*.SP-item-info-star-ratingと同じ幅を指定*/
}

/*レビュー内　テキスト*/
.item-detail-SP-members-review-contents-item-item-name {
    padding-bottom: 5px;
}

.item-detail-SP-members-review-contents-item-comment {
    padding-bottom: 5px;
}

/*レビュー内　テキスト 長文の表示・非表示*/
.grad-wrap {
    position: relative;
    margin-bottom: 30px;;
}

.grad-item {
    position: relative;
    height: 55px;
    overflow: hidden;
}

.grad-trigger:checked ~ .grad-item{
    height: auto;
}

.grad-item::before {
    position: absolute;
    display: block;
    content: "";
    bottom: 0;
    left: 0;
    width: 100%;
    height: 20px;
    background: linear-gradient( rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 50%, #fff 100%);
}
  
.grad-trigger:checked ~ .grad-item::before {
    display: none;
}

.grad-trigger {
    display: none;
}

.grad-btn{
    position:absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    margin: auto;
    bottom: -40px;
    right: 0;
    left: 0;
    cursor: pointer;
    padding: 10px 0;
}

.grad-trigger:checked ~ .grad-btn::before {
    content: "閉じる"; /*チェックされていたら、文言を変更する*/
    font-size: 12px;
}

.grad-btn::before {
    content: "すべて表示"; 
    font-size: 12px;
}

.grad-trigger:checked ~ .grad-btn .material-symbols-outlined.members-review-all-contents-arrow{
    transform: rotate(-90deg);
}

.material-symbols-outlined.members-review-all-contents-arrow{
    transform: rotate(90deg);
    font-size: 16px;
}

.item-detail-SP-members-review-contents-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* グッドボタン・名前 CSS */
.item-detail-SP-members-review-contents-item-date-and-name-good {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* グッドボタン CSS */
.item-detail-SP-members-review-contents-item-good {
    display: flex;
    align-items: center;
    column-gap: 8px;
    justify-content: flex-end;
}

.common-main-button-img.review-item-good {
    height: 18px;
    margin: 0;
}

/* グッドボタン吹き出し CSS */
.item-detail-SP-members-review-contents-item-balloon {
    position: relative;
    display: inline-block;
    /*margin: auto;*/
    text-align: center;
    padding-bottom: 5px;
    width: 18px;
    height: 16px;
    color: var(--tr-red-hover);
    background-color: var(--tr-gray);
    border-radius: 5px;
}

.item-detail-SP-members-review-contents-item-balloon:before {
    content: "";
    position: absolute;
    top: 50%;
    left: -35%;
    margin-top: -15%;
    border: 4px solid transparent;
    border-right: 4px solid;
    color: var(--tr-gray);
}

/* メンバーズレビュー もっとみるボタン */
.item-detail-SP-members-review-contents-review-more {
    display: flex;
    justify-content: flex-end;
    margin: 10px 0 20px 0;
}

.item-detail-SP-members-review-contents-review-more-button {
    display: flex;
    align-items: center;
}

.item-detail-SP-members-review-contents-review-more-button-text {
    margin-bottom: 4px;
}

.material-symbols-outlined.members-review-more-arrow {
    font-size: 16px;
    transform: rotate(90deg);
}

/* メンバーズレビュー この商品をレビューするボタン */
.item-detail-SP-members-review-contents-review-button {
    margin: auto;
    width: 200px;
    padding-bottom: 25px;
    text-align: center;
}

.common-main-button.review-button {
    flex-direction: row;
    padding: 10px 14px;
    margin-bottom: 5px;
}



/* ** メンバーズレビュー入力・確認モーダル ** */
.item-detail-SP-members-review-input-modal-wrapper {
    position: fixed;
    height: 100vh;
    width: 100vw;
    background: white;
    right: 0;
    top: 0;
    overflow-y: scroll;
    z-index: 999;
}

.item-detail-SP-members-review-input-modal-content {
    height: 100%;
    width: 100%;
}

/* メンバーズレビュー入力・確認モーダル共通 上部 */
.item-detail-SP-members-review-input-modal-top-close {
    margin: 15px 0 5px 0;
    text-align: right;
}

.item-detail-SP-members-review-input-modal-top-close-button {
    font-size: 24px;
    color: var(--tr-medium-gray);
    font-weight: bold;
    height: 30px;
    width: 30px;
    margin: auto;
}

.material-symbols-outlined.members-review-input-modal {
    font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' -25, 'opsz' 24;
}

.item-detail-SP-members-review-input-modal-top-title {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 20px;
}

/* メンバーズレビュー入力モーダル中央 */
.item-detail-SP-members-review-input-modal-main {
    background-color: var(--tr-gray);
    padding: 20px 15px;
}

/* メンバーズレビュー入力確認モーダル中央 */
.item-detail-SP-members-review-input-modal-check-main {
    background-color: var(--tr-gray);
    padding: 20px 30px;
}

/* メンバーズレビュー入力・確認モーダル中央 共通 ニックネーム */
.item-detail-SP-members-review-input-modal-main-name {
    margin-bottom: 15px;
}

.item-detail-SP-members-review-input-modal-main-name-title {
    margin-bottom: 5px;
}

/* メンバーズレビュー入力モーダル中央 ニックネーム */
.common-textbox.members-review-input-modal-name {
    padding: 7px;
    border-radius: 3px;
}

/* メンバーズレビュー入力・確認モーダル共通 中央 オススメ度 */
.item-detail-SP-members-review-input-modal-main-reccomend {
    margin-bottom: 10px;
}

.item-detail-SP-members-review-input-modal-main-reccomend-title {
    margin-bottom: -6px;
}

.item-detail-SP-members-review-input-modal-main-reccomend-recommendation {
    display: flex;
    align-items: center;
}

.SP-item-info-star-rating-value.members-review-input-modal {
    padding-left: 10px;
    margin-top: 10px;
}

/* メンバーズレビュー入力モーダル中央 オススメ度 */
.item-detail-SP-members-review-input-modal-main-reccomend-recommendation-delete {
    margin: 10px 0 0 20px;
}

.item-detail-SP-members-review-input-modal-main-reccomend-recommendation-stars span {
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
    margin-top: 10px;
    column-gap: 8.5px;
}

.item-detail-SP-members-review-input-modal-main-reccomend-recommendation-stars input[type='radio'] {
    display: none;
}

.item-detail-SP-members-review-input-modal-main-reccomend-recommendation-stars label {
    content: "";
    background-image: url(../img/star_gray_icon.svg);
    background-repeat: no-repeat;
    display: block;
    width: 29px;
    height: 29px;
    margin-bottom: 2px;
}

.item-detail-SP-members-review-input-modal-main-reccomend-recommendation-stars input[type='radio']:checked~label {
    content: "";
    background-image: url(../img/star_icon.svg);
    background-repeat: no-repeat;
    display: block;
    width: 29px;
    height: 29px;
}

/* メンバーズレビュー入力確認モーダル中央 オススメ度 */
.SP-item-info-star-rating-area.recommendation-stars {
    margin-top: 0px;
}

.SP-item-info-star-rating.recommendation-stars {
    width: 180px;
    padding-bottom: 4px;
    margin-top: 10px;
}

.SP-item-info-star-rating-front.recommendation-stars:before {
    width: 180px;
    /*.SP-item-info-star-ratingと同じ幅を指定*/
}

.item-detail-SP-members-review-input-modal-main-reccomend-no-recommendation{
    margin-top: 11px;
}

/* メンバーズレビュー入力・確認モーダル共通 中央 コメント  */
.item-detail-SP-members-review-input-modal-main-comment {
    width: 100%;
    padding-bottom: 5px;
}

.item-detail-SP-members-review-input-modal-main-comment-title {
    margin-bottom: 5px;
}

/* メンバーズレビュー入力モーダル中央 コメント */
.item-detail-SP-members-review-input-modal-main-comment-textarea {
    margin-bottom: 3px;
    padding-right: 22px;
}

/* メンバーズレビュー入力モーダル中央 注意事項 */
.item-detail-SP-members-review-input-modal-main-comment-attention {
    display: inline-grid;
}

.members-review-input-modal-comment-textarea {
    padding: 7px 10px;
    border-color: var(--tr-dark-gray);
    border-radius: 5px;
    height: 90px;
    resize: none;
    width: 100%;
}

.members-review-input-modal-comment-textarea::placeholder {
    color: var(--tr-medium-gray);
}

/* メンバーズレビュー入力確認モーダル中央 コメント*/
.item-detail-SP-members-review-input-modal-main-comment-check-text {
    width: 100%;
    overflow-wrap: anywhere;
}

/* メンバーズレビュー入力モーダル下部　確認するボタン */
.item-detail-SP-members-review-input-modal-bottom {
    display: flex;
    justify-content: center;
    padding: 15px 0 40px 0;
    margin: auto;
    margin: 0 15px;
}

.item-detail-SP-members-review-input-modal-bottom-check-button {
    width: 300px;
}

.common-main-button.members-review-input-modal-check-button {
    border: 1.5px solid var(--tr-deep-gray);
    padding: 12px 14px;
}

/* メンバーズレビュー入力確認モーダル下部 修正するボタン */
.item-detail-SP-members-review-input-modal-bottom-revision {
    display: flex;
    justify-content: center;
    margin: 20px 10px 10px 0;
}

.item-detail-SP-members-review-input-modal-bottom-revision-button {
    display: flex;
    align-items: center;
}

.item-detail-SP-members-review-input-modal-bottom-revision-button-text {
    margin-bottom: 3px;
}

.material-symbols-outlined.members-review-input-modal-revision-button-size {
    font-size: 16px;
}

/* メンバーズレビュー入力確認モーダル下部 投稿するボタン */
.item-detail-SP-members-review-input-modal-bottom-post-button {
    padding: 5px 0 40px 0;
    width: 200px;
    margin: auto;
}









/* 07ホットトピックス～記事枠 */
.SP-item-info-sns-area{
width: 100%;
height: 500px;
}
.item-detail-sns-area-container {
    height: 275px;
    background-color: var(--tr-gray);
    content: "";
}
/*親要素の高さが未設定で%指定がうまくいかないので、いったんメディアクエリで高さ指定
最大幅768pxの以上の画面で見る場合などはもう少し高さを広げる(取り込み時に調整していただいて問題ありません)*/
@media screen and (min-width:768px) {
    .item-detail-sns-area-container {
        height: 400px;
    }
}



/* 関連商品 */
.SP-item-info-related-area{
    width: 100%;
    border-bottom: solid 1.5px var(--tr-dark-gray);
    border-top: solid 1.5px var(--tr-dark-gray);
}
.SP-item-info-related-area-title{
        margin-left: 16px;
    margin-top: 27px;
}
.common-slider-container.SP-related-padding{
    padding: 12px 0px 38px 15px;
}
/* 金額位置調整 */
.recommend-price{
    margin-top: -1px;
    position: relative;
}
.common-square-button.is-related{
    width: 96%;
    margin: auto;
}

/* ハートボタン */
.SP-item-info-related-button-icon {
    background: var(--tr-dark-gray);
    border-radius: 50%;
    position: absolute;
    right: -5px;
    top: 1px;
    cursor: pointer;
    width: 28px;
    height: 28px;
    transform: scale(0.9);
}
    /* 追加済アイコン */
    .SP-item-info-related-button-icon.is-added {
        background: var(--tr-red);
    }
.SP-item-info-related-button-icon:hover{
    opacity: 0.8;
}
.SP-item-info-related-button-icon-heart {
    margin-top: 3.5px;
    transform: scale(0.65);
}




/* タグ、共通css流用 */
.SP-common-tag-group {
  display: flex;
  flex-wrap: wrap;
  margin: 10px 0px;
}
.SP-common-tag-group.item-info-point {
  position: relative;
    margin-top: 7px;
    margin-left: 4px;
}
.SP-common-tag-group .SP-common-tag{ 
  margin: 0 4px 4px 0;
}
.SP-common-tag{
  display: inline-flex;
  padding: 0 .25em;
  border-radius: 2px;
  white-space: nowrap;
  width: 80px;
  min-height: 
}
.SP-common-tag span{
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}
.SP-common-tag-img{
    height: 9px;
    margin-right: 3px;
    position: relative;
    top: 1px;
}
.SP-common-tag.is-red.is-light {
  border: 1px solid var(--tr-red);
}
.SP-common-tag.is-gray {
  border: 1px solid var(--tr-deep-gray);
  background: var(--tr-deep-gray);
}
.SP-common-tag.is-gray.is-light {
  border: 1px solid var(--tr-deep-gray);
  background: white;
}
.SP-common-tag.is-red:not(.is-light) {
  border: 1px solid var(--tr-red);
  background: var(--tr-red);
}
.SP-common-tag.is-yellow {
  border: 1px solid var(--tr-yellow);
  background: var(--tr-yellow);
}



/* フロートエリア */
div.SP-item-info-float-area {
    max-height: 128px;
    height: 128px;
    top: calc(100% - 127px);
    background-color: white;
    position: -webkit-sticky;
    position: sticky;
    display: block;
    right: 0px;
    left: 0px;
    z-index: 9;
    padding-top: 0.5px;
    box-shadow: 0 0 13px -2px var(--tr-black-translucent);
    margin-bottom: -150px;
    opacity: 0;
    transition: 0.5s;
}
div.SP-item-info-float-area.SP-item-info-float-cart-btn-active {
    opacity: 1;
    transform: translateY(0);
}
.SP-item-info-float-cart-btn{
    margin: 9px 11px;
}
/* .SP-item-info-float-cart-btn img{
    height: 22px;
    width: 20px;
} */
.SP-item-info-float-store-tr-btn{
    margin: -4px 10px 5px 10px;
    display: flex;  
  justify-content: center;
}
.SP-item-info-float-store-tr-btn button{
    margin: 2px;
}
.common-main-button.is-inactive-float {
    background: var(--tr-medium-gray);
    cursor: unset;
}
/* 予約不可、出品ボタン */
.SP-common-main-button-float {
  border-radius: 7px;
  display: flex;  
  align-items: center;
  justify-content: center;
  padding: 14px;
  width: 100%;
  max-height: 52px;
}
.SP-common-main-button-float.is-gray {
  background:var(--tr-medium-gray);
}
.SP-common-main-button-float.is-gray img{
transform: scale(1.2);
}
.SP-common-main-button-float.is-white,
.SP-common-main-button-float.is-white-br {
  background:var(--tr-white);
  border: 1px solid var(--tr-medium-gray);
}
.SP-common-main-button-float.is-white-br span{
  margin: -7px 0px;
}
.SP-common-main-button-float.is-white img,
.SP-common-main-button-float.is-white-br img{
  transform: scale(1.7);
  margin-right: 15px;
}
.SP-common-main-button-float.is-white-market {
    background:var(--tr-white);
    border: 1px solid var(--tr-medium-gray);
    padding: 9px;
    justify-content: center;
    text-align: left;
    position: relative;
    margin-top: 10px;
}
.SP-common-main-button-float.is-white-market span{
    line-height: 1.2;
}
.SP-common-main-button-float.is-blue {
  background:var(--tr-blue);
}
.SP-common-main-button-float.is-blue img{
transform: scale(1.2);
}
.SP-common-main-button-float.is-blue-br{
  background:var(--tr-blue);
}
.SP-common-main-button-float.is-blue-br span{
margin: -7px 0px;
text-align: left;
}
.SP-common-main-button-float.is-blue-br img{
transform: scale(1.2);
}
.SP-common-main-button-float.is-gray-img-xxl {
  background:var(--tr-medium-gray);
}
.SP-common-main-button-float.is-gray-img-xxl img{
transform: scale(1.7);
  margin-right: 15px;
}


.SP-common-main-button-float-img{
  margin-right: 8px;
}
.SP-common-main-button-float-img.is-size-xl{
  height: 20px;
  margin-right: 10px;
}

.common-main-button.is-keep img{
transform: scale(1.2);
}
.common-main-button.is-keep span{
margin: -7px 0px;
text-align: left;
}

/* カートイン文字 */
.common-cartin-container {
    background: var(--tr-black-translucent);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100vh;
    width: 100vw;
    min-width: 100vw;
    z-index: 999;
}
.common-cartin-modal {
    background: var(--tr-white);
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: 500px;
    max-width: 500px;
    border-radius: 4px;
    padding: 40px 20px;
}
@media screen and (max-width: 850px) {
    .common-cartin-modal {
        width: 80%;
    }
}
.common-cartin-modal-close-button {
    position: absolute;
    top: 4px;
    right: 12px;
    color: var(--tr-medium-gray);
    font-size: 36px;
}
.common-cartin-inner {
    min-height: 110px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;
}
.common-cartin-inner p {
    margin: 0;
}


/* ジャケ写モーダル */
.SP-item-info-jacket-modal-wrappar{
    background: var(--tr-white);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100vh;
    width: 100vw;
    min-width: 100vw;
    z-index: 999;
    overflow: hidden;
    display: none;
}
.SP-item-info-jacket-modal-wrappar.is-open{
    display: block;
}
.SP-item-info-jacket-modal{
background: var(--tr-white);
    position: relative;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: auto;
    max-width: 980px;
    height: auto;
    overflow: hidden;
}

.SP-product-image-summary-container {
    min-height: 500px;
    position: relative;
}

    .SP-product-image-summary-container .SP-product-image-summary-title {
        position: absolute;
        top: 15px;
        margin-left: 20px;
    }

@media screen and (min-width:768px) {
    .SP-product-image-summary-container .SP-product-image-summary-title span {
        font-size: 24px;
    }
}

.SP-product-image-summary-container .SP-product-image-summary-list {
    width: 100%;
    height: 85%;
    margin-bottom: 35px;
    display: flex;
    justify-content: center;
}

    /*パターン１(ジャケ写がたくさんあるパターン)の場合のCSS*/
    .SP-product-image-summary-container .SP-product-image-summary-list .inner {
        width: 100%;
        padding-top: 20px;
        display: flex;
        justify-content: flex-start;
        flex-wrap: wrap;
        align-content: flex-start;
    }

        .SP-product-image-summary-container .SP-product-image-summary-list .inner .SP-product-image-summary-content {
            width: 32.8%;
            aspect-ratio: 1 / 1;
            border: 1px solid var(--tr-dark-gray);
            display: flex;
            justify-content: center;
        }

            .SP-product-image-summary-container .SP-product-image-summary-list .inner .SP-product-image-summary-content img {
                max-width: 100%;
                max-height: 100%;
                object-fit: contain;
            }


/*パターン２(ジャケ写が１つだけ表示されるパターン)の場合のCSS*/
.SP-product-image-summary-container .SP-product-image-summary-list .inner-one {
        padding-top: 20px;
        display: flex;
        justify-content: center;
    }

        .SP-product-image-summary-container .SP-product-image-summary-list .inner-one .SP-product-image-summary-content {
            width: 100%;
            aspect-ratio: 1 / 1;
            border: 1px solid var(--tr-dark-gray);
            display: flex;
            justify-content: center;
        }

            .SP-product-image-summary-container .SP-product-image-summary-list .inner-one .SP-product-image-summary-content img {
                max-width: 100%;
                max-height: 100%;
                object-fit: contain;
            }

.SP-product-image-summary-close-block.top {
    margin: 5px;
    text-align: right;
}

.SP-product-image-summary-close-block.bottom {
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    margin: 30px auto 30px auto;
    text-align: center;
    display: grid;
}

.SP-product-image-summary-close-button {
    font-size: 24px;
    color: var(--tr-medium-gray);
    font-weight: bold;
    height: 40px;
    width: 40px;
    margin: 0 auto;
}

.SP-product-image-summary-close-block.top .SP-product-image-summary-close-button {
    margin-top: 5px;
    margin-right: 10px;
}

.SP-product-image-summary-close-button .material-symbols-outlined {
    font-size: 40px;
}

.SP-product-image-summary-close-text {
    color: var(--tr-medium-gray);
    font-size: 12px;
    width: 50px;
    margin: 0 auto 0 auto;
}

@media screen and (min-width:768px) {
    .SP-product-image-summary-close-button {
        height: 70px;
        width: 70px;
        margin: 0 auto -20px auto;
    }

        .SP-product-image-summary-close-button .material-symbols-outlined {
            font-size: 60px;
        }

    .SP-product-image-summary-close-text {
        color: var(--tr-medium-gray);
        font-size: 16px;
        width: 70px;
    }
}

/* フラゲモーダル用クラス */
.SP-item-info-flying-get-modal-inner * {
    font-family: verdana, arial, helvetica, sans-serif;
    line-height: 1.2;
}
.SP-item-info-flying-get-modal-inner {
    position: relative;
    padding: 3vw 4vw;
    width: 85vw;
}
.SP-item-info-flying-get-modal-title {
    margin-bottom: 8px;
}
.SP-item-info-flying-get-modal-title img{
    height: 35px;
}
.tr-common-modal .SP-tabWrap input {
    display: none;
}
.SP-item-info-flying-get-modal-seven img {
    width: 4vw;
    margin-right: 1vw;
}
.SP-item-info-flying-get-modal-takuhai img {
    width: 4vw;
    margin-right: 1vw;
}

.SP-item-info-flying-get-modal-japan-map {
    width: 68vw;
    margin: -58px 0px 0 15vw;
}
.SP-item-info-flying-get-modal-text-area {
    margin: 5vw 3vw 0 3vw;
}
.SP-item-info-flying-get-modal-annotation {
}
.SP-item-info-flying-get-modal-annotation span {
    text-decoration: underline;
}
.SP-item-info-flying-get-modal-explanation {
    display: flex;
    align-items: center;
}
.SP-item-info-flying-get-modal-explanation .is-yellow {
    color: #F2C81C;
}
.SP-item-info-flying-get-modal-explanation .is-blue {
    color: #98CAE6;
}

.SP-item-info-flying-get-modal-todofuken {
    margin-left: 14px;
}
.SP-item-info-flying-get-modal-note {
    margin-top: 1.5vw
}
.SP-item-info-flying-get-modal-footer {
    margin-top: 3vw;

}
.SP-item-info-flying-get-modal-first-message {
    padding: 20px 0;
    display: block;
    border: 1px solid var(--tr-dark-gray);
    border-top: none;
    text-align: center;
    width:100%;
}
.SP-tabWrap input[type="radio"]:checked ~ .SP-item-info-flying-get-modal-first-message {
    display: none;
}
    /*19commoからコピー*/
    .SP-tabContent {
    width: 100%;
    height: 0;
    overflow: hidden;
    opacity: 0;
    position: relative;
}
.tabSwitch:checked + .SP-tabLabel {
    background: #FFFFFF;
    border-top: 3px solid var(--tr-red);
    border-bottom: initial;
}
.tabSwitch:checked + .SP-tabLabel + .SP-tabContent {
    height: auto;
    opacity: 1;
    transition: .5s opacity;
}
.SP-tab-border {
    border: 1px solid var(--tr-dark-gray);
    border-top: none;
}
.SP-tabWrap {
    display: flex;
    flex-wrap: wrap;
}
.SP-tab-label-pos {
    display: flex;
    align-items: center;
    justify-content: center;
}
.SP-tabLabel {
    background: #F3F3F3;
    white-space: nowrap;
    text-align: center;
    padding: 10px 1vw;
    order: -1;
    position: relative;
    cursor: pointer;
    border: 1px solid #DCDCDC;
    border-radius: 5px 5px 0 0;
    flex: 1;
}
.SP-tab-label-title {
    font-weight: bold;
    font-size: 12px;
}
.popup-footer {
    color: gray;
    bottom: 0;
    left: 0;
    width: 100%;
    text-align: left;
    padding-top: 20px;
}
    /**/

/*blazorで接続が切れたときのエラー表示を非表示に*/
#components-reconnect-modal {
    display: none !important;
}


/*タブ構成変更対応*/
.TOL-item-info-SP-tab-radio{
    display: none;
}

.TOL-item-info-SP-tab-content {
    display: none;
    overflow: hidden;
    background: white;
  }

  .TOL-item-info-SP-tab {
    position: relative;
  }
  .TOL-item-info-SP-tab::before {
    content: "";
    background: var(--tr-light-gray);
    border-bottom: 1px solid var(--tr-dark-gray);
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    z-index: -1;
    height: 46px;
}
  .TOL-item-info-SP-tab-menu {
    display: inline-flex;
    padding: 12px 0;
    cursor: pointer;
    background: var(--tr-light-gray);
    width: 33.3%;
    text-align: center;
    justify-content: center;
    margin-right: -3px;
 }

 .TOL-item-info-SP-tab-menu.is-inactive {
    cursor: default;
    pointer-events: none;
    color: var(--tr-medium-gray);
  }
  .TOL-item-info-SP-tab-menu.is-inactive .TOL-item-info-SP-tab-headphone-icon-style {
    stroke:  var(--tr-medium-gray);
  }  
  
  #BasicInfoTab:checked ~ #BasicInfoContent,
  #RecordedContentsTab:checked ~ #RecordedContent,
  #ProductIntroductionTab:checked ~ #ProductIntroductionContent{
    display: block;
  }

  #BasicInfoTab:checked ~ #BasicInfoTab,
  #RecordedContentsTab:checked ~ #RecordedContentsTab,
  #ProductIntroductionTab:checked ~ #ProductIntroductionTab{
    color: var(--tr-red);
    border-bottom: 2px solid var(--tr-red);
    margin-bottom: 0px;
  }

  #RecordedContentsTab:checked ~ #RecordedContentsTab .TOL-item-info-SP-tab-headphone-icon-style {
    stroke: var(--tr-red);
  }
  
  #RecordedContentsTab .TOL-item-info-SP-tab-headphone-icon {
    margin-left: 4px;
    margin-top: -2px;
  }
  .TOL-item-info-SP-tab-menu h2 {
    display: inline;
}

.is-text-light-gray {
    color: var(--tr-medium-gray);
}

.is-svg-icon-gray img {
    filter: invert(71%) sepia(0%) saturate(1%) hue-rotate(348deg) brightness(87%) contrast(84%);
}

.margin-left-8 {
    margin-left: 8px;
}

.tr-common-modal-close .text-size-20 span {
    font-size: 20px;
}

.item-detail-SP-members-review-input-modal-bottom-revision-button-arrow img {
    filter: invert(48%) sepia(9%) saturate(1033%) hue-rotate(182deg) brightness(94%) contrast(87%);
}

.grad-trigger:checked ~ .grad-btn img {
    transform: rotate(180deg);
}

.SP-item-info-flying-get-modal-explanation .square {
    width: 12px;
    height: 12px;
    display: inline-block;
    margin-right: 4px;
}

    .SP-item-info-flying-get-modal-explanation .square.is-red {
        background-color: var(--tr-red);
    }

    .SP-item-info-flying-get-modal-explanation .square.is-yellow {
        background-color: #F2C81C;
    }

    .SP-item-info-flying-get-modal-explanation .square.is-gray {
        background-color: var(--tr-deep-gray);
    }

    .SP-item-info-flying-get-modal-explanation .square.is-blue {
        background-color: #98CAE6;
    }

.is-svg-icon-blue img {
    filter: invert(24%) sepia(85%) saturate(1800%) hue-rotate(190deg) brightness(94%) contrast(101%);
}