@charset "UTF-8";

html {
  scroll-behavior: smooth;
  scroll-padding-top: 130px;
}
/*-------------共通-----------------------------------*/
.note_gray{
  font-size:0.857rem;/*12px*/
  color:#a5a5a5;
}
.marker_yellow{
  font-weight:bold;
  background:  linear-gradient(transparent 70%, #fee696de 70%);
}
.br_sp{
  display:none;
}
/*-------------お問合せボタン-----------------------------------*/
.c-assessment__button {
  text-align: center;
  margin: 0 auto;
  width:65%;
}
.c-assessment__button a{
  padding: 15px;
  color: #fff;
  font-size: 20px;
  font-weight: bold;
  background: linear-gradient(#FF8021, #F14124);
  border-radius: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15px;
  box-sizing: border-box;
  border: none; /* ボーダーを削除 */
  box-shadow: 0 0 0 3px transparent; /* 初期状態の透明なシャドウ */
  transition: all 0.3s ease;
}
.c-assessment__button a::before {
  content: "";
  width: 22px;
  height: 20px;
  background: url(../img/middle/assessment/dx-promotion/icon_sec7-mail.svg);
  display: inline-block;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}
.c-assessment__button a::after {
  content: "〉";
  transition: all .2s ease-out;
}
.c-assessment__button a:hover{
  color: #F14124;
  background: #fff;
  box-shadow: 0 0 0 3px #F14124; /* ホバー時に色付きのシャドウを追加 */
}
.c-assessment__button a:hover::before{
  content: "";
  width: 22px;
  height: 20px;
  background: url(../img/middle/assessment/dx-literacy/img_sec7-mail-hover.svg);
  display: inline-block;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}
/*-------------FV, nav-----------------------------------*/
.nav{
  padding:15px 0;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  box-shadow: 0px 5px 15px #EAEAEA;
}
.nav li a{
  color:#404040;
}
.nav li a:hover{
  opacity:0.6;
}
.nav li{
  padding:0 15px;
  border-right:1px solid #D3D3D3;
}
.nav li:last-child{
  border-right:none;
}
/*-------------section共通-----------------------------------*/
.sec{
  width:100%;
  padding:0 30px 50px;
}
.sec h2{
  padding-top:50px;
  font-size:1.8571rem;/*26px*/
  display:flex;
  justify-content: center;
  flex-direction:row;
  align-items: flex-end;
  gap:15px;
  margin-bottom:30px;
}
.sec h2::before{
  content:"";
  width:30px;
  height:30px;
  background:url(../img/middle/training_type/new/ttl_before_v5.svg) no-repeat;
 }
.sec h2::after{
  content:"";
  width:30px;
  height:30px;
  background:url(../img/middle/training_type/new/ttl_before_v5.svg) no-repeat;
}
.mb15{
  margin-bottom: 15px;
}
.mb30{
  margin-bottom: 30px;
}
.mb50{
  margin-bottom: 50px;
}
.mb80{
  margin-bottom: 80px;
}
.center{
  text-align: center;
}
/*------------section1-----------------------------------------------*/
.sec1{
  background-image: linear-gradient(180deg, rgba(255, 255, 255, .1) 8%, rgba(247, 247, 247, 1) 10%, rgba(247, 247, 247, .8));
}
.type_thumbs{
  display:flex;
  justify-content: center;
  flex-wrap: wrap;
  box-shadow: 0px 5px 20px #D3D3D3;
  box-sizing: border-box;
  border-radius: 10px;
  margin-bottom:50px;
}
.type_thumbs li{
  width:calc(100%/3);
  border-right:1px solid #E2E2E2;
  transition: all .2s ease;
  background-color: #fff;
}
.type_thumbs li:last-child{
  border-right:none;
}
.type_thumbs li p{
  margin-bottom: 0px;
}
.type_thumbs li a{
  color:#404040;
  display:block;
  padding:20px;
}
.type_thumbs li a figure{
  margin:15px 0;
  text-align:center;
}
.type_name{
  font-size:1.285rem;/*18px*/
  font-weight: bold;
  text-align: center;
  padding-bottom:20px;
}
.type_thumbs li div{
  padding:5px 0 15px 0;
  margin:0 auto;
}
.online{
  color:#1D5B7A;
  border-radius: 4px;
  font: normal bold 12px Meiryo;
  border: 1px solid #1D5B7A;
  display: inline-block;
  text-align: center;
  width:6.5em;
  margin-right:5px;
  padding:0.05em 0;
}
.offline{
  color:#A53030;
  border-radius: 4px;
  font: normal bold 12px Meiryo;
  border: 1px solid #A53030;
  display: inline-block;
  text-align: center;
  width:6.5em;
  padding:0.05em 0;
}
.type_thumbs li:hover{
  box-shadow: 0px 5px 30px #D3D3D3;
  border-radius: 10px;
  transform: translateY(-2px);
}
/*各受講形態の詳細（共通）*/
.type_detail{
  padding:30px;
  /*box-shadow: 0px 5px 30px #D3D3D3;*/
  box-sizing: border-box;
  position: relative;
  margin-bottom: 80px;
  background-color: #fff;
}
.type_detail::after{
  position: absolute;
  content: "";
  left:50%;
  top:100%; 
  transform: translateX(-50%);
  border:40px solid transparent;
  border-top: 25px solid #fff;
  width: 0;
  height: 0;
}
.type_detail:last-child{
  margin-bottom: 0;
}
.type_detail:last-child::after{
  content:none;
}
.type_detail h3{
  border-left:6px solid #ea6619;
  font-size:20px;
  padding-left:15px;
  line-height: 1.3;
}
.type_detail figure{
  margin-bottom:30px;
}
.type_detail dl{
  margin-bottom:30px;
}
.type_detail dl:last-child{
  margin-bottom:0px;
}
.type_detail dl dt{
  font-weight: bold;
  padding-bottom:10px;
  border-bottom:1px solid #E2E2E2;
  font-size:16px;
}
.type_detail dl dd{
  padding-top:10px;
}
.links li {
  margin-bottom:10px;
}
.links li a{
  display:inline-block;
  text-decoration: underline;
}
.links li a::before{
  content:"・";
}
.links li a::after{
  content:"";
  display: inline-block;
  width:13px;
  height:13px;
  margin-left:5px;
  background: url(../img/middle/training_top/icon_sec4-position-link.svg) no-repeat;
  background-repeat: no-repeat;
  background-size: contain;
  background-position:bottom;
}
.links li a:hover {
  opacity:0.6;
}
.links li a{
  color:#404040;
}
/*各受講形態の詳細（講師派遣）*/
.btn_min{
  display: inline-block;
  color:#fff;
  background-color: #ea6619;
  font-size: 0.8571rem;/*12px*/
  padding:0.8em 1.5em 0.8em 2em;
  font-weight: bold;
  border-radius: 5px;
}
.btn_min::after{
  content: "〉";
  margin-left:1em;
}
.dd_contact{
  width:100%;
  display: flex;
  justify-content: space-between;
  gap:15px;
}
.dd_contact_btn{
  min-width:14em;
  margin-bottom:0;
}
.btn_min:hover{
opacity:.6;
}

/* お申込みから受講までの流れ（共通） */
.flow{
  display:flex;
  text-align: center;
  flex-wrap: wrap;
}
.flow li{
  border-right: 2px dotted #E2E2E2;
  padding-bottom:15px;
}
.flow li:last-child{
  border-right: none;
}
.flow li dl{
  border-right: #E2E2E2;
}
.flow li dl dt{
  border: none;
  padding-bottom:0;
}
.flow li dl dd{
  font-size: 1rem;
  font-weight: bold;;
}
.flow li:before {
  content: '';
  width: 16px;
  height: 16px;
  background: #CC660066;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  right: -10px;
  margin-top: -9px;
}
.flow li:after {
  content: '';
  width: 5px;
  height: 5px;
  border: 0;
  border-top: solid 2px #fff;
  border-right: solid 2px #fff;
  position: absolute;
  top: 50%;
  right: -4px;
  margin-top: -4px;
  transform: rotate(45deg);
}
.flow li:last-child::before {
  display: none;
}
.flow li:last-child::after {
  display: none;
}
ul li dl dt:nth-child(2) {
  font-weight: bold;
  margin: 10px 0;
}
/* お申込みから受講までの流れ（個別：講師） */
.flow_koushi li {
  width: calc(100%/7);
  position: relative;
}
/* お申込みから受講までの流れ（個別：公開、eラーニング） */
.flow_koukai li {
  width: calc(100%/4);
  position: relative;
}
.flow_koukai li dl dt{
  background-color: #AAAAAA;
  color:#fff;
  font-size:1rem;
  border-right:solid 1px #fff;
  border-left:solid 1px #fff;
  line-height: 2;
}
.who{
  display: block;
  margin-top:1em;
  font-size:0.8571rem;/*12px*/
  font-weight: normal;
}
.koukai_online{
  color:#1D5B7A;
  border-radius: 4px;
  font: normal bold 12px Meiryo;
  border: 1px solid #1D5B7A;
  display: inline-block;
  text-align: center;
  width:14em;
  margin-bottom:5px;
  padding:0.05em 0;
}
.koukai_offline{
  color:#A53030;
  border-radius: 4px;
  font: normal bold 12px Meiryo;
  border: 1px solid #A53030;
  display: inline-block;
  text-align: center;
  width:14em;
  margin-bottom:5px;
  padding:0.05em 0;
}

/*★各受講形態の詳細（公開講座）*/
.sec1 ol{
  list-style-type:decimal;
  padding:10px 0 15px 30px;
}
.reccomended{
  color:#fff;
  border-radius: 4px;
  font: normal bold 12px Meiryo;
  background: #ea6619;
  display: inline-block;
  text-align: center;
  width:80px;
  padding:0.05em 0;
  margin-left:10px;
}
/*PR情報（WEBinsource、スマートパック）*/
.pr_box{
  margin:50px 0;
  letter-spacing: 0;
}
.pr_box:last-child{
  margin:50px 0 0 0;
}
.pr_box-copy{
  text-align: center;
  font-weight: bold;
  color: #1b1464;
  font-size:18px;/*18px*/
  margin-bottom: 15px;
}
.pr_box-copy::before{
  content:"＼　";
  font-weight: bold;
}
.pr_box-copy::after{
  content:"　／";
  font-weight: bold;
}
.pr_box-detail{
  display: flex;
  background-color: #fff;
  border: 1px solid #1b1464;
}
.pr_box-detail div{
  width:50%;
}
.pr_box-detail div dl {
  text-align: center;
  padding: 30px;
}
.pr_box-detail div p{
  background-color: #1b1464;
  color:#fff;
  font-weight: bold;
  text-align: center;
  font-size:16px;
  position: relative;
  padding: 0.05em;
}
.pr_box-detail-webins p::before{
  content: "";
  width: 0;
  height: 0;
  border-bottom: 11px solid transparent;
  border-left: 11px solid #fff;
  border-top: 16px solid transparent;
  position: absolute;
  top: 0;
  right: -10px;
  z-index:5;
}
.pr_box-detail-webins p::after{
  content: "";
  width: 0;
  height: 0;
  border-bottom: 11px solid transparent;
  border-left: 11px solid #1b1464;
  border-top: 15px solid transparent;
  position: absolute;
  top: 0;
  right: -8px;
  z-index:6;
}
.pr_box-detail-webins dl{
  border-right: 1px solid #ddd;
}
.pr_box-detail dl dt{
  margin-bottom:20px;
  height:50px;
  border-bottom:none;
}
.pr_box-detail dl dt img{
  max-width:90%;
  height:50px;
}
.b{
  font-weight: bold;
}
.pr_box-detail div dl dd {
  margin-bottom: 15px;
  line-height: 1.6;
}
.pr_box-detail div dl dd:last-child {
  margin-bottom: 0;
}
.pr_box-detail-dd{
  min-height: 7.5em;
  text-align: left;
}
/*ボタン*/
.pr_box-detail_btn {
  display: inline-block;
  width:100%;
  font-size: 16px;
  font-weight: bold;
  letter-spacing: 0px;
  color:#fff;
  background-color: #ea6619;
  padding: 10px 0;
  box-shadow: 0px 2px 6px #CCCCCC;
  border-radius: 25px;
  transition: all 0.3s ease;
  display: flex;
  justify-content: center;
  align-items: center;
  gap:15px;
}
.pr_box-detail_btn::after {
  content:"";
  display: inline-block;
  width:20px;
  height:20px;
  background: url(../img/middle/info-ranking-new/icon_btn_arrow-h-hover.svg) no-repeat;
  background-size: cover;
}
.pr_box-detail_btn:hover {
  opacity:.6;
}

/*------------section2-----------------------------------------------*/
.container {
  margin-inline: auto;
  overflow-x: auto; /* tableタグのはみ出た要素を隠す */
  white-space: wrap; /* テキストの折り返しなし */
  width:100%;
  box-shadow: 0px 5px 20px #D3D3D3;
  box-sizing: border-box;
}
.sec2 table th {
  color:#555555;
  padding: 15px;
  min-width:40px;
  background:#aaaaaa4f;
  font-weight:bold;
  border-bottom:1px solid #ffffff;
  border-right:1px solid #ffffff;
}
.sec2 table tr{
  border-bottom: 1px solid #E2E2E2;
}
.sec2 table td {
  padding: 15px;
  transition:all .3s ease-out;
  border:1px solid #E2E2E2;
}
.sec2 table td:not(.item):hover{
  background-color: #e9872632;
}
.type{
  width:calc(85%/3);
}
.item{
  background:#aaaaaa4f;
  text-align: center;
  color:#555555;
  font-weight:bold;
}
.item:last-child{
  border:none;
}
.sec2 table tr td:first-child{
  border-bottom: 1px solid #fff;
}
/*------------section3-----------------------------------------------*/
.sec3 ul{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.sec3 ul li{
  width:calc(100%/2);
  border-bottom:1px solid #dbdbdb
}
.sec3 ul li a{
  color:#404040;
  display: flex;
  align-items: center;
  padding: 15px 0 15px 30px;
}
.sec3 ul li a::before{
  content:"";
  width:15px;
  height:15px;
  display: inline-block;
  margin-right:15px;
  background: url(../img/middle/training_type/03_faq_before.svg) no-repeat;
}
.sec3 ul li a:hover{
  opacity:0.6;
}
/*------------section4-----------------------------------------------*/
.sec4 p{
  text-align: center;
}

/*************************************
レスポンシブTB
*************************************/
@media screen and (max-width: 768px){
  .marker_sp{
    font-weight:bold;
    background:  linear-gradient(transparent 70%, #fee696c3 50%);
  }
  .br_pc{
    display:none;
  }
    /* 問合せボタン */
  .c-assessment__button {
    width:100%;
  }
  .c-assessment__button a{
    padding: 15px;
    font-size: 18px;
    gap:15px;
  }
  .c-assessment__button a::before {
    width: 18px;
    height: 16px;
  }
  .c-assessment__button a:hover::before{
    width: 18px;
    height: 16px;
  }
   /*------------section1-----------------------------------------------*/
    /* お申込みから受講までの流れ（共通） */
    .flow{
      display:block;
    }
    .flow li{
      border-right: none;
      border-bottom: 2px dotted #E2E2E2;
      padding-bottom:10px;
    }
    .flow li:last-child{
      border-bottom: 2px dotted #E2E2E2;
    }
    .flow li dl{
      display: flex;
      gap:10px;
      align-items: center;
      border-right: none;
    }
    .flow li dl dt{
      border: none;
      padding-bottom:0;
      padding-top: 5px;
    }
    .flow li dl dd{
      font-size:0.8571rem;/*12px*/
    }
    .flow li:before {
      content: none;
    }
    .flow li:after {
      content: none;
    }
    .flow li:after {
        position: absolute;
        content: "";
        left:50%;
        top:105%; 
        transform: translateX(-50%);
        border:8px solid transparent;
        border-top: 10px solid #CC660066;
        width: 0;
        height: 0;
    }
    .online{
      font-size:10px;
    } 
    .offline{
      font-size:10px;
    } 
    /*各受講形態の詳細（共通）*/
    .type_detail h3{
      font-size:1.285rem;/*18px*/
    }
    .type_detail dl dt{
      font-size:1rem;
    }
    /*★各受講形態の詳細（公開講座）*/
    .reccomended{
      font-size:10px;
    } 
    /* お申込みから受講までの流れ（個別：講師） */
    .flow_koushi li {
      width: 100%;
    }
    /* お申込みから受講までの流れ（個別：公開、eラーニング） */
    .flow_koukai li {
      width: 100%;
    }
    .flow_koukai li dl{
      padding:10px 0 5px 0px;
    }
    .flow_koukai li dl dt{
      background-color: #fff;
      color:#404040;
      border-right:none;
      border-left:none;
      line-height: 1.2;
      width:12em;
      text-align: left;
      padding-left: 15px;
      font-size:0.8571rem;/*12px*/
    }
    .flow_koukai li dl dd{
      text-align: left;
      line-height: 1.2;
      border-left:1px solid #E2E2E2;
      padding-left: 15px;
    }
    .koukai_online{
      font-size:10px;
    } 
    .koukai_offline{
      margin-top:15px;
      font-size:10px;
    } 
  /*PR情報（WEBinsource、スマートパック）*/
    .pr_box{
      margin-top: 50px;
    }
    .pr_box-copy{
      font-size:16px;/*16px*/
      padding:0;
    }
    .pr_box-copy::before{
      content:"▼ ";
      font-weight: bold;
    }
    .pr_box-copy::after{
      content:none;
    }
    .pr_box-detail{
      display: block;
      border:1px solid #1b1464;
    }
    .pr_box-detail div{
      width:100%;
    }
    .pr_box-detail div p{
      font-size: 1rem;
      position: relative;
    }
    .pr_box-detail-webins p::before{
      content: none;
    }
    .pr_box-detail-webins p::after{
      content: none;
    }
    .pr_box-detail-webins dl{
      border-right: none;
    }
    .pr_box-detail dl dt{
      margin-bottom:20px;
      height:initial;
    }
    .pr_box-detail div dl dd {
      margin-bottom: 15px;
      font-size: 1rem;
      line-height: 1.6;
    }
    .pr_box-detail div dl dd:last-child {
      margin-bottom: 0;
    }
    .pr_box-detail-dd{
      min-height: initial;
    }
    /*ボタン*/
    .pr_box-detail_btn {
      padding:10px;
    }
    /*------------section2-----------------------------------------------*/
    .container {
      /*box-shadow: 0px 5px 20px #D3D3D3;*/
      box-shadow: none;
      border:solid 2px #E2E2E2;
    }
    .sec2 table {
      width: 700px; /* tableタグの親要素より広く */
      font-size: 12px;
    }
    .sec2 table th {
      padding: 5px;
    }
    .sec2 table td {
      padding: 5px 10px;
    }
    .type{
      width:calc(85%/3);
    }

}

/*************************************
レスポンシブSP
*************************************/
@media screen and (max-width: 430px){
  html{
    scroll-behavior: smooth;
    scroll-padding-top: 50px;
  }
  .br_sp{
    display:block;
  }
    /* 問合せボタン */
  .c-assessment__button {
    width:100%;
  }
  .c-assessment__button a{
    padding: 15px;
    font-size: 18px;
    gap:15px;
  }
  .c-assessment__button a::before {
    width: 18px;
    height: 16px;
  }
  .c-assessment__button a:hover::before{
    width: 18px;
    height: 16px;
  }
  /*-------------FV, nav-----------------------------------*/
  .nav{
    padding:10px 0;
    display: block;
    box-shadow: 0px 5px 10px #EAEAEA;
  }
  .nav li{
    padding:0 10px;
    border-right:none;
  }
  .nav li a{
    text-decoration: underline;
  }
}

@media screen and (max-width: 430px){
  /*-------------section共通-----------------------------------*/
  .sec{
    width:100%;
    padding:0 10px 30px;
  }
    .sec h2{
      padding-top:30px;
      font-size:1.4285rem;/*20px*/
      gap:10px;
      margin-bottom:15px;
    }
    .mb15{
      margin-bottom: 10px;
    }
    .mb30{
      margin-bottom: 15px;
    }
    .mb50{
      margin-bottom: 30px;
    }
    .mb80{
      margin-bottom: 40px;
    }
    .center{
      text-align: left;
    }
    /*------------section1-----------------------------------------------*/
    .type_thumbs{
      flex-direction: column;
      box-shadow: 0px 5px 15px #D3D3D3;
      margin-bottom: 15px;
    }
    .type_thumbs li{
      width:100%;
      border-right:none;
      border-bottom:1px solid #E2E2E2;
    }
    .type_thumbs li:last-child{
      border-bottom:none;
    }
    .type_name{
      font-size:1.1428rem;/*16px*/
      text-align: center;
      padding-bottom:10px;
    }
    .type_thumbs li a{
      padding:15px;
    }    
    .type_thumbs li div{
      padding:5px 0;
    }
    .type_thumbs li:hover{
      box-shadow:initial;
      border-radius: 0px;
      transform: translateY(-0px);
    }
    .type_thumbs li figure{
      text-align: center;
    }
    /*各受講形態の詳細（共通）*/
    .type_detail{
      padding:15px;
      box-shadow: 0px 5px 15px #D3D3D3;
      margin-bottom: 50px;
    }
    .type_detail::after{
      border:25px solid transparent;
      border-top: 15px solid #fff;
    }
    .type_detail h3{
      border-left:5px solid #CC6600;
      font-size:1.1428rem;/*16px*/
      padding-left:10px;
      line-height: 1;
    }
    .type_detail figure{
      margin-bottom:15px;
    }
    .type_detail dl{
      margin-bottom:15px;
    }
    .type_detail dl dt{
      padding-bottom:5px;
    }
    .type_detail dl dd{
      padding-top:5px;
    }
    .links li {
      margin-bottom:5px;
    }
    /*各受講形態の詳細（講師派遣）*/
    .btn_min{
      padding:0.5em 0.8em 0.5em 1em;
    }
    .dd_contact{
      display: block;
    }
    .dd_contact_btn{
      margin-top:5px;
      text-align: right;
    }
    /*流れ*/
    .flow_koukai li dl dt{
      width: 8em;
    }
    .flow_koukai li dl dt{
      padding-left: 10px;
    }
    /*★各受講形態の詳細（公開講座）*/
    .sec1 ol{
      list-style-type:decimal;
      padding:10px 10px 10px 30px;
      border:solid 1px #E2E2E2;
      background-color: #e2e2e267;
      border-radius: 10px;
      margin:10px 0;
    }
    .sec1 ol li{
      margin-bottom:5px;
    }
    /*PR情報（WEBinsource、スマートパック）*/
    .pr_box-copy{
      font-size:14px;/*16px*/
      text-align: left;
    }
    .pr_box-detail div dl {
      padding: 15px;
    }
    .pr_box-detail dl dt{
      margin-bottom:15px;
    }
    .pr_box-detail div dl dd {
      font-size: 12px;
      line-height: 1.2;
    }
    /*ボタン*/
    .pr_box-detail_btn {
      box-shadow: none;
      border-radius: 30px;
      font-weight:1rem;
    }
    .pr_box-detail_btn::after {
      width:15px;
      height: 15px;
    }
    .pr_box-detail_btn:hover::after {
      width:15px;
      height: 15px;
    }
    /*------------section3-----------------------------------------------*/
    .sec3 ul li{
      width:100%;
    }
    .sec3 ul li a{
      padding: 10px 0 10px 15px;
    }
    /*------------section4-----------------------------------------------*/
    .sec4 p{
      text-align: left;
    }
}