@charset "utf-8";

/* =============================================
	映像講義体験版
============================================= */
/* 動画のインデックス */
.decimal{ margin: 15px 0 -5px ; }
.decimal li{
	margin: 0 0 0;
	line-height: 1.3;
}
.link_list{
  margin: 0 auto;
  max-width: 800px;
  padding: 40px;
  border: 1px solid var(--line-light);
}
.link_list li{
  padding: 5px 0;
  border-bottom: 1px solid var(--line-light);
}
.text_sample .link_arrow{
  margin: 0 0 20px;
  display: inline-block;
}

/* はじめての民法 */
.movie_outline{
	padding: 45px;
	background-color: #efefef;
	overflow: hidden;
	counter-reset: li;

}
.movie_outline img{
  margin: 0 auto 0;
	border: 5px solid #fff;
  display: block;
  width: 98%;
}
.movie_outline li{
	margin: 0 0 15px;
	padding: 10px 8px 10px;
	border-bottom: 2px dashed #fff;
	position: relative;
}
.movie_outline li:nth-child(2n){ padding-right: 0; }
.movie_outline li:nth-child(odd){ clear: both; }
.movie_outline li:before{
	content: counter(li);
	counter-increment: li;
	margin: 0 5px 0 0;
	padding: 0;
	display: block;
	position: absolute;
	height: 26px;
	width: 26px;
	top: -2px;
	left: -4px;
	font-size: 1.6rem;
	background-color: #e04536;
	color: #fff;
	line-height: 26px;
	vertical-align: middle;
	text-align: center;
	box-sizing: border-box;
	border: 1px solid #e04536;
	border-radius: 25px;
	font-weight: bold;
}

.movie_outline li:nth-last-child(-n+2){
	padding-bottom: 0;
	border-bottom: none;
}

/* バーチャル口述試験対策講座 */
.chapter_list li{
  margin: 0 0 10px;
	clear: both;
	overflow: hidden;
  display: flex;
  flex-wrap: wrap;
}
.chapter_list li > div{
  flex: 1;
}
.chapter_list li div h3{
	margin: 0 0 5px;
	font-size: 1.8rem;
}
.chapter_list li div h3 span{ color: #ed5032; }
.chapter_img{
	padding: 10px;
	text-align: center;
	background-color: #efefef;
	float: right;
	width: 440px;
}
.chapter_img img{
	border: 3px solid #fff;
	max-width: 98%;
	height: auto;
}


.movie_box{
	margin-bottom: 30px;
	padding-bottom: 20px;
	overflow: hidden;
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 15px;
}
.box2c{
  text-align: center;
}


/* ===========================================
	MediaQueries
=========================================== */
/* PC----------------------------- */
@media screen and (min-width: 768px){
  .box_wrap{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
  }
/* はじめての民法 */
.movie_outline{
	padding: 45px;
	background-color: #efefef;
	overflow: hidden;
	counter-reset: li;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

}

/* スマホ----------------------------- */
@media screen and (max-width: 767px){

	/* はじめての民法 */
	.movie_outline{
		padding: 10px;
	}
	.movie_outline li,
	.movie_outline li:nth-child(2n),
	.movie_outline li:nth-last-child(-n+2){
		margin: 0 10px 15px;
		padding: 0 0 5px;
		width: auto;
		float: none;
	}
	.movie_outline li:nth-last-child(2){
		padding-bottom: 0;
		border-bottom: 2px dashed #fff;
	}
	.movie_outline li:before{
		top: -5px;
		left: 2px;
	}
	.movie_outline  li img{
		margin: 0 10px 5px 0;
		display: block;
		width: 50%;
		float: left;
	}
	
	/* clearfix */
	.movie_outline li:after{
		visibility: hidden;
		display: block;
		font-size: 0;
		content: ' ';
		clear: both;
		height: 0;
	}

	/* バーチャル口述試験対策講座 */
	.chapter_list li div,
	.chapter_img{
		float: none;
		width: 100%;
		box-sizing: border-box;
	}
	.chapter_list li div p{
		margin-bottom: 5px;
	}
}