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

.h2-img{
	width: 150px;
	margin: 0 auto 20px;
}

.introduction{
	margin: 100px 0 0;
}
.introduction h2{
	text-align: center;
}
.introduction .text p{
	margin: 50px 0 0;
	text-align: center;
	font-size: 18px;
}

.introduction .caution{
	max-width: 800px;
	border: 2px solid #000;
	padding: 20px;
	margin: 50px auto 0;
}
.introduction .caution h3{
	text-align: center;
	font-size: 20px;
	margin: 0 0 30px;
	color: red;
}

.introduction .caution p span{
	margin: 10px 0 0;
}

.marker{
	line-height: 2.5;
}

.fa-star{
	color: rgb(255, 213, 0);
}

.list{
	margin: 100px 0 0;
	padding: 100px 0;
	background: #f9f4ee;
}
.list h2{
	text-align: center;
}
.list p.time{
	text-align: center;
	font-size: 22px;
	margin: 30px 0 0;
}
.list .list-box .box {
	margin: 50px 0 0;
	width: 48%;
}
.list .list-box .box .img01{
	background: url(../img/list01.jpg);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	width: 100%;
	padding: 54% 0 0;
	margin: 20px 0;
}
.list .list-box .box .img02{
	background: url(../img/list02.jpg);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	width: 100%;
	padding: 54% 0 0;
	margin: 20px 0;
}
.list .list-box .box .img03{
	background: url(../img/list03.jpg);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	width: 100%;
	padding: 54% 0 0;
	margin: 20px 0;
}
.list .list-box .box .img04{
	background: url(../img/list04.jpg);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	width: 100%;
	padding: 54% 0 0;
	margin: 20px 0;
}
.list .list-box .box .img05{
	background: url(../img/list05.jpg);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	width: 100%;
	padding: 54% 0 0;
	margin: 20px 0;
}
.list .list-box .box .img06{
	background: url(../img/list06.jpg);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	width: 100%;
	padding: 54% 0 0;
	margin: 20px 0;
}
.list .list-box .box .img07{
	background: url(../img/list07.jpg);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	width: 100%;
	padding: 54% 0 0;
	margin: 20px 0;
}
.list .list-box .box h3{
	margin: 0 0 20px;
}
.list .list-box .box a,
.last .lecture a,
.last .YouTube a{
	max-width: 300px;
    background: #238C00;
    border-radius: 50px;
    padding: 0.5em 2em;
    color: #fff;
    font-weight: bold;
    transition: all 0.5s ease 0s;	
    text-align: center;
    margin: 20px auto 0;
}
.list .list-box .box a:hover,
.last .lecture a:hover,
.last .YouTube a:hover{
	opacity: 0.6;
	color: #fff;
}
.center{
	text-align: center;
}

.last{
	margin: 100px 0;
}
.last h2{
	text-align: center;	
}
.last .text{
	margin: 50px 0 0;
	font-size: 18px;
	border-bottom: 1px solid #000;
}
.last .text p{
	margin: 0 0 20px;
}
.last .text a{
	display: inline-block;
	color: #0000FF;
    text-decoration: underline;
}
.last .text a:hover{
	color: #000;	
    text-decoration: none;
}

.last .lecture{
	border-bottom: 1px solid #000;	
	padding: 0 0 50px;
}
.last .lecture img{
	max-width: 340px;
	margin: 50px auto 0;
}
.last .lecture p{
	text-align: center;
	font-size: 18px;
	margin: 30px 0 0;
}
.last .YouTube img{
	max-width: 340px;
	margin: 50px auto 0;	
}
.last .YouTube p{
	text-align: center;
	font-size: 18px;
	margin: 30px 0 0;	
}

@media screen and (max-width:900px){
/*--- common ---------------------------------------*/
	.list .list-box .box {
		margin: 50px 0 0;
		width: 48%;
	}
}
@media screen and (max-width:767px){
/*--- common ---------------------------------------*/
	.list .list-box .box {
		margin: 50px 0 0;
		width: 100%;
	}
}

@media screen and (max-width:580px){
	.introduction,
	.list{
		margin: 50px 0 0;
	}
	.list{
		padding: 50px 0;
	}
	.last{
		margin: 50px 0;
	}
	.last .text {
		margin: 30px 0 0;
	}	
	
	
	.last .lecture img,
	.last .YouTube img {
		max-width: 200px;
		margin: 50px auto 0;
	}
}

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