@charset "utf-8";
/* CSS Document */

/*=======================================================
   背景設定
  =======================================================*/
body{
   background-color: rgba(7,19,21,1.00);
}

.bg_001{
   background-image: url("../images_portal/tmp/bg_001.jpg");
   background-position: top left;
   background-size: 200% auto;
}

.bg_002{
   background-color: rgba(218,218,218,1.00);
   background-image: url("../images_portal/tmp/bg_002.jpg");
   background-position: top center;
   background-repeat: no-repeat;
   background-size: 100% auto;
}
   @media screen and (max-width: 600px) {
      .bg_002{
         background-size: 200% auto;
      } 
   }


.first{
   position: relative;
   overflow: hidden;
   width: 100%;
   background-image: linear-gradient(rgba(129,0,0,0.60), rgb(0, 0, 0));
}

.top_wrap{
   position: relative;
   width: 92%;
   margin: 0 auto 10px auto;
   padding: 20px 40px;
   background-color: rgba(0,0,0,1.00);
   box-sizing: border-box;
   display: flex;
   justify-content: space-between;
}
   @media screen and (max-width: 1024px) {
      .top_wrap{
         flex-wrap: wrap;
         padding: 20px 0;
         width: 98%;
      } 
   }
   @media screen and (max-width: 800px) {
      .top_wrap{
         flex-wrap: wrap;
      } 
   }
   @media screen and (max-width: 480px) {
      .top_wrap{
         padding: 0 0;
      } 
   }


.mobile_visual{
   display: none;
}
   @media screen and (max-width: 1024px) {
      .mobile_visual{
         display: block;
      }
      .mobile_visual .m_visual{
         position: relative;
         width: 98%;
         margin: 0 auto 50px auto;
      }
   }



.top_wrap .left_box{
   position: relative;
   width: 55%;
}
   @media screen and (max-width: 1024px) {
      .top_wrap .left_box{
         width: 100%;
      } 
   }


.top_wrap .right_box{
   position: relative;
   width: 43%;
   display: block;
}
   @media screen and (max-width: 1024px) {
      .top_wrap .right_box{
         display: none;
      } 
   }


.top_sec01{
   position: relative;
   overflow: hidden;
   width: 100%;
   border-radius: 10px;
   background-image: url("../images_portal/top/bg_k_left.png") , url("../images_portal/top/bg_k_right.png");
   background-position: bottom left , top right;
   background-repeat: no-repeat;
   background-size: auto 100% , auto 100%;
}
   @media screen and (max-width: 1024px) {
      .top_sec01{
         background-image: url("../images_portal/top/bg_k_left.png") , url("../images_portal/top/bg_k_left2.png");
         background-position: bottom left , top left;
         background-size: 100% auto, 80% auto;
      } 
   }
   @media screen and (max-width: 480px) {
      .top_sec01{
         border-radius: 0;
      } 
   }




.top_main_logo{
   position: relative;
   width: 65%;
   margin: 3% auto 6% auto;
}
   @media screen and (max-width: 480px) {
      .top_main_logo{
        margin: 5% 0 7% 13%;
      } 
   }


.top_i_news{
   position: relative;
   width: 20%;
   margin: 0 auto 2% auto;
}
   @media screen and (max-width: 480px) {
      .top_i_news{
        width: 30%;
      } 
   }

.top_news_wrap{
   position: relative;
   overflow: hidden;
   width: 80%;
   margin: 0 auto 2% auto;
}
   @media screen and (max-width: 480px) {
      .top_news_wrap{
        width: 95%;
      } 
   }


.top_news_inner{
   position: relative;
   overflow: hidden;
   width: 100%;
   height: 100%;
   padding: 10px;
   background-color: rgba(255,255,255,1.00);
}

.news_box{
   position: relative;
   overflow: auto;
   box-sizing: border-box;
   width: 100%;
   height: 100%;
   margin: auto;
}
   @media screen and (max-width: 1024px) {
      .news_box{
         height: 400px !important;
      } 
   }




.news_list_box{
   position: relative;
   width: 100%;
   display: flex;
   justify-content: space-between;
   flex-wrap: wrap;
   margin-bottom: 5px;
   border-bottom: rgba(0,0,0,1.00) 2px dotted;
   font-family: 'Noto Serif JP', serif; 
   font-weight: 500;
   letter-spacing: 1px;
   font-size: 90%;
   background-color: rgba(255,255,255,1.00);
}

.news_list_box .news_left{
   position: relative;
   width: 120px;
   display: grid;
   place-content: center;
   background-color: rgba(0,0,0,1.00);
}
   @media screen and (max-width: 600px) {
      .news_list_box .news_left{
         width: 100px;
         min-height: 0;
      } 
   }


.news_list_box .news_right{
   position: relative;
   overflow: hidden;
   width: calc(100% - 120px);
   display: grid;
   align-items: center;
   background-color: rgba(255,255,255,1.00);
}
   @media screen and (max-width: 600px) {
      .news_list_box .news_right{
         width: 100%;
      } 
   }


.news_list_box .day{
   color: rgba(230,0,18,1.00);
}


.news_list_box .news_title{
   color: rgba(0,0,0,1.00);
   padding: 5px 10px;
   font-family: YakuHanMP,'Noto Serif JP', serif; 
}
     @media screen and (max-width: 600px) {
      .news_list_box .news_title{
         padding-bottom: 20px;
      } 
   }


.top_b_news{
   position: relative;
   width: 25%;
   margin: 0 auto 2% auto;
}
   @media screen and (max-width: 600px) {
      .top_b_news{
        width: 40%;
      } 
   }


.top_main_visual{
   position: relative;
   overflow: hidden;
   width: 100%;
   border-radius: 10px;
   transition: transform .5s;
}

.top_main_visual:hover{
   transform: scale(1.02);
   transition: transform .5s;
}



.top_under{
   position: relative;
   overflow: hidden;
   width: 100%;
   background-color: rgba(0,0,0,1.00);
   background-image: url("../images_portal/tmp/bg_004.jpg");
   background-position: top center;
   background-repeat: no-repeat;
   background-size: 100% auto;
   border: 0;
   padding: 40px 0;
}
   @media screen and (max-width: 480px) {
      .top_under{
         background-position: top right;
         background-size: 180% auto;
      } 
   }



.top_list_i01{
   position: relative;
   text-align: center;
   width: 100%;
   color: rgba(255,255,255,1.00);
   font-family: YakuHanMP,'Noto Serif JP', serif; 
   font-size: 220%;
   letter-spacing: 2px;
}
   @media screen and (max-width: 600px) {
      .top_list_i01{
         font-size: 4.8vw;
      } 
   }
   @media screen and (max-width: 480px) {
      .top_list_i01{
         font-size: 7.0vw;
      } 
   }

.top_list_i02{
   position: relative;
   text-align: center;
   font-family: YakuHanMP,'Noto Serif JP', serif; 
   font-size: 90%;
   letter-spacing: 2px;
   color: rgba(255,255,255,1.00);
   margin-bottom: 40px;
}
   @media screen and (max-width: 600px) {
      .top_list_i02{
         font-size: 2.6vw;
         margin-bottom: 20px;
      } 
   }
   @media screen and (max-width: 480px) {
      .top_list_i02{
         font-size: 3.6vw;
      } 
   }


.top_title_list{
   position: relative;
   width: min(75% , 2000px);
   margin: auto;
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
}
   @media screen and (max-width: 1024px) {
      .top_title_list{
        width: 90%;
      } 
   }
   @media screen and (max-width: 600px) {
      .top_title_list{
        width: 98%;
      } 
   }


.top_title_list li{
   position: relative;
   overflow: hidden;
   border: rgba(129,0,0,1.00) 2px solid;
   border-radius: 10px;
   margin-bottom: 15px;
   transition: transform .5s;
}

.top_title_list li:hover{
   transform: scale(1.02);
   transition: transform .5s;
}


.top_title_list li.bn_m{
   width: 49%;
}

.top_title_list li.bn_s{
   position: relative;
   width: 32%;
   border: rgba(129,0,0,1.00) 2px solid;
   border-radius: 10px;
}



/* ====================================================================
   ムービー領域
   ==================================================================== */

.movie_area{
   position: relative;
   overflow: hidden;
   display: block;
   background-color: rgba(255,255,255,1.00);
   border-bottom: rgba(0,0,0,1.00) 1px solid;
   border-radius: 10px;
   margin-top: 2%;
}
   @media screen and (max-width: 600px) {
      .movie_area{
         display: none;;
      } 
   }


.movieWrap {
  position: relative;
  overflow: hidden;
  z-index: 1;
  width: 100%;
  aspect-ratio: 100 / 33.6;
  user-select: none;
  pointer-events: none;
  margin: 0 auto 0 auto;
}
.movieWrap .movie_inner{
   position: relative;
   width: 100%;
   height: 100%;
   margin: auto;
}

.movieWrap .mov_kabuse{
   position: absolute;
   width: 100%;
   height: 100%;
   top: 0;
   left: 0;
   background-image: url("../images_portal/top/movie_k02.png");
   background-size: 2% auto;
   background-position: center;
   opacity: 1.0;
   transition: all 1s;
}

.movieWrap .kabuse{
   position: absolute;
   width: 100%;
   height: 100%;
   background-image: url("../images_portal/top/movie_k01.png");
   background-size: 100% auto;
   background-position: center;
   opacity: 0.5;
   transition: all 1s;
}
.movie_area:hover .kabuse{
   opacity: 0.1;
   transition: all 1s;
}

.movie_area:hover .mov_kabuse{
   background-color: rgba(0,0,0,0.10);
   transition: all 1s;
}

.movie_title{
   position: absolute;
   left: 0;
   right: 0;
   bottom: 10px;
   margin: auto;
}
.movie_title span{
   background: rgba(0,0,0,1.00);
   color: rgba(255,255,255,1.00);
   font-family: YakuHanMP,'Noto Serif JP', serif; 
   padding: 0 15px;

}



.b_play{
   position: absolute;
   width: 100px;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  -webkit- transform: translateY(-50%) translateX(-50%);
  margin: auto;
   transition: all 1s;
}
   @media screen and (max-width: 1024px) {
      .b_play{
         width: 80px;
      } 
   }
   @media screen and (max-width: 800px) {
      .b_play{
         width: 8%;
      } 
   }
   @media screen and (max-width: 600px) {
      .b_play{
         width: 15%;
      } 
   }


.b_play_hover{
   position: absolute;
   width: 100px;
   top: 50%;
   left: 50%;
   transform: translateY(-50%) translateX(-50%);
   -webkit- transform: translateY(-50%) translateX(-50%);
   margin: auto;
   opacity: 0;
   transition: all 1s;
}
   @media screen and (max-width: 1024px) {
      .b_play_hover{
         width: 80px;
      } 
   }
   @media screen and (max-width: 800px) {
      .b_play_hover{
         width: 8%;
      } 
   }


.movieWrap .left{
   position: absolute;
   width: 0%;
   height: 100%;
   background-color: rgba(233,84,107,1.00);
   top: 0;
   left: 0;
}
.movieWrap .right{
   position: absolute;
   width: 0%;
   height: 100%;
   background-color: rgba(89,118,186,1.00);
   top: 0;
   right: 0;
}

.movieWrap iframe {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 56.25vw;
    min-height: 100%;
    min-width: 100%;
    transform: translate(-50%,-50%);
}



.movieWrap_upper{
   position: relative;
   width: 100%;
   height: 40px;
   background-color: rgba(228,198,145,1.00);
}


.movie_m{
   display: none;
   position: relative;
   width: 100%;
   background-color: rgba(0,0,0,1.00);
}
   @media screen and (max-width: 600px) {
      .movie_m{
          display: block;
          margin: 10px auto;
      } 
   }

.movie_m .kabuse{
   position: absolute;
   width: 100%;
   height: 100%;
   top: 0;
   left: 0;
   background-image: url("../images_portal/top/movie_k01.png");
   background-size: 100% auto;
   background-position: center;
   opacity: 0.5;
   transition: all 1s;
}