@charset "UTF-8";
/*
body{
  background-color:#f4f6f7;
  }*/
main{
  width: 730px;
  margin: 0 auto;
}
  HTML{
    scroll-behavior: smooth;
    }
    html {
      scroll-padding-top: 200px;
  }
/* ＝＝＝▼▼▼共通パーツ系＝＝＝＝＝＝＝＝＝＝ */
.section{
  margin-bottom: 80px;
}
.section h2{
  font-size: 1.714rem;
  border-left: 5px solid #8f1e35;
  border-bottom: 1px solid #333;
  padding: 0 0 3px 10px;
  margin-bottom: 20px;
  font-family: "Hiragino", "Mincho ProN", "游明朝";
}
.section h2 span{
  display: block;
  font-size: 16px;
  margin-bottom: 5px;
}
.section h3{
  margin: 50px 0 20px 0;
  border-left: 10px solid #bdbdbd;
  border-bottom: 1px solid #bdbdbd;
  padding: 0 0.5em 0.2em 0.5em;
  font-weight: bold;
  font-size: 1.428rem;
  display:inline-block;
}

/*マウスホバーアニメーション*/
.l_mainContents a:hover a{
  transition:all .1s ease-out;
}
.l_mainContents a:hover a:hover{
  opacity:0.6;
}
/*対象階層アイコン*/
.icon{
  line-height:1.6;
  padding:0 0.5em;
  margin-right:0.5em;
  border-radius: 4px;
  font: bold 0.857rem Meiryo;
  text-align: center;
  white-space:nowrap;
}
.all{
  color:#e80000;
  border:solid 1px #e80000;
}
.pre-new{
  color:#09a2c6;
  border:solid 1px #09a2c6;
}
.new{
  color:#1eba2c;
  border:solid 1px #1eba2c;
}
.young{
  color:#00a99d;
  border:solid 1px #00a99d;
}
.mid-level{
  color:#ff9e1d;
  border:solid 1px #ff9e1d;
}
.leader{
  color:#cc1b5b;
  border:solid 1px #cc1b5b;
}
.manager{
  color:#8e6747;
  border:solid 1px #8e6747;
}
/*受講者レベルアイコン*/
.beginner{
  color:#1eba2c;
  border:solid 1px #1eba2c;
}
.intermediate{
  color:#ff9e1d;
  border:solid 1px #ff9e1d;
}
.advanced{
  color:#e80000;
  border:solid 1px #e80000;
}
/*公開講座、講師派遣アイコン*/
.koukai{
  color:  rgb(25,74,114);
  border:solid 1px rgb(25,74,114);
  width:6em;
}
.koushi{
  color:#A3170C;
  border:solid 1px #A3170C;
  width:6em;
}
/*太字、マーカー*/
.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;
}
/*キャプチャ付き説明*/
.balloon{
  margin: 30px 10px 40px 10px;
  padding: 20px;
  background-color: #F0F0F0;
  border-radius: 10px;
  position:relative;
  display: inline-block;
}
.balloon::after{
  position: absolute;
  content:"";
  left: 50%;
  top:99%;
  transform: translateX(-50%);
  border: 40px solid transparent;
  border-top: 20px solid #F0F0F0;
  width: 0;
  height: 0;
}
.balloon dt{
  margin-bottom: 1em;
}
.balloon dd{
  text-align: center;
}
.balloon_last{
  margin: 30px 10px !important;
  padding: 20px;
  background-color: #F0F0F0;
  border-radius: 10px;
  position:relative;
}
.balloon_last dt{
  margin-bottom: 1em;
}
.balloon_last dd{
  text-align: center;
}
.balloon_last img{
  border: 1px solid #575757;
}
.balloon dd img{
  border: 1px solid #575757;
}
/* ＝＝＝▼▼▼冒頭研修紹介＝＝＝＝＝＝＝＝＝＝ */
.fv{
  margin:10px 0 40px 0;
  background: url(../img/middle/training_journal/journal/fv_training_jornal_bk.jpg);
  background-size:100% auto;
  background-repeat: no-repeat;
}
.fv div {
  text-align: left;
  line-height: 1;
  font-weight: bold;
  padding:20px;
  display: inline-block;
  background-image: linear-gradient(90deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.8) 85%, rgba(255, 255, 255, 0.25) 95%, rgba(255, 255, 255, 0));
}
.fv div img{
  display: inline-block;
  margin-bottom:20px;
}
.content_name{
  font-size: 2.57rem;/*36px*/
  letter-spacing:0.2em;
  font-family: "Hiragino", "Mincho ProN", "游明朝";
  border-bottom:solid 1px #333;
  padding-bottom: 10px;
  margin-bottom:10px;
}
.training_name{
  font-size: 1.1428rem;/*16px*/
  letter-spacing:0.1em;
  font-family: "Hiragino", "Mincho ProN", "游明朝";
  line-height: 1.4;/*★？？*/
  margin-bottom:5px;
}
.fv div 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;
  background-color: #fff;
}
.introduction{
  margin-bottom:40px;
}
.training{
  margin-bottom:20px;
  box-shadow:0 4px 16px 0 rgba(0, 0, 0, .16);
}
.training a{
  display:flex;
  justify-content: flex-start;
  align-items:center;
  color:#5c5c5c;
}
.training a img{
  width:40%;
}
.training a dl{
  width:60%;
  padding:0 0 0 10px;
  font-weight:bold;
}
.training a dl dt{
  padding:5px;
  border-bottom:1px solid #dbdbdb;
}
.training a dl dd{
  font-size:14px;
  padding:5px;
}
/* 公開日更新日 */
.journal_day{
  display: flex;
}
.journal_day p{
  color: #979797;
  font-size: 12px;
}
.journal_day{
  margin-top: 5px;
}
.journal_day_upload::before{
  content: "公開日";
  border: 1px solid #979797;
  font-size: 12px;
  border-radius: 3px;
  margin-right: 5px;
  padding: 0 14px;
}
.journal_day_update::before{
  content: "更新日";
  border: 1px solid #979797;
  font-size: 12px;
  border-radius: 3px;
  padding: 0 14px;
  margin-right: 5px;
  margin-left: 15px;
}
/* ＝＝＝▼▼▼体験記の見出し部分３＝＝＝＝＝＝＝ */
.journal_list{
  width: calc(33.3333% - 20px); /* margin-right分を引きます */
  min-width:180px;
  margin:0 20px 40px 0;　/* 余白 */
}
.journal_list a{
  color:#5c5c5c;
}
.detail1 {
  position:relative;
  border-radius: 10px;
  box-shadow:0 4px 20px 0 rgba(0, 0, 0, .16);
  padding:10px;
  font-weight:bold;
  margin-bottom:15px;
}
 .detail1 dt{
  font-size:1.428rem;
  text-align: center;
}
.detail1 dd{
  font-size:1.0714rem;
  padding:10px;
  min-height:6em;
}
.detail1 dd::after{
  position: absolute;
  content:"";
  left: 50%;
  top:99%;
  transform: translateX(-50%);
  border: 10px solid transparent;
  border-top: 10px solid #FFF;
  width: 0;
  height: 0;
}
.detail2 dd{
  width:100px;
  height:100px;
  margin:0 auto;
}
.detail2 dt{
  padding:10px 0;
  text-align: center;
}


/* ＝＝＝▼▼▼体験記＝＝＝＝＝＝ */
.journal_box{
  padding:20px;
  box-shadow:0 4px 16px 0 rgba(0, 0, 0, .16);
  margin-bottom:20px;
  display: flex;
  justify-content: center;
  gap:20px;
  align-items:center;
}
.journal_box p{
  width:140px;
  height:140px;
}
.profile{
  padding-bottom:10px;
  color:#5c5c5c;
}
.profile dt{
  padding-bottom:0.5em;
}
.profile dd{
  font-size:1.142em;
  font-weight:bold;
}
.summary{
  border:solid 1px #dbdbdb;
  margin-left:0.5em;
}
.summary dl{
  display: flex;
  justify-content: flex-start;
  border-bottom:solid 1px #dbdbdb;
}
.summary dl:last-child{
  border-bottom:none;
}
.summary dt{
  background-color:#bdbdbd;
  color:#fff;
  min-width:7em;
  font-weight: bold;
  letter-spacing: 0.15em;
  text-align: center;
  padding:7px 5px;
}
.summary dd{
  background-color:#fff;
  padding:7px 1em 7px 1em;
}
.arrow_v{
  position:relative;
  border-bottom:solid 1px #fff;
}
.arrow_v::after{
  position: absolute;
  content:"";
  top:100%;
  left: 50%;
  border: 8px solid transparent;
  border-top: 8px solid #bdbdbd;
  width: 0;
  height: 0;
  transform:translateX(-50%);
}
.arrow_v::before{
  position: absolute;
  content:"";
  top:100%;
  left: 50%;
  border: 10px solid transparent;
  border-top: 10px solid #fff;
  width: 0;
  height: 0;
  transform:translateX(-50%);
}
.episode dl{
  padding:20px;
  position:relative;
  margin-bottom:30px;
}
.episode dl dt{
  border-bottom:1px solid #bdbdbd;
  /*padding-bottom:5px;*/
  font-size:1.142em;
  font-weight: bold;
}
.episode_icon{
  position: relative;
  display: inline-block;
  margin: 0 1em 0 -15px;
  padding: 0.2em 1em;
  color: #fff;
  border-radius: 0 100vh 100vh 0;
  background: #800019;
  box-shadow: 0px 3px 5px rgba(0, 0, 0, .2);
  width:10em;
  text-align: center;
}
.episode_icon:before {
  position: absolute;
  bottom: -10px;
  left: 0;
  width: 0;
  height: 0;
  content: '';
  border-top: 10px solid #6a0015;
  border-left: 10px solid transparent;
}
.episode dl dd{
  padding:15px 0 0 10px;
}
.episode dl::after{
  position: absolute;
  content:"";
  left: 50%;
  top:100%;
  transform: translateX(-50%);
  border: 25px solid transparent;
  border-top: 20px solid #eeeeee;
  width: 0;
  height: 0;
}
.episode dl:last-child:after{
  content:none;
}
/*------------★研修紹介----------------------------------*/
.training_type{
color:#333;
text-decoration:underline;
}
.training_link{
  margin:20px 0;
}
.training_link li{
  padding: 10px 10px 10px 20px;
  border-bottom:1px solid #dbdbdb
}
.training_link a{
  color:#404040;
  display: flex;
  align-items: center;
  transition:all .1s ease-out;
}
.training_link a::before{
  content:"";
  width:15px;
  height:15px;
  display: inline-block;
  padding-right:10px;
  background: url(../img/middle/training_journal/journal/arrow_before_orange.svg) no-repeat;
}
.point{
  font-weight:bold;
  display: flex;
  align-items: center;
  gap:7px;
  margin-bottom:5px;
  color:rgb(128, 0, 25);
}
.point::before{
  content:"";
  width:20px;
  height:30px;
  display: inline-block;
  padding-right:10px;
  background: url(../img/middle/training_journal/journal/arrow_hand_red.svg) no-repeat;
  background-size: 100%;
}
.supplement{
  background-color: rgb(255, 236, 202, .3);
  padding:20px;
  border-radius: 10px;
}
/* ＝＝＝TBレスポンシブここから＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */
@media screen and (max-width:768px) {
  /* ＝＝＝▼▼▼共通パーツ系＝＝＝＝＝＝＝＝＝＝ */
  .section h2{
    font-size: 1.571rem;/*22px*/
    margin-bottom: 10px;
  }
  .section h3{
    margin: 30px 0 20px 0;
    font-size:1.2857rem;/*18px*/
  }
  /*対象階層アイコン*/
  .icon{
    padding:0 0.3em;
  }
  /*公開講座、講師派遣アイコン*/
  .koukai{
    min-width:6em;
    margin-left:0.5em;
  }
  .koushi{
    min-width:6em;
    margin-left:0.5em;
  }
  /*改行*/
  .br_tb{
    display:block;
  }
  .br_pc{
    display:none;
  }
  /*要素を横並びにしたいdivに*/
  .box_flex{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin:20px 0;
    width: 100%; 
    gap:20px;
  }
  /*文字大きくして強調*/
  .emphasis{
    font-size:1.142em;
    font-weight:bold;
  }
  /*キャプチャ付き説明*/
  .balloon::after{
    border: 20px solid transparent;
    border-top: 15px solid #F0F0F0;
  }
   /* ＝＝＝▼▼▼冒頭研修紹介＝＝＝＝＝＝＝＝＝＝ */
  .fv{
    background-size: cover;
    box-shadow: 0 4px 16px 0 rgba(0, 0, 0, .16);
  }
  .fv div {
    background-color: rgba(255, 255, 255, 0.4);
    background-image: linear-gradient(90deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0.8) 80%, rgba(255, 255, 255, 0.25) 90%, rgba(255, 255, 255, 0));
  }
  .fv div img{
    display: none;
  }
  .content_name{
    font-size: 2rem;/*28px*/
    letter-spacing:0.2em;
    font-family: "Hiragino", "Mincho ProN", "游明朝";
    border-bottom:solid 1px #333;
  }
  .training_name{
    font-size: 1.1428rem;/*16px*/
    margin-bottom:10px;
  }
  .training a{
    display:flex;
    justify-content: flex-start;
    align-items:flex-start;
  }
  .training a img{
    width:40%;
  }
  .training a dl{
    width:60%;
    padding:10px 20px;
  }
  /*要素を横並びにしたいdivに*/
  .box_flex{
    margin:20px 0;
    justify-content: center;
    width: 100%; 
    gap:10px;
  }
    /* ＝＝＝▼▼▼体験記の見出し部分＝＝＝＝＝＝＝ */
    .journal_list{
    width: calc(33.3333% - 20px); 
    min-width:250px;
    margin:0 0px 20px 0;　/* 余白 */
    }
    .detail1 {
    margin-bottom:10px;
    }
    .detail1 dt{
    font-size:1.1428rem;
    }
  
  /* ＝＝＝▼▼▼体験記＝＝＝＝＝＝ */
  .journal_box{
    flex-direction: column;
    padding:20px;
    margin-bottom:15px;
    gap:10px;
  }
  .journal_box p{
    width:100px;
    height:100px;
  }
  .journal_box div{
    width:100%;
  }
  .profile{
    padding-bottom:10px;
  }
  .profile dt{
    padding-bottom:0.2em;
  }
  .profile dd{
    font-size:1.142rem;/*16px*/
  }
  .summary{
    margin-left:0;
  }
  .summary dt{
    min-width:6em;
    letter-spacing: 0.1em;
  }
  .summary dd{
    padding:7px;
  }
  .episode dl{
    padding:20px;
    margin-bottom:0px;
  }
  .episode dl dt{
    font-size:1.142rem;/*16px*/
    padding-bottom:5px;
  }
  .episode_icon{
    margin: 0 1em 0 -15px;
    padding: 0.2em 0.5em;
    border-radius: 100vh;
    width:10em;
    margin-bottom:5px;
    box-shadow: none;
  }
  .episode_icon:before {
    content: none;
  }
  .episode dl dd{
    padding:10px 0;
  }
  .episode dl::after{
    border: 20px solid transparent;
    border-top: 15px solid #eeeeee;
    top:95%;
  }
  /*------------★研修紹介----------------------------------*/
  .training_link li{
    padding: 10px;
  }
  .training_link a::before{
    padding-right:10px;
  }
}

/* ＝＝＝SPレスポンシブここから＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */
@media screen and (max-width:430px) {
  /* ＝＝＝▼▼▼共通パーツ系＝＝＝＝＝＝＝＝＝＝ */
  .section{
    margin-bottom: 50px;
  }
  .section h2{
    font-size: 1.4285rem;/*20px*/
    margin-bottom: 10px;
  }
  .section h3{
    margin: 20px 0 10px 0;
    border-left: 5px solid #bdbdbd;
  }
  /*対象階層アイコン*/
  .icon{
    line-height: 1.2;
    padding:0 0.2em;
  }
  /*改行*/
  .br_sp{
    display:block;
  }
  .br_tb{
    display:none;
  }
  /*中央揃えしたいdivに*/
  .box_center{
    text-align:center;
    margin:0;
  }
  /*キャプチャ付き説明*/
  .balloon{
    margin: 20px 0 30px 0;
    padding: 10px;
    text-align: left;
  }
  .balloon::after{
    border: 20px solid transparent;
    border-top: 15px solid #F0F0F0;
  }
  /*br*/
  .br_sp{
    display: block;
  }
  /* ＝＝＝▼▼▼冒頭研修紹介＝＝＝＝＝＝＝＝＝＝ */
    .fv{
      background-image: none;
      margin-bottom:20px;
    }
    .fv div {
      width:100%;
      text-align: center;/*★★左揃えかな～*/
      background-color: rgba(255, 255, 255, 0);
      background-image: linear-gradient(90deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.6) 90%, rgba(255, 255, 255, 0));
    }
    .content_name{
      font-size: 2rem;/*28px*/
      letter-spacing:0.2em;
      font-family: "Hiragino", "Mincho ProN", "游明朝";
      border-bottom:solid 1px #333;
      position:relative;
      display: flex;
      justify-content: center;
      align-items: center;
      gap:10px;
    }
    .training_name{
      font-size: 1rem;
      margin-bottom:10px;
    }
    .content_name::before{
      content:"";
      width:50px;
      height:20px;
      background:url(../img/middle/training_journal/h2_before.png) no-repeat;
    }
    .content_name::after{
      content:"";
      width:50px;
      height:20px;
      background:url(../img/middle/training_journal/h2_after.png) no-repeat;
    }
  .training a{
    display:block;
  }
  .training a img{
    width:100%;
  }
  .training a dl{
    width:100%;
    padding:10px;
  }
  .training a dl dt{
    padding:0;
    padding-bottom:5px;
  }
  .training a dl dd{
    font-size:14px;
    padding:0;
    padding-top:5px;
  }
    /* ＝＝＝▼▼▼体験記の見出し部分＝＝＝＝＝＝＝ */
    .journal_list{
    width: 100%;
    min-width:initial;
    margin-right:0px;
    }
    .detail1 {
    margin-bottom:10px;
    }
    .detail1 dd{
      font-size:1rem;/*14px*/
       min-height:initial
    }
  /* ＝＝＝▼▼▼体験記＝＝＝＝＝＝ */
  .journal_box{
    padding:20px 10px;
    margin-bottom:10px;
    gap:10px;
  }
  .journal_box p{
    width:100px;
    height:100px;
  }
  .profile{
    padding-bottom:10px;
    text-align: center;
  }
  .profile dd{
    font-size:1.1428rem;/*16px*/
  }
  .summary{
    margin-left:0em;
  }
  .summary dt{
    letter-spacing: 0.1em;
    padding:10px 0;
  }
  .summary dd{
    padding:10px;
  }
  .episode dl{
    padding:10px;
    margin-bottom:20px;
  }
  .episode dl dt{
    font-size:1rem;
  }
  .episode_icon{
    margin: 0 0 5px -15px;
    border-radius: 0 100vh 100vh 0;
    width:10em;
  }
  .episode dl dd{
    padding-top:5px;
  }
  .episode dl::after{
    top:100%;
    border: 20px solid transparent;
    border-top: 15px solid #eeeeee;
  }
  /*------------★研修紹介----------------------------------*/
  .training_link{
    margin:10px 0;
  }
  .training_link li{
    padding: 10px;
  }
  .training_link a::before{
    padding-right:20px;
  }
}