/* =======================================
**
**　全ページ共通
**
======================================= */

body,
h1,h2,h3,h4,h5,h6,
p,
a{
   font-family: YuGothic,'Yu Gothic',sans-serif;
}

img{
   width: 100%;
   height: auto;
}

.new-line{
   display: block;
}

.main_box{
   width: 95%;
}

.main_title h2{
   display: inline-block;
   font-size: 61px;
   font-family: 'Times New Roman',sans-serif;
   font-weight: bold;
   color: #111;
   padding: 0 30px;
   position: relative;
   z-index: 2;
}

.main_title h2::before{
   display: block;
   content: "";
   width: 100px;
   height: 1px;
   background-image: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(1,1,1,1) 100%);
   position: absolute;
   top: 50%;
   left: -100px;
   transform: translateY(-50%);
}

.main_title h2::after{
   display: block;
   content: "";
   width: 100px;
   height: 1px;
   background-image: linear-gradient(90deg, rgba(1,1,1,1) 0%, rgba(255,255,255,1) 100%);
   position: absolute;
   top: 50%;
   right: -100px;
   transform: translateY(-50%);
}

.main_title p{
   font-size: 25px;
   font-family: 'Yu Mincho Light','YuMincho','Yu Mincho','游明朝体','ヒラギノ明朝 ProN','Hiragino Mincho ProN',sans-serif;
   font-weight: bold;
   color: #555;
}

.page-heading-sec{
   color: #333;
   font-weight: 900;
   border-bottom: solid 1px #e2e2e2;
   padding-bottom: 15px;
   margin-bottom: 15px;
}


/* .header_area,
.mv,
.feature_product_area,
.news,
.clients_logo_area,
.footer-area{
   padding-left: 240px;
} */

@media (max-width:1200px){
   .main_box{
      width: 100%;
   }

   .main_title h2::before{
      width: 50px;
      left: -50px;
   }
   
   .main_title h2::after{
      width: 50px;
      right: -50px;
   }
}

@media (max-width:1024px){
   .header_area,
   .mv,
   .feature_product_area,
   .news,
   .clients_logo_area,
   .footer-area{
      padding-left: initial;
   }
}


@media (max-width:768px){
   .main_title h2{
      font-size: 49px;
   }
   .feature_product_area .main_box{
      padding-top: 50px;
      padding-bottom: 50px;
   }
}


@media (max-width:500px){
   .main_title h2{
      font-size: 28px;
   }
   .main_title p{
      font-size: 18px;
   }
   .main_title h2::before{
      display: none;
   }
   .main_title h2::after{
      display: none;
   }
   .feature_product_area .main_box{
      padding-top: 50px;
      padding-bottom: 50px;
   }
   .page-heading-sec{
      color: #fdfdfd;
      font-size: 18px;
      background-color: #333;
      border-bottom: none;
      padding: 10px;
   }
}






/* =======================================
**
**　Block : ヘッダー・サイドバー
**
======================================= */

.main_menu{
   display: none;
}


/*----- メインビジュアル上部 : ログイン・新規登録 -----*/

.nav-user{
   display: flex;
   position: absolute;
   top: 30px;
   right: 30px;
}

.nav-user_button a{
   display: block;
   padding: 10px 20px 10px 50px;
   background: linear-gradient(90deg, rgba(0,78,146,1) 0%, rgba(0,4,40,1) 100%);
   border-radius: 50px;
   color: #fff;
   font-size: 16px;
   position: relative;
}

.nav-user_button:not(:last-child){
   margin-right: 15px;
}

.nav-user_button--mypage a::before{
   display: block;
   content: "\f502";
   font-family: "Font Awesome 5 Free";
   font-weight: 900;
   position: absolute;
   top: 50%;
   left: 15px;
   transform: translateY(-50%);
}

.nav-user_button--logout a::before{
   display: block;
   content: "\f2f5";
   font-family: "Font Awesome 5 Free";
   font-weight: 900;
   position: absolute;
   top: 50%;
   left: 15px;
   transform: translateY(-50%);
}

.nav-user_button--login a::before{
   display: block;
   content: "\f13e";
   font-family: "Font Awesome 5 Free";
   font-weight: 900;
   position: absolute;
   top: 50%;
   left: 15px;
   transform: translateY(-50%);
}

.nav-user_button--register a::before{
   display: block;
   content: "\f234";
   font-family: "Font Awesome 5 Free";
   font-weight: 900;
   position: absolute;
   top: 50%;
   left: 15px;
   transform: translateY(-50%);
}


/*----- サイドメニュー -----*/

.sidebar{
   position: fixed;
   top: 0;
   left: 0;
   background-color: #111;
   width: 300px;
   height: 100vh;
   overflow-y: scroll;
}

.sidebar_logo{
   padding: 50px 30px;
   margin-bottom: 50px;
}

.sidebar_logo a{
   display: block;
   max-width: 250px;
   margin: 0 auto;
}

.sidebar_content{
   display: flex;
   flex-direction: column;
   /* height: calc(100% - 300px); */
   margin-bottom: 60px;
}

.sidebar_nav{
   display: block;
   margin: 30px 0;
   padding: initial;
}

.sidebar_category{
   padding: 0 15px;
}

.sidebar_category-list{
   padding: initial;
   margin: initial;
   width: 100%;
}

.sidebar_category-item{
   list-style-type: none;
   width: 100% !important;
   
}

.sidebar_category-item>a{
   text-align: right !important;
   font-size: 14px !important;
   font-family: YuGothic,'Yu Gothic',sans-serif !important;
   font-weight: normal !important;
   color: #fff !important;
   background: none !important;
   padding: 15px 30px 15px 10px !important;
   position: relative;
   display: block;
   border-bottom: solid 1px #333 !important;
}

.sidebar_category-item--01 > a::after{
   display: block;
   content: "+";
   font-size: 13px;
   color: #fff;
   position: absolute;
   top: 50%;
   right: 0;
   transform: translateY(-50%);
}

.sidebar_category-item--02 > a::after{
   display: block;
   content: ">";
   font-size: 13px;
   color: #fff;
   position: absolute;
   top: 50%;
   right: 0;
   transform: translateY(-50%);
}





/* .sidebar_category-item>a::before{
   display: block;
   content: "";
   width: 100%;
   height: 1px;
   background: linear-gradient(90deg, rgba(17,17,17,1) 0%, rgba(255,255,255,1) 50%, rgba(17,17,17,1) 100%);
   position: absolute;
   top: 0;
   left: 0;
}

.sidebar_category-item>a::after{
   display: block;
   content: "";
   width: 100%;
   height: 1px;
   background: linear-gradient(90deg, rgba(17,17,17,1) 0%, rgba(255,255,255,1) 50%, rgba(17,17,17,1) 100%);
   position: absolute;
   bottom: 0;
   left: 0;
} */


.sidebar_menu-list{
   padding: 15px;
   margin-bottom: initial;
}

.sidebar_menu-item{
   list-style-type: none;
}

.sidebar_menu-item a{
   color: #fff;
   display: block;
   text-align: right;
   padding: 15px 30px 15px 10px;
   position: relative;
   border-bottom: solid 1px #333;
}

.sidebar_menu-item a::after{
   display: block;
   content: ">";
   font-size: 13px;
   color: #fff;
   position: absolute;
   top: 50%;
   right: 0;
   transform: translateY(-50%);
}

.sidebar_iconbox{
   display: flex;
   justify-content: center;
   margin-bottom: 40px;
}

.sidebar_iconbox-item{
   border: solid 1px #fff;
   border-radius: 50%;
   padding: 8px 12px;
   color: #fff;
   font-size: 16px;
}

.sidebar_iconbox-item:not(:last-child){
   margin-right: 15px;
}

.sidebar_iconbox-item:hover{
   background: #fff;
   color: #333;
}


/* .sidebar_cta{
   position: absolute;
   bottom: 0;
   left: 0;
}

.sidebar_button{
   display: block;
   width: 300px;
   padding: 15px;
   background: linear-gradient(90deg, rgba(0,78,146,1) 0%, rgba(0,4,40,1) 100%);
   position: relative;
   padding-left: 60px;
   color: #fff;
}

.sidebar_button--cart{
   margin-bottom: 1px;
}

.sidebar_button--cart::before{
   display: block;
   content: "";
   background-image: url(../img/icon-cart.png);
   background-repeat: no-repeat;
   background-size: cover;
   width: 25px;
   height: 25px;
   position: absolute;
   top: 50%;
   left: 15px;
   transform: translateY(-50%);
}

.sidebar_button--contact{
   margin-bottom: 1px;
}

.sidebar_button--contact::before{
   display: block;
   content: "";
   background-image: url(../img/icon-mail.png);
   background-repeat: no-repeat;
   background-size: cover;
   width: 25px;
   height: 25px;
   position: absolute;
   top: 50%;
   left: 15px;
   transform: translateY(-50%);
} */

.sidebar_iconbox-item i:before{
   font-family: "Font Awesome 5 Free";
   font-weight: 900;
}

.sidebar_button--phone{
   font-size: 25px;
   font-family: 'Yu Mincho Light','YuMincho','Yu Mincho','游明朝体',sans-serif;
   font-weight: bold;
   text-align: center;
   margin: 0 auto;
   position: relative;
   color: #fff;
   padding-left: 15px;
}

.sidebar_button--phone::before{
   display: block;
   content: "\f2a0";
   font-family: "Font Awesome 5 Free";
   font-size: 28px;
   position: absolute;
   top: 0;
   left: 40px;
}

.sidebar_button--phone .new-line{
   font-size: 13px;
   margin-top: 5px;
   font-weight: normal;
}

@media (max-width:1024px){

   .sidebar{
      display: none;
   }

   .main_menu{
      display: block;
   }
   
   .header_area .navbar{
      background: #111;
   }

   .navbar-toggler span{
      background-color: #fff;
   }

   .header_area .navbar .nav .nav-item .nav-link{
      color: #fff;
      font-size: 15px;
      line-height: 48px;
   }

   .header_area.navbar_fixed .main_menu .navbar .nav .nav-item .nav-link{
      line-height: 48px;
   }

   .nav-user{
      display: none;
   }

   .navbar-brand{
      max-width: 150px;
   }

   .navbar-icon{
      display: flex;
   }

   .navbar-collapse{
      display: none;
      padding: 30px 0;
   }
   .navbar-expand-lg .navbar-toggler{
      display: block;
   }
}







/* =======================================
**
**　Block : メインビジュアル
**
======================================= */


.mv_inner{   
   position: relative;
   overflow: hidden;
   width: 100%;
}

.mv_catch{
   position: absolute;
   top: 50%;
   left: 80px;
   transform: translateY(-50%);
   z-index: 2;
}

.mv_headline{
   color: #fff;
   font-family: 'Times New Roman',sans-serif;
   font-weight: bold;
   font-size: 6.198vw;
   line-height: 1;
   text-shadow: 0 0 10px rgba(1,1,1,0.4);
}

.mv_headline::after{
   display: block;
   content: "";
   width: 100px;
   height: 5px;
   border-radius: 4px;
   background-color: #fff;
   margin: 30px 0;
}

.mv_headline-sub{
   color: #fff;
   font-size: 1.318vw;
   line-height: 1.5;
   font-family: 'Yu Mincho Light','YuMincho','Yu Mincho','游明朝体',sans-serif;
   font-weight: 600;
   letter-spacing: 0.05em;
   text-shadow: 0 0 10px rgba(1,1,1,0.4);
}


.mv_video video{
   width: 100vw;
   filter: brightness(80%) sepia(0.3);
}


@media (max-width:1200px){
   .mv_inner{
      background-color: #e2e2e2;
   }
   
   .mv_video{
      margin-bottom: 90px !important;
   }
   .mv_headline-sub{
      font-size: 16px;
   }
}

@media (max-width:1024px){
   .mv_inner{
      margin-top: 70px;
   }
}

@media (max-width:768px){
   .mv_headline{
      font-size: 72px;
   }
}


@media (max-width:500px){
   .mv_catch{
      top: 40%;
      left: 30px;
   }
   .mv_headline{
      font-size: 40px;
   }
   .mv_headline::after{
      margin: 20px 0;
      width: 50px;
      height: 2px;
   }
   .mv_headline-sub{
      font-size:  12px;
   }
   .mv_video{
      margin-bottom: 90px !important;
   }
   .mv_video video{
      width: initial;
   }
}





/* =======================================
**
**　Block : バナー・おすすめ動画
**
======================================= */

.f_p_item h4{
   color: #333;
   font-size: 18px;
   font-weight: bold;
}

.f_p_item h5{
   font-size: 16px;
}




/* =======================================
**
**　Block : 人気動画
**
======================================= */

.ranking-movie{
   background-color: #333;
   padding-top: 150px;
   padding-bottom: 150px;
}

.ranking-movie .main_box{
   background-color: #333;
   position: relative;
   z-index: 1;
   box-shadow: none;
}

.ranking-movie .main_title h2{
   color: #fdfdfd;
}

.ranking-movie .main_title h2::before{
   background-color: #fdfdfd;
   background-image: linear-gradient(90deg, rgba(51,51,51,1) 0%, rgba(255,255,255,1) 100%);
}

.ranking-movie .main_title h2::after{
   background-color: #fdfdfd;
   background-image: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(51,51,51,1) 100%);
}

.ranking-movie .main_title p{
   color: #fdfdfd;
}

.ranking-movie .f_p_item{
   position: relative;
}

.ranking-movie .f_p_item h4{
   color: #fdfdfd;
}

.ranking-movie .f_p_item h5{
   color: #fdfdfd;
}

.ranking-movie .ranking-number{
   font-size: 18px;
   font-weight: bold;
   color: #111;
   position: absolute;
   top: -15px;
   left: -15px;
   z-index: 2;
   background-color: #FFE719;
   border-radius: 50%;
   padding: 13px 10px;
}

@media (max-width: 1200px){
   .ranking-movie{
      padding-top: 100px;
      padding-bottom: 100px;
   }
}

@media (max-width: 768px){
   .ranking-movie{
      padding-top: initial;
      padding-bottom: initial;
   }
}




/* =======================================
**
**　Block : 新着情報
**
======================================= */

.news{
   background-image: url(../img/block-news-bg.jpg);
   background-repeat: no-repeat;
   background-size: cover;
   background-attachment: fixed;
}

.news_inner{
   padding: 150px 15px;
   background-color: rgba(1,1,1,0.8);
}

.news_inner .container{
   border: solid 1px #fff;
   padding: 30px;
   text-align: center;
}

.news h2,
.news p{
   color: #fff;
}

.news .main_title h2::before{
   background-color: #fdfdfd;
   background-image: linear-gradient(90deg, rgba(51,51,51,1) 0%, rgba(255,255,255,1) 100%);
}

.news .main_title h2::after{
   background-color: #fdfdfd;
   background-image: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(51,51,51,1) 100%);
}

/******************************************
▼　新着情報（カスタマイズ : タイトルのみ）で使用　▼
******************************************/

.news_list{
   display: inline-block;
}

.news_item a{
   display: flex;
   border-bottom: dashed 1px #fff;
   padding-bottom: 10px;
}

.news_item:not(:last-child){
   margin-bottom: 20px;
}

.news_item .deta{
   margin-right: 30px;
   margin-bottom: initial;
   font-size: 18px;
}

.news_item .article-title{
   margin: initial;
}

.news_item .article-title{
   font-size: 18px;
   color: #fff;
   margin: initial;
}

/******************************************
▼　新着情報（カスタマイズ : 詳細付き）で使用　▼
******************************************/

.news .ec-newsRole__newsItem{
   max-width: 90%;
   margin: 0 auto;
   font-size: 16px;
   color: #fff;
}

.news .ec-newsRole__newsHeading{
   display: flex;
   flex-wrap: wrap;
   position: relative;
   margin-bottom: 15px;
   padding-bottom: 15px;
   border-bottom: dotted 1px #e2e2e2;
}

.news .ec-newsRole__newsDate{
   margin-right: 30px;
}

.news .ec-newsRole__newsClose{
   position: absolute;
   top: 50%;
   right: 0;
   transform: translateY(-50%);
}

.news .ec-newsRole__newsDescription{
   display: none;
}

.news .ec-newsRole__newsItem.is_active .ec-newsRole__newsDescription{
   margin: 0 0 15px 0;
   padding: 15px;
   background-color: #e2e2e2;
   color: #333;
   text-align: left;
}

.news .ec-inlineBtn--top{
   color: #fff !important;
}


@media (max-width:1024px){
   .news_inner{
      padding: 50px 15px;
   }
}

@media (max-width:500px){
   .news{
      background-attachment: initial;
      background-position: -350px center;
   }

   .news_inner{
      padding: 15px;
   }

   .news_list{
      width: 100%;
   }
   .news_item a{
      display: block;
   }
   .news_item .deta{
      margin-right: initial;
      margin-bottom: 5px;
      font-size: 13px;
      text-align: left;
   }
   .news_item .article-title{
      text-align: left;
   }

   .news .ec-newsRole__newsItem{
      max-width: 100%;
   }

   .news .ec-newsRole__newsHeading{
      display: block;
      text-align: left;
      padding-left: 15px;
      padding-right: 30px;
   }

   .news .ec-newsRole__newsDate{
      margin-right: initial;
      font-size: 13px;
      color: #e2e2e2;
   }
}







/* =======================================
**
**　Block : 関連事業
**
======================================= */

.clients_logo_area .clients_slider .item img{
   width: 100%;
}

.clients_logo_area .main_title h2{
   color: #fdfdfd;
}

.clients_logo_area .main_title h2::before{
   background-color: #fdfdfd;
   background-image: linear-gradient(90deg, rgba(51,51,51,1) 0%, rgba(255,255,255,1) 100%);
}

.clients_logo_area .main_title h2::after{
   background-color: #fdfdfd;
   background-image: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(51,51,51,1) 100%);
}

.clients_logo_area .main_title p{
   color: #fdfdfd;
}

@media (max-width: 768px){
   .clients_logo_area{
      padding-top: 50px;
      padding-bottom: 50px;
   }
}

@media (max-width: 500px){
   .clients_logo_area{
      padding-top: 50px;
      padding-bottom: 50px;
   }
}





/* =======================================
**
**　Block : 動画一覧
**
======================================= */

.movie-pickup_inner{
   padding-top: 150px;
   padding-bottom: 50px;
}

.movie-pickup_list{
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
   padding: initial;
   margin: 0 30px;
   box-shadow: 0 0 20px rgba(204,204,204,0.4);
}

.movie-pickup_item{
   list-style-type: none;
   margin: initial;
   padding: initial;
   width: calc(100% / 3);
   position: relative;
}


.movie-pickup_thumb{
   position: absolute;
   top: 0;
   left: 0;
   opacity: 1;
   transition:0.3s;
   background-repeat: no-repeat;
   background-size: cover;
   display: block;
   width: 100%;
   height: 100%;
}

.movie-pickup_thumb--01{
   background-image: url(../img/movie-thumb01.jpg);
}

.movie-pickup_thumb--02{
   background-image: url(../img/movie-thumb02.jpg);
}

.movie-pickup_thumb--03{
   background-image: url(../img/movie-thumb03.jpg);
}

.movie-pickup_thumb--04{
   background-image: url(../img/movie-thumb04.jpg);
}

.movie-pickup_thumb--05{
   background-image: url(../img/movie-thumb05.jpg);
}

.movie-pickup_thumb--06{
   background-image: url(../img/movie-thumb06.jpg);
}

.movie-pickup_thumb--07{
   background-image: url(../img/movie-thumb07.jpg);
}

.movie-pickup_thumb--08{
   background-image: url(../img/movie-thumb08.jpg);
}

.movie-pickup_thumb--09{
   background-image: url(../img/movie-thumb09.jpg);
}

.movie-pickup_item.on .movie-pickup_thumb{
   opacity: 0;
}

.movie-pickup_button{
   display: block;
   width: 100%;
   height: 100%;
   position: absolute;
   z-index: 10;
}

.movie-pickup_item video{
   width: 100%;
   vertical-align: bottom;
   transition: 0.5s;
}

@media (max-width:768px){
   .movie-pickup_inner{
      padding-top: 50px;
      display: none;
   }
}


@media (max-width:500px){
   .movie-pickup_inner{
      padding-top: 50px;
      padding-bottom: 0;
   }

   .movie-pickup_item{
      width: 100%;
   }

   .movie-pickup_list{
      box-shadow: initial;
   }

   .movie-pickup_item{
      box-shadow: 0 0 20px rgba(204,204,204,0.4);
   }

   .movie-pickup_item:not(:last-child){
      margin-bottom: 10px;
   }
}








/* =======================================
**
**　Block : footer
**
======================================= */

.footer-area{
   padding-top: 50px;
   padding-bottom: 15px;
}

.footer-area .container{
   text-align: center;
}

.footer-menu{
   display: inline-block;
}

.footer-menu_sns{
   display: flex;
   justify-content: center;
   margin-bottom: 50px;
   padding: initial;
}

.footer-menu_sns-item{
   width: 40px;
   height: 40px;
   list-style-type: none;
}

.footer-menu_sns-item:not(:last-child){
   margin-right: 30px;
}

.footer-menu_list{
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   padding: initial;
   margin-bottom: 30px;
}

.footer-menu_item{
   list-style-type: none;
}

.footer-menu_item:not(:last-child){
   border-right: solid 1px #333;
   padding-right: 25px;
   margin-right: 25px;
}

.footer-menu_item a{
   color: #333;
   font-size: 14px;
}

.footer-bottom{
   padding-top: initial;
}

@media (max-width:500px){
   .footer-menu_list{
      display: block;
   }
   .footer-menu_item:not(:last-child){
      border: initial;
      padding: initial;
      margin-right: initial;
      margin-bottom: 10px;
   }
}