/* #Article
   -------------------------------------------------------------------------- */
/*doc
---
title: article
name: article
categories: [project]
---

記事に関するコンポーネントです。

```block
```
*/

.p-article{
  &-wrap{
    @include pc{
      padding: 30px 35px 50px;
    }
  }

  &__content{
    .meeting-member{
      margin-bottom: 15px;
    }
    .meeting-ttl{
      @include pc{
        margin-bottom: 3px;
      }
    }
    .meeting-time{
      margin-bottom: 25px;
    }
  }
  &__txt{
    margin-bottom: 15px;
    max-height: 100%;
  }
  &__pdf{
    display: flex;
    justify-content: space-between;
    margin-bottom: 25px;
    &__btn{
      width: 100%;
      margin-right: 10px;
    }
  }
  &-btn{
    &-list{
      display: flex;
      justify-content: space-between;
      padding-bottom: 25px;
    }
    &__item{
      width: 23.5%;
      a{
        @include sp{
          font-size: 1.5rem;
        }
      }
    }
  }
  .meeting-member-count{
    @include sp{
      display: none;
    }
  }
  .meeting-member__item{
    .avatar{
      @include sp{
        width: 38px;
        height: 38px;
      }
      @include min{
        width: 30px;
        height: 30px;
      }
    }
  }
  .meeting-member-link{
    @include sp{
      margin-bottom: 20px;
    }
  }
}
.p-article__context{
  width: 100%;
}
.p-article__content{
  width: 100%;
}
.p-file{
  &-list{
    margin-bottom: 25px;
    max-width: 700px;
  }
  &-for{
    border: 1px solid rgba(36,77,138,.1);
    border-radius: 6px;
    margin-bottom: 15px;
    width: 100%;
    img{
      width: 100%;
      height: 100%;
      object-fit: contain;
    }
  }
  &-nav{
    display: flex;
    align-items: center;
    overflow-x: auto;
    width: 100%;
    max-width: 100%;
    @include pc{
      max-width: 495px;
    }
    figure{
      width: calc((100% - 220px) / 3);
      min-width: 54px;
      margin-right: 10px;
      border: 1px solid rgba(36,77,138,.1);
      transition: all .2s ease-out;
      cursor: pointer;
      overflow: hidden;
      position: relative;
      @include pc{
        &:hover{
          opacity: 0.8;
        }
      }
      &:before{
        content: "";
        display: block;
        padding-top: 100%;
      }
      img{
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        margin: auto;
        -o-object-fit: contain;
        object-fit: contain;
        font-family: "";
      }
    }
  }
  &-image{
    display: flex;
    flex-wrap: wrap;
    margin: 8px -6px;
    align-items: center;
    justify-content: space-between;
    figure{
      width: calc(20% - 12px);
      overflow: hidden;
      margin: 10px 5px 0;
      border: 1px solid rgba(36,77,138,.1);
      transition: all .2s ease-out;
      position: relative;
      @include pc{
        &:hover{
          opacity: 0.8;
        }
      }
      &:before{
        content: "";
        display: block;
        padding-top: 100%;
      }
      &:last-child{
        @include sp{
          margin-right: auto;
        }
      }
      img{
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        margin: auto;
        object-fit: cover;
        font-family: 'object-fit: cover;';
      }
      &.image-upload{
        cursor: pointer;
        img{
          object-fit: contain;
        }
        
      }
      
    }
  }
}