@charset "UTF-8";

/*----------------

  セミナー一覧

----------------*/

.online_title{
	padding: 1rem 2rem;
  	border-left: 6px double #1740b6;
  	background: #e7edff;
	width:100%;
	line-height: 2em;
}

.online_seminar-sec2{
	background: #f6f8ff;
    padding: 90px 0;
}

.list.seminar-list.page li .seminar_pic_frame{
	content: "";
    /* position: absolute; */
    width: 100%;
    height: 100%;
    border: 1px solid #1740b6;
    z-index: 1;
}

.list.seminar-list.page li .zoom-wrap{
	content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    border: 4px solid #1740b6;
    z-index: 1;
}


.zoom-hover .seminar_zoom-wrap img{
	-webkit-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
    overflow: hidden;
    width: 100%;
    z-index: -1;
}



.zoom-hover .seminar_zoom-wrap {
    overflow: hidden;
    width: 100%;
}


/*----------------

  動画一覧

----------------*/

.movie_wrap .data_wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.update_time_text, .movie_wrap .update_time {
    font-size: 0.8em;
    color: #999999;
}


.line_item_wrap.col5 li{
    margin-bottom: 1vw;
    padding-bottom: 1vw;
}

.f_gengo {
    font-family: "Noto Sans Japanese", "游ゴシック", "YuGothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;
    font-style: normal;
    font-weight: 400;
}


.data_wrap{
	font-size: 3.2vw;
    line-height: 1.8;
    -webkit-text-size-adjust: 100%;
    font-feature-settings: "palt";
}

.line_item_wrap.movie_list li .online_streaming_list_l .label {
    position: absolute;
    right: 5px;
    right: 0.5rem;
    bottom: 5px;
    bottom: 0.5rem;
}

.online_streaming_list .online_streaming_list_l img {
    -webkit-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
    overflow: hidden;
    width: 100%;
    z-index: -1;
	border: 1px solid #333333;
}


.online_streaming_label {
    position: absolute;
    right: 5px;
    right: 0.5rem;
    bottom: 5px;
    bottom: 0.5rem;
}

.online_streaming_list{
	display:block;
}



.label.play_time {
    background: #000;
    font-size: 10px;
    font-size: 1.0rem;
    border-radius: 5px;
    padding: 0 5px;
    padding: 0 0.5rem;
}

.label {
    background: #771521;
    color: #FFF;
    padding: 0px 15px;
    padding: 0rem 1.5rem;
}


.line_item_link {
    display: block;
    background: #DDD;
}


.line_item_link {
    padding-top: 56.25%;
}

.line_item_link{
	display: block;
    position: relative;
    width: 100%;
    overflow: hidden;
    height: 0;
    z-index: 3;
}



 .line_item_link img{
    position: absolute;
    top: 0;
    left: 0;
}


/*--- ボタンアニメーション ---*/

.btn{
    /*アニメーションの起点とするためrelativeを指定*/
    position: relative;
	overflow: hidden;
    /*ボタンの形状*/
	text-decoration: none;
	display: inline-block;
   	border: 2px solid #13348b;/* ボーダーの色と太さ */
    padding: 10px 30px;
    text-align: center;
    outline: none;
    /*アニメーションの指定*/   
    transition: ease .2s;
	border-radius: 10px;
	background: #3053b1;
	color: #FFFFFF;
}

.free_btn{ /*無料*/
	border: 2px solid #9b0826;
	background: #b8203e;
	color: #FFFFFF;
}

.manual_btn{ /*マニュアル*/
	border: 2px solid #1b8e19;
	background: #35ab33;
	color: #FFFFFF;
}

.notwatched_btn{ /*視聴する*/
	border: 2px solid #b36d06;
	background: #d7840a;
	color: #FFFFFF;
}

.watched_btn{ /*再生する*/
	border: 2px solid #b36d06;
	background: #ee9d25;
	color: #FFFFFF;
}


.back_btn{ /*戻る*/
	border: 2px solid #555555;
	background: #FFFFFF;
	color: #555555;
}

/*ボタン内spanの形状*/
.btn span {
	position: relative;
	z-index: 3;/*z-indexの数値をあげて文字を背景よりも手前に表示*/
	/*color:#333;*/
}

.btn:hover span{
	color:#13348b;
}

/*== 背景が流れる（斜め） */
.bgskew::before {
	content: '';
    /*絶対配置で位置を指定*/
	position: absolute;
	top: 0;
	left: -130%;
    /*色や形状*/
	background:#a9bdf6;
	width:120%;
	height: 100%;
	transform: skewX(-25deg);
}

 /*無料*/
.free_btn:before{
	background: #f79eaf;
}

.free_btn:hover span{
	color: #9b0826;
}

 /*マニュアル*/
.manual_btn:before{
	background: #c6ecc5;
}

.manual_btn:hover span{
	color: #35ab33;
}

 /*視聴する*/
.notwatched_btn:before{
	background: #fcd192;
}

.notwatched_btn:hover span{
	color: #b36d06;
}

 /*再生する*/
.watched_btn:before{
	background: #fcd192;
}

.watched_btn:hover span{
	color: #b36d06;
}

 /*戻る*/
.back_btn:before{
	background: #CCCCCC;
}

.back_btn:hover span{
	color: #555555;
}

/*hoverした時のアニメーション*/
.bgskew:hover::before {
	animation: skewanime .5s forwards;/*アニメーションの名前と速度を定義*/
}

.online_seminar_btn a{
	width: 95%;
	margin: 20px auto;
}

.online_seminar_btn_main a{
	width: 95%;
	margin: 20px auto;
}

.online_seminar_bkbtn_main a{
	width: 80%;
	margin: 20px auto;
}


/*----------------

  動画一覧 20220406

----------------*/

.online_seminar_title{
	height: 50px;
}

.seminar_title_text{
}

.btn_position{
}


@media screen and (max-width:480px){
.online_seminar_title{
	height: 0px;
}
	
.btn_position{
		margin-top: 10px;
}
}


@keyframes skewanime {
	100% {
		left:-10%;/*画面の見えていない左から右へ移動する終了地点*/
	}
}


li:hover .online_streaming_list_l img {
    transform: scale(1.1);
}

li .online_streaming_list_l{
    position: relative;
    overflow: hidden;
}


.inner .movie-list li .pic_frame {
    border: 1px solid #333333;
}

/**印刷

SyntaxHighlighterについて*/
    /* デフォルト：479px以下用（スマートフォン用）の記述 */ 

@media screen and (max-width:480px){
	
.list.movie-list.pickup-movie li .online_seminar_img-wrap{
	width: 100%;
    /*padding-top: 35%;*/
}

.list.movie-list.pickup-movie li .online_seminar_text-wrap{
	/*width: 100%;*/
    padding-left: 2%;
    /*margin-top: 0;*/
}
	
.data_wrap{
	font-size: 16px;
    font-size: 1.6rem;
    line-height: 1.8;
    -webkit-text-size-adjust: 100%;
    font-feature-settings: "palt";
}
	
.sec_inner h2{
    font-size: 1.3em;		
	}
	
.online_streaming_list{
		display: flex;
	}
	
	.caption_title{
		font-size:0.8em;
	}
	
.online_seminar_btn a {
    width: 95%;
    margin: 3px auto;
    padding: 5px;
    font-size: 0.8em;
    border: 1px solid #eb5126;
}
	
.online_streaming_list{
	display: flex;
}
	
.online_streaming_list_l{
	width: 55%;
	position: relative;
}

.online_streaming_list_r{
	width: 45%;
	padding: 0 5px;
}
	
.line_item_wrap.movie_list li .online_streaming_list .label {
    position: absolute;
    right: 5px;
    right: 0.5rem;
    bottom: 5px;
    bottom: 0.5rem;
}
		
}


@media screen and (min-width:481px){ 

.online_streaming_list{
	display: flex;
}
	
.online_streaming_list_l{
	width: 55%;
}

.online_streaming_list_r{
	width: 45%;
	padding: 0 5px;
}
	
	
 .movie_wrap .caption_title{
    margin-top: 0;
    margin-bottom: calc(1.25rem + 0.3125vw - 1px);
}

	
} 



@media screen and (min-width:767px){ 
	
.list.movie-list.pickup-movie li .online_seminar_img-wrap{
	width: 35%;
    /*padding-top: 35%;*/
}
	
.online_seminar_btn-wrap{
	display: flex;
	width:100%;
	}
	
.online_seminar_btn_main{
		width:33%;
	}

.online_seminar_bkbtn_main{
	width:95%;
	max-width: 600px;
	margin: 0 auto;
}

	
.list.movie-list.pickup-movie li .online_seminar_text-wrap{
	width: 65%;
    padding-left: 2%;
    margin-top: 0;
}
	
.list.movie-list.pickup-movie li {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
}
	
.line_item_wrap.col5 {
    flex-wrap: wrap;
    justify-content: flex-start;
}
	
.line_item_wrap {
    display: flex;
    justify-content: space-between;
}

.line_item_wrap.col5 li:not(:nth-child(5n)) {
    margin-right: 13px;
}
	
.line_item_wrap.col5 li {
    width: 18%;
}
	
.data_wrap{
	font-size: 16px;
    font-size: 1.6rem;
    line-height: 1.8;
    -webkit-text-size-adjust: 100%;
    font-feature-settings: "palt";
	height: 3vw;
}
	
.online_movie_caption{
	height: 180px;		
}
	
.online_streaming_list{
	display:block;
}
	
.online_streaming_list_l{
	width: 100%;
}

.online_streaming_list_r{
	width: 100%;
}
	
 .movie_wrap .caption_title{
    margin-top: calc(1.25rem + 0.3125vw - 1px);
    margin-bottom: calc(1.25rem + 0.3125vw - 1px);
}

    /* 768px以上用（タブレット用）の記述 */ 
} 



@media screen and (min-width:980px){ 
	
	

    /* 980px以上用（PC用）の記述 */ 
} 

@media screen and (min-width:1023px){




}