.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);
        }
      }
    }
  }
}