/*--会社概要ー------------------------------- */

#about_key{
  background-image: url(../../img/about_bg.jpg);
}

#about_key .key_box{
  background: rgba(59,86,69,0.8);
}

#about_message{
  background-image: url(../../img/about_bg01.jpg);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background-attachment: fixed;
  background-position: bottom;
  background-size: cover;
  background-repeat: no-repeat;
  padding-top: 15px;
  padding-bottom: 0px!important;
}

.about_message_heading, .about_message_box{
  width: 100%;
  max-width: 100%;
  display: -webkit-box; /*box仕様：旧Safari・Chrome・Android4.3以前*/
  display: -moz-box;    /*box仕様：旧Firefox*/
  display: -ms-flexbox; /*IE10*/
  display: -webkit-flex; /*旧Safari・Chrome・Android*/
  display: flex;　/*最新ブラウザ*/
  -ms-flex-direction:initial; /*IE10*/
  -webkit-flex-direction:initial; /*old webkit browser*/
  flex-direction:initial;
  justify-content: center;
  align-items: stretch;
  margin: 0 auto 40px;
}

.about_message_heading_left{
  width: 22%;
  background-color: #285c2b;
  border-top: 15px solid #b71840;
}

.about_message_heading_right{
  width: 78%;
  background-color: #103412;
  color: #fff;
  font-size: 5rem;
  line-height: 1.6em;
  padding-left: 85px;
}

.about_message_box_left{
  width: 22%;
}

.about_message_box_right{
  width: 78%;
  padding-left: 85px;
}

.about_message_box_right p{
  font-size: 1.6rem;
  line-height: 1.5em;
}

.about_message_box_left img{
  width: 100%;
}

.about_message_photo{
  position: relative;
  margin-bottom: 15px;
}

.about_message_photo_caption{
  position: absolute;
  width: 100%;
  bottom: 0;
  text-align: center;
  background-color: rgba(16,74,19,0.8);
  color: #fff;
  font-size: 2rem;
  line-height: 1.8em;
}

.about_message_photo_caption span{
  font-size: 1rem;
}

.about_message_box_left h4{
  font-size: 1.4rem;
  margin-bottom: 10px;
}

#about_labo{
  background-image: url(../../img/about_bg02.jpg);
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  background-attachment: fixed;
  background-position: bottom;
  background-size: cover;
  background-repeat: no-repeat;
  padding: 120px 0;
}

.about_labo_bg{
  background-color: rgba(255,255,255,0.9);
  width: 100%;
  padding: 25px;
  text-align: center;
  position: relative;
}

.about_labo_bg h3{
  font-size: 3rem;
  color: #104a13;
  margin-bottom: 10px;
  line-height: 1em;
  font-weight: normal;
}

.about_labo_copy{
  font-size: 1.8rem;
  line-height: 1em;
  color: #b71840;
  margin-bottom: 35px;
}
.about_labo_img{
  position: absolute;
  width: 85%!important;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  margin: auto;
}

#about_business{
  width: 100%;
  padding: 120px 0 0;
}

h3.about_business_h3{
  color: #104a13;
  font-size: 3.6rem;
  line-height: 1em;
  margin-bottom: 30px;
  font-weight: normal;
}

.about_business_h4{
  font-size: 1.7rem;
  line-height: 1.5em;
  margin-bottom: 20px;
  padding-left: 1em;
  text-indent: -1em;
}

.about_business_box01{
  padding-left: 1.125em;
  font-size: 1.6rem;
  line-height: 1.8em;
}

#about_business .columnbox4_1:nth-child(1) .about_business_h4{
  color: #3c90a4;
}

#about_business .columnbox4_1:nth-child(2) .about_business_h4{
  color: #316787;
}

#about_business .columnbox4_1:nth-child(3) .about_business_h4{
  color: #3e5889;
}

#about_business .columnbox4_1:nth-child(4) .about_business_h4{
  color: #e25d4a;
}

.about_business_box02{
  width: 100%;
  padding: 30px;
  margin: 0 auto 45px;
  border:1px solid;
}

.about_business_box02:nth-of-type(4){
  border-color:#4ba5b5;
}

.about_business_box02:nth-of-type(5){
  border-color:#316787;
}
.about_business_box02:nth-of-type(6){
  border-color:#3e5889;
}
.about_business_box02:nth-of-type(7){
  border-color:#e25d4a;
}

.about_business_box02:nth-of-type(4) .about_business_h4{
  color:#4ba5b5;
}

.about_business_box02:nth-of-type(5) .about_business_h4{
  color:#316787;
}
.about_business_box02:nth-of-type(6) .about_business_h4{
  color:#3e5889;
}
.about_business_box02:nth-of-type(7) .about_business_h4{
  color:#e25d4a;
}

.about_business_box02_in{
  width: 100%;
  display: -webkit-box; /*box仕様：旧Safari・Chrome・Android4.3以前*/
  display: -moz-box;    /*box仕様：旧Firefox*/
  display: -ms-flexbox; /*IE10*/
  display: -webkit-flex; /*旧Safari・Chrome・Android*/
  display: flex;　/*最新ブラウザ*/
  -ms-flex-direction:initial; /*IE10*/
  -webkit-flex-direction:initial; /*old webkit browser*/
  flex-direction:initial;
  justify-content: center;
  align-items: stretch;
  margin: 0 auto 30px;
}

.about_business_box02_in_left{
  width: 33%;
  margin-right: 2%;
}

.about_business_box02_in_right{
  width: 65%;
}

.about_history_box{
  width: 100%;
  display: -webkit-box; /*box仕様：旧Safari・Chrome・Android4.3以前*/
  display: -moz-box;    /*box仕様：旧Firefox*/
  display: -ms-flexbox; /*IE10*/
  display: -webkit-flex; /*旧Safari・Chrome・Android*/
  display: flex;　/*最新ブラウザ*/
  -ms-flex-direction:initial; /*IE10*/
  -webkit-flex-direction:initial; /*old webkit browser*/
  flex-direction:initial;
  justify-content: center;
  align-items: stretch;
  margin: 0 auto 60px;
}

.about_history_box_left{
  width: 10%;
  margin-right: 3%;
}

.about_history_box_right{
  width: 87%;
}

.about_history_box_right dl{
  border-bottom: 3px dotted #bccdbd;
  padding: 30px 0;
}

.about_history_box_right dl:last-child{
  border-bottom: none;
}

.about_history_box_right dl dt{
  color: #104a13;
  font-size: 2rem;
  line-height: 1em;
  margin-bottom: 10px;
}

.about_history_box_right dl dd{
  padding-left: 35px;
  font-size: 1.6rem;
  line-height: 1em;
}

#about_business .about_outline{
  width: 100%;
  display: -webkit-box; /*box仕様：旧Safari・Chrome・Android4.3以前*/
  display: -moz-box;    /*box仕様：旧Firefox*/
  display: -ms-flexbox; /*IE10*/
  display: -webkit-flex; /*旧Safari・Chrome・Android*/
  display: flex;　/*最新ブラウザ*/
  -ms-flex-direction:initial; /*IE10*/
  -webkit-flex-direction:initial; /*old webkit browser*/
  flex-direction:initial;
  justify-content: center;
  align-items: stretch;
  margin-bottom: 5px;
}

#about_business .about_outline dt{
  width: 23%;
  margin-right: 1%;
  background-color: #d9e8dd;
  line-height: 1.5em;
  text-align: center;
  padding: 8px;
}

#about_business .about_outline dd{
  width: 76%;
  background-color: #d9e8dd;
  line-height: 1.5em;
  text-align: left;
  padding: 8px 20px;
}

#map_canvas{
  width: 100%;
  height: 400px;
  margin: 0 auto 20px;
}

#about_business .footer_map_link a:after{
  font-family: FontAwesome;
  content: '\f101';
  color: #104a13;
  position: absolute;
  top: 50%;
  left: 0px;
  margin-top: -8px;
  font-size: 1.8rem;
}

#about_business .footer_map_link a:hover:after{
  color: #b71840;
}

.about_business_tx{
  font-size: 1.6rem;
  line-height: 1.5em;
  margin-bottom: 15px;
  padding-left: 1em;
  text-indent: -1em;
}

/*--研修プログラム--------------------------------- */

#program_key{
  background-image: url(../../img/program_bg.jpg);
}

#program_key:before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.3);
}

#program_key .key_box{
  background-color: rgba(60,74,85,0.8);
}

/*--商品紹介--------------------------------- */

#product_key{
  background-image: url(../../img/product_bg.jpg);
}

#product_key:before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.3);
}

#product_key .key_box{
  background-color: rgba(86,77,60,0.8);
}

#product #manual .heading{
  background-image: url(../../img/product_bg_manual.jpg);
}

#product #program .heading{
  background-image: url(../../img/product_bg_program.jpg);
}

#product #active_learning .heading{
  background-image: url(../../img/product_bg_active_learning.jpg);
}

#product #mentoring .heading{
  background-image: url(../../img/product_bg_mentoring.jpg);
}  

#product #recruit .heading{
  background-image: url(../../img/product_bg_recruit.jpg);
}

/*--公開セミナー--------------------------------- */

#op_seminar_key{
  background-image: url(../../img/op_seminar_bg.jpg);
}

#op_seminar_key:before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.3);
}

#op_seminar_key .key_box{
  background-color: rgba(101,50,46,0.8);
}

#op_seminar .content .heading{
  background-image: url(../../img/op_seminar_bg.jpg);
}

/*--ファシリテーター--------------------------------- */

#facilitator_key{
  background-image: url(../../img/facilitator_bg.jpg);
}

#facilitator_key:before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.3);
}

#facilitator_key .key_box{
  background-color: rgba(85,64,105,0.8);
}

#facilitator .content .heading{
  background-image: url(../../img/facilitator_bg.jpg);
}
/*
.step01{
  width: 100%;
  height: 400px;
  background-color: rgba(16,74,19,0.7);
  position: relative;
  padding: 20px;
}
.step01::before{
  content: '';
  border-top: 400px solid transparent;
  border-left: 50px solid #fff;
  position: absolute;
  left: 0;
  top: 0;
}
.step01::after{
  content: '';
  border-top: 400px solid transparent;
  border-right: 50px solid #fff;
  position: absolute;
  right: 0;
  top: 0;
}

.step01_inner{
  width: 90%;
  height: 360px;
  background-color: #fff;
  position: relative;
  margin: auto;
}
.step01_inner::before{
  content: '';
    border-top: 360px solid #fff;
    border-left: 50px solid transparent;
    position: absolute;
    left: -50px;
    top: 0;
}
.step01_inner::after{
  content: '';
    border-top: 360px solid #fff;
    border-right: 50px solid transparent;
    position: absolute;
    right: -50px;
    top: 0;
}

.step02{
  width: 90%;
  height: 400px;
  background-color: rgba(183,24,64,0.7);
  position: relative;
  padding: 20px;
  margin: auto;
}
.step02::before{
  content: '';
  border-top: 400px solid transparent;
  border-left: 50px solid #fff;
  position: absolute;
  left: 0;
  top: 0;
}
.step02::after{
  content: '';
  border-top: 400px solid transparent;
  border-right: 50px solid #fff;
  position: absolute;
  right: 0;
  top: 0;
}

.step02_inner{
  width: 90%;
  height: 360px;
  background-color: #fff;
  position: relative;
  margin: auto;
}
.step02_inner::before{
  content: '';
    border-top: 360px solid #fff;
    border-left: 50px solid transparent;
    position: absolute;
    left: -50px;
    top: 0;
}
.step02_inner::after{
  content: '';
    border-top: 360px solid #fff;
    border-right: 50px solid transparent;
    position: absolute;
    right: -50px;
    top: 0;
}
*/

.f_check_list01{
  width: 100%;
  margin: 0 auto;
}

.f_check_list01 li{
  width: 100%;
  color: #b71840;
  font-size: 1.8rem;
  line-height: 2em;
  padding: 10px 15px 10px 2em;
  position: relative;
  text-align: left;
}

.f_check_list01 li:before{
  font-family: FontAwesome;
    content: '\f00c';
    color: #b71840;
    position: absolute;
    left: 0.5em;
    top: 8px;
    font-size: 2rem;
}

.marker03 {
  position: relative;
  padding-left: 1.2em;/*アイコン分のスペース*/
  line-height: 1.4;
  font-size:2rem;
  color: #b71840;
  margin:30px 0 15px 30px;
  text-align: left;
}

.marker03:before {
  font-family: FontAwesome;
  content: "\f00c";/*アイコンのユニコード*/
  position: absolute;/*絶対位置*/
  font-size: 2rem;/*サイズ*/
  left: 0;/*アイコンの位置*/
  top: 0;/*アイコンの位置*/
  color: #b71840; /*アイコン色*/
}


/*--無料体験会--------------------------------- */

#free_trial02_key{
  background-image: url(../../img/free_trial_bg.jpg);
}

#free_trial02_key .key_box{
  background-color: rgba(29,76,84,0.8);
}

#free_trial02 .content .heading{
  background-image: url(../../img/free_trial_bg.jpg);
} 

/*--講師派遣-------------------------------- */

#instructor_key{
  background-image: url(../../img/instructor_bg.jpg);
}

#instructor_key .key_box{
  background-color: rgba(104,77,32,0.8);
}

#instructor .content .heading{
  background-image: url(../../img/instructor_bg.jpg);
}

/*--メンター--------------------------------- */

#mentor_key{
  background-image: url(../../img/mentor_bg.jpg);
}

#mentor_key:before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.3);
}

#mentor_key .key_box{
  background-color: rgba(85,64,105,0.8);
}

#mentor .content .heading{
  background-image: url(../../img/mentor_bg.jpg);
}

/*--コンタクト-------------------------------- */

#contact_key{
  background-image: url(../../img/contact_bg.jpg);
}

#contact_key:before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.3);
}

#contact_key .key_box{
  background-color: rgba(51,55,54,0.8);
}

/*--NEWS------------------------------- */
#news .keyvisual{
  height: 300px;
}

#news_key{
  background-image: url(../../img/contact_bg.jpg);
}

#news_key:before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.6);
}

#news_key .keyvisual_inner{
  height: 300px;
}

#news_key h2{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  -webkit- transform: translateY(-50%) translateX(-50%);
  color: #fff;
  font-size: 6rem;
  font-weight: bold;
  letter-spacing: 0.3rem;
  line-height: 1.6em;
  text-shadow: 
        #104a13 2px 2px 0, #104a13 -2px -2px 0,
        #104a13 -2px 2px 0, #104a13 2px -2px 0,
        #104a13 0px 2px 0, #104a13  0 -2px 0,
        #104a13 -2px 0 0, #104a13 2px 0 0;
}

/*--TOPICS------------------------------- */

#topics .keyvisual{
  height: 300px;
}

#topics_key{
  background-image: url(../../img/contact_bg.jpg);
}

#topics_key:before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.6);
}

#topics_key .keyvisual_inner{
  height: 300px;
}

#topics_key h2{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  -webkit- transform: translateY(-50%) translateX(-50%);
  color: #fff;
  font-size: 6rem;
  font-weight: bold;
  letter-spacing: 0.3rem;
  line-height: 1.6em;
  text-shadow: 
        #104a13 2px 2px 0, #104a13 -2px -2px 0,
        #104a13 -2px 2px 0, #104a13 2px -2px 0,
        #104a13 0px 2px 0, #104a13  0 -2px 0,
        #104a13 -2px 0 0, #104a13 2px 0 0;
}

/*--プライバシーポリシー------------------------------- */

#policy .keyvisual{
  height: 300px;
}

#policy_key{
  background-image: url(../../img/contact_bg.jpg);
}

#policy_key:before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.6);
}

#policy_key .keyvisual_inner{
  height: 300px;
}

#policy_key h2{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  -webkit- transform: translateY(-50%) translateX(-50%);
  color: #fff;
  font-size: 5rem;
  font-weight: bold;
  letter-spacing: 0.3rem;
  line-height: 1.6em;
  text-shadow: 
        #104a13 2px 2px 0, #104a13 -2px -2px 0,
        #104a13 -2px 2px 0, #104a13 2px -2px 0,
        #104a13 0px 2px 0, #104a13  0 -2px 0,
        #104a13 -2px 0 0, #104a13 2px 0 0;
}

/*--サイトマップ------------------------------- */

#sitemap .keyvisual{
  height: 300px;
}

#sitemap_key{
  background-image: url(../../img/contact_bg.jpg);
}

#sitemap_key:before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.6);
}

#sitemap_key .keyvisual_inner{
  height: 300px;
}

#sitemap_key h2{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  -webkit- transform: translateY(-50%) translateX(-50%);
  color: #fff;
  font-size: 6rem;
  font-weight: bold;
  letter-spacing: 0.3rem;
  line-height: 1.6em;
  text-shadow: 
        #104a13 2px 2px 0, #104a13 -2px -2px 0,
        #104a13 -2px 2px 0, #104a13 2px -2px 0,
        #104a13 0px 2px 0, #104a13  0 -2px 0,
        #104a13 -2px 0 0, #104a13 2px 0 0;
}

/*--FAQ------------------------------- */

#faq .keyvisual{
  height: 300px;
}

#faq_key{
  background-image: url(../../img/faq_bg.jpg);
}

#faq_key:before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.6);
}

#faq_key .keyvisual_inner{
  height: 300px;
}

#faq_key h2{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  -webkit- transform: translateY(-50%) translateX(-50%);
  color: #fff;
  font-size: 6rem;
  font-weight: bold;
  letter-spacing: 0.3rem;
  line-height: 1.6em;
  text-shadow: 
        #104a13 2px 2px 0, #104a13 -2px -2px 0,
        #104a13 -2px 2px 0, #104a13 2px -2px 0,
        #104a13 0px 2px 0, #104a13  0 -2px 0,
        #104a13 -2px 0 0, #104a13 2px 0 0;
}

#faq .content .heading{
  background-image: url(../../img/faq_bg.jpg);
} 

/*--資料ダウンロード------------------------------- */

#dl .keyvisual{
  height: 300px;
}

#dl_key{
  background-image: url(../../img/dl_bg.jpg);
}

#dl_key:before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.6);
}

#dl_key .keyvisual_inner{
  height: 300px;
}

#dl_key h2{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  -webkit- transform: translateY(-50%) translateX(-50%);
  color: #fff;
  font-size: 6rem;
  font-weight: bold;
  letter-spacing: 0.3rem;
  line-height: 1.6em;
  text-shadow: 
        #104a13 2px 2px 0, #104a13 -2px -2px 0,
        #104a13 -2px 2px 0, #104a13 2px -2px 0,
        #104a13 0px 2px 0, #104a13  0 -2px 0,
        #104a13 -2px 0 0, #104a13 2px 0 0;
}

.item {
  text-align:center;
  position:relative;      
}

.item a {
    opacity: 0.5;
    transition: all 300ms ease-out;     
  }
  
.item a:hover {
    opacity: 1;
  }

  .item,
  .item-hover,
  .item-hover .mask,
  .item-img,
  .item-info {
    width: 375px;
    height: 143px;            
  }

  .item-hover,
  .item-hover .mask,
  .item-img { 
    position:absolute;
    top:0;
    left:0;     
  }     

  .item-type-zoom .item-hover { 
    z-index:5;  
    -webkit-transition: all 300ms ease-out;
    -moz-transition: all 300ms ease-out;
    -o-transition: all 300ms ease-out;
    transition: all 300ms ease-out; 
    opacity:0;
    cursor:pointer;   
    display:block;
    text-decoration:none;
    text-align:center;                
  }
  
    .item-type-zoom .item-info {
      z-index:10;
      color:#ffffff;
      display:table-cell;
      vertical-align:middle;
      position:relative;
      z-index:5;      
      -webkit-transform: scale(0,0);
      -moz-transform: scale(0,0);
      -ms-transform: scale(0,0);          
      transform: scale(0,0);          
      -webkit-transition: all 300ms ease-out;
      -moz-transition: all 300ms ease-out;
      -o-transition: all 300ms ease-out;
      transition: all 300ms ease-out;                     
    }
  
    .item-type-zoom .item-info .headline {
      font-size:18px;     
      width:75%;
      margin:0 auto;    
      padding:10px;
    }
    
    .item-type-zoom .item-info .line {
       height:1px;
       width:60%;
       margin:15px auto 10px auto;
       background-color:#ffffff;     

    }
    
    .item-type-zoom .item-info .date {
      font-size:14px;
      font-style:italic;
    }
    
    .item-type-zoom .item-hover .mask {
      background-color:#000;
      opacity:0.5;
      -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
      filter: alpha(opacity=50);          
      
      z-index:0;
    }
    
    .item-type-zoom .item-hover:hover {
      opacity:1;
    }       
    
    .item-type-zoom .item-hover:hover .item-info {
      -webkit-transform: scale(1,1);
      -moz-transform: scale(1,1);
      -ms-transform: scale(1,1);          
      transform: scale(1,1);  
    }               
  
  .item-img {     
    background-color:#7a548f;
    z-index:0;      
  }

/*--Loading--------------------------------- */

#loader-bg {
    background: #fff;
    height: 100%;
    width: 100%;
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: 100;
}
#loader-bg img {  
    background: #fff;
    position: fixed;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    z-index: 100;
}
