@charset "UTF-8";
/*!
* /business/services/voice-video/uc-conferencing/conferencing/event-conferencing.html
* conferencing Audio
*/
/*画像パス　/content/dam/nttcom/hq/jp/business/services/voice-video/uc-conferencing/conferencing/event-conferencing/img/ */

body {
  background-image:url(https://www.ntt.com/content/dam/nttcom/cmn/img/backgrounds/bg-l-services-detail-lvl2.jpg);
}
.tabNavigation_contents p{
  margin-bottom:0;
}
.TitleH1{
  margin-bottom: 100px;
}
.contact_bt a{
  text-align: center;
}

/** ========================================
* メイン部分
* ====================================== */
.conferencing_main_img{
  line-height:0;
  position:relative;
}
.conferencing_main_img img{
  vertical-align:bottom;
}

.conferencing_cont{
  background:url(/content/dam/nttcom/hq/jp/business/services/voice-video/uc-conferencing/conferencing/event-conferencing/img/main_bg.png) no-repeat top #fff;
}
.main_note{
  display:none;
}
.conferencing_cont h3{
  margin:0;
  padding:0;
}
.conferencing_cont .main_title_area{
  display:flex;
  margin-bottom:70px;
}
.conferencing_cont .main_title_area .left_area{
  padding-left:20px;
  width:calc(100% - 710px);
}
.conferencing_cont .main_title_area .left_area h2{
  margin: 0;
  padding: 80px 0 0;
  font-size: 95px;
  font-weight: bold;
}
.conferencing_cont .main_title_area .left_area p{
  font-size:18px;
  font-weight:bold;
}
.conferencing_cont .main_title_area .right_area{
  background: url(/content/dam/nttcom/hq/jp/business/services/voice-video/uc-conferencing/conferencing/audio-conferencing/img/main_title_bg.png) no-repeat;
  width: 710px;
  height: 322px;
  color: #fff;
  padding: 95px 20px 0 30px;
}
.conferencing_cont .main_title_area .right_area p{
  margin: 0;
  font-size:27px;
}
.event_w{
  width:840px;
}

.top_img{
  width: 1055px;
  margin: 0 auto;
}

/** ========================================
* 動画はコミュニケーションのパワフルなツール
* ====================================== */
.event_heading01{
  margin: 40px 0 0!important;
  font-size: 36px;
  font-weight: bold;
  text-align: center;
  line-height: 1.8;
}
.conferencing_disc{
  margin: 50px auto 0;
  padding:0;
  display:flex;
  flex-wrap: wrap;
  list-style:none;
}
.conferencing_disc li{
  text-align:center;
  width:380px;
  margin-bottom:60px;
}
.conferencing_disc li:nth-of-type(odd){
  margin-right:20px;
}
.conferencing_disc li:nth-of-type(even){
  margin-left:20px;
}
.conferencing_disc li h4{
  font-size: 28px;
  line-height: 1.6;
  margin-bottom: 15px;
  color: #0A64C8;
}
.conferencing_disc li p{
  margin-bottom:35px;
}



/** ========================================
* 社内で動画配信 さまざまなお悩み
* ====================================== */
.trouble_area{
  margin: 0 auto;
}
.trouble_area .trouble_ttl{
  margin: -15px 0 0;
  font-size: 36px;
  font-weight: bold;
  line-height: 1.7;
  text-align: center;
}
.trouble_area .trouble_img{
  margin: 40px 0 0 -18px;
}
.trouble_area .trouble_img-arrow{
  text-align: center;
  margin: -5px 0 0 -18px;
}
.trouble_area .trouble_txt{
  margin: 26px 0 0;
  text-align: center;
  font-weight: bold;
}
.trouble_area .trouble_txt .txt_c-b{
  color: #0A64C8;
  font-size: 28px;
}
.trouble_area .trouble_txt .txt_c-r{
  margin: 3px 0 0;
  color: #C73B3B;
  font-size: 34px;
  line-height: 1;
}
.trouble_area .trouble_txt p{
  margin: 25px 0 0;
  font-size: 18px;
}


/** ========================================
* 社内における動画配信の様々な課題
* ====================================== */
.solution_area{
  position: relative;
  display: flex;
  justify-content: space-between;
  margin: 0 auto;
  padding: 0 30px 23px;
  background: #0A64C8;
  color: #fff;
}
.solution_area::after{
  content: "";
  width: 100%;
  display: inline-block;
  background: url(/content/dam/nttcom/hq/jp/business/services/voice-video/uc-conferencing/conferencing/event-conferencing/img/event_bg02-02.png) no-repeat bottom center;
  padding: 0 0 40px;
  position: absolute;
  left: 0;
  bottom: -30px;
}

.solution_area .solution_ttl{
  margin: 20px 0 0;
  color: #fff;
  font-size: 29px;
  font-weight: bold;
  line-height: 1.2;
}
.solution_area .solution_ttl span{
  display: inline-block;
  border-bottom: 6px solid #FFD601;
}
.solution_area .solution_txt{
  margin: 13px 0 0;
}



/** ========================================
* 3分でこのサービスがわかる!
* ====================================== */
.youtube_area{
  display: flex;
  align-items: center;
  flex-direction: column;
  margin: 153px auto 0;
}
.youtube_area .youtube_ttl{
  position: relative;
  display: inline-block;
  margin: 0;
  color: #004386;
  text-align: center;
  font-size: 29px;
  font-weight: bold;
}
.youtube_area .youtube_ttl::before{
  position: absolute;
  top: -3px;
  left: -17px;
  content: "";
  display: inline-block;
  width: 3px;
  height: 36px;
  background: #004386;
  border-radius: 100px;
  transform: rotate(-20deg);
}
.youtube_area .youtube_ttl::after{
  position: absolute;
  top: -3px;
  right: -17px;
  content: "";
  display: inline-block;
  width: 3px;
  height: 36px;
  background: #004386;
  border-radius: 100px;
  transform: rotate(20deg);
}

.youtube_area .youtube_ttl span{
  display: inline-block;
  background: linear-gradient(rgba(255, 255, 255, 0) 60%, #FDDD00 0%);
  padding: 0 10px;
}

.youtube_area .youtube_main{
  position: relative;
  width: 100%;
  margin: 30px 0 0;
  padding-top: 56.25%;
}
.youtube_area .youtube_main iframe{
  position: absolute;
  top: 0;
  right: 0;
  width: 100% !important;
  height: 100% !important;
}


/** ========================================
* 共通
* ====================================== */
/* 関連リソース */
.related_resource{
  margin: 140px 0 0;
}
.related_resource .section{
  margin: 15px 0 0;
}








@media screen and (max-width: 768px) {
  /** ========================================
  * メイン部分
  * ====================================== */
  .event_w{
    width:100%;
  }
  .conferencing_wrap img{
    max-width: 100%;
  }
  .conferencing_cont{
    background:url(/content/dam/nttcom/hq/jp/business/services/voice-video/uc-conferencing/conferencing/event-conferencing/img/main_bg.png) no-repeat top  #fff;
    background-size:contain;
  }
  .conferencing_cont .main_title_area{
    display:block;
  }
  .conferencing_cont .main_title_area .left_area,
  .conferencing_cont .main_title_area .right_area{
    width: 100%;
  }
  .conferencing_cont .main_title_area .right_area{
    padding:15px;
    background:#0a64c8;
    width:100%;
    height:auto;
  }
  .conferencing_cont .main_title_area .right_area p{
    font-size:30px;
  }

  .conferencing_disc{
    display:block;
  }
  .conferencing_disc li{
    width:100%;
  }
  .conferencing_disc li:nth-of-type(odd),
  .conferencing_disc li:nth-of-type(even){
    margin:0;
    margin-bottom:60px;
  }


  /** ========================================
  * 動画はコミュニケーションのパワフルなツール
  * ====================================== */
  .event_heading01{
    font-size: 27px;
  }
  .top_img{
    width: 100%;
  }


  /** ========================================
  * 社内で動画配信 さまざまなお悩み
  * ====================================== */
  .trouble_area .trouble_ttl{
    font-size: 22px;
  }
  .trouble_area .trouble_img{
    margin: 20px 0 0;
  }
  .trouble_area .trouble_img-arrow{
    margin: -5px 0 0;
  }
  .trouble_area .trouble_img-arrow img{
    width: 50%;
  }
  .trouble_area .trouble_txt .txt_c-r{
    margin-top: 10px;
  }

  /** ========================================
  * 社内における動画配信の様々な課題
  * ====================================== */
  .solution_area{
    display: block;
    padding: 15px;
  }
  .solution_area .solution_ttl{
    margin: 0;
    font-size: 22px;
  }
  .solution_area .trouble_img{
    margin: 14px auto 0;
    width: 70%;
    padding: 0 10px 0 0;
  }

  /** ========================================
  * 3分でこのサービスがわかる!
  * ====================================== */
  .youtube_area{
    margin-top: 80px;
  }
  .youtube_area .youtube_ttl{
    font-size: 20px;
    font-weight: bold;
  }

  /** ========================================
  * 共通
  * ====================================== */
  /* 関連リソース */
  .related_resource{
    margin-top: 85px;
  }


}

@media screen and (max-width: 480px) {
  .main_note{
    display:block;
    font-size:10px;
  }
  .conferencing_cont{
    padding-top:22px;
  }
  .conferencing_cont .main_title_area .left_area{
    margin-bottom:20px;
  }
  .conferencing_cont .main_title_area .left_area h2{
    font-size:4rem;
    padding-top:20px;
  }
  .conferencing_cont .main_title_area .right_area{
    padding:15px;
  }
  .conferencing_cont .main_title_area .right_area p{
    font-size:1rem;
  }
  .conferencing_cont .main_title_area{
    margin-bottom:40px;
  }

  /* 追従ボタン */
  .contact_bt a {
      font-size: 16px;
  }
}