/* -----------------------------------------------------------------------------
**
** 繝ｬ繧ｳ繝｡繝ｳ繝臥畑CSS��PC/SP��
**
----------------------------------------------------------------------------- */
.content{
font-family: "roboto",Noto Sans JP,noto-sans-cjk-jp;
}
/* 繧ｿ繧､繝医Ν */
.section-lead-title-container.is-left{
margin-left: 75px;
display: flex;
align-items: center;
justify-content: space-between;
margin-right: 75px;
}
.section-title-main,
.section-title-sub {
margin-left: 10px;
}
.TOL-top-PC-recommend-frame .section-lead-title-container .is-section-title {
margin-right: 7px;
}
.TOL-top-PC-recommend-frame .section-lead-title-container .section-title-sub {
margin-left: 7px;
}
/* 繝�じ繧､繝ｳ繧ｵ繝ｳ繝励Ν縺ｮ蛹ｺ蛻�ｊ縲∵怙邨ら噪縺ｫ荳崎ｦ� */
.recommend-separator{
padding-top: 57px;
}
.recommend-separator p{
font-size: 16px;
font-weight: bold;
padding-left: 10px;
line-height: 2;
background: lightcyan;
}
/* 驥鷹｡堺ｽ咲ｽｮ隱ｿ謨ｴ */
.recommend-price{
margin-top: -1px;
}
/* 髢ｲ隕ｧ螻･豁ｴ縲∫衍繧峨↑縺�膚蜩√ｒ�� */
.recommend-title{
margin-left: 75px;
margin-bottom: 10px;
display: flex;
align-items: center;
justify-content: space-between;
margin-right: 75px;
}
/* 譛霑代メ繧ｧ繝�け縺励◆繧｢繝ｼ繝�ぅ繧ｹ繝� */
.recommend-title-artist-PC{
display: flex;
justify-content: center;
}
.recommend-title-artist-SP{
display: flex;
justify-content: left;
display: none;
}
/* 縺薙�繧｢繝ｼ繝�ぅ繧ｹ繝医ｒ隕九※縺�ｋ莠ｺ縺ｯ�� */
.recommend-title-artist-look-PC{
display: flex;
justify-content: center;
}
.recommend-title-artist-look-SP{
display: flex;
justify-content: left;
display: none;
}
/* 笨輔�繧ｿ繝ｳ 繝ｬ繧ｳ繝｡繝ｳ繝牙�騾�*/
.recommend-close-btn{
width:27px;
height:27px;
border-radius:50%;
background:rgba(0, 0, 0, 0.411);
position: absolute;
right: 8px;
top: 8px;
opacity: 0;
}
.recommend-close-btn span{
font-weight: bold;
color: rgba(255, 255, 255, 0.562);
text-align:center;
font-size: 19px;
position: relative;
top: 1.5px;
}
.recommend-close-btn:hover{
background:rgba(52, 52, 52, 0.822);
}
/* 繝帙ヰ繝ｼ縺ｯ851px莉･荳� */
@media screen and (min-width: 851px) {
.tr-item-block:hover .recommend-close-btn {
opacity: 1;
}
}
.material-symbols-outlined.close {
font-variation-settings:
'FILL' 0,
'wght' 700,
'GRAD' 0,
'opsz' 20
}
/* 繧ｸ繝｣繝ｳ繝ｫ */
.common-tag.is-black.is-light {
border: 1px solid var(--tr-black);
background: white;
}
/* 繧｢繝ｼ繝�ぅ繧ｹ繝亥錐 �域怙霑代メ繧ｧ繝�け縺励◆繧｢繝ｼ繝�ぅ繧ｹ繝茨ｼ�*/
.recommend-item-box {
margin: auto;
margin-top: 30px;
display: flex;
justify-content: space-between;
width: 80%;
max-width: 1000px;
flex-wrap: wrap;
justify-content: center;
}
.recommend-item-box div{
padding: 3px 10px;
display:flex;
flex-direction:column;
font-size: 12px;
}
/* 繧｢繝ｼ繝�ぅ繧ｹ繝亥錐 �医％縺ｮ繧｢繝ｼ繝�ぅ繧ｹ繝医ｒ隕九※縺�ｋ莠ｺ�橸ｼ�*/
.recommend-item-box-artist-look {
margin: auto;
margin-top: 20px;
display: flex;
justify-content: space-between;
width: 80%;
max-width: 1000px;
flex-wrap: wrap;
justify-content: center;
}
.recommend-item-box-artist-look div{
padding: 3px 10px;
display:flex;
flex-direction:column;
font-size: 14px;
}
.section-title-bottomline-container-h2 {
display: inline-flex;
position: relative;
}
.section-title-bottomline-container-h2::after {
position: absolute;
content: "";
background-color: var(--tr-red);
width: 20px;
height: 3px;
bottom: 2px;
left: 50%;
transform: translateX(-50%);
}
/* 險倅ｺ九�繝ｼ繧ｸ逕ｨ */
/* 隕ｪID謖�ｮ夲ｼ�contentsArea09base�� */
#contentsArea09base .common-slider-container {
.tr-item-block {
width: calc(27.8% - 12px);
min-width: calc(27.8% - 12px);
}
@media screen and (max-width: 850px) {
.tr-item-block {
width: calc(40% - 6px);
min-width: calc(40% - 6px);
}
}
.common-slider-next-button,
.common-slider-prev-button {
border: 0px solid;
}
.common-slider-next-button:hover,
.common-slider-prev-button:hover {
background: transparent;
opacity: .6;
}
.common-slider-prev-button > span {
margin-right: -17px;
font-size: 48px;
}
.common-slider-next-button > span {
margin-right: 17px;
font-size: 48px;
}
}
/* 讀懃ｴ｢螻･豁ｴ縺九ｉ縺ｮ縺翫☆縺吶ａ繧｢繝ｼ繝�ぅ繧ｹ繝� */
.TOL-artist-search-result-PC-recommended-artist-browsing-history-block {
max-width: 1400px;
margin: auto;
padding: 20px 0px;
}
.TOL-artist-search-result-PC-recommended-artist-browsing-history-title {
min-width: 215px;
margin: 0px 0px 8px 12px;
}
.TOL-artist-search-result-PC-recommended-artist-browsing-history-words {
max-width: 1400px;
display: flex;
margin: 0px 0px 0px 12px;
}
.common-square-small-button.artist-browsing-history-words {
white-space: normal;
text-align: left;
}
.TOL-artist-search-result-SP-recommended-artist-browsing-history-title-block {
background: var(--tr-gray);
margin-bottom: 8px;
}
.TOL-artist-search-result-SP-recommended-artist-browsing-history-title {
padding: 6px 8px;
margin-left: 12px;
}
.TOL-artist-search-result-SP-recommended-artist-browsing-history-words {
margin: 0px 0px 0px 12px;
}
.common-square-small-button.artist-browsing-history-words {
white-space: normal;
text-align: left;
}
/* 繧ｹ繝槭�逕ｨ */
@media screen and (max-width: 850px) {
.section-lead-title-container.is-left {
margin-left: 0px;
}
}
@media screen and (max-width: 850px) {
.recommend-title {
margin-left: 10px;
}
}
@media screen and (max-width: 850px) {
.recommend-title-artist-PC {
display: none;
}
.recommend-title-artist-SP {
display: block;
}
.recommend-item-box {
width: 100%;
margin-top: 13px;
}
}
@media screen and (max-width: 850px) {
.recommend-title-artist-look-PC {
display: none;
}
.recommend-title-artist-look-SP {
display: block;
}
.recommend-item-box-artist-look {
justify-content: left;
width: 100%;
margin-top: 13px;
}
}
/* 繝ｬ繧ｳ繝｡繝ｳ繝牙�騾� */
@media screen and (max-width: 850px) {
.recommend-close-btn {
width: 27px;
height: 27px;
border-radius: 50%;
background: rgba(0, 0, 0, 0.411);
position: absolute;
right: 8px;
top: 8px;
opacity: 0;
}
.recommend-close-btn.toutch-hover {
opacity: 1;
}
}