@charset "utf-8";
/*============================================================


  top.css


============================================================*/
html {
  height: 100%;
}

body {
  height: 100%;
}



/*#main > section {
	display: block;
	width: 100%;
}*/

#main > section > h3 {
	margin-bottom: 3em;
}

#main > section > h3 > strong {
	display: block;
	font-family: 'Nunito';
	font-size: 150%;
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: 0.2em;
}

#main > section > h3 > span {
	display: inline-block;
	font-size: 75%;
	letter-spacing: 0.04em;
	padding: 0.2em 0.4em;
	margin-top: 0.5rem;
	background: #ffe100;
}

@media (max-width: 660px) {
	#main > section > h3 {
		margin-bottom: 2.2em;
	}
}



body.animation #main > section > h3 > span {
	opacity: 0;
	-webkit-transform: scale(0.5);
	   -moz-transform: scale(0.5);
	    -ms-transform: scale(0.5);
	     -o-transform: scale(0.5);
	        transform: scale(0.5);
}

body.animation #main > section.active > h3 > span {
	-webkit-animation: show_sectionHeadline_transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.3s both,
                     show_opacity 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) 0.3s both;
     -moz-animation: show_sectionHeadline_transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.3s both,
                     show_opacity 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) 0.3s both;
      -ms-animation: show_sectionHeadline_transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.3s both,
                     show_opacity 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) 0.3s both;
       -o-animation: show_sectionHeadline_transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.3s both,
                     show_opacity 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) 0.3s both;
          animation: show_sectionHeadline_transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.3s both,
                     show_opacity 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) 0.3s both;
}

@-webkit-keyframes show_sectionHeadline_transform {
  0% { -webkit-transform: scale(0.5);}
  100% { -webkit-transform: scale(1);}
}

@-moz-keyframes show_sectionHeadline_transform {
  0% { -moz-transform: scale(0.5);}
  100% { -moz-transform: scale(1);}
}

@-ms-keyframes show_sectionHeadline_transform {
  0% { -ms-transform: scale(0.5);}
  100% { -ms-transform: scale(1);}
}

@-o-keyframes show_sectionHeadline_transform {
  0% { -o-transform: scale(0.5);}
  100% { -o-transform: scale(1);}
}

@keyframes show_sectionHeadline_transform {
  0% { transform: scale(0.5);}
  100% { transform: scale(1);}
}





#main > section > p {
	display: block;
	color: #292929;
	font-size: 100%;
	letter-spacing: 0.22em;
	line-height: 2.3;
}

#main > section > p + p {
	margin-top: 2em;
}


#main > section > p.brank {
	margin: 2.4em 0;
}


@media (max-width: 660px) {
	#main > section > p {
		font-size: 11px;
		letter-spacing: 0.08em;
		line-height: 1.4;
		padding-left: 6%;
		padding-right: 6%;
	}

	#main > section > p + p {
		margin-top: 0.8em;
	}

	#main > section > p.brank {
		margin: 1.6em 0;
	}
}




@-webkit-keyframes show_opacity {
  0% { opacity: 0;}
  100% { opacity: 1;}
}

@-moz-keyframes show_opacity {
  0% { opacity: 0;}
  100% { opacity: 1;}
}

@-ms-keyframes show_opacity {
  0% { opacity: 0;}
  100% { opacity: 1;}
}

@-o-keyframes show_opacity {
  0% { opacity: 0;}
  100% { opacity: 1;}
}

@keyframes show_opacity {
  0% { opacity: 0;}
  100% { opacity: 1;}
}





/*========================================
  hero
========================================*/
#hero {
	display: block;
	width: 100%;
	margin-bottom:75px;
	padding-top: 0;
	text-align: left;
	color:#ffe100!important;
}

#hero > ul > li {
	display: block;
	width: 100%;
	height: 70vh;
	box-sizing: border-box;
	position: relative;
	overflow: hidden;
}

#hero > ul > li:first-of-type {
	height: 100vh;
	border-top: 100px solid;
}

html.ios.chrome #hero > ul > li:first-of-type,
html.android.chrome #hero > ul > li:first-of-type {
}

html.legacy #hero > ul > li {
	height: auto;
}

.hero16-1{
	background-image:url('/sp/cosgenic/lesson16/images/hero-1.jpg');
	background-position: center center!important;
}

.hero16-2{
	background-image:url('/sp/cosgenic/lesson16/images/hero-2.jpg');
	background-position: center top;
}

.hero16-3{
	background-image:url('/sp/cosgenic/lesson16/images/hero-3.jpg');
	background-position: center top;
}

.hero16-4{
	background-image:url('/sp/cosgenic/lesson16/images/hero-4.jpg');
	background-position: left top!important;
}


@media (max-width: 1025px) {

/*.hero15-3{
	background-image:url('/sp/cosgenic/lesson16/images/hero-3.jpg');
	background-position: left top!important;
}*/

	.hero16-3{
		background-image:url('/sp/cosgenic/lesson16/images/hero-3.jpg');
		background-position: 10% top!important;
	}

/*	.hero16-4{
		background-image:url('/sp/cosgenic/lesson16/images/hero-4.jpg');
		background-position: 60% top!important;
	}*/

}


@media (max-width: 768px) {
	#hero > ul > li:first-of-type {
		/*height: 140vh;*/
		height:100vh;
		border-top: 64px solid;
	}

	.hero16-1{
		background-image:url('/sp/cosgenic/lesson16/images/hero-1.jpg');
		background-position: 60% center!important;
	}
	
	.hero16-2{
		background-image:url('/sp/cosgenic/lesson16/images/hero-2.jpg');
		background-position: 30% top!important;
	}
	
	.hero16-3{
		background-image:url('/sp/cosgenic/lesson16/images/hero-3.jpg');
		background-position: 10% top!important;
	}

/*	.hero16-4{
		background-image:url('/sp/cosgenic/lesson16/images/hero-4.jpg');
		background-position: 60% top!important;
	}*/

}

@media (max-width: 480px) {
	#hero > ul > li:first-of-type {
		/*height: 100vh;*/
		height: 70vh;
		border-top: 64px solid;
	}
}

@media (max-width: 375px) {
	#hero > ul > li:first-of-type {
		height: 75vh;
		border-top: 64px solid;
	}
}

@media (max-width: 320px) {
	#hero > ul > li:first-of-type {
		height: 100vh;
		border-top: 64px solid;
	}
}

@media (min-width: 1980px) {

	.hero16-3{
		background-image:url('/sp/cosgenic/lesson16/images/hero-3.jpg');
		background-position: 10% top!important;
	}

/*	.hero16-4{
		background-image:url('/sp/cosgenic/lesson16/images/hero-4.jpg');
		background-position: center top!important;
	}*/

}



/*タイトルボックス左配置用-----------------------------*/
/*
#hero > ul > li .label {
	position: absolute;
	left: 20px;
	bottom: 20px;
	width: 28em;
	padding: 2% 0 2% 2%;
	background:#FFF;
	box-sizing: border-box;
	z-index: 1;
	display: block;
}

#hero > ul > li .label span{
	position:absolute;
	top:0;
	right:0;
	padding:8px 10px;
	background:#F8DD60;
	font-size:12px;
	color:#FFF;
}

#hero > ul > li .label h2{
	margin-bottom:15px;
	font-size:42px;
	font-family: 'Nunito';
	color:#F8DD60;
}

#hero > ul > li .label h3{
	margin-bottom:15px;
	font-size:22px;
	line-height:1.2;
}

#hero > ul > li .label h3 span{
	position:relative;
	top:auto;
	right:auto;
	padding:0;
	background:none;
	font-size:17px;
	color:#000;
}

#hero > ul > li .label p {
	font-size: 75%;
	letter-spacing: 0.08em;
	line-height: 1.8;
	padding-right: 3%;
	position: relative;
	z-index: 1;
}
*/
/*タイトルボックス左配置用-----------------------------*/


/*タイトルボックス右配置用-----------------------------*/
#hero > ul > li .label {
	position: absolute;
	right: 20px;
	bottom: 20px;
	width: 28em;
	padding: 2%;
	background:#FFF;
	box-sizing: border-box;
	z-index: 1;
	display: block;
}

#hero > ul > li .label span{
	position:absolute;
	top:0;
	right:0;
	padding:8px 10px;
	background:#D96A74;
	font-size:12px;
	color:#FFF;
}

#hero > ul > li .label h2{
	margin-bottom:10px;
	font-size:36px;
	font-family: 'Nunito';
	color:#D96A74;
}

#hero > ul > li .label h3{
	margin-bottom:10px;
	font-size:20px;
	line-height:1.2;
}

#hero > ul > li .label h3 span{
	position:relative;
	top:auto;
	right:auto;
	padding:0;
	background:none;
	font-size:17px;
	color:#000;
}

#hero > ul > li .label p {
	font-size: 75%;
	letter-spacing: 0.08em;
	line-height: 1.8;
	padding-right: 3%;
	position: relative;
	z-index: 1;
}
/*タイトルボックス右配置用-----------------------------*/


@media (max-width: 1140px) {
	#hero > ul > li .label h3{
		font-size:19px;
	}
}

@media (max-width: 780px) {
	#hero > ul > li .label h3{
		font-size:17px;
	}
}


@media (max-width: 660px) {
    
#hero{
	margin-bottom: 40px;
}

#hero > ul > li .label {
	top:55%;
	left:0;
	width: 94%;
	height: 10em;
	margin: 0 3%;
	padding: 0.8em;
	box-shadow: 4px 4px #d6d6d6;
}
	
#hero > ul > li .label h2{
	font-size:32px;
}


}

@media (max-width: 480px) {
	#hero > ul > li .label h3{
		font-size:15px;
	}
}

body.animation #hero > ul > li .label {
	opacity: 0;
	-webkit-transform: translateX(5%);
	   -moz-transform: translateX(5%);
	    -ms-transform: translateX(5%);
	     -o-transform: translateX(5%);
	        transform: translateX(5%);
}

body.animation #hero > ul > li.active .label {
	-webkit-animation: show_heroLabel 0.8s cubic-bezier(0.165, 0.84, 0.44, 1) both;
	   -moz-animation: show_heroLabel 0.8s cubic-bezier(0.165, 0.84, 0.44, 1) both;
	    -ms-animation: show_heroLabel 0.8s cubic-bezier(0.165, 0.84, 0.44, 1) both;
	     -o-animation: show_heroLabel 0.8s cubic-bezier(0.165, 0.84, 0.44, 1) both;
	        animation: show_heroLabel 0.8s cubic-bezier(0.165, 0.84, 0.44, 1) both;
}


@-webkit-keyframes show_heroLabel {
	0% { -webkit-transform: translateX(5%); opacity: 0;}
	100% { -webkit-transform: translateX(0); opacity: 1;}
}

@-moz-keyframes show_heroLabel {
	0% { -moz-transform: translateX(5%); opacity: 0;}
	100% { -moz-transform: translateX(0); opacity: 1;}
}

@-ms-keyframes show_heroLabel {
	0% { -ms-transform: translateX(5%); opacity: 0;}
	100% { -ms-transform: translateX(0); opacity: 1;}
}

@-o-keyframes show_heroLabel {
	0% { -o-transform: translateX(5%); opacity: 0;}
	100% { -o-transform: translateX(0); opacity: 1;}
}

@keyframes show_heroLabel {
	0% { transform: translateX(5%); opacity: 0;}
	100% { transform: translateX(0); opacity: 1;}
}


/*タイトルボックス左配置用-----------------------------*/
/*
#hero > ul > li .label:before {
	content: "";
	display: block;
	width: 0;
	height: 0;
	background: rgba(0,0,0,0);
	position: absolute;
	right: 100%;
	top: 0;
	z-index: 0;
	-webkit-transition: right 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
	   -moz-transition: right 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
	    -ms-transition: right 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
	     -o-transition: right 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
	        transition: right 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
}

#hero > ul > li .label:hover:before {
	right: 0;
    width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.06);
}
*/
/*タイトルボックス左配置用-----------------------------*/


/*タイトルボックス右配置用-----------------------------*/
#hero > ul > li .label:before {
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0);
	position: absolute;
	left: 100%;
	top: 0;
	z-index: 0;
}

#hero > ul > li .label:hover:before {
	left: 0;
    width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.04);
	-webkit-transition: 0.3s;
	-moz-transition: 0.3s;
	-ms-transition: 0.3s;
	-o-transition: 0.3s;
	transition: 0.3s;
}
/*タイトルボックス右配置用-----------------------------*/



@media (max-width: 660px) {
	#hero > ul > li .label h3 {
		margin-bottom: 0.6em;
	}
	#hero > ul > li .label h3 strong {
		font-size: 107%;
		letter-spacing: 0.04em;
	}
	#hero > ul > li .label h3 span {
		display: block;
		font-size: 70%;
		letter-spacing: -0.01em;
	}
	#hero > ul > li .label p {
		font-size: 68.75%;
		letter-spacing: 0.04em;
		line-height: 1.6;
	}

}






#hero > ul > li .photo {
	display: block;
	width: 100%;
	height: 100%;
	margin: auto;
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	z-index: 0;
}



@media (max-width: 660px) {
	#hero > ul > li .photo {
		width: 100%;
		height: 66%;
		margin: 0 auto;
		top: 0;
		bottom: auto;
	}

	html.legacy #hero > ul > li .photo {
		height: 360px;
		position: relative;
		right: auto;
		bottom: auto;
	}

	html.legacy #hero > ul > li:first-of-type .photo {
		height: 480px;
	}
}



#hero > ul > li .photo > div,
#list > ul > li .photo > div{
	display: block;
	width: 100%;
	height: 100%;
	overflow: hidden;
	position: absolute;
	left: 0;
	top: 0;
}

#hero > ul > li .photo > div > span{
	display: block;
	width: 100%;
	width: 100vw;
	height: 100%;
	background-repeat: no-repeat;
	background-position: center top;
	-webkit-background-size: cover;
	   -moz-background-size: cover;
	    -ms-background-size: cover;
	     -o-background-size: cover;
					background-size: cover;
	position: absolute;
	left: 0;
	top: 0;
}

#list > ul > li .photo > div > span{
	display: block;
	width: 100%;
	height: 100%;
	background-repeat: no-repeat;
	background-position: center top;
	-webkit-background-size: cover;
	   -moz-background-size: cover;
	    -ms-background-size: cover;
	     -o-background-size: cover;
					background-size: cover;
	position: absolute;
	left: 0;
	top: 0;
}

html.android5.androidbrowser #hero > ul > li .photo > div > span,
html.android5.androidbrowser #list > ul > li .photo > div > span{
	background: none !important;
}

#hero > ul > li:nth-of-type(n+2) .photo > div:nth-of-type(n+2),
#list > ul > li:nth-of-type(n+2) .photo > div:nth-of-type(n+2){
	display: none;
}

html.cssanimations #hero > ul > li:first-of-type .photo > div{
	width: 0;
	-webkit-animation: slide_out_hero 16s cubic-bezier(0.77, 0, 0.175, 1) infinite;
	-moz-animation: slide_out_hero 16s cubic-bezier(0.77, 0, 0.175, 1) infinite;
	-ms-animation: slide_out_hero 16s cubic-bezier(0.77, 0, 0.175, 1) infinite;
	-o-animation: slide_out_hero 16s cubic-bezier(0.77, 0, 0.175, 1) infinite;
	animation: slide_out_hero 16s cubic-bezier(0.77, 0, 0.175, 1) infinite;
}

html.cssanimations #hero > ul > li:first-of-type .photo > div > span{
	-webkit-animation: scale_up_hero 16s linear infinite;
	-moz-animation: scale_up_hero 16s linear infinite;
	-ms-animation: scale_up_hero 16s linear infinite;
	-o-animation: scale_up_hero 16s linear infinite;
	animation: scale_up_hero 16s linear infinite;
}


html.cssanimations.ie10 #hero > ul > li:first-of-type .photo > div > span,
html.cssanimations.ie11 #hero > ul > li:first-of-type .photo > div > span,
html.cssanimations.edge #hero > ul > li:first-of-type .photo > div > span{
	-ms-animation: none;
	animation: none;
}

html.ios8 #hero > ul > li:first-of-type .photo > div{
	width: 100%;
	-webkit-animation: none !important;
	animation: none !important;
}

html.ios8 #hero > ul > li:first-of-type .photo > div.active {
	-webkit-animation: scale_up_hero_legacy 6s linear 0s both !important;
	-moz-animation: scale_up_hero_legacy 6s linear 0s both !important;
	-ms-animation: scale_up_hero_legacy 6s linear 0s both !important;
	-o-animation: scale_up_hero_legacy 6s linear 0s both !important;
	animation: scale_up_hero_legacy 6s linear 0s both !important;
}


html.legacy #hero > ul > li:first-of-type .photo > div,
html.legacy #hero > ul > li:first-of-type .photo > div > span {
	width: 100% !important;
	-webkit-animation: none !important;
	animation: none !important;
}





html.cssanimations #hero > ul > li:first-of-type .photo > div:nth-of-type(1),
html.cssanimations #hero > ul > li:first-of-type .photo > div:nth-of-type(1) span {
	-webkit-animation-delay: 0s;
	-moz-animation-delay: 0s;
	-ms-animation-delay: 0s;
	-o-animation-delay: 0s;
	animation-delay: 0s;
	z-index: 4;
}

html.cssanimations #hero > ul > li:first-of-type .photo > div:nth-of-type(2),
html.cssanimations #hero > ul > li:first-of-type .photo > div:nth-of-type(2) span {
	-webkit-animation-delay: 4s;
	-moz-animation-delay: 4s;
	-ms-animation-delay: 4s;
	-o-animation-delay: 4s;
	animation-delay: 4s;
	z-index: 3;
}

html.cssanimations #hero > ul > li:first-of-type .photo > div:nth-of-type(3),
html.cssanimations #hero > ul > li:first-of-type .photo > div:nth-of-type(3) span {
	-webkit-animation-delay: 8s;
	-moz-animation-delay: 8s;
	-ms-animation-delay: 8s;
	-o-animation-delay: 8s;
	animation-delay: 8s;
	z-index: 2;
}

html.cssanimations #hero > ul > li:first-of-type .photo > div:nth-of-type(4),
html.cssanimations #hero > ul > li:first-of-type .photo > div:nth-of-type(4) span {
	-webkit-animation-delay: 12s;
	-moz-animation-delay: 12s;
	-ms-animation-delay: 12s;
	-o-animation-delay: 12s;
	animation-delay: 12s;
	z-index: 1;
}


@-webkit-keyframes slide_out_hero {
	0% { width: 100%; z-index: 1;}
	25% { width: 100%; z-index: 2;}
	30% { width: 0; z-index: 2;}
	100% { width: 0; z-index: 1;}
}

@-moz-keyframes slide_out_hero {
	0% { width: 100%; z-index: 1;}
	25% { width: 100%; z-index: 2;}
	30% { width: 0; z-index: 2;}
	100% { width: 0; z-index: 1;}
}

@-ms-keyframes slide_out_hero {
	0% { width: 100%; z-index: 1;}
	25% { width: 100%; z-index: 2;}
	30% { width: 0; z-index: 2;}
	100% { width: 0; z-index: 1;}
}

@-o-keyframes slide_out_hero {
	0% { width: 100%; z-index: 1;}
	25% { width: 100%; z-index: 2;}
	30% { width: 0; z-index: 2;}
	100% { width: 0; z-index: 1;}
}

@keyframes slide_out_hero {
	0% { width: 100%; z-index: 1;}
	25% { width: 100%; z-index: 2;}
	30% { width: 0; z-index: 2;}
	100% { width: 0; z-index: 1;}
}


@-webkit-frames scale_up_hero {
	0% {-webkit-transform: scale(1);}
	30% {-webkit-transform: scale(1.04);}
	100% {-webkit-transform: scale(1.04);}
}

@-moz-frames scale_up_hero {
	0% {-moz-transform: scale(1);}
	30% {-moz-transform: scale(1.04);}
	100% {-moz-transform: scale(1.04);}
}

@-ms-frames scale_up_hero {
	0% {-ms-transform: scale(1);}
	30% {-ms-transform: scale(1.04);}
	100% {-ms-transform: scale(1.04);}
}

@-o-frames scale_up_hero {
	0% {-o-transform: scale(1);}
	30% {-o-transform: scale(1.04);}
	100% {-o-transform: scale(1.04);}
}

@keyframes scale_up_hero {
	0% {transform: scale(1);}
	30% {transform: scale(1.04);}
	100% {transform: scale(1.04);}
}


@-webkit-frames scale_up_hero_legacy {
	0% {-webkit-transform: scale(1);}
	100% {-webkit-transform: scale(1.03);}
}

@-moz-frames scale_up_hero_legacy {
	0% {-moz-transform: scale(1);}
	100% {-moz-transform: scale(1.03);}
}

@-ms-frames scale_up_hero_legacy {
	0% {-ms-transform: scale(1);}
	100% {-ms-transform: scale(1.03);}
}

@-o-frames scale_up_hero_legacy {
	0% {-o-transform: scale(1);}
	100% {-o-transform: scale(1.03);}
}

@frames scale_up_hero_legacy {
	0% {transform: scale(1);}
	100% {transform: scale(1.03);}
}




html.cssanimations body.pause #hero> ul > li:first-of-type .photo > div,
html.cssanimations body.pause #hero > ul > li:first-of-type .photo > div > span,
html.cssanimations #hero.pause > ul > li:first-of-type .photo > div,
html.cssanimations #hero.pause > ul > li:first-of-type .photo > div > span {
	-webkit-animation-play-state: paused;
	   -moz-animation-play-state: paused;
	    -ms-animation-play-state: paused;
	     -o-animation-play-state: paused;
	        animation-play-state: paused;
}







/*========================================
  list
========================================*/

#list{
	width:1040px;
	margin:0 auto 100px auto;
}

#list:after {
    content:" ";
    display:block;
    clear:both;
}

#list > h2{
	margin-bottom:15px;
	padding:10px 0;
	border-top:1px solid #C1C1C1;
	border-bottom:1px solid #C1C1C1;
	text-align:center;
}

#list > h2 span{
	font-family: 'Nunito';
	font-size:34px;
}

#list > h3{
	width:10em;
	margin:0 auto;
	padding-bottom:5px;
	text-align:center;
	font-size:18px;
	background: linear-gradient(transparent 50%, #FFE000 40%);
}

#list > ul > li{
    position: relative;
	float:left;
	width:250px;
	height:250px;
	margin:0 10px 10px 0;
	border:1px solid #E7E7E7;
}

#list > ul > li:nth-child(4n){
	margin-right:0;
}

#list > ul > li .label {
	position: absolute;
	bottom:10px;
	width: 230px;
	margin:0 10px;
	padding: 10px 0;
	box-sizing: border-box;
	text-align:center;
	z-index: 1;
	display: block;
}

#list > ul > li a:hover .label {
    display: none;
}

#list > ul > li.lesson1 .label {
    background-color: rgba(112,214,215,0.85);
}

#list > ul > li.lesson2 .label {
    background-color: rgba(201,153,211,0.85);
}

#list > ul > li.lesson3 .label {
    background-color: rgba(254,155,174,0.85);
}

#list > ul > li.lesson4 .label {
    background-color: rgba(145,201,242,0.85);
}

#list > ul > li.lesson5 .label {
    background-color: rgba(136,215,98,0.85);
}

#list > ul > li.lesson6 .label {
    background-color: rgba(253,206,62,0.85);
}

#list > ul > li.lesson7 .label {
    background-color: rgba(127,153,237,0.85);
}

#list > ul > li.lesson8 .label {
    background-color: rgba(247,135,83,0.85);
}

#list > ul > li.lesson9 .label {
    background-color: rgba(145,228,242,0.85);
}

#list > ul > li.lesson10 .label {
    background-color: rgba(255,117,117,0.85);
}

#list > ul > li.lesson11 .label {
    background-color: rgba(175,135,235,0.85);
}

#list > ul > li.lesson12 .label {
    background-color: rgba(251,148,150,0.85);
}

#list > ul > li.lesson13 .label {
    background-color: rgba(82,194,136,0.85);
}

#list > ul > li.lesson14 .label {
    background-color: rgba(122,184,236,0.85);
}

#list > ul > li.lesson15 .label {
    background-color: rgba(248,221,96,0.85);
}

#list > ul > li .label h2{
	margin-bottom:10px;
	font-size:18px;
	font-family: 'Nunito';
	color:#FFF;
}

#list > ul > li .label h3{
	font-size:12px;
	color:#FFF;
}


#list > ul > li .photo {
	display: block;
	width: 100%;
	height: 100%;
	margin: auto;
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	z-index: 0;
}


#list a .lead{
    position: absolute;
    left: 0;
	right: 0;
	top: 0;
	bottom: 0;
    width: 100%;
	height: 100%;
    margin: auto;
    padding: 10px;
    box-sizing: border-box;
    color: #FFF;
    text-align: center;
    overflow: hidden;
    display: none;
}

#list a .lead div{
    position: absolute;
    left: 0;
	right: 0;
	top: 0;
	bottom: 0;
    width: 100%;
	height: 100%;
    margin: auto;
    z-index: 2;
    display: none;
    overflow: hidden;
}

#list a:hover .lead{
    position: absolute;
    left: 0;
	right: 0;
	top: 0;
	bottom: 0;
    width: 100%;
	height: 100%;
    margin: auto;
    padding: 20px 15px;
    box-sizing: border-box;
    color: #FFF;
    text-align: center;
    overflow: hidden;
    display: block;
}

#list a:hover .lead div{
    position: absolute;
    left: 0;
	right: 0;
	top: 0;
	bottom: 0;
    width: 100%;
	height: 100%;
    margin: auto;
    z-index: 2;
    display: block;
}

#list a .lead div{
  animation: fadeIn 0.3s ease 0s 1 normal;
  -webkit-animation: fadeIn 0.3s ease 0s 1 normal;
}

@keyframes fadeIn {
    0% {width: 0%; height: 0%;}
    100% {width: 100%; height: 100%;}
}

@-webkit-keyframes fadeIn {
    0% {width: 0%; height: 0%;}
    100% {width: 100%; height: 100%;}
}


#list > ul > li.lesson1 a .lead div {
    background-color: rgba(112,214,215,0.85);
}

#list > ul > li.lesson2 a .lead div {
    background-color: rgba(201,153,211,0.85);
}

#list > ul > li.lesson3 a .lead div {
    background-color: rgba(254,155,174,0.85);
}

#list > ul > li.lesson4 a .lead div {
    background-color: rgba(145,201,242,0.85);
}

#list > ul > li.lesson5 a .lead div {
    background-color: rgba(136,215,98,0.85);
}

#list > ul > li.lesson6 a .lead div {
    background-color: rgba(253,206,62,0.85);
}

#list > ul > li.lesson7 a .lead div {
    background-color: rgba(127,153,237,0.85);
}

#list > ul > li.lesson8 a .lead div {
    background-color: rgba(247,135,83,0.85);
}

#list > ul > li.lesson9 a .lead div {
    background-color: rgba(145,228,242,0.85);
}

#list > ul > li.lesson10 a .lead div {
    background-color: rgba(255,117,117,0.85);
}

#list > ul > li.lesson11 a .lead div {
    background-color: rgba(175,135,235,0.85);
}

#list > ul > li.lesson12 a .lead div {
    background-color: rgba(251,148,150,0.85);
}

#list > ul > li.lesson13 a .lead div {
    background-color: rgba(82,194,136,0.85);
}

#list > ul > li.lesson14 a .lead div {
    background-color: rgba(122,184,236,0.85);
}

#list > ul > li.lesson15 a .lead div {
    background-color: rgba(248,221,96,0.85);
}

#list a .lead h2{
    position: relative;
    margin-bottom: 5px;
    font-size: 18px;
    font-weight: bold;
    z-index: 3;
}

#list a .lead h3{
    position: relative;
    margin-bottom: 10px;
    font-size: 12px;
    z-index: 3;
}

#list a .lead p{
    position: relative;
    text-align: left;
    line-height: 1.6;
    font-size: 12px;
    z-index: 3;
}

#list a .lead em{
    font-size: 12px;
	display:block;
}

#list a .lead span{
    position:absolute;
    bottom:20px;
    width: 80%;
    padding: 5px;
    border: 1px solid #FFF;
    display: block;
    z-index: 3;
}



@media (max-width: 1040px) {

#list{
	width:100%;
	margin:0 auto 100px auto;
}

#list > ul{
    margin: 0 0 0 1%;
}

#list > ul > li{
	width:23%;
	height:auto;
	margin:0 2% 2% 0;
    padding-top: 23%;
}

#list > ul > li .label {
	bottom:10px;
	width: 90%;
	margin:0 5%;
	padding: 10px 0;
}

#list > ul > li .label h2{
	font-size:1.4vw;
}

#list > ul > li .label h3{
    font-size:1.0vw;
}

#list a:hover .lead{
    padding: 4%;
}



#list a .lead h2{
    font-size:1.4vw;
}

#list a .lead h3{
    font-size:1.0vw;
}

#list a .lead p{
    line-height: 1.4;
    font-size:12px;
}

#list a .lead span{
    bottom:4%;
    width: 86%;
}

#list a .lead p.pc{
	display:none!important;
}
#list a .lead p.sp{
	display:block!important;
}

}


@media (max-width: 660px) {

#list{
	width:100%;
	/*margin:-25% auto 100px auto;*/
	margin:80px auto 100px auto;
}

#list > h2 {
    position: relative;
    width: 94%;
    margin:0 auto 25px auto;
    padding: 0;
    border-top: 0!important;
}

#list > h2 span {
    position: absolute;
    left:0;
    right:0;
    width: 6em;
    margin: auto;
    padding: 0 10px 10px 10px;
    background: #FFF;
    font-size: 34px;
    font-weight: bold;
    line-height: 3px;
    display: block;
}

#list > h3{
	margin-bottom:1.2em!important;
    padding-top: 0;
	background: none;
}

#list ul{
    margin: 0;
    padding: 3%;
    background: #EAE8E9;
}

#list ul:after {
    content:" ";
    display:block;
    clear:both;
}

#list > ul > li{
	width:100%;
	height:auto;
	margin:0 0 3% 0;
    padding-top: 0;
}

#list > ul > li .photo {
    position:relative;
    top:0;
    left:0;
    right: auto;
	width: 30%;
    margin: 0 auto 0 0;
    padding-top: 30%;
}

#list > ul > li .label {
    top:0;
    right:0;
	bottom:auto;
	width: 70%;
	margin:0;
	padding: 2%;
    z-index: 2;
}
    
#list > ul > li a:hover .label {
    display:block;
}
    
#list > ul > li .label h2{
    margin-bottom: 5px;
	font-size:4.4vw;
    font-weight: bold;
    text-align: left;
}

#list > ul > li .label h3{
    font-size:3.0vw;
    text-align: left;
}

 
    
#list a .lead,
#list a:hover .lead{
    top: auto;
    left: auto;
    right: 0;
    bottom:0;
    width: 70%;
    height: 60%!important;
    padding: 2%;
    background: #FFF;
    color: #000;
    display: block;
    z-index: 0!important;
}

#list a .lead div,
#list a:hover .lead div{
    display: none;
}

#list a .lead h2{
    display: none;
}

#list a .lead h3{
    display: none;
}

#list a .lead p{
    padding-top: 0.5vh;
    line-height: 1.2;
    font-size:12px;
    /*font-size:2.2vw;*/
}

#list a .lead span{
    display: none;
}

}

@media (max-width: 560px) {

#list{
	margin:-10% auto 100px auto;
}

}