/*
sns
------------------------------------------------*/

.icon_sns img,
.footer__sns img {
  margin: 0 5px;
  padding: 8px;
  width: 40px !important;
  border-radius: 3px;
  box-sizing: border-box;
}

.icon_sns img,
.footer__sns img {
  background: #869198;
}

.footer__sns img {
  background: #111;
}

/*
YouTube
------------------------------------------------*/

.mBoxFull .icon-play,
.mBox1of1 .icon-play,
.mBox1of2 .icon-play,
.mBox1of3 .icon-play,
.mBox1of4 .icon-play {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -30px;
  margin-left: -30px;
  z-index: 2;
}

.mBoxFull .icon-play>img,
.mBox1of1 .icon-play>img,
.mBox1of2 .icon-play>img,
.mBox1of3 .icon-play>img,
.mBox1of4 .icon-play>img {
  width: 60px;
  height: 60px;
}

.mBoxFull .thumbImage>img,
.mBox1of1 .thumbImage>img,
.mBox1of2 .thumbImage>img,
.mBox1of3 .thumbImage>img,
.mBox1of4 .thumbImage>img {
  width: 100%;
}

.thumbImage {
  z-index: 1;
  display: block;
  position: relative;
}

.thumbImage .icon-play img {
  -webkit-filter: drop-shadow(0px 0px 5px rgba(0, 0, 0, 0.4));
  filter: drop-shadow(0px 0px 5px rgba(0, 0, 0, 0.4));
}

@media all and (min-width: 641px) {

  .thumbImage:hover .icon-play img,
  .mBox1of3:hover .icon-play img {
    opacity: 0;
  }

  .thumbImage:hover .icon-play,
  .mBox1of3:hover .icon-play {
    background: url(/assets/img/icon_play.svg) no-repeat;
    background-size: 100%;
    -webkit-filter: drop-shadow(0px 0px 5px rgba(0, 0, 0, 0.4));
    filter: drop-shadow(0px 0px 5px rgba(0, 0, 0, 0.4));
  }
}

.js-hide {
  z-index: -1;
}

.videoWrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

@media screen and (min-width: 897px) {
  .mBoxFull {
    position: relative;
    width: 100%;
    margin: 0 auto;
  }

  .mBoxFull .icon-play {
    margin-top: -60px;
    margin-left: -60px;
  }

  .mBoxFull .icon-play img {
    width: 120px;
    height: 120px;
  }

  .mBox1of1,
  .mBox1of2,
  .mBox1of5 {
    width: 576px;
    position: relative;
  }

  .mBox1of1 .videoWrapper,
  .mBox1of2 .videoWrapper {
    height: 324px;
    width: 100%;
  }

  .mBox1of1 {
    margin: 0 auto;
  }

  .mBox1of3,
  .mBox1of6 {
    width: 368px;
    position: relative;
  }

  .mBox1of3 .videoWrapper {
    height: 207px;
    width: 100%;
  }

  .mBox1of4,
  .mBox1of7 {
    width: 264px;
    position: relative;
  }

  .mBox1of4 .videoWrapper {
    height: 149px;
    width: 100%;
  }
}

@media screen and (max-width: 896px) {
  .mBoxFull {
    position: relative;
    width: 100%;
  }

  .mBox1of1 {
    position: relative;
  }

  .mBox1of2,
  .mBox1of3,
  .mBox1of4 {
    position: relative;
  }

  .mBox1of2 .thumbImageWrap,
  .mBox1of3 .thumbImageWrap,
  .mBox1of4 .thumbImageWrap {
    position: relative;
  }

  .mBox1of5,
  .mBox1of6,
  .mBox1of7 {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
  }

  .mBox1of5 iframe,
  .mBox1of6 iframe,
  .mBox1of7 iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
}

.youtube {
  position: relative;
  aspect-ratio: 16 / 9;
  padding-bottom: calc(315 / 560 * 100%);
}

.youtube iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
}

.thumbImage:hover {
  cursor: pointer;
}

@media screen and (min-width: 897px) {
  .oldContent #contents_pec {
    width: 996px;
  }

  .fzP32 {
    font-size: 32px !important;
  }
}

@media screen and (max-width: 896px) {
  .modal-video-close-btn {
    right: 0 !important;
  }

  .fzS19 {
    font-size: 19px !important;
  }
}

/*
mv_video
------------------------------------------------*/

.i_play,
.i_play_w,
.i_stop,
.i_stop_w,
.i_pause,
.i_pause_w {
  display: inline-block;
  font-size: 0;
  opacity: 1;
  transition: all 0.2s;
  cursor: pointer;
}

.i_play:hover,
.i_play_w:hover,
.i_stop:hover,
.i_stop_w:hover,
.i_pause:hover,
.i_pause_w:hover {
  opacity: 0.5;
}

.i_play:after,
.i_play_w:after,
.i_stop:after,
.i_stop_w:after,
.i_pause:after,
.i_pause_w:after {
  display: inline-block;
  width: 50px;
  height: 50px;
  background-size: 50px;
  background-repeat: no-repeat;
  content: "";
}

.i_play:after {
  background-image: url("/assets/img/icon_play.svg");
}

.i_play_w:after {
  background-image: url("/assets/img/icon_play_w.svg");
}

.i_stop:after {
  background-image: url("/assets/img/icon_stop.svg");
}

.i_stop_w:after {
  background-image: url("/assets/img/icon_stop_w.svg");
}

.i_pause:after {
  background-image: url("/assets/img/icon_pause.svg");
}

.i_pause_w:after {
  background-image: url("/assets/img/icon_pause_w.svg");
}

@media screen and (max-width: 896px) {

  .i_play:after,
  .i_play_w:after,
  .i_stop:after,
  .i_stop_w:after,
  .i_pause:after,
  .i_pause_w:after {
    width: 50px;
    height: 50px;
    background-size: 50px;
  }
}

.bnr_top_reference,
.bnr_top_evolution,
.mv_reference,
.mv_evolution {
  position: relative;
  overflow: hidden;
}

.bnr_top_reference .bnr_txt,
.bnr_top_evolution .bnr_txt,
.mv_reference .mv_ttl,
.mv_evolution .mv_ttl {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
}

#video01_btn,
#video02_btn {
  position: absolute;
  bottom: 12px;
  right: 20px;
  z-index: 2;
}

@media screen and (min-width: 897px) {
  .mv_video video {
    width: 100%;
  }
}

@media screen and (max-width: 896px) {
  .mv_video video {
    width: 180%;
    margin-left: -40%;
  }
}

.bnr_top_reference .bnr_txt,
.bnr_top_evolution .bnr_txt,
.mv_reference .mv_ttl,
.mv_evolution .mv_ttl {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
}

.bnr_top_reference .bnr_txt,
.bnr_top_evolution .bnr_txt,
.mv_reference .mv_ttl,
.mv_evolution .mv_ttl {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
}

.fWhite {
  color: #fff;
}

.bnr_txt {
  /* padding-top: 190px; */
  text-align: center;
  font-size: 30px;
}

.bnr_top_reference .bnr_txt,
.bnr_top_evolution .bnr_txt,
.mv_reference .mv_ttl,
.mv_evolution .mv_ttl {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
}

.bnr_top_reference .bnr_txt,
.bnr_top_evolution .bnr_txt,
.mv_reference .mv_ttl,
.mv_evolution .mv_ttl {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
}