You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
627 lines
12 KiB
627 lines
12 KiB
.common-list {
|
|
list-style:none;
|
|
padding:0;
|
|
margin:0;
|
|
|
|
.thumbnail {
|
|
position:relative;
|
|
padding:0;
|
|
margin:0;
|
|
overflow: hidden;
|
|
|
|
.thumbnail-link {
|
|
display:flex;
|
|
width:100%;
|
|
height:100%;
|
|
|
|
.thumbnail-img {
|
|
width:100%;
|
|
height:100%;
|
|
display:block;
|
|
object-fit: cover;
|
|
|
|
}
|
|
|
|
@include display-xs(){
|
|
width: 100%;
|
|
height: fit-content;
|
|
.thumbnail-img {
|
|
object-fit: initial;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.item-content {
|
|
.item-title {
|
|
color:#02256c;
|
|
font-size:REM(14px);
|
|
display:block;
|
|
width:100%;
|
|
/*
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
letter-spacing: -0.025em;
|
|
*/
|
|
font-weight:700;
|
|
|
|
a {
|
|
color:inherit;
|
|
|
|
&:hover {
|
|
text-decoration: underline;
|
|
}
|
|
}
|
|
|
|
@include display-xs(){
|
|
font-size:REM(33px / 3);
|
|
margin-top:REM(12px / 3);
|
|
margin-bottom:REM(12px / 3);
|
|
white-space: initial;
|
|
word-wrap: break-word;
|
|
word-break: keep-all;
|
|
}
|
|
}
|
|
|
|
.item-summary {
|
|
font-size:REM(12px);
|
|
color:#252525;
|
|
display: -webkit-box;
|
|
-webkit-box-orient: vertical;
|
|
word-wrap:break-word;
|
|
letter-spacing: -0.025em;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
margin: REM(5px) 0 REM(5px) 0;
|
|
font-weight:500;
|
|
height: 1.28em * 2;
|
|
-webkit-line-clamp: 2;
|
|
line-height:1.28em;
|
|
|
|
a {
|
|
color:inherit;
|
|
|
|
&:hover {
|
|
text-decoration: underline;
|
|
}
|
|
}
|
|
}
|
|
|
|
.item-info {
|
|
margin:0;
|
|
padding:0;
|
|
|
|
dl {
|
|
margin:0;
|
|
display:flex;
|
|
align-items: center;
|
|
|
|
dt {
|
|
margin:0 REM(10px) 0 0;
|
|
}
|
|
|
|
dd {
|
|
font-size:REM(12px);
|
|
color:#959595;
|
|
font-weight:500;
|
|
@include display-xs(){
|
|
font-size:REM(28px / 3);
|
|
line-height:1;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&.news {
|
|
.item {
|
|
display:flex;
|
|
padding:REM(20px) 0;
|
|
border-bottom:1px solid #02256c;
|
|
|
|
.thumbnail {
|
|
width:REM(182px);
|
|
height:REM(133px);
|
|
|
|
flex-shrink: 0;
|
|
margin-right:REM(13px);
|
|
}
|
|
|
|
.item-content {
|
|
|
|
flex:1;
|
|
min-width:0;
|
|
padding:0 0 REM(8px) 0;
|
|
|
|
.item-summary {
|
|
height: 1.28em * 4;
|
|
-webkit-line-clamp: 4;
|
|
line-height:1.28em;
|
|
}
|
|
}
|
|
|
|
@include display-xs(){
|
|
flex-direction: column;
|
|
padding:REM(20px / 3) 0;
|
|
.thumbnail {
|
|
width: 100%;
|
|
margin-right:0;
|
|
}
|
|
.item-content {
|
|
.item-summary {
|
|
font-size:REM(28px / 3);
|
|
height: 1.28em * 4;
|
|
-webkit-line-clamp: 4;
|
|
line-height:1.28em;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
&.inner{
|
|
@include display-flex();
|
|
flex-wrap: wrap;
|
|
margin:0 0 REM(30px / 3) 0;
|
|
padding-bottom:REM(30px);
|
|
.item {
|
|
width:50%;
|
|
padding:REM(10px) 0;
|
|
@include display-flex();
|
|
align-items: center;
|
|
border-bottom: 1px solid #c2c2c2;
|
|
|
|
.thumbnail {
|
|
width:REM(100px);
|
|
height:REM(100px);
|
|
margin:0 auto REM(10px);
|
|
flex-shrink:0;
|
|
}
|
|
|
|
.item-content {
|
|
padding-left:REM(15px);
|
|
padding-right:REM(15px);
|
|
.item-title {
|
|
font-size:REM(13px);
|
|
white-space: initial;
|
|
}
|
|
}
|
|
|
|
@include display-xs(){
|
|
width:100%;
|
|
padding:REM(12px / 3) REM(15px/ 3);
|
|
@include display-flex();
|
|
flex-direction: row;
|
|
.thumbnail {
|
|
width:REM(120px / 3);
|
|
height:REM(80px / 3);
|
|
margin:0;
|
|
flex-shrink:0;
|
|
}
|
|
.item-content {
|
|
padding-left:REM(30px / 3);
|
|
.item-title {
|
|
font-size:REM(21px / 3);
|
|
white-space: initial;
|
|
margin-bottom:0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&.toons {
|
|
display:flex;
|
|
flex-wrap:wrap;
|
|
margin-top:REM(25px);
|
|
|
|
.item {
|
|
width:33%;
|
|
padding:0;
|
|
|
|
.thumbnail {
|
|
width:REM(200px);
|
|
height:REM(200px);
|
|
margin:0 auto REM(10px)
|
|
}
|
|
|
|
.item-content {
|
|
text-align: center;
|
|
}
|
|
.item-info {
|
|
margin-bottom:REM(30px);
|
|
line-height:1;
|
|
dl {
|
|
justify-content: center;
|
|
}
|
|
}
|
|
}
|
|
|
|
@include display-xs(){
|
|
margin-top:REM(30px / 3);
|
|
.item {
|
|
width:100%;
|
|
padding:REM(15px / 3) REM(20px / 3);
|
|
border-bottom: 1px solid #c2c2c2;
|
|
margin-bottom:REM(30px / 3);
|
|
.thumbnail{
|
|
width:100%;
|
|
height:auto;
|
|
}
|
|
.item-info {
|
|
margin-bottom:REM(30px / 3);
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
&.inner{
|
|
.item {
|
|
width:50%;
|
|
padding:REM(10px) 0;
|
|
@include display-flex();
|
|
align-items: center;
|
|
|
|
.thumbnail {
|
|
width:REM(100px);
|
|
height:REM(100px);
|
|
margin:0;
|
|
flex-shrink:0;
|
|
}
|
|
|
|
.item-content {
|
|
padding-left:REM(15px);
|
|
padding-right:REM(15px);
|
|
.item-title {
|
|
font-size:REM(13px);
|
|
white-space: initial;
|
|
}
|
|
}
|
|
|
|
@include display-xs(){
|
|
width:100%;
|
|
padding:REM(12px / 3) REM(15px/ 3);
|
|
.thumbnail {
|
|
width:REM(150px / 3);
|
|
height:REM(150px / 3);
|
|
margin:0;
|
|
flex-shrink:0;
|
|
}
|
|
.item-content {
|
|
padding-left:REM(30px / 3);
|
|
.item-title {
|
|
font-size:REM(21px / 3);
|
|
white-space: initial;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&.shorts {
|
|
margin:0;
|
|
display:flex;
|
|
flex-wrap:wrap;
|
|
justify-content: space-between;
|
|
|
|
.item {
|
|
width:REM(153.1px);
|
|
padding:REM(20px) 0;
|
|
|
|
.thumbnail {
|
|
width:REM(153.1px);
|
|
height:REM(253px);
|
|
margin:0 0 REM(8px);
|
|
}
|
|
|
|
.item-content {
|
|
/*
|
|
.item-title {
|
|
display: -webkit-box;
|
|
-webkit-box-orient: vertical;
|
|
word-wrap:break-word;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
height: 1.28em * 2;
|
|
-webkit-line-clamp: 2;
|
|
line-height:1.28em;
|
|
white-space: normal;
|
|
word-break: break-all;
|
|
}
|
|
*/
|
|
}
|
|
}
|
|
|
|
@include display-xs(){
|
|
margin:0;
|
|
.item {
|
|
width:48%;
|
|
padding:REM(20px / 3) 0;
|
|
border-bottom: 1px solid #c2c2c2;
|
|
margin-bottom:REM(30px / 3);
|
|
&:nth-child(even) {
|
|
margin-left:2%;
|
|
}
|
|
.thumbnail {
|
|
width:100%;
|
|
height:auto;
|
|
}
|
|
.item-content {
|
|
.item-title{
|
|
font-size:REM(33px / 3);
|
|
margin-bottom:REM(12px / 3);
|
|
white-space:initial;
|
|
word-break: keep-all;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&.inner{
|
|
margin-top:0;
|
|
.item {
|
|
width:50%;
|
|
padding:REM(10px) 0;
|
|
@include display-flex();
|
|
align-items: center;
|
|
&:nth-child(even) {
|
|
margin-left:0;
|
|
}
|
|
.thumbnail {
|
|
width:REM(84px);
|
|
height:REM(126px);
|
|
margin:0;
|
|
flex-shrink:0;
|
|
}
|
|
|
|
.item-content {
|
|
padding-left:REM(15px);
|
|
padding-right:REM(15px);
|
|
.item-title {
|
|
font-size:REM(13px);
|
|
white-space: initial;
|
|
margin-bottom:0;
|
|
br {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
@include display-xs(){
|
|
width:100%;
|
|
padding:REM(12px / 3) REM(15px/ 3);
|
|
.thumbnail {
|
|
width:REM(84px / 3);
|
|
height:REM(126px / 3);
|
|
margin:0;
|
|
flex-shrink:0;
|
|
}
|
|
.item-content {
|
|
padding-left:REM(30px / 3);
|
|
.item-title {
|
|
font-size:REM(21px / 3);
|
|
white-space: initial;
|
|
}
|
|
.item-summary {
|
|
font-size:REM(18px / 3);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&.clips {
|
|
display:flex;
|
|
flex-wrap: wrap;
|
|
width:100%;
|
|
margin: REM(-20px) 0;
|
|
padding-bottom:REM(30px);
|
|
justify-content: space-between;
|
|
|
|
.item {
|
|
padding:REM(20px) 0;
|
|
width:REM(230.85px);
|
|
border-bottom:1px solid #c2c2c2;
|
|
|
|
.thumbnail {
|
|
width:REM(230.85px);
|
|
height:REM(129.6px);
|
|
}
|
|
|
|
.item-title {
|
|
font-size:REM(14px);
|
|
margin-top:REM(10px);
|
|
display: -webkit-box;
|
|
-webkit-box-orient: vertical;
|
|
word-wrap:break-word;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
height: 1.28em * 2;
|
|
-webkit-line-clamp: 2;
|
|
line-height:1.28em;
|
|
white-space: normal;
|
|
word-break: break-all;
|
|
}
|
|
|
|
.item-summary {
|
|
font-size:REM(13px);
|
|
height: 1.28em * 2;
|
|
-webkit-line-clamp: 2;
|
|
line-height:1.28em;
|
|
}
|
|
}
|
|
@include display-xs(){
|
|
margin:0 0 REM(15px / 3) 0;
|
|
padding-bottom:REM(15px / 3);
|
|
.item {
|
|
width:100%;
|
|
padding:REM(15px / 3) REM(5px / 3);
|
|
margin-bottom:REM(15px / 3);
|
|
border-bottom: 1px solid #c2c2c2;
|
|
.item-title{
|
|
margin-bottom:REM(12px / 3);
|
|
font-size:REM(33px / 3);
|
|
a {
|
|
> br {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
.thumbnail{
|
|
width:100%;
|
|
height:auto;
|
|
}
|
|
.item-summary {
|
|
font-size:REM(30px / 3);
|
|
a {
|
|
> br {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&.inner{
|
|
margin-top:0;
|
|
.item {
|
|
width:50%;
|
|
padding:REM(10px) 0;
|
|
@include display-flex();
|
|
align-items: center;
|
|
|
|
.thumbnail {
|
|
width:REM(105px);
|
|
height:REM(58px);
|
|
margin:0;
|
|
flex-shrink:0;
|
|
}
|
|
|
|
.item-content {
|
|
padding-left:REM(15px);
|
|
.item-title {
|
|
font-size:REM(13px);
|
|
white-space: initial;
|
|
br {
|
|
display: none;
|
|
}
|
|
}
|
|
.item-summary {
|
|
font-size:REM(12px);
|
|
br {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
@include display-xs(){
|
|
width:100%;
|
|
padding:REM(12px / 3) REM(15px/ 3);
|
|
.thumbnail {
|
|
width:REM(180px / 3);
|
|
height:REM(120px / 3);
|
|
margin:0;
|
|
flex-shrink:0;
|
|
}
|
|
.item-content {
|
|
padding-left:REM(30px / 3);
|
|
.item-title {
|
|
font-size:REM(21px / 3);
|
|
white-space: initial;
|
|
}
|
|
.item-summary {
|
|
font-size:REM(18px / 3);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.tag-container {
|
|
width:100%;
|
|
display:flex;
|
|
border:1px solid #b7b7b7;
|
|
padding: REM(10px);
|
|
align-items: stretch;
|
|
margin:REM(20px) 0 REM(25px) 0;
|
|
border-radius:REM(15px);
|
|
|
|
.tag-title {
|
|
flex-shrink: 0;
|
|
color:#000000;
|
|
margin-right:REM(25px);
|
|
display:flex;
|
|
align-items: center;
|
|
font-size:REM(18px);
|
|
padding:0 REM(20px);
|
|
}
|
|
|
|
.tag-list {
|
|
list-style:none;
|
|
padding:0;
|
|
margin:REM(-3px);
|
|
flex:1;
|
|
min-width:0;
|
|
display:flex;
|
|
flex-wrap:wrap;
|
|
|
|
li {
|
|
padding:REM(3px);
|
|
|
|
a {
|
|
display:flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
height:REM(28px);
|
|
border-radius:REM(14px);
|
|
background-color:#ffffff;
|
|
color:#464646;
|
|
font-size:REM(12px);
|
|
padding:0 REM(14px);
|
|
border:REM(1px) solid #b7b7b7;
|
|
}
|
|
|
|
&.active {
|
|
a {
|
|
background-color:#02256c;
|
|
color:#fff;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@include display-xs(){
|
|
padding:REM(20px / 3);
|
|
margin:REM(30px / 3) 0 REM(25px / 3);
|
|
border-radius:REM(15px / 3);
|
|
flex-direction: column;
|
|
.tag-title {
|
|
padding-left:0;
|
|
font-size:REM(33px / 3);
|
|
}
|
|
.tag-list {
|
|
margin:REM(-3px / 3);
|
|
flex:1;
|
|
min-width:0;
|
|
display:flex;
|
|
flex-wrap:wrap;
|
|
|
|
li {
|
|
padding:REM(6px / 3);
|
|
|
|
a {
|
|
height:REM(45px / 3);
|
|
border-radius:REM(20px / 3);
|
|
background-color:#ffffff;
|
|
color:#464646;
|
|
font-size:REM(24px / 3);
|
|
padding:0 REM(27px / 3);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|