@charset "UTF-8";

.middle{
  padding-bottom: 100px;
}
.clearfix:after{
  content: '';
  display: block;
  clear: both;
}

.prof figure.prof-photo{
  max-width: 100px;
  border-radius: 50%;
  overflow: hidden;
}
.prof .txt{
  font-weight: bold;
}

.prof .txt .name span{
  padding-left: 1em;
  font-size: 13px;
  font-weight: normal;
}
.prof .txt .ttl-prof{
  margin-top: 10px;
  font-size: 24px;
}
.prof .txt .date{
  text-align: right;
  font-size: 12px;
  color: #777;
}
.para{
  margin-top: 40px;
}
.para p + p{
  margin-top: 20px;
}
.clearfix:after{
    clear: both;
}
.photo span{
  margin-top: 5px;
  font-size: 11px;
}


/*slide*/
#slide-wrap{
  display: flex;
  flex-direction: column;
  justify-content: center;
}
#slider{
  margin:0 auto;
}
.slide-item img{
  width: 100%;
}
#thumbnail-list{
  margin: 0 auto;
  display: flex;
  justify-content: center;
  flex-wrap:wrap;
  align-self: center;
}
.thumbnail-item{
  flex: 0 1 30%;
  margin: 10px;
  box-sizing: border-box;
  position:relative;
  cursor: pointer;
  align-self: center;
}
.thumbnail-item:after{
  content:'';
  background-color: rgba(0,0,0,0.5);
  position:absolute;
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 1;
  transition: .3s opacity linear;
}
.thumbnail-item.thumbnail-current:after{
  opacity: 0;
}
.thumbnail-item.thumbnail-current:after img{
  width: 100%;
  margin: 0 auto;
}
.border{
  padding: 30px 10px;
  border: 1px solid #ddd;
}
h4.ttl-h4{
  color: #000;
}






@media only screen and (max-width: 768px) {
  #slider{
    width: 100%;
  }
  #thumbnail-list{
    width: 100%;
  }
  .prof figure.prof-photo{
    margin: 0px auto;
  }
  .prof .txt .ttl-prof{
    font-size: 22px;
  }
  .prof .txt .job{
    font-weight: normal;
    font-size: 15px;
  }
  .prof .txt .name{
    font-size: 18px;
  }
  .para .photo{
    width: 100%;
  }
  .para .photo.float-l{
    margin: 20px auto;
  }
  .para .photo.float-r{
    margin: 20px auto;
  }
}
@media print, screen and (min-width: 769px) {
  #slider{
    width: 300px;
  }
  #thumbnail-list{
    width: 300px;
  }
  .prof figure.prof-photo{
    width: 10%;
  }
  .prof .txt{
    width: 88%;
  }
  .prof .txt .job{
    font-weight: normal;
    font-size: 13px;
  }
  .prof .txt .name{
    font-size: 16px;
  }
  .para .photo{
    width: 30%;
  }
  .para .photo.float-l{
    margin-right: 20px;
    float: left;
  }
  .para .photo.float-r{
    margin-left: 20px;
    float: right;
  }

}