@charset "utf-8";

.main_content {
  display: table;
  width: 100%;
}
/*.main_content:after {
  content: '';display: table;clear: both;
}*/
#video_area {
  /*float: left;*/
  width: 35%;
  display: table-cell;
  vertical-align: top;
}
#video_area .video_content {
  padding-right: 3%;
}
#video_area .video_box {
  position: relative;
  padding-bottom: 56.25%;
}

#video_area .wmplayer {
  padding-bottom: calc(56.25% + 63px)!important;
}

#video_area .video_box .video_frame,
#video_area .video_box object,
#video_area .video_box #player {
  position: absolute!important;
  left: 0!important;
  top: 0!important;
  width: 100%!important;
  height: 100%!important;
  background: #000;
  z-index: 10;
}
#video_area .video_scroll {
  height: 84px;
  overflow-y: scroll;
  border-bottom: 1px solid #e8e8e8;
}
#video_area .video_descript {
  padding: 10px 0;
}
#video_area .video_name {
  font-size: 134%;
  line-height: 1.6;
}
#video_area dl dt {
  font-size: 117%;
  line-height: 1.6;
}
#video_area .playlist {
  margin-top: 2.8%;
}
#video_area .playlist_title {
  font-size: 117%;
  color: #fff;
  background: #757575;
  text-align: center;
  padding: 8px 0 8px;
  border-radius: 3px 3px 0 0;
}
#video_area .playlist_content {
  position: relative;
  padding-bottom: 62%;
  background: #f8f8f8;
}
#video_area .wmp {
  padding-bottom: calc(62% - 63px);
}
#video_area .playlist_scroll {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow-y: scroll;
}
#video_area .playlist_scroll_inner {
  padding: 15px 40px 15px 20px;
}
#video_area .playlist a {
  color: #636365;
  text-decoration: none;
}
#video_area .playlist a:hover {
  text-decoration: underline;
}
#video_area .playlist .head {
  font-size: 117%;
  padding-left: 20px;
  background: url(../../img/ico-playlist.png) no-repeat 0 2px;
  font-weight: bold;
  margin-bottom: 5px;
}
#video_area .playlist dl {
  margin-left: 5px;
}
#video_area .playlist dt {
  line-height: 1.6;
  font-size: 117%;
  font-weight: bold;
  padding-left: 15px;
  background: url(../../img/ico-arrow.png) no-repeat 0 2px;
}
#video_area .playlist dd {
  line-height: 1.6;
  font-size: 117%;
  padding-left: 15px;
}
#video_area .playlist dl dd dl dt {
  font-size: 100%;
  padding-left: 15px;
  background: none;
}
#video_area .playlist dl dd dl dd {
  font-size: 100%;
  padding-left: 30px;
  background: none;
}
#slide_area {
  /*float: right;*/
  width: 65%;
  display: table-cell;
  position: relative;
  vertical-align: top;
  border: solid 1px #e0e0e0;
}
#slide_area .slide_content {
  /*margin-left: 1.5%;*/
}
#slide_area .slide_wrapper {
  position: relative;
  padding-bottom: 75%;
}
#slide_area .slide {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
}
#slide_area .slide img {
  width: 100%;
  height: auto;
}
#slide_area .slide_button {
  background: #ececec;
  border-radius: 0 0 3px 3px;
  padding-bottom: 3px;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
}
#slide_area .slide_button_box {
  border-radius: 0 0 3px 3px;
  background: #f3f3f3;
  padding: 3px 0;
}
#slide_area .slide_button ul {
  position: relative;
}
#slide_area .slide_button ul:before {
  content: '';
  position: absolute;
  width: 2px;
  height: 100%;
  background: #e8e8e8;
  left: 50%;
  top: 0;
}
#slide_area .slide_button ul:after {
  content: '';display: table;clear: both;
}
#slide_area .slide_button li {
  float: left;
  width: 50%;
}
#slide_area .slide_button a {
  display: block;
  text-align: center;
  padding: 10px 0 6px;
}
#slide_area .slide_button a:hover {
  opacity: 0.7;
}
#slide_area .slide_button span {
  display: inline-block;
  font-size: 134%;
  font-weight: bold;
}
#slide_area .slide_button .right_button span {
  padding-right: 20px;
  background: url(../../img/ico-right_arrow.png) no-repeat 100% 40%;
}
#slide_area .slide_button .left_button span {
  padding-left: 20px;
  background: url(../../img/ico-left_arrow.png) no-repeat 0 40%;
}
.review {
  margin-top: 1%;
  background: #f8f8f8;
  border-radius: 3px;
  padding: 1px;
}
.review .review_data {
  width: 100%;
  display: table;
  min-height: 80px;
}
.review .review_title {
  display: table-cell;
  vertical-align: middle;
  width: 180px;
  text-align: center;
  background: #757575;
}
.review .review_title h2 {
  font-size: 117%;
  color: #fff;
}
.review .review_pdf {
  display: table-cell;
  vertical-align: middle;
  padding: 10px 40px;
}
.review .review_pdf li:not(:first-child) {
  margin-top: 5px;
}
.review .review_pdf li a {
  color: #1e1e1e;
  text-decoration: underline;
  font-size: 117%;
  display: inline-block;
  padding-right: 15px;
  background: url(../../img/ico-download.png) no-repeat right center;
}
.external_link {
  margin-top: 15px;
}
.register {
  display: inline-block;
  vertical-align: bottom;
}
.register:after {
  content: '';display: table;clear: both;
}
.register a:hover {
  opacity: 0.7;
  filter: opacity(70);
}
.register li {
  float: left;
  margin-left: 10px;
}
.register li:first-child {
  margin-left: 0;
}
.register .button_work_sheet {
  display: block;
  width: 210px;
  height: 103px;
  background: url(../../img/bnr-work_sheet.png) no-repeat left top;
}
.register .small_button {
  margin-top: 5px;
}
.register .small_button:first-child {
  margin-top: 0;
}
.register .button_notes {
  display: block;
  width: 180px;
  height: 49px;
  background: url(../../img/btn-notes.png) no-repeat left top;
}
.register .button_check {
  display: block;
  width: 180px;
  height: 49px;
  background: url(../../img/btn-check.png) no-repeat left top;
}
.register .button_work_sheet img,
.register .button_notes img,
.register .button_check img {
  display: none;
}
.sns {
  display: inline-block;
  margin-left: 10px;
  vertical-align: bottom;
}
.sns ul:after {
  content: '';display: table;clear: both;
}
.sns li {
  float: left;
  margin-left: 10px;
}
.sns li:first-child {
  margin-left: 0px;
}
@media screen and (min-width: 1130px) {
  #video_area .playlist_content {
    padding-bottom: 63%;
  }
}
@media screen and (min-width: 1160px) {
  #video_area .playlist_content {
    padding-bottom: 64%;
  }
}
@media screen and (min-width: 1180px) {
  #video_area .playlist_content {
    padding-bottom: 66%;
  }
}
@media screen and (min-width: 1280px) {
  #video_area .playlist_content {
    padding-bottom: 67%;
  }
}
@media screen and (min-width: 1400px) {
  #video_area .playlist_content {
    padding-bottom: 68%;
  }
}
@media screen and (min-width: 1500px) {
  #video_area .playlist_content {
    padding-bottom: 69%;
  }
}
@media screen and (min-width: 1600px) {
  #video_area .playlist_content {
    padding-bottom: 71%;
  }
}
@media screen and (min-width: 1800px) {
  #video_area .playlist_content {
    padding-bottom: 72%;
  }
}
@media screen and (min-width: 1900px) {
  #video_area .playlist_content {
    padding-bottom: 73%;
  }
}
@media screen and (min-width: 2000px) {
  #video_area .playlist_content {
    padding-bottom: 74%;
  }
}
@media screen and (min-width: 2300px) {
  #video_area .playlist_content {
    padding-bottom: 75%;
  }
}
@media screen and (min-width: 2500px) {
  #video_area .playlist_content {
    padding-bottom: 76%;
  }
}
@media screen and (min-width: 2800px) {
  #video_area .playlist_content {
    padding-bottom: 77%;
  }
}

/*for wmp*/
@media screen and (min-width: 1130px) {
  #video_area .wmp {
    padding-bottom: calc(63% - 63px);
  }
}
@media screen and (min-width: 1160px) {
  #video_area .wmp {
    padding-bottom: calc(64% - 63px);
  }
}
@media screen and (min-width: 1180px) {
  #video_area .wmp {
    padding-bottom: calc(66% - 63px);
  }
}
@media screen and (min-width: 1280px) {
  #video_area .wmp {
    padding-bottom: calc(67% - 63px);
  }
}
@media screen and (min-width: 1400px) {
  #video_area .wmp {
    padding-bottom: calc(68% - 63px);
  }
}
@media screen and (min-width: 1500px) {
  #video_area .wmp {
    padding-bottom: calc(69% - 63px);
  }
}
@media screen and (min-width: 1600px) {
  #video_area .wmp {
    padding-bottom: calc(71% - 63px);
  }
}
@media screen and (min-width: 1800px) {
  #video_area .wmp {
    padding-bottom: calc(72% - 63px);
  }
}
@media screen and (min-width: 1900px) {
  #video_area .wmp {
    padding-bottom: calc(73% - 63px);
  }
}
@media screen and (min-width: 2000px) {
  #video_area .wmp {
    padding-bottom: calc(74% - 63px);
  }
}
@media screen and (min-width: 2300px) {
  #video_area .wmp {
    padding-bottom: calc(75% - 63px);
  }
}
@media screen and (min-width: 2500px) {
  #video_area .wmp {
    padding-bottom: calc(76% - 63px);
  }
}
@media screen and (min-width: 2800px) {
  #video_area .wmp {
    padding-bottom: calc(77% - 63px);
  }
}