@charset "UTF-8";
/* ＝＝＝▼▼▼共通パーツ系＝＝＝＝＝＝＝＝＝＝ */
/*マウスホバーアニメーション*/
.section a{
  transition:all .1s ease-out;
}
.section a:hover{
  opacity:0.6;
  box-shadow: 0 4px 10px 0 rgba(0, 0, 0, .3);
}
/*太字、マーカー*/
.b{
  font-weight:bold;
}
.orange{
  color: #CC6600;
  font-weight: bold;
}
.red{
  color: #8f1e35;
  font-weight: bold;
}
.marker_orange{
  background:linear-gradient(transparent 70%, rgb(255, 236, 202) 60%);
}
/*注釈*/
.note{
  font-size:0.75rem;
  color:#999;
  font-style:italic;
}
/*改行*/
.br_tb{
  display:none;
}
.br_sp{
  display:none;
}
/*中央揃えしたいdivに*/
.box_center{
  text-align:center;
  margin:30px 0;
}
/*要素を横並びにしたいdivに*/
.box_flex{
  display: flex;
  flex-wrap: wrap;
  margin:30px 0;
  justify-content: flex-start;
  width: calc(100% + 20px); 
}
/*文字大きくして強調*/
.emphasis{
  font-size:1.3em;
  font-weight:bold;
}
.section{
  margin-bottom: 80px;
}
.section h2{
  font-size: 1.714rem;
  padding: 0 0 3px 10px;
  margin-bottom: 20px;
  font-family: "Hiragino", "Mincho ProN", "游明朝";
  text-align: center;
  background-image: url(../img/middle/training_journal/h2_bk.png);
  background-position: bottom -8px left 60%;
  background-repeat: no-repeat;
  position:relative;
  display: flex;
  justify-content: center;
  align-items: center;
  gap:15px;
}
.section h2::before{
  content:"";
  width:50px;
  height:20px;
  background:url(../img/middle/training_journal/h2_before.png) bottom no-repeat;
}
.section h2::after{
  content:"";
  width:50px;
  height:20px;
  background:url(../img/middle/training_journal/h2_after.png) bottom no-repeat;
}
/* ＝＝＝▼冒頭＝＝＝＝＝＝＝＝＝＝ */
.fv{
  position:relative;
  margin:10px 0 20px 0;
}
.introduction{
  margin-bottom:40px;
  line-height: 1.7;
}

/* ＝＝＝▼体験記一覧＝＝＝＝＝＝＝ */
.list{
  display: flex;
  flex-wrap:wrap;
  align-items: normal;
  justify-content: flex-start;
  gap:20px;
}
.thumbnail{
  width:30%; 
  min-width:230px;
}
.thumbnail a{
  color:#606060;
  display:inline-block;
  box-shadow: 0 3px 5px 0 rgba(0, 0, 0, .16);
  border-radius:10px;
  display: block;
  border:1px solid #cccccc;
}
/*サムネイル上半分*/
.thumbnail_title{
  font-weight: bold;
  position:relative;
}
.thumbnail_title figure{
  border-radius:10px 10px 0 0;
/*  width: 100%;
  height: 130px;
  object-fit: cover;*/
  overflow: hidden;
  margin-bottom:4em;
}
.thumbnail_title figure img{
  width: auto;
  height: 130px;
  object-fit: cover;
}
.thumbnail_title p{
  width:90%;
  height:4.5em;/*長すぎる研修名がでてきた場合はここを調整*/
  padding:5px 10px;
  position: absolute;
  bottom:-2.5em;/*長すぎる研修名がでてきた場合はここを調整*/
  left:50%;
  transform: translateX(-50%);
  background-color: rgb(255, 255, 255, .85);

}
/*サムネ下半分*/
.thumbnail_detail {
  padding:0px 15px 15px 15px;
}
.thumbnail_detail_date{
  font-size:0.85rem;
  font-weight: bold;
  color:#B1B1B1;
  padding:5px 0;
  border-top:solid 1px #CCCCCC;
}
/*体験コメント*/
.thumbnail_detail div{
  display: flex;
  gap:10px;
  height: 3.7em;
  margin-bottom:15px;
  overflow: hidden;
}
.thumbnail_detail div figure{
  min-width:45px;
  height: auto;
}
.thumbnail_detail div p{
  font: bold 0.85rem Meiryo;
  position: relative;
}
.thumbnail_detail div p::after {
    content: '';
    display: block;
    position: absolute;
    right: 0;
    bottom: 0;
    width: 2.5em;
    height: 1.2em;
    background: linear-gradient(to left, #ffffff, rgb(255 255 255) 15%, rgba(255, 255, 256, 0) 90%);
}
/*カテゴリー*/
.thumbnail_detail ul{
  height: 3.5em;/*長すぎるコメントがでてきた場合はここを調整*/
}
.thumbnail_detail ul li{
  font: bold 0.85rem Meiryo;
  display: inline-block;
  padding: 0.1em 0.4em;
  border-radius: 4px;
  text-align: center;
  color:#f7920f;
  border:solid 1px #f7920f;
}
/* ＝＝＝▼研修を探す＝＝＝＝＝＝＝ */
.list_link{
  width:100%; 
}
.thumbnail_link{
  margin-bottom:20px;
}
.thumbnail_link a{
  color:#606060;
  box-shadow: 0 4px 20px 0 rgba(0, 0, 0, .16);
  border-radius:10px;
  padding:15px;
  display: flex;
  gap:15px;
}
.thumbnail_link figure{
  max-width: 150px;
  max-height: 150px;
}
.thumbnail_link dl dt{
  font-weight: bold;
  font-size:1.285rem;
  padding-bottom:5px;
  margin-bottom:5px;
  border-bottom:solid 1px #B1B1B1;
}


/* ＝＝＝TBレスポンシブここから＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */
@media screen and (max-width:768px) {
  /* ＝＝＝▼▼▼共通パーツ系＝＝＝＝＝＝＝＝＝＝ */
  /*改行*/
  .br_pc{
    display:none;
  }
  /* ＝＝＝▼体験記一覧＝＝＝＝＝＝＝ */
  .thumbnail{
    width:45%; 
  }
  .list{
    justify-content: center;
  }
  /* ＝＝＝▼研修を探す＝＝＝＝＝＝＝ */
  .thumbnail_link figure{
    max-width: 130px;
    max-height: 130px;
    min-width: 130px;
    min-height: 130px;
  }
}

/* ＝＝＝SPレスポンシブここから＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */
@media screen and (max-width:430px) {
  /* ＝＝＝▼▼▼共通パーツ系＝＝＝＝＝＝＝＝＝＝ */
  /*改行*/
  .br_sp{
    display:block;
  }
  .section{
    margin-bottom: 50px;
  }
  .section h2{
    font-size: 1.428rem;
  }
  /* ＝＝＝▼冒頭＝＝＝＝＝＝＝＝＝＝ */
  .introduction{
    line-height: 1.5;
    width:95%;
    margin:20px auto;
  }
  /* ＝＝＝▼体験記一覧＝＝＝＝＝＝＝ */
  .list{
    display: flex;
    flex-wrap:wrap;
    align-items: normal;
    gap:20px;
  }
  .thumbnail{
    width:95%; 
    max-width:320px;
    min-width:initial;
  }
  /*サムネイル上半分*/
  .thumbnail_title{
    margin-bottom:4em;
  }
  .thumbnail_title p{
    width:90%;
  }
  /*サムネ下半分*/
  .thumbnail_detail {
    padding:0px 15px 15px 15px;
  }
  .thumbnail_detail_date{
    padding:5px 0;
  }
  /*体験コメント*/
  .thumbnail_detail div{
    margin-bottom:10px;
    align-items: center;
  }
  /*カテゴリー*/
  .thumbnail_detail ul{
    height:initial;
  }
  /* ＝＝＝▼研修を探す＝＝＝＝＝＝＝ */
  .list_link{
    width:95%;
    margin:0 auto;
  }
  .thumbnail_link a{
    border-radius:5px;
  }
  .thumbnail_link figure{
    min-width: 90px;
    min-height: 90px;
  }
  .thumbnail_link dl dt{
    font-size:1rem;
  }
  
}