@charset "utf-8";



#main_box {

  line-height: 2.0;

}



/* side_menu ----------------- */

li.btn109 {

  background-color: rgb(218,218,218);

  border-bottom-color: rgb(204,204,204) !important;

}

li.btn109 > a {

  pointer-events: none;

  cursor: auto;

}



#side_box .side_menu .menu_grp_c > li.btn109 > a::after {

  display: none;

}





/* contents ---- */



.box01 {}







.box02 {}



.box02 > ul {

}



.box02 > ul > li {

  position: relative;

  display: block;

}





.box02 > ul > li > .text_box {

  padding: 4px 16px 16px 16px;

  border: 4px rgb(247, 175, 13) solid;

  border-radius: 4px;

  background-color: rgb(252,222,152);

}

.box02 > ul > li > .text_box .title {

  font-weight: 700;

  line-height: 1.4;

}

.box02 > ul > li .movie_frame {

  display: flex;

  width: 100%;

  justify-content: space-between;

  border-radius: 4px;

  padding: 16px;

  background-color: rgb(255,255,255);

}

.box02 > ul > li .movie_frame .text {

  width: calc(100% - 24px - (320 / 722 * 100%));

  border-radius: 8px;

  background-color: rgb(255,255,255);

}

.box02 > ul > li .movie_frame .pickup {

  position: relative;

  width: calc(320 / 722 * 100%);

}

.box02 > ul > li .movie_frame .pickup .movie_img_txt {

  text-align: center;

}

.box02 > ul > li .movie_frame .pickup:hover .movie_img_txt {

  text-decoration: underline;

}

.box02 > ul > li .movie_frame .pickup .movie_img_txt > span {

  text-decoration: none !important;

}



.box02 > ul > li .movie_frame .pickup .movie_img {

  position: relative;

}



.box02 > ul > li .movie_frame .btn_movie {

  position: absolute;

  display: block;

  top: 50%;

  left: 50%;

  width: 64px;

  height: 44px;

  border-radius: 8px;

  background-color: rgba(0,0,0);

  transform: translate3d(-50%, -50%, 0);

  opacity: 0.7;

}

.box02 > ul > li .movie_frame .btn_movie::before {

  position: absolute;

  top: 50%;

  left: 50%;

  border-left: 22px rgb(255,255,255) solid;

  border-top: 10px transparent solid;

  border-bottom: 10px transparent solid;

  transform: translate3d(-50%, -50%, 0);

  content: '';

}

.box02 > ul > li .movie_frame .pickup:hover .btn_movie {

  background-color: rgb(208,18,27);

  opacity: 1;

}



.box02 > ul > li .movie_frame > iframe {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

}





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

  .box02 > ul > li {

    width: 100%;

  }

  .box02 > ul > li .movie_frame {

    flex-wrap: wrap;

    align-items: flex-start;

  }

  .box02 > ul > li .movie_frame .text {

    width: 100%;

  }

  .box02 > ul > li .movie_frame .pickup {

    margin-top: 24px;

    width: 100%;

  }

  

}









/* modal ------------------------------ */



.modal {

  display: none;

  color: #fff;

}



.modal_box {

  position: fixed;

  top: 50%;

  left: 50%;

  width: 90%;

  max-width: 980px !important;

  max-height: 560px;

  padding: 10px;

  background-color: #fff;

  z-index: 10000;

  transform: translate3d(-50%, -50%, 0);

}



.modal_area_box {

  position: relative;

  padding-top: calc(9 / 16 * 100%);

}

.modal_area_box .modal_area {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

}

.modal_area_box .modal_area iframe {

  width: 100%;

  height: 100%;

}



.modal_area_box .modal_close {

  position: absolute;

  top: -25px;

  right: -25px;

  width: 40px;

  height: 40px;

  background: url(/common/images/tag_306.png) no-repeat;

  cursor: pointer;

}



.modal_area_capition {

  padding-top: 10px;

  color: #333;

  font-size: 92%;

  font-weight: bold;

}



.modal_box p {

  padding-bottom: 2px;

  text-align: right;

}



.modalbg {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  z-index: 9998;

}



.modalbgi {

  position: fixed;

  width: 100%;

  height: 100%;

  background-color: #000;

  opacity: 0.8;

  filter: alpha(opacity=80);

  -moz-opacity: 0.80;

  z-index: 9999;

}



.modal_box .ryakureki_img {

  width: 646px;

  height: 600px;

  margin: 0 auto;

}



.movie_btn {

  cursor: pointer;

}



/*

.movie_btn:hover {

  opacity: 0.7;

}

*/