@charset "utf-8";

/*notification@index 通知一覧ページ*/
.notification-list{
    width: 100%;
    margin: 2%;
    height: auto;
}
.notification-list h1{
    width: 95%;
    border-bottom: 1.5px solid teal;
    font-size: 25px;
    margin-bottom: 2%;
}
.notification-title-body{
    display: flex;
}
.notification-content{
  height: auto;
  width: 95%;
  border-bottom: 1.5px solid teal;
  margin-bottom: 2%;
  transition: .3s;
  display: flex;
  border-radius: 5px;
  padding: 1%;
}
.notification-content h2{
    font-size: 25px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}
.already-check{
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
}
.notification-content p{
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}
.notification-content:hover{
    background-color: #DDDDDD;
    box-shadow: 0 15px 30px -5px rgba(0,0,0,.15), 0 0 5px rgba(0,0,0,.1);
  transform: translateY(-4px);
}
.notification-title{
    width: 92%;
}
.notification-title p{
    text-align: left;
}
.noCheck-notification-content{
  background-color: #ccffcc;
  border-radius: 5px;
  height: auto;
  width: 95%;
  border-bottom: 1.5px solid teal;
  margin-bottom: 2%;
  transition: .3s;
  display: flex;
  padding: 1%;
}
.noCheck-notification-content h2{
    font-size: 25px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}
.no-check{
    font-size: 25px;
}
.no-check h5{
    padding: 1%;
}
.noCheck-notification-content p{
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}
.noCheck-notification-content:hover{
    background-color: lightgreen;
    box-shadow: 0 15px 30px -5px rgba(0,0,0,.15), 0 0 5px rgba(0,0,0,.1);
  transform: translateY(-4px);
}

/*notification@show 通知詳細ページ*/
.header h3{
    width: 100%;
    color: white;
     overflow-wrap: break-word;
    font-family: "Helvetica Neue",
    Arial,
    "Hiragino Kaku Gothic ProN",
    "Hiragino Sans",
    Meiryo,
    sans-serif;
}

.notification-show{
    width: 100%;
    margin: 2%;
    height: auto;
}

.notification-show-body-content{
    margin-bottom: 2%;
}
.notification-show-body-content h1{
    width: 95%;
    border-bottom: 1.5px solid teal;
    font-size: 25px;
    margin-bottom: 1%;
}
.notification-show-body-content h4{
    width: 95%;
    font-size: 20px;
    overflow-wrap: break-word;
}
.notification-show-body-content p{
    width: 95%;
    font-size: 20px;
    overflow-wrap: break-word;
}
.notification-show-body-sub-content p{
    width: 95%;
    text-align: right;
    font-size: 18px;
}