body.landscape #special .comm-comment.comment-small, body.landscape #special .comm-comment-delete.comment-small, body.landscape #special .comm-comment-report.comment-small, body.landscape #special-detail .comm-comment.comment-small, body.landscape #special-detail .comm-comment-delete.comment-small, body.landscape #special-detail .comm-comment-report.comment-small { height: 100%; } #special-detail { position: absolute; bottom: 0px; left: 0px; width: 100%; height: 100%; height: calc(100% - 40px - 8px); display: none; overflow: hidden; } #special-detail.list { display: none; } #special-detail.commentlist { display: block; } #special-detail.commentlist .comm-list { display: none; } #special-detail.commentlist .comm-comment { display: grid; } #special-detail.commentlist .comm-comment-delete { display: none; } #special-detail.commentlist .comm-comment-report { display: none; } #special-detail.commentlist .comm-video { display: none; } #special-detail.commentlist .comm-images { display: none; } #special-detail.commentdelete { display: block; } #special-detail.commentdelete .comm-list { display: none; } #special-detail.commentdelete .comm-comment { display: none; } #special-detail.commentdelete .comm-comment-delete { display: grid; } #special-detail.commentdelete .comm-comment-report { display: none; } #special-detail.commentdelete .comm-video { display: none; } #special-detail.commentdelete .comm-images { display: none; } #special-detail.commentreport { display: block; } #special-detail.commentreport .comm-list { display: none; } #special-detail.commentreport .comm-comment { display: none; } #special-detail.commentreport .comm-comment-delete { display: none; } #special-detail.commentreport .comm-comment-report { display: grid; } #special-detail.commentreport .comm-video { display: none; } #special-detail.commentreport .comm-images { display: none; } #special-detail.video { display: block; } #special-detail.video .comm-comment { display: none; } #special-detail.video .comm-comment-delete { display: none; } #special-detail.video .comm-comment-report { display: none; } #special-detail.video .comm-video { display: block; } #special-detail.video .comm-images { display: none; } #special-detail.video.commentlist .comm-comment { display: grid; } #special-detail.video.commentlist .comm-comment-delete { display: none; } #special-detail.video.commentlist .comm-comment-report { display: none; } #special-detail.video.commentdelete .comm-comment { display: none; } #special-detail.video.commentdelete .comm-comment-delete { display: grid; } #special-detail.video.commentdelete .comm-comment-report { display: none; } #special-detail.video.commentreport .comm-comment { display: none; } #special-detail.video.commentreport .comm-comment-delete { display: none; } #special-detail.video.commentreport .comm-comment-report { display: grid; } #special-detail.images { display: block; } #special-detail.images .comm-comment { display: none; } #special-detail.images .comm-comment-delete { display: none; } #special-detail.images .comm-comment-report { display: none; } #special-detail.images .comm-video { display: none; } #special-detail.images .comm-images { display: block; } #special-detail.images.commentlist .comm-comment { display: grid; } #special-detail.images.commentlist .comm-comment-delete { display: none; } #special-detail.images.commentlist .comm-comment-report { display: none; } #special-detail.images.commentdelete .comm-comment { display: none; } #special-detail.images.commentdelete .comm-comment-delete { display: grid; } #special-detail.images.commentdelete .comm-comment-report { display: none; } #special-detail.images.commentreport .comm-comment { display: none; } #special-detail.images.commentreport .comm-comment-delete { display: none; } #special-detail.images.commentreport .comm-comment-report { display: grid; } #special { position: relative; } #special, #special-detail { word-break: break-word; } #special.list .comm-list, #special-detail.list .comm-list { display: block; } #special.list .comm-comment, #special-detail.list .comm-comment { display: none; } #special.list .comm-comment-delete, #special-detail.list .comm-comment-delete { display: none; } #special.list .comm-comment-report, #special-detail.list .comm-comment-report { display: none; } #special.list .comm-video, #special-detail.list .comm-video { display: none; } #special.list .comm-images, #special-detail.list .comm-images { display: none; } @keyframes load8 { 0% { transform: translate(-50%, -50%) rotate(0deg); } 100% { transform: translate(-50%, -50%) rotate(360deg); } } #special .comm-list, #special-detail .comm-list { position: relative; width: 100%; height: 100%; box-sizing: border-box; } #special .comm-list .loading, #special-detail .comm-list .loading { position: absolute; bottom: 20px; left: 50%; background: #f0f; width: 40px; height: 40px; border-radius: 40px; transform: translate(calc(-50% - 6px), 0px); pointer-events: none; opacity: 0.0; } #special .comm-list .loading.show, #special-detail .comm-list .loading.show { opacity: 1.0; } #special .comm-list .loading span.def, #special .comm-list .loading span.hi, #special-detail .comm-list .loading span.def, #special-detail .comm-list .loading span.hi { display: block; width: 20px; height: 20px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: 40px; animation: load8 1.1s infinite linear; } #special .comm-list .loading span.def, #special-detail .comm-list .loading span.def { border: 3px solid; opacity: 0.5; } #special .comm-list .loading span.hi, #special-detail .comm-list .loading span.hi { border-top: 3px solid rgba(255, 255, 255, 0) !important; border-right: 3px solid rgba(255, 255, 255, 0) !important; border-bottom: 3px solid rgba(255, 255, 255, 0) !important; border-left: 3px solid; } #special .comm-list .items, #special-detail .comm-list .items { font-weight: normal; } #special .comm-comment, #special .comm-comment-delete, #special .comm-comment-report, #special-detail .comm-comment, #special-detail .comm-comment-delete, #special-detail .comm-comment-report { position: absolute; bottom: 0px; left: 0px; width: 100%; height: 100%; box-sizing: border-box; display: grid; grid-template-rows: max-content 1fr max-content; } #special .comm-comment.comment-small, #special .comm-comment-delete.comment-small, #special .comm-comment-report.comment-small, #special-detail .comm-comment.comment-small, #special-detail .comm-comment-delete.comment-small, #special-detail .comm-comment-report.comment-small { height: 60%; } #special .comm-comment.comment-small .bg, #special .comm-comment-delete.comment-small .bg, #special .comm-comment-report.comment-small .bg, #special-detail .comm-comment.comment-small .bg, #special-detail .comm-comment-delete.comment-small .bg, #special-detail .comm-comment-report.comment-small .bg { opacity: 0.9; } #special .comm-comment .comm-block-top, #special .comm-comment-delete .comm-block-top, #special .comm-comment-report .comm-block-top, #special-detail .comm-comment .comm-block-top, #special-detail .comm-comment-delete .comm-block-top, #special-detail .comm-comment-report .comm-block-top { grid-row: 1; width: 100%; position: relative; box-sizing: border-box; } #special .comm-comment .comm-block-bottom, #special .comm-comment-delete .comm-block-bottom, #special .comm-comment-report .comm-block-bottom, #special-detail .comm-comment .comm-block-bottom, #special-detail .comm-comment-delete .comm-block-bottom, #special-detail .comm-comment-report .comm-block-bottom { grid-row: 3; width: 100%; position: relative; } #special .comm-comment .items-list, #special .comm-comment-delete .items-list, #special .comm-comment-report .items-list, #special-detail .comm-comment .items-list, #special-detail .comm-comment-delete .items-list, #special-detail .comm-comment-report .items-list { grid-row: 2; width: 100%; position: relative; } #special .comm-comment .bg, #special .comm-comment-delete .bg, #special .comm-comment-report .bg, #special-detail .comm-comment .bg, #special-detail .comm-comment-delete .bg, #special-detail .comm-comment-report .bg { position: absolute; bottom: 0px; left: 0px; width: 100%; height: 100%; } #special .comm-comment .detail-list, #special .comm-comment-delete .detail-list, #special .comm-comment-report .detail-list, #special-detail .comm-comment .detail-list, #special-detail .comm-comment-delete .detail-list, #special-detail .comm-comment-report .detail-list { font-weight: normal; } #special .comm-comment .detail-list .item-delete, #special .comm-comment-delete .detail-list .item-delete, #special .comm-comment-report .detail-list .item-delete, #special-detail .comm-comment .detail-list .item-delete, #special-detail .comm-comment-delete .detail-list .item-delete, #special-detail .comm-comment-report .detail-list .item-delete { line-height: 1.5; position: relative; padding-left: 24px; padding-right: 24px; padding-bottom: 24px; font-size: 12px; } #special .comm-comment .detail-list .desc, #special .comm-comment-delete .detail-list .desc, #special .comm-comment-report .detail-list .desc, #special-detail .comm-comment .detail-list .desc, #special-detail .comm-comment-delete .detail-list .desc, #special-detail .comm-comment-report .detail-list .desc { font-size: 12px; margin-bottom: 1em; } #special .comm-comment .detail-list .btns, #special .comm-comment-delete .detail-list .btns, #special .comm-comment-report .detail-list .btns, #special-detail .comm-comment .detail-list .btns, #special-detail .comm-comment-delete .detail-list .btns, #special-detail .comm-comment-report .detail-list .btns { border-top: 1px solid; padding-top: 8px; font-size: 12px; } #special .comm-comment .detail-list .item, #special .comm-comment-delete .detail-list .item, #special .comm-comment-report .detail-list .item, #special-detail .comm-comment .detail-list .item, #special-detail .comm-comment-delete .detail-list .item, #special-detail .comm-comment-report .detail-list .item { line-height: 1.5; position: relative; padding-left: 24px; padding-right: 24px; margin-bottom: 8px; display: flex; } #special .comm-comment .detail-list .item .block-txt, #special .comm-comment-delete .detail-list .item .block-txt, #special .comm-comment-report .detail-list .item .block-txt, #special-detail .comm-comment .detail-list .item .block-txt, #special-detail .comm-comment-delete .detail-list .item .block-txt, #special-detail .comm-comment-report .detail-list .item .block-txt { width: calc(100% - 52px); font-size: 12px; } #special .comm-comment .detail-list .item .block-txt .btn-del, #special .comm-comment-delete .detail-list .item .block-txt .btn-del, #special .comm-comment-report .detail-list .item .block-txt .btn-del, #special-detail .comm-comment .detail-list .item .block-txt .btn-del, #special-detail .comm-comment-delete .detail-list .item .block-txt .btn-del, #special-detail .comm-comment-report .detail-list .item .block-txt .btn-del { opacity: 0.5; } #special .comm-comment .detail-list .item .block-txt .comment, #special .comm-comment-delete .detail-list .item .block-txt .comment, #special .comm-comment-report .detail-list .item .block-txt .comment, #special-detail .comm-comment .detail-list .item .block-txt .comment, #special-detail .comm-comment-delete .detail-list .item .block-txt .comment, #special-detail .comm-comment-report .detail-list .item .block-txt .comment { margin-bottom: 4px; } #special .comm-comment .detail-list .item .block-txt .comment .name, #special .comm-comment-delete .detail-list .item .block-txt .comment .name, #special .comm-comment-report .detail-list .item .block-txt .comment .name, #special-detail .comm-comment .detail-list .item .block-txt .comment .name, #special-detail .comm-comment-delete .detail-list .item .block-txt .comment .name, #special-detail .comm-comment-report .detail-list .item .block-txt .comment .name { display: inline-block; margin-right: 1em; font-weight: bold; } #special .comm-comment .detail-list .item .btn, #special .comm-comment-delete .detail-list .item .btn, #special .comm-comment-report .detail-list .item .btn, #special-detail .comm-comment .detail-list .item .btn, #special-detail .comm-comment-delete .detail-list .item .btn, #special-detail .comm-comment-report .detail-list .item .btn { width: 52px; font-family: "Oswald", "Noto Sans JP", sans-serif; letter-spacing: 0.1em; } #special .comm-comment .detail-list .item .btn .comm-btn-fav, #special .comm-comment-delete .detail-list .item .btn .comm-btn-fav, #special .comm-comment-report .detail-list .item .btn .comm-btn-fav, #special-detail .comm-comment .detail-list .item .btn .comm-btn-fav, #special-detail .comm-comment-delete .detail-list .item .btn .comm-btn-fav, #special-detail .comm-comment-report .detail-list .item .btn .comm-btn-fav { display: flex; justify-content: flex-end; align-items: center; } #special .comm-comment .detail-list .item .btn .comm-btn-fav.active .icon.icon_def, #special .comm-comment-delete .detail-list .item .btn .comm-btn-fav.active .icon.icon_def, #special .comm-comment-report .detail-list .item .btn .comm-btn-fav.active .icon.icon_def, #special-detail .comm-comment .detail-list .item .btn .comm-btn-fav.active .icon.icon_def, #special-detail .comm-comment-delete .detail-list .item .btn .comm-btn-fav.active .icon.icon_def, #special-detail .comm-comment-report .detail-list .item .btn .comm-btn-fav.active .icon.icon_def { display: none; } #special .comm-comment .detail-list .item .btn .comm-btn-fav.active .icon.icon_active, #special .comm-comment-delete .detail-list .item .btn .comm-btn-fav.active .icon.icon_active, #special .comm-comment-report .detail-list .item .btn .comm-btn-fav.active .icon.icon_active, #special-detail .comm-comment .detail-list .item .btn .comm-btn-fav.active .icon.icon_active, #special-detail .comm-comment-delete .detail-list .item .btn .comm-btn-fav.active .icon.icon_active, #special-detail .comm-comment-report .detail-list .item .btn .comm-btn-fav.active .icon.icon_active { display: block; } #special .comm-comment .detail-list .item .btn .comm-btn-fav .num, #special .comm-comment-delete .detail-list .item .btn .comm-btn-fav .num, #special .comm-comment-report .detail-list .item .btn .comm-btn-fav .num, #special-detail .comm-comment .detail-list .item .btn .comm-btn-fav .num, #special-detail .comm-comment-delete .detail-list .item .btn .comm-btn-fav .num, #special-detail .comm-comment-report .detail-list .item .btn .comm-btn-fav .num { font-size: 11px; } #special .comm-comment .detail-list .item .btn .comm-btn-fav .icon, #special .comm-comment-delete .detail-list .item .btn .comm-btn-fav .icon, #special .comm-comment-report .detail-list .item .btn .comm-btn-fav .icon, #special-detail .comm-comment .detail-list .item .btn .comm-btn-fav .icon, #special-detail .comm-comment-delete .detail-list .item .btn .comm-btn-fav .icon, #special-detail .comm-comment-report .detail-list .item .btn .comm-btn-fav .icon { margin-right: 3px; } #special .comm-comment .detail-list .item .btn .comm-btn-fav .icon.icon_def, #special .comm-comment-delete .detail-list .item .btn .comm-btn-fav .icon.icon_def, #special .comm-comment-report .detail-list .item .btn .comm-btn-fav .icon.icon_def, #special-detail .comm-comment .detail-list .item .btn .comm-btn-fav .icon.icon_def, #special-detail .comm-comment-delete .detail-list .item .btn .comm-btn-fav .icon.icon_def, #special-detail .comm-comment-report .detail-list .item .btn .comm-btn-fav .icon.icon_def { display: block; } #special .comm-comment .detail-list .item .btn .comm-btn-fav .icon.icon_active, #special .comm-comment-delete .detail-list .item .btn .comm-btn-fav .icon.icon_active, #special .comm-comment-report .detail-list .item .btn .comm-btn-fav .icon.icon_active, #special-detail .comm-comment .detail-list .item .btn .comm-btn-fav .icon.icon_active, #special-detail .comm-comment-delete .detail-list .item .btn .comm-btn-fav .icon.icon_active, #special-detail .comm-comment-report .detail-list .item .btn .comm-btn-fav .icon.icon_active { display: none; } #special .comm-comment .detail-list .item .btn .comm-btn-fav .icon svg, #special .comm-comment-delete .detail-list .item .btn .comm-btn-fav .icon svg, #special .comm-comment-report .detail-list .item .btn .comm-btn-fav .icon svg, #special-detail .comm-comment .detail-list .item .btn .comm-btn-fav .icon svg, #special-detail .comm-comment-delete .detail-list .item .btn .comm-btn-fav .icon svg, #special-detail .comm-comment-report .detail-list .item .btn .comm-btn-fav .icon svg { width: 10px; display: block; } #special .comm-comment .detail-list .item:last-child, #special .comm-comment-delete .detail-list .item:last-child, #special .comm-comment-report .detail-list .item:last-child, #special-detail .comm-comment .detail-list .item:last-child, #special-detail .comm-comment-delete .detail-list .item:last-child, #special-detail .comm-comment-report .detail-list .item:last-child { margin-bottom: 0px; } #special .comm-video, #special .comm-images, #special-detail .comm-video, #special-detail .comm-images { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; box-sizing: border-box; z-index: 0; } #special .comm-video .bg, #special .comm-images .bg, #special-detail .comm-video .bg, #special-detail .comm-images .bg { position: absolute; width: 100%; height: 100%; } #special .comm-video .video, #special .comm-images .video, #special-detail .comm-video .video, #special-detail .comm-images .video { position: absolute; width: 100%; height: 100%; } #special .comm-video .video a, #special .comm-images .video a, #special-detail .comm-video .video a, #special-detail .comm-images .video a { position: absolute; width: 100%; height: 100%; } #special .comm-video .video .btn-replay, #special .comm-images .video .btn-replay, #special-detail .comm-video .video .btn-replay, #special-detail .comm-images .video .btn-replay { background: rgba(0, 0, 0, 0.3); } #special .comm-video .video .btn-replay span, #special .comm-images .video .btn-replay span, #special-detail .comm-video .video .btn-replay span, #special-detail .comm-images .video .btn-replay span { pointer-events: none; color: #f0f; font-family: VideoJS; font-weight: normal; font-style: normal; position: absolute; display: block; top: 50%; left: 50%; transform: translate(-50%, -50%); filter: drop-shadow(1px 1px 0px black); display: block; } #special .comm-video .video .btn-replay span:before, #special .comm-images .video .btn-replay span:before, #special-detail .comm-video .video .btn-replay span:before, #special-detail .comm-images .video .btn-replay span:before { display: block; content: "\f116"; letter-spacing: 0.0; font-size: 60px; line-height: 1.0; } #special .comm-video .video .player, #special .comm-images .video .player, #special-detail .comm-video .video .player, #special-detail .comm-images .video .player { position: absolute; width: 100%; height: 100%; } #special .comm-video .video img, #special .comm-images .video img, #special-detail .comm-video .video img, #special-detail .comm-images .video img { width: 100%; height: 100%; object-fit: contain; } #special .comm-video .video video, #special .comm-images .video video, #special-detail .comm-video .video video, #special-detail .comm-images .video video { width: 100%; height: 100%; object-fit: contain; } #special .comm-video .progress, #special .comm-images .progress, #special-detail .comm-video .progress, #special-detail .comm-images .progress { font-family: "Oswald", "Noto Sans JP", sans-serif; letter-spacing: 0.1em; padding: 12px 24px; position: absolute; top: 24px; width: 100%; box-sizing: border-box; padding: 0px 25px; height: 16px; filter: drop-shadow(1px 1px 0px black); } #special .comm-video .progress > .inner, #special .comm-images .progress > .inner, #special-detail .comm-video .progress > .inner, #special-detail .comm-images .progress > .inner { position: relative; width: 100%; height: 100%; } #special .comm-video .progress .btn-seek, #special .comm-images .progress .btn-seek, #special-detail .comm-video .progress .btn-seek, #special-detail .comm-images .progress .btn-seek { display: block; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; background: #f0f; opacity: 0.0; } #special .comm-video .progress .btn-head, #special .comm-images .progress .btn-head, #special-detail .comm-video .progress .btn-head, #special-detail .comm-images .progress .btn-head { display: block; position: absolute; top: 0px; left: -70px; width: 70px; height: 100%; background: #f0f; opacity: 0.0; } #special .comm-video .progress .current, #special .comm-video .progress .duration, #special .comm-images .progress .current, #special .comm-images .progress .duration, #special-detail .comm-video .progress .current, #special-detail .comm-video .progress .duration, #special-detail .comm-images .progress .current, #special-detail .comm-images .progress .duration { line-height: 1.0; position: absolute; top: 50%; transform: translate(0px, -50%); font-size: 10px; } #special .comm-video .progress .current, #special .comm-images .progress .current, #special-detail .comm-video .progress .current, #special-detail .comm-images .progress .current { left: 0px; } #special .comm-video .progress .duration, #special .comm-images .progress .duration, #special-detail .comm-video .progress .duration, #special-detail .comm-images .progress .duration { right: 0px; } #special .comm-video .progress .progress-bar, #special .comm-images .progress .progress-bar, #special-detail .comm-video .progress .progress-bar, #special-detail .comm-images .progress .progress-bar { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: calc(100% - 70px); height: 100%; } #special .comm-video .progress .progress-bar .bar-bg, #special .comm-video .progress .progress-bar .bar-current, #special .comm-images .progress .progress-bar .bar-bg, #special .comm-images .progress .progress-bar .bar-current, #special-detail .comm-video .progress .progress-bar .bar-bg, #special-detail .comm-video .progress .progress-bar .bar-current, #special-detail .comm-images .progress .progress-bar .bar-bg, #special-detail .comm-images .progress .progress-bar .bar-current { position: absolute; top: 50%; left: 0%; transform: translate(0%, -50%); width: calc(100%); height: 3px; border-radius: 3px; } #special .comm-video .progress .progress-bar .bar-bg, #special .comm-images .progress .progress-bar .bar-bg, #special-detail .comm-video .progress .progress-bar .bar-bg, #special-detail .comm-images .progress .progress-bar .bar-bg { opacity: 0.5; } #special .comm-video .progress .progress-bar .bar-current, #special .comm-images .progress .progress-bar .bar-current, #special-detail .comm-video .progress .progress-bar .bar-current, #special-detail .comm-images .progress .progress-bar .bar-current { width: 0%; } #special .comm-video .progress .progress-bar .bar-head, #special .comm-images .progress .progress-bar .bar-head, #special-detail .comm-video .progress .progress-bar .bar-head, #special-detail .comm-images .progress .progress-bar .bar-head { position: absolute; top: 50%; transform: translate(-50%, -50%); width: 9px; height: 9px; border-radius: 9px; } #special .comm-video .profile, #special .comm-images .profile, #special-detail .comm-video .profile, #special-detail .comm-images .profile { font-family: "Oswald", "Noto Sans JP", sans-serif; letter-spacing: 0.1em; display: flex; justify-content: flex-start; align-items: center; position: absolute; width: calc(100% - 24px - 24px); top: calc(30px + 24px + 12px); left: 24px; box-sizing: border-box; } #special .comm-video .profile .icon, #special .comm-images .profile .icon, #special-detail .comm-video .profile .icon, #special-detail .comm-images .profile .icon { width: 32px; position: relative; } #special .comm-video .profile .icon img, #special .comm-images .profile .icon img, #special-detail .comm-video .profile .icon img, #special-detail .comm-images .profile .icon img { width: 100%; border-radius: 100%; position: absolute; top: 50%; left: 0px; transform: translate(0px, -50%); } #special .comm-video .profile .txt, #special .comm-images .profile .txt, #special-detail .comm-video .profile .txt, #special-detail .comm-images .profile .txt { width: calc(100% - 40px); margin-left: 12px; position: relative; line-height: 1.0; } #special .comm-video .profile .txt .name, #special .comm-images .profile .txt .name, #special-detail .comm-video .profile .txt .name, #special-detail .comm-images .profile .txt .name { display: flex; justify-content: flex-start; align-items: center; font-size: 13px; } #special .comm-video .profile .txt .name .label, #special .comm-images .profile .txt .name .label, #special-detail .comm-video .profile .txt .name .label, #special-detail .comm-images .profile .txt .name .label { filter: drop-shadow(1px 1px 0px black); } #special .comm-video .profile .txt .name .icon, #special .comm-images .profile .txt .name .icon, #special-detail .comm-video .profile .txt .name .icon, #special-detail .comm-images .profile .txt .name .icon { margin-left: 5px; } #special .comm-video .profile .txt .name .icon svg, #special .comm-images .profile .txt .name .icon svg, #special-detail .comm-video .profile .txt .name .icon svg, #special-detail .comm-images .profile .txt .name .icon svg { display: block; } #special .comm-video .profile .txt .time, #special .comm-images .profile .txt .time, #special-detail .comm-video .profile .txt .time, #special-detail .comm-images .profile .txt .time { font-size: 11px; } #special .comm-video .btn-comm-back, #special .comm-images .btn-comm-back, #special-detail .comm-video .btn-comm-back, #special-detail .comm-images .btn-comm-back { width: 40px; height: 40px; position: absolute; top: calc(30px + 24px + 12px); right: 24px; } #special .comm-video .btn-comm-back svg, #special .comm-images .btn-comm-back svg, #special-detail .comm-video .btn-comm-back svg, #special-detail .comm-images .btn-comm-back svg { position: absolute; top: 0%; left: 50%; transform: translate(-50%, 0%); width: 15px; filter: drop-shadow(1px 1px 0px black); } #special .comm-video .btn-comm-sound, #special .comm-images .btn-comm-sound, #special-detail .comm-video .btn-comm-sound, #special-detail .comm-images .btn-comm-sound { width: 32px; height: 32px; position: absolute; top: calc(30px + 24px + 12px + 40px); left: 24px; border-radius: 32px; filter: drop-shadow(1px 1px 0px black); } #special .comm-video .btn-comm-sound.muted .icon_on, #special .comm-images .btn-comm-sound.muted .icon_on, #special-detail .comm-video .btn-comm-sound.muted .icon_on, #special-detail .comm-images .btn-comm-sound.muted .icon_on { display: none; } #special .comm-video .btn-comm-sound.muted .icon_mute, #special .comm-images .btn-comm-sound.muted .icon_mute, #special-detail .comm-video .btn-comm-sound.muted .icon_mute, #special-detail .comm-images .btn-comm-sound.muted .icon_mute { display: block; } #special .comm-video .btn-comm-sound .icon_on, #special .comm-images .btn-comm-sound .icon_on, #special-detail .comm-video .btn-comm-sound .icon_on, #special-detail .comm-images .btn-comm-sound .icon_on { display: block; } #special .comm-video .btn-comm-sound .icon_mute, #special .comm-images .btn-comm-sound .icon_mute, #special-detail .comm-video .btn-comm-sound .icon_mute, #special-detail .comm-images .btn-comm-sound .icon_mute { display: none; } #special .comm-video .btn-comm-sound svg, #special .comm-images .btn-comm-sound svg, #special-detail .comm-video .btn-comm-sound svg, #special-detail .comm-images .btn-comm-sound svg { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } #special .comm-video .bottom, #special .comm-images .bottom, #special-detail .comm-video .bottom, #special-detail .comm-images .bottom { position: absolute; bottom: 0px; font-family: "Oswald", "Noto Sans JP", sans-serif; letter-spacing: 0.1em; display: flex; justify-content: flex-start; align-items: center; width: 100%; box-sizing: border-box; padding: 25px; padding-top: 0px; filter: drop-shadow(0 1px 1px black); pointer-events: none; } #special .comm-video .bottom .fav, #special .comm-video .bottom .comment, #special .comm-images .bottom .fav, #special .comm-images .bottom .comment, #special-detail .comm-video .bottom .fav, #special-detail .comm-video .bottom .comment, #special-detail .comm-images .bottom .fav, #special-detail .comm-images .bottom .comment { margin-right: 12px; } #special .comm-video .bottom .fav a, #special .comm-video .bottom .comment a, #special .comm-images .bottom .fav a, #special .comm-images .bottom .comment a, #special-detail .comm-video .bottom .fav a, #special-detail .comm-video .bottom .comment a, #special-detail .comm-images .bottom .fav a, #special-detail .comm-images .bottom .comment a { display: flex; justify-content: flex-start; align-items: center; pointer-events: auto; } #special .comm-video .bottom .fav a.active .icon.icon_def, #special .comm-video .bottom .comment a.active .icon.icon_def, #special .comm-images .bottom .fav a.active .icon.icon_def, #special .comm-images .bottom .comment a.active .icon.icon_def, #special-detail .comm-video .bottom .fav a.active .icon.icon_def, #special-detail .comm-video .bottom .comment a.active .icon.icon_def, #special-detail .comm-images .bottom .fav a.active .icon.icon_def, #special-detail .comm-images .bottom .comment a.active .icon.icon_def { display: none; } #special .comm-video .bottom .fav a.active .icon.icon_active, #special .comm-video .bottom .comment a.active .icon.icon_active, #special .comm-images .bottom .fav a.active .icon.icon_active, #special .comm-images .bottom .comment a.active .icon.icon_active, #special-detail .comm-video .bottom .fav a.active .icon.icon_active, #special-detail .comm-video .bottom .comment a.active .icon.icon_active, #special-detail .comm-images .bottom .fav a.active .icon.icon_active, #special-detail .comm-images .bottom .comment a.active .icon.icon_active { display: block; } #special .comm-video .bottom .fav a .icon, #special .comm-video .bottom .comment a .icon, #special .comm-images .bottom .fav a .icon, #special .comm-images .bottom .comment a .icon, #special-detail .comm-video .bottom .fav a .icon, #special-detail .comm-video .bottom .comment a .icon, #special-detail .comm-images .bottom .fav a .icon, #special-detail .comm-images .bottom .comment a .icon { margin-right: 3px; } #special .comm-video .bottom .fav a .icon.icon_def, #special .comm-video .bottom .comment a .icon.icon_def, #special .comm-images .bottom .fav a .icon.icon_def, #special .comm-images .bottom .comment a .icon.icon_def, #special-detail .comm-video .bottom .fav a .icon.icon_def, #special-detail .comm-video .bottom .comment a .icon.icon_def, #special-detail .comm-images .bottom .fav a .icon.icon_def, #special-detail .comm-images .bottom .comment a .icon.icon_def { display: block; } #special .comm-video .bottom .fav a .icon.icon_active, #special .comm-video .bottom .comment a .icon.icon_active, #special .comm-images .bottom .fav a .icon.icon_active, #special .comm-images .bottom .comment a .icon.icon_active, #special-detail .comm-video .bottom .fav a .icon.icon_active, #special-detail .comm-video .bottom .comment a .icon.icon_active, #special-detail .comm-images .bottom .fav a .icon.icon_active, #special-detail .comm-images .bottom .comment a .icon.icon_active { display: none; } #special .comm-video .bottom .fav a .icon svg, #special .comm-video .bottom .comment a .icon svg, #special .comm-images .bottom .fav a .icon svg, #special .comm-images .bottom .comment a .icon svg, #special-detail .comm-video .bottom .fav a .icon svg, #special-detail .comm-video .bottom .comment a .icon svg, #special-detail .comm-images .bottom .fav a .icon svg, #special-detail .comm-images .bottom .comment a .icon svg { display: block; } #special .comm-video .bottom .fav a .txt, #special .comm-video .bottom .comment a .txt, #special .comm-images .bottom .fav a .txt, #special .comm-images .bottom .comment a .txt, #special-detail .comm-video .bottom .fav a .txt, #special-detail .comm-video .bottom .comment a .txt, #special-detail .comm-images .bottom .fav a .txt, #special-detail .comm-images .bottom .comment a .txt { margin-left: 8px; } #special .comm-images .profile, #special-detail .comm-images .profile { top: 24px; left: 24px; } #special .comm-images .btn-comm-back, #special-detail .comm-images .btn-comm-back { top: 24px; right: 24px; } #special .comm-images .images, #special-detail .comm-images .images { position: absolute; width: 100%; height: 100%; } #special .comm-images .images .slick-dots, #special-detail .comm-images .images .slick-dots { margin-top: 0px; padding-right: 24px; text-align: right; box-sizing: border-box; top: auto; bottom: 38px; } #special .comm-images .images .slick-list.draggable, #special-detail .comm-images .images .slick-list.draggable { height: 100% !important; } #special .comm-images .images .slick-list.draggable .slick-track, #special-detail .comm-images .images .slick-list.draggable .slick-track { height: 100% !important; } #special .comm-images .images .slick-list.draggable .slick-track .slick-slide, #special-detail .comm-images .images .slick-list.draggable .slick-track .slick-slide { height: 100%; } #special .comm-images .images .slick-list.draggable .slick-track .slick-slide > div, #special-detail .comm-images .images .slick-list.draggable .slick-track .slick-slide > div { height: 100%; } #special .comm-images .images .img, #special-detail .comm-images .images .img { max-width: 100%; max-height: 100%; height: 100%; } #special .comm-images .images .img img, #special-detail .comm-images .images .img img { object-fit: contain; width: 100%; height: 100%; } #special .comm-scroll, #special-detail .comm-scroll { position: relative; height: 100%; width: 100%; } #special .comm-scroll .scrollable, #special-detail .comm-scroll .scrollable { margin-right: -17px; padding-right: 17px; overflow: hidden; overflow-y: scroll; -webkit-overflow-scrolling: touch; position: absolute; height: 100%; width: 100%; } #special .comm-scroll .scrollable::-webkit-scrollbar, #special-detail .comm-scroll .scrollable::-webkit-scrollbar { width: 12px; } #special .comm-scroll .goods-scrollbar, #special-detail .comm-scroll .goods-scrollbar { position: absolute; top: 0; right: 0; width: 12px; height: 100%; overflow: hidden; } #special .comm-scroll .goods-scrollbar .scrollbg, #special-detail .comm-scroll .goods-scrollbar .scrollbg { position: absolute; top: 0; right: 0; bottom: 0; width: 100%; height: 100%; opacity: 0.1; } #special .comm-scroll .goods-scrollbar .scrollbar-thumb, #special-detail .comm-scroll .goods-scrollbar .scrollbar-thumb { min-height: 50px; border-radius: 50px; opacity: 0.3; cursor: pointer; } #special .comm-scroll .goods-scrollbar .scrollbar-thumb.disable, #special-detail .comm-scroll .goods-scrollbar .scrollbar-thumb.disable { opacity: 0.0; pointer-events: none; } #special, #special-detail, #goods { word-break: break-word; } #special .comm-block-top, #special-detail .comm-block-top, #goods .comm-block-top { display: flex; justify-content: space-between; padding: 8px 24px; line-height: 1.0; } #special .comm-block-top .left, #special-detail .comm-block-top .left, #goods .comm-block-top .left { width: 70px; } #special .comm-block-top .left .btn-comm-back, #special-detail .comm-block-top .left .btn-comm-back, #goods .comm-block-top .left .btn-comm-back { width: 44px; height: 30px; display: block; position: relative; } #special .comm-block-top .left .btn-comm-back .icon, #special-detail .comm-block-top .left .btn-comm-back .icon, #goods .comm-block-top .left .btn-comm-back .icon { display: block; } #special .comm-block-top .left .btn-comm-back .icon svg, #special-detail .comm-block-top .left .btn-comm-back .icon svg, #goods .comm-block-top .left .btn-comm-back .icon svg { display: block; margin-right: 5px; position: absolute; top: 50%; left: 0px; transform: translate(0px, -50%); } #special .comm-block-top .center, #special-detail .comm-block-top .center, #goods .comm-block-top .center { width: calc(100% - 70px - 70px); height: 30px; text-align: center; font-size: 13px; position: relative; } #special .comm-block-top .center span, #special-detail .comm-block-top .center span, #goods .comm-block-top .center span { width: 100%; display: block; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } #special .comm-block-top .right, #special-detail .comm-block-top .right, #goods .comm-block-top .right { text-align: right; width: 70px; } #special .comm-block-top .right a, #special-detail .comm-block-top .right a, #goods .comm-block-top .right a { display: block; height: 30px; display: flex; justify-content: flex-end; align-items: center; font-size: 10px; } #special .comm-block-top .right a svg, #special-detail .comm-block-top .right a svg, #goods .comm-block-top .right a svg { display: block; margin-right: 5px; } #special .comm-block-top .right a span, #special-detail .comm-block-top .right a span, #goods .comm-block-top .right a span { display: block; } #special .comm-list .item-comm, #special .goods-list .item-comm, #special-detail .comm-list .item-comm, #special-detail .goods-list .item-comm, #goods .comm-list .item-comm, #goods .goods-list .item-comm { font-weight: normal; line-height: 1.5; position: relative; margin-bottom: 8px; padding: 1em; width: 100%; box-sizing: border-box; } #special .comm-list .item-comm:last-child, #special .goods-list .item-comm:last-child, #special-detail .comm-list .item-comm:last-child, #special-detail .goods-list .item-comm:last-child, #goods .comm-list .item-comm:last-child, #goods .goods-list .item-comm:last-child { margin-bottom: 0px; } #special .comm-list .item-comm .profile, #special .goods-list .item-comm .profile, #special-detail .comm-list .item-comm .profile, #special-detail .goods-list .item-comm .profile, #goods .comm-list .item-comm .profile, #goods .goods-list .item-comm .profile { font-family: "Oswald", "Noto Sans JP", sans-serif; letter-spacing: 0.1em; display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; } #special .comm-list .item-comm .profile .icon, #special .goods-list .item-comm .profile .icon, #special-detail .comm-list .item-comm .profile .icon, #special-detail .goods-list .item-comm .profile .icon, #goods .comm-list .item-comm .profile .icon, #goods .goods-list .item-comm .profile .icon { width: 40px; position: relative; } #special .comm-list .item-comm .profile .icon img, #special .goods-list .item-comm .profile .icon img, #special-detail .comm-list .item-comm .profile .icon img, #special-detail .goods-list .item-comm .profile .icon img, #goods .comm-list .item-comm .profile .icon img, #goods .goods-list .item-comm .profile .icon img { width: 100%; border-radius: 100%; position: absolute; top: 50%; left: 0px; transform: translate(0px, -50%); } #special .comm-list .item-comm .profile .txt, #special .goods-list .item-comm .profile .txt, #special-detail .comm-list .item-comm .profile .txt, #special-detail .goods-list .item-comm .profile .txt, #goods .comm-list .item-comm .profile .txt, #goods .goods-list .item-comm .profile .txt { width: calc(100% - 40px - 12px); position: relative; line-height: 1.0; } #special .comm-list .item-comm .profile .txt .name, #special .goods-list .item-comm .profile .txt .name, #special-detail .comm-list .item-comm .profile .txt .name, #special-detail .goods-list .item-comm .profile .txt .name, #goods .comm-list .item-comm .profile .txt .name, #goods .goods-list .item-comm .profile .txt .name { display: flex; justify-content: flex-start; align-items: center; font-size: 13px; } #special .comm-list .item-comm .profile .txt .name .icon, #special .goods-list .item-comm .profile .txt .name .icon, #special-detail .comm-list .item-comm .profile .txt .name .icon, #special-detail .goods-list .item-comm .profile .txt .name .icon, #goods .comm-list .item-comm .profile .txt .name .icon, #goods .goods-list .item-comm .profile .txt .name .icon { margin-left: 5px; } #special .comm-list .item-comm .profile .txt .name .icon svg, #special .goods-list .item-comm .profile .txt .name .icon svg, #special-detail .comm-list .item-comm .profile .txt .name .icon svg, #special-detail .goods-list .item-comm .profile .txt .name .icon svg, #goods .comm-list .item-comm .profile .txt .name .icon svg, #goods .goods-list .item-comm .profile .txt .name .icon svg { display: block; } #special .comm-list .item-comm .profile .txt .time, #special .goods-list .item-comm .profile .txt .time, #special-detail .comm-list .item-comm .profile .txt .time, #special-detail .goods-list .item-comm .profile .txt .time, #goods .comm-list .item-comm .profile .txt .time, #goods .goods-list .item-comm .profile .txt .time { font-size: 11px; } #special .comm-list .item-comm figure, #special .goods-list .item-comm figure, #special-detail .comm-list .item-comm figure, #special-detail .goods-list .item-comm figure, #goods .comm-list .item-comm figure, #goods .goods-list .item-comm figure { margin-bottom: 12px; } #special .comm-list .item-comm figure.fig1, #special .goods-list .item-comm figure.fig1, #special-detail .comm-list .item-comm figure.fig1, #special-detail .goods-list .item-comm figure.fig1, #goods .comm-list .item-comm figure.fig1, #goods .goods-list .item-comm figure.fig1 { display: block; } #special .comm-list .item-comm figure.fig1 a, #special .goods-list .item-comm figure.fig1 a, #special-detail .comm-list .item-comm figure.fig1 a, #special-detail .goods-list .item-comm figure.fig1 a, #goods .comm-list .item-comm figure.fig1 a, #goods .goods-list .item-comm figure.fig1 a { display: block; } #special .comm-list .item-comm figure.fig1 a img, #special .goods-list .item-comm figure.fig1 a img, #special-detail .comm-list .item-comm figure.fig1 a img, #special-detail .goods-list .item-comm figure.fig1 a img, #goods .comm-list .item-comm figure.fig1 a img, #goods .goods-list .item-comm figure.fig1 a img { display: block; width: 100%; object-fit: cover; } #special .comm-list .item-comm figure.fig2, #special .goods-list .item-comm figure.fig2, #special-detail .comm-list .item-comm figure.fig2, #special-detail .goods-list .item-comm figure.fig2, #goods .comm-list .item-comm figure.fig2, #goods .goods-list .item-comm figure.fig2 { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } #special .comm-list .item-comm figure.fig2 a, #special .goods-list .item-comm figure.fig2 a, #special-detail .comm-list .item-comm figure.fig2 a, #special-detail .goods-list .item-comm figure.fig2 a, #goods .comm-list .item-comm figure.fig2 a, #goods .goods-list .item-comm figure.fig2 a { width: calc(50% - 1px); display: block; } #special .comm-list .item-comm figure.fig2 img, #special .goods-list .item-comm figure.fig2 img, #special-detail .comm-list .item-comm figure.fig2 img, #special-detail .goods-list .item-comm figure.fig2 img, #goods .comm-list .item-comm figure.fig2 img, #goods .goods-list .item-comm figure.fig2 img { width: 100%; height: 200px; display: block; object-fit: cover; } #special .comm-list .item-comm figure.fig3, #special .goods-list .item-comm figure.fig3, #special-detail .comm-list .item-comm figure.fig3, #special-detail .goods-list .item-comm figure.fig3, #goods .comm-list .item-comm figure.fig3, #goods .goods-list .item-comm figure.fig3 { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } #special .comm-list .item-comm figure.fig3 a, #special .goods-list .item-comm figure.fig3 a, #special-detail .comm-list .item-comm figure.fig3 a, #special-detail .goods-list .item-comm figure.fig3 a, #goods .comm-list .item-comm figure.fig3 a, #goods .goods-list .item-comm figure.fig3 a { width: calc(50% - 1px); display: block; } #special .comm-list .item-comm figure.fig3 a:first-child, #special .goods-list .item-comm figure.fig3 a:first-child, #special-detail .comm-list .item-comm figure.fig3 a:first-child, #special-detail .goods-list .item-comm figure.fig3 a:first-child, #goods .comm-list .item-comm figure.fig3 a:first-child, #goods .goods-list .item-comm figure.fig3 a:first-child { width: calc(100%); margin-bottom: 2px; } #special .comm-list .item-comm figure.fig3 a:first-child img, #special .goods-list .item-comm figure.fig3 a:first-child img, #special-detail .comm-list .item-comm figure.fig3 a:first-child img, #special-detail .goods-list .item-comm figure.fig3 a:first-child img, #goods .comm-list .item-comm figure.fig3 a:first-child img, #goods .goods-list .item-comm figure.fig3 a:first-child img { height: 300px; } #special .comm-list .item-comm figure.fig3 img, #special .goods-list .item-comm figure.fig3 img, #special-detail .comm-list .item-comm figure.fig3 img, #special-detail .goods-list .item-comm figure.fig3 img, #goods .comm-list .item-comm figure.fig3 img, #goods .goods-list .item-comm figure.fig3 img { width: 100%; height: 170px; display: block; object-fit: cover; } #special .comm-list .item-comm figure.fig4, #special .comm-list .item-comm figure.fig6, #special .goods-list .item-comm figure.fig4, #special .goods-list .item-comm figure.fig6, #special-detail .comm-list .item-comm figure.fig4, #special-detail .comm-list .item-comm figure.fig6, #special-detail .goods-list .item-comm figure.fig4, #special-detail .goods-list .item-comm figure.fig6, #goods .comm-list .item-comm figure.fig4, #goods .comm-list .item-comm figure.fig6, #goods .goods-list .item-comm figure.fig4, #goods .goods-list .item-comm figure.fig6 { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } #special .comm-list .item-comm figure.fig4 a, #special .comm-list .item-comm figure.fig6 a, #special .goods-list .item-comm figure.fig4 a, #special .goods-list .item-comm figure.fig6 a, #special-detail .comm-list .item-comm figure.fig4 a, #special-detail .comm-list .item-comm figure.fig6 a, #special-detail .goods-list .item-comm figure.fig4 a, #special-detail .goods-list .item-comm figure.fig6 a, #goods .comm-list .item-comm figure.fig4 a, #goods .comm-list .item-comm figure.fig6 a, #goods .goods-list .item-comm figure.fig4 a, #goods .goods-list .item-comm figure.fig6 a { width: calc(50% - 1px); display: block; } #special .comm-list .item-comm figure.fig4 img, #special .comm-list .item-comm figure.fig6 img, #special .goods-list .item-comm figure.fig4 img, #special .goods-list .item-comm figure.fig6 img, #special-detail .comm-list .item-comm figure.fig4 img, #special-detail .comm-list .item-comm figure.fig6 img, #special-detail .goods-list .item-comm figure.fig4 img, #special-detail .goods-list .item-comm figure.fig6 img, #goods .comm-list .item-comm figure.fig4 img, #goods .comm-list .item-comm figure.fig6 img, #goods .goods-list .item-comm figure.fig4 img, #goods .goods-list .item-comm figure.fig6 img { width: 100%; height: 170px; display: block; object-fit: cover; margin-bottom: 2px; } #special .comm-list .item-comm figure.fig5, #special .goods-list .item-comm figure.fig5, #special-detail .comm-list .item-comm figure.fig5, #special-detail .goods-list .item-comm figure.fig5, #goods .comm-list .item-comm figure.fig5, #goods .goods-list .item-comm figure.fig5 { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } #special .comm-list .item-comm figure.fig5 a, #special .goods-list .item-comm figure.fig5 a, #special-detail .comm-list .item-comm figure.fig5 a, #special-detail .goods-list .item-comm figure.fig5 a, #goods .comm-list .item-comm figure.fig5 a, #goods .goods-list .item-comm figure.fig5 a { width: calc(50% - 1px); display: block; } #special .comm-list .item-comm figure.fig5 a:first-child, #special .goods-list .item-comm figure.fig5 a:first-child, #special-detail .comm-list .item-comm figure.fig5 a:first-child, #special-detail .goods-list .item-comm figure.fig5 a:first-child, #goods .comm-list .item-comm figure.fig5 a:first-child, #goods .goods-list .item-comm figure.fig5 a:first-child { width: calc(100%); } #special .comm-list .item-comm figure.fig5 a:first-child img, #special .goods-list .item-comm figure.fig5 a:first-child img, #special-detail .comm-list .item-comm figure.fig5 a:first-child img, #special-detail .goods-list .item-comm figure.fig5 a:first-child img, #goods .comm-list .item-comm figure.fig5 a:first-child img, #goods .goods-list .item-comm figure.fig5 a:first-child img { height: 300px; } #special .comm-list .item-comm figure.fig5 img, #special .goods-list .item-comm figure.fig5 img, #special-detail .comm-list .item-comm figure.fig5 img, #special-detail .goods-list .item-comm figure.fig5 img, #goods .comm-list .item-comm figure.fig5 img, #goods .goods-list .item-comm figure.fig5 img { width: 100%; height: 170px; display: block; object-fit: cover; margin-bottom: 2px; } #special .comm-list .item-comm figure.video, #special .goods-list .item-comm figure.video, #special-detail .comm-list .item-comm figure.video, #special-detail .goods-list .item-comm figure.video, #goods .comm-list .item-comm figure.video, #goods .goods-list .item-comm figure.video { display: block; } #special .comm-list .item-comm figure.video a, #special .goods-list .item-comm figure.video a, #special-detail .comm-list .item-comm figure.video a, #special-detail .goods-list .item-comm figure.video a, #goods .comm-list .item-comm figure.video a, #goods .goods-list .item-comm figure.video a { display: block; position: relative; } #special .comm-list .item-comm figure.video a img, #special .goods-list .item-comm figure.video a img, #special-detail .comm-list .item-comm figure.video a img, #special-detail .goods-list .item-comm figure.video a img, #goods .comm-list .item-comm figure.video a img, #goods .goods-list .item-comm figure.video a img { display: block; width: 100%; } #special .comm-list .item-comm figure.video a .badge, #special .goods-list .item-comm figure.video a .badge, #special-detail .comm-list .item-comm figure.video a .badge, #special-detail .goods-list .item-comm figure.video a .badge, #goods .comm-list .item-comm figure.video a .badge, #goods .goods-list .item-comm figure.video a .badge { font-family: "Oswald", "Noto Sans JP", sans-serif; display: flex; justify-content: flex-start; align-items: center; position: absolute; bottom: 12px; left: 12px; padding: 4px 10px; border-radius: 30px; } #special .comm-list .item-comm figure.video a .badge .icon, #special .goods-list .item-comm figure.video a .badge .icon, #special-detail .comm-list .item-comm figure.video a .badge .icon, #special-detail .goods-list .item-comm figure.video a .badge .icon, #goods .comm-list .item-comm figure.video a .badge .icon, #goods .goods-list .item-comm figure.video a .badge .icon { display: block; margin-right: 8px; } #special .comm-list .item-comm figure.video a .badge .icon svg, #special .goods-list .item-comm figure.video a .badge .icon svg, #special-detail .comm-list .item-comm figure.video a .badge .icon svg, #special-detail .goods-list .item-comm figure.video a .badge .icon svg, #goods .comm-list .item-comm figure.video a .badge .icon svg, #goods .goods-list .item-comm figure.video a .badge .icon svg { display: block; } #special .comm-list .item-comm figure.video a .badge .time, #special .goods-list .item-comm figure.video a .badge .time, #special-detail .comm-list .item-comm figure.video a .badge .time, #special-detail .goods-list .item-comm figure.video a .badge .time, #goods .comm-list .item-comm figure.video a .badge .time, #goods .goods-list .item-comm figure.video a .badge .time { letter-spacing: 0.1em; display: block; font-size: 12px; line-height: 1.0; } #special .comm-list .item-comm .block-txt, #special .goods-list .item-comm .block-txt, #special-detail .comm-list .item-comm .block-txt, #special-detail .goods-list .item-comm .block-txt, #goods .comm-list .item-comm .block-txt, #goods .goods-list .item-comm .block-txt { font-size: 12px; } #special .comm-list .item-comm .block-txt > .txt, #special .goods-list .item-comm .block-txt > .txt, #special-detail .comm-list .item-comm .block-txt > .txt, #special-detail .goods-list .item-comm .block-txt > .txt, #goods .comm-list .item-comm .block-txt > .txt, #goods .goods-list .item-comm .block-txt > .txt { margin-bottom: 1em; } #special .comm-list .item-comm .block-txt > .txt.show .txt-inner .txt-init:after, #special .goods-list .item-comm .block-txt > .txt.show .txt-inner .txt-init:after, #special-detail .comm-list .item-comm .block-txt > .txt.show .txt-inner .txt-init:after, #special-detail .goods-list .item-comm .block-txt > .txt.show .txt-inner .txt-init:after, #goods .comm-list .item-comm .block-txt > .txt.show .txt-inner .txt-init:after, #goods .goods-list .item-comm .block-txt > .txt.show .txt-inner .txt-init:after { display: none; } #special .comm-list .item-comm .block-txt > .txt.show .txt-inner .txt-more, #special .goods-list .item-comm .block-txt > .txt.show .txt-inner .txt-more, #special-detail .comm-list .item-comm .block-txt > .txt.show .txt-inner .txt-more, #special-detail .goods-list .item-comm .block-txt > .txt.show .txt-inner .txt-more, #goods .comm-list .item-comm .block-txt > .txt.show .txt-inner .txt-more, #goods .goods-list .item-comm .block-txt > .txt.show .txt-inner .txt-more { display: block; } #special .comm-list .item-comm .block-txt > .txt.show .more > span, #special .goods-list .item-comm .block-txt > .txt.show .more > span, #special-detail .comm-list .item-comm .block-txt > .txt.show .more > span, #special-detail .goods-list .item-comm .block-txt > .txt.show .more > span, #goods .comm-list .item-comm .block-txt > .txt.show .more > span, #goods .goods-list .item-comm .block-txt > .txt.show .more > span { display: none; } #special .comm-list .item-comm .block-txt > .txt.show .more a .show, #special .goods-list .item-comm .block-txt > .txt.show .more a .show, #special-detail .comm-list .item-comm .block-txt > .txt.show .more a .show, #special-detail .goods-list .item-comm .block-txt > .txt.show .more a .show, #goods .comm-list .item-comm .block-txt > .txt.show .more a .show, #goods .goods-list .item-comm .block-txt > .txt.show .more a .show { display: none; } #special .comm-list .item-comm .block-txt > .txt.show .more a .hide, #special .goods-list .item-comm .block-txt > .txt.show .more a .hide, #special-detail .comm-list .item-comm .block-txt > .txt.show .more a .hide, #special-detail .goods-list .item-comm .block-txt > .txt.show .more a .hide, #goods .comm-list .item-comm .block-txt > .txt.show .more a .hide, #goods .goods-list .item-comm .block-txt > .txt.show .more a .hide { display: block; } #special .comm-list .item-comm .block-txt > .txt .txt-inner .txt-more, #special .goods-list .item-comm .block-txt > .txt .txt-inner .txt-more, #special-detail .comm-list .item-comm .block-txt > .txt .txt-inner .txt-more, #special-detail .goods-list .item-comm .block-txt > .txt .txt-inner .txt-more, #goods .comm-list .item-comm .block-txt > .txt .txt-inner .txt-more, #goods .goods-list .item-comm .block-txt > .txt .txt-inner .txt-more { display: none; } #special .comm-list .item-comm .block-txt > .txt .more > span, #special .goods-list .item-comm .block-txt > .txt .more > span, #special-detail .comm-list .item-comm .block-txt > .txt .more > span, #special-detail .goods-list .item-comm .block-txt > .txt .more > span, #goods .comm-list .item-comm .block-txt > .txt .more > span, #goods .goods-list .item-comm .block-txt > .txt .more > span { display: inline-block; } #special .comm-list .item-comm .block-txt > .txt .more a, #special .goods-list .item-comm .block-txt > .txt .more a, #special-detail .comm-list .item-comm .block-txt > .txt .more a, #special-detail .goods-list .item-comm .block-txt > .txt .more a, #goods .comm-list .item-comm .block-txt > .txt .more a, #goods .goods-list .item-comm .block-txt > .txt .more a { display: inline-block; opacity: 0.5; } #special .comm-list .item-comm .block-txt > .txt .more a .show, #special .goods-list .item-comm .block-txt > .txt .more a .show, #special-detail .comm-list .item-comm .block-txt > .txt .more a .show, #special-detail .goods-list .item-comm .block-txt > .txt .more a .show, #goods .comm-list .item-comm .block-txt > .txt .more a .show, #goods .goods-list .item-comm .block-txt > .txt .more a .show { display: block; } #special .comm-list .item-comm .block-txt > .txt .more a .hide, #special .goods-list .item-comm .block-txt > .txt .more a .hide, #special-detail .comm-list .item-comm .block-txt > .txt .more a .hide, #special-detail .goods-list .item-comm .block-txt > .txt .more a .hide, #goods .comm-list .item-comm .block-txt > .txt .more a .hide, #goods .goods-list .item-comm .block-txt > .txt .more a .hide { display: none; } #special .comm-list .item-comm .block-txt .bottom, #special .goods-list .item-comm .block-txt .bottom, #special-detail .comm-list .item-comm .block-txt .bottom, #special-detail .goods-list .item-comm .block-txt .bottom, #goods .comm-list .item-comm .block-txt .bottom, #goods .goods-list .item-comm .block-txt .bottom { font-family: "Oswald", "Noto Sans JP", sans-serif; letter-spacing: 0.1em; display: flex; justify-content: flex-start; align-items: center; } #special .comm-list .item-comm .block-txt .bottom .fav, #special .comm-list .item-comm .block-txt .bottom .comment, #special .goods-list .item-comm .block-txt .bottom .fav, #special .goods-list .item-comm .block-txt .bottom .comment, #special-detail .comm-list .item-comm .block-txt .bottom .fav, #special-detail .comm-list .item-comm .block-txt .bottom .comment, #special-detail .goods-list .item-comm .block-txt .bottom .fav, #special-detail .goods-list .item-comm .block-txt .bottom .comment, #goods .comm-list .item-comm .block-txt .bottom .fav, #goods .comm-list .item-comm .block-txt .bottom .comment, #goods .goods-list .item-comm .block-txt .bottom .fav, #goods .goods-list .item-comm .block-txt .bottom .comment { margin-right: 12px; } #special .comm-list .item-comm .block-txt .bottom .fav a, #special .comm-list .item-comm .block-txt .bottom .comment a, #special .goods-list .item-comm .block-txt .bottom .fav a, #special .goods-list .item-comm .block-txt .bottom .comment a, #special-detail .comm-list .item-comm .block-txt .bottom .fav a, #special-detail .comm-list .item-comm .block-txt .bottom .comment a, #special-detail .goods-list .item-comm .block-txt .bottom .fav a, #special-detail .goods-list .item-comm .block-txt .bottom .comment a, #goods .comm-list .item-comm .block-txt .bottom .fav a, #goods .comm-list .item-comm .block-txt .bottom .comment a, #goods .goods-list .item-comm .block-txt .bottom .fav a, #goods .goods-list .item-comm .block-txt .bottom .comment a { display: flex; justify-content: flex-start; align-items: center; } #special .comm-list .item-comm .block-txt .bottom .fav a.active .icon.icon_def, #special .comm-list .item-comm .block-txt .bottom .comment a.active .icon.icon_def, #special .goods-list .item-comm .block-txt .bottom .fav a.active .icon.icon_def, #special .goods-list .item-comm .block-txt .bottom .comment a.active .icon.icon_def, #special-detail .comm-list .item-comm .block-txt .bottom .fav a.active .icon.icon_def, #special-detail .comm-list .item-comm .block-txt .bottom .comment a.active .icon.icon_def, #special-detail .goods-list .item-comm .block-txt .bottom .fav a.active .icon.icon_def, #special-detail .goods-list .item-comm .block-txt .bottom .comment a.active .icon.icon_def, #goods .comm-list .item-comm .block-txt .bottom .fav a.active .icon.icon_def, #goods .comm-list .item-comm .block-txt .bottom .comment a.active .icon.icon_def, #goods .goods-list .item-comm .block-txt .bottom .fav a.active .icon.icon_def, #goods .goods-list .item-comm .block-txt .bottom .comment a.active .icon.icon_def { display: none; } #special .comm-list .item-comm .block-txt .bottom .fav a.active .icon.icon_active, #special .comm-list .item-comm .block-txt .bottom .comment a.active .icon.icon_active, #special .goods-list .item-comm .block-txt .bottom .fav a.active .icon.icon_active, #special .goods-list .item-comm .block-txt .bottom .comment a.active .icon.icon_active, #special-detail .comm-list .item-comm .block-txt .bottom .fav a.active .icon.icon_active, #special-detail .comm-list .item-comm .block-txt .bottom .comment a.active .icon.icon_active, #special-detail .goods-list .item-comm .block-txt .bottom .fav a.active .icon.icon_active, #special-detail .goods-list .item-comm .block-txt .bottom .comment a.active .icon.icon_active, #goods .comm-list .item-comm .block-txt .bottom .fav a.active .icon.icon_active, #goods .comm-list .item-comm .block-txt .bottom .comment a.active .icon.icon_active, #goods .goods-list .item-comm .block-txt .bottom .fav a.active .icon.icon_active, #goods .goods-list .item-comm .block-txt .bottom .comment a.active .icon.icon_active { display: block; } #special .comm-list .item-comm .block-txt .bottom .fav a .icon, #special .comm-list .item-comm .block-txt .bottom .comment a .icon, #special .goods-list .item-comm .block-txt .bottom .fav a .icon, #special .goods-list .item-comm .block-txt .bottom .comment a .icon, #special-detail .comm-list .item-comm .block-txt .bottom .fav a .icon, #special-detail .comm-list .item-comm .block-txt .bottom .comment a .icon, #special-detail .goods-list .item-comm .block-txt .bottom .fav a .icon, #special-detail .goods-list .item-comm .block-txt .bottom .comment a .icon, #goods .comm-list .item-comm .block-txt .bottom .fav a .icon, #goods .comm-list .item-comm .block-txt .bottom .comment a .icon, #goods .goods-list .item-comm .block-txt .bottom .fav a .icon, #goods .goods-list .item-comm .block-txt .bottom .comment a .icon { margin-right: 3px; } #special .comm-list .item-comm .block-txt .bottom .fav a .icon.icon_def, #special .comm-list .item-comm .block-txt .bottom .comment a .icon.icon_def, #special .goods-list .item-comm .block-txt .bottom .fav a .icon.icon_def, #special .goods-list .item-comm .block-txt .bottom .comment a .icon.icon_def, #special-detail .comm-list .item-comm .block-txt .bottom .fav a .icon.icon_def, #special-detail .comm-list .item-comm .block-txt .bottom .comment a .icon.icon_def, #special-detail .goods-list .item-comm .block-txt .bottom .fav a .icon.icon_def, #special-detail .goods-list .item-comm .block-txt .bottom .comment a .icon.icon_def, #goods .comm-list .item-comm .block-txt .bottom .fav a .icon.icon_def, #goods .comm-list .item-comm .block-txt .bottom .comment a .icon.icon_def, #goods .goods-list .item-comm .block-txt .bottom .fav a .icon.icon_def, #goods .goods-list .item-comm .block-txt .bottom .comment a .icon.icon_def { display: block; } #special .comm-list .item-comm .block-txt .bottom .fav a .icon.icon_active, #special .comm-list .item-comm .block-txt .bottom .comment a .icon.icon_active, #special .goods-list .item-comm .block-txt .bottom .fav a .icon.icon_active, #special .goods-list .item-comm .block-txt .bottom .comment a .icon.icon_active, #special-detail .comm-list .item-comm .block-txt .bottom .fav a .icon.icon_active, #special-detail .comm-list .item-comm .block-txt .bottom .comment a .icon.icon_active, #special-detail .goods-list .item-comm .block-txt .bottom .fav a .icon.icon_active, #special-detail .goods-list .item-comm .block-txt .bottom .comment a .icon.icon_active, #goods .comm-list .item-comm .block-txt .bottom .fav a .icon.icon_active, #goods .comm-list .item-comm .block-txt .bottom .comment a .icon.icon_active, #goods .goods-list .item-comm .block-txt .bottom .fav a .icon.icon_active, #goods .goods-list .item-comm .block-txt .bottom .comment a .icon.icon_active { display: none; } #special .comm-list .item-comm .block-txt .bottom .fav a .icon svg, #special .comm-list .item-comm .block-txt .bottom .comment a .icon svg, #special .goods-list .item-comm .block-txt .bottom .fav a .icon svg, #special .goods-list .item-comm .block-txt .bottom .comment a .icon svg, #special-detail .comm-list .item-comm .block-txt .bottom .fav a .icon svg, #special-detail .comm-list .item-comm .block-txt .bottom .comment a .icon svg, #special-detail .goods-list .item-comm .block-txt .bottom .fav a .icon svg, #special-detail .goods-list .item-comm .block-txt .bottom .comment a .icon svg, #goods .comm-list .item-comm .block-txt .bottom .fav a .icon svg, #goods .comm-list .item-comm .block-txt .bottom .comment a .icon svg, #goods .goods-list .item-comm .block-txt .bottom .fav a .icon svg, #goods .goods-list .item-comm .block-txt .bottom .comment a .icon svg { display: block; } #special .comm-list .item-comm .block-txt .bottom .fav a .txt, #special .comm-list .item-comm .block-txt .bottom .comment a .txt, #special .goods-list .item-comm .block-txt .bottom .fav a .txt, #special .goods-list .item-comm .block-txt .bottom .comment a .txt, #special-detail .comm-list .item-comm .block-txt .bottom .fav a .txt, #special-detail .comm-list .item-comm .block-txt .bottom .comment a .txt, #special-detail .goods-list .item-comm .block-txt .bottom .fav a .txt, #special-detail .goods-list .item-comm .block-txt .bottom .comment a .txt, #goods .comm-list .item-comm .block-txt .bottom .fav a .txt, #goods .comm-list .item-comm .block-txt .bottom .comment a .txt, #goods .goods-list .item-comm .block-txt .bottom .fav a .txt, #goods .goods-list .item-comm .block-txt .bottom .comment a .txt { margin-left: 8px; } #goods .comm-block-top .left { width: 40px; } #goods .comm-block-top .center { width: calc(100% - 40px - 40px); } #goods .comm-block-top .right { width: 40px; } @media only screen and (min-width: 1000px) { .is-sp { display: none !important; } .is-tb { display: none !important; } #special-detail .comm-video, #special-detail .comm-images { width: 400px; height: calc(100%); } #special .comm-list .item-comm figure.fig1 a img { max-height: 360px; } .wrapper.before #special .comm-list .item-comm figure.fig1 a img { max-height: 535px; } .wrapper.before #special-detail .comm-video, .wrapper.before #special-detail .comm-images { width: 575px; } } @media only screen and (max-width: 999px) { .wrapper #special { width: 100vw; height: calc(100% - 0px); } #special .comm-list .item-comm figure.fig1 a img, #special-detail .comm-list .item-comm figure.fig1 a img { max-height: calc(100vw - 24px); } #special .comm-comment, #special .comm-comment-delete, #special .comm-comment-report, #special-detail .comm-comment, #special-detail .comm-comment-delete, #special-detail .comm-comment-report { position: fixed; pointer-events: auto; z-index: 100000; } #special .comm-video, #special .comm-images, #special-detail .comm-video, #special-detail .comm-images { position: fixed; top: 0px; left: 0px; pointer-events: auto; } #special-detail { position: fixed; width: 100%; height: 100%; z-index: 100000; pointer-events: none; } }