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


  lesson.css


============================================================ */

html {
  height: 100%;
}

body {
	height: 100%;
	padding-top: 100px;
}

@media (max-width: 660px) {
	body {
		padding-top: 64px;
	}
}



#main {
	text-align: center;
}

.lesson10 #main {
	background: #FFE2EC;
}

#main .box {
	display: block;
	width: 80%;
	max-width: 1000px;
	box-sizing: border-box;
	margin: 0 auto;
	position: relative;
	z-index: 1;
}

#main .box:after{
	visibility: hidden;
	display: block;
	font-size: 0px;
	content: " ";
	clear: both;
	height: 0;
}

@media (max-width: 660px) {
	#main .box {
		width: 100%;
	}
}



@-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%;
	height: 46vw;
	overflow: hidden;
	position: absolute;
	left: 0;
	top: 0;
}

@media (max-width: 660px) {
	#hero {
		height: 90vw;
	}

	html.androidbrowser #hero {
		padding-top: 90%;
	}
}


#hero .flag {
	display: block;
	width: 11.25em;
	height: 11.25em;
	text-align: left;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 1;
}

#hero .flag svg {
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	z-index: -1;
}

.lesson10 #hero .flag svg {
	fill: #FF7575;
}

body.animation #hero .flag svg {
	-webkit-transform-origin: left top;
	   -moz-transform-origin: left top;
	    -ms-transform-origin: left top;
	     -o-transform-origin: left top;
	        transform-origin: left top;
	-webkit-transform: scale(0);
	   -moz-transform: scale(0);
	    -ms-transform: scale(0);
	     -o-transform: scale(0);
	        transform: scale(0);
}

body.animation #hero.active .flag svg {
	-webkit-animation: show_heroFlag 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
	   -moz-animation: show_heroFlag 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
	    -ms-animation: show_heroFlag 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
	     -o-animation: show_heroFlag 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
	        animation: show_heroFlag 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
}

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

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

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

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

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








#hero .flag p {
	display: inline-block;
	color: #fff;
	text-align: center;
	margin-top: 14%;
	margin-left: 14%;
}

#hero .flag span {
	font-family: 'Nunito';
	font-size: 87.5%;
	letter-spacing: 0.06em;
}

#hero .flag em {
	display: block;
	font-family: 'Nunito';
	font-size: 237.5%;
	letter-spacing: 0.03em;
}

@media (max-width: 660px) {
	#hero .flag {
		width: 5em;
		height: 5em;
	}

	#hero .flag p {
		margin-top: 4%;
		margin-left: 8%;
	}

	#hero .flag span {
		letter-spacing: 0.02em;
		font-size: 62.5%;
	}

	#hero .flag em {
		font-size: 125%;
	}
}


body.animation #hero .flag p {
	opacity: 0;
	-webkit-transform: scale(0.8);
	   -moz-transform: scale(0.8);
	    -ms-transform: scale(0.8);
	     -o-transform: scale(0.8);
	        transform: scale(0.8);
}

body.animation #hero.active .flag p {
	-webkit-animation: show_heroFlagText_transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.3s both,
										 show_opacity 0.6s cubic-bezier(0.215, 0.61, 0.355, 1) 0.3s both;
	   -moz-animation: show_heroFlagText_transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.3s both,
	   								 show_opacity 0.6s cubic-bezier(0.215, 0.61, 0.355, 1) 0.3s both;
	    -ms-animation: show_heroFlagText_transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.3s both,
                     show_opacity 0.6s cubic-bezier(0.215, 0.61, 0.355, 1) 0.3s both;
	     -o-animation: show_heroFlagText_transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.3s both,
                     show_opacity 0.6s cubic-bezier(0.215, 0.61, 0.355, 1) 0.3s both;
	        animation: show_heroFlagText_transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.3s both,
                     show_opacity 0.6s cubic-bezier(0.215, 0.61, 0.355, 1) 0.3s both;
}

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

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

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

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

@keyframes show_heroFlagText_transform {
	0% { transform: scale(0.8);}
	100% { transform: scale(1);}
}




#hero div.image {
	display: block;
	width: 100%;
	height: 100%;
	background-position: center top;
	background-repeat: no-repeat;
	-webkit-background-size: cover;
	   -moz-background-size: cover;
	    -ms-background-size: cover;
	     -o-background-size: cover;
					background-size: cover;
}

html.androidbrowser #hero div.image {
	position: absolute;
	left: 0;
	top: 0;
}


#hero > img {
	width: 100%;
	height: auto;
}

@media (max-width: 660px) {
	#hero > img {
		width: auto;
		height: 100%;
		position: absolute;
		left: 50%;
		-webkit-transform: -webkit-translateX(-50%);
		   -moz-transform: -moz-translateX(-50%);
		    -ms-transform: -ms-translateX(-50%);
		     -o-transform: -o-translateX(-50%);
		        transform: translateX(-50%);
	}
}

body.animation #hero > img {
	opacity: 0;
}

body.animation #hero.active > img {
	-webkit-animation: show_heroImage 1s cubic-bezier(0.165, 0.84, 0.44, 1) both;
	   -moz-animation: show_heroImage 1s cubic-bezier(0.165, 0.84, 0.44, 1) both;
	    -ms-animation: show_heroImage 1s cubic-bezier(0.165, 0.84, 0.44, 1) both;
	     -o-animation: show_heroImage 1s cubic-bezier(0.165, 0.84, 0.44, 1) both;
	        animation: show_heroImage 1s cubic-bezier(0.165, 0.84, 0.44, 1) both;
}

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

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

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

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

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





/* ========================================
  introduction
======================================== */
#introduction {
	display: inline-block;
	box-sizing: border-box;
	padding: 3.2% 6.4% 2.6%;
	margin: 36% auto 0;
	background: #fff;
	box-shadow: 7px 7px #d6d6d6;
	position: relative;
	text-align: center;
	z-index:4;
}

@media (max-width: 860px) {
	#introduction {
		padding: 3.2% 4%;
	}
}

@media (max-width: 768px) {
	#introduction {
		padding: 3.2% 4%;
	}
}

@media (max-width: 660px) {
	#introduction {
		margin: 64% 3.2% 0;
		padding: 4.6%;
		box-shadow: 5px 5px #d6d6d6;
	}
}



body.animation #introduction {
	opacity: 0;
	-webkit-transform: scale(0.96);
	   -moz-transform: scale(0.96);
	    -ms-transform: scale(0.96);
	     -o-transform: scale(0.96);
	        transform: scale(0.96);
}

body.animation #introduction.active {
	-webkit-animation: show_introduction_transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.2s both,
										 show_opacity 0.4s cubic-bezier(0.23, 1, 0.32, 1) 0.2s both;
	   -moz-animation: show_introduction_transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.2s both,
	   								 show_opacity 0.4s cubic-bezier(0.23, 1, 0.32, 1) 0.2s both;
	    -ms-animation: show_introduction_transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.2s both,
	    							 show_opacity 0.4s cubic-bezier(0.23, 1, 0.32, 1) 0.2s both;
	     -o-animation: show_introduction_transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.2s both,
	     							 show_opacity 0.4s cubic-bezier(0.23, 1, 0.32, 1) 0.2s both;
	        animation: show_introduction_transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.2s both,
	        					 show_opacity 0.4s cubic-bezier(0.23, 1, 0.32, 1) 0.2s both;
}

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

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

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

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

@keyframes show_introduction_transform {
	0% { transform: scale(0.96);}
	100% { transform: scale(1);}
}


#introduction h3 {
	display: inline-block;
	color: #fff;
	font-size: 188%;
	font-weight: bold;
	letter-spacing: 0.08em;
	padding: 0.5em 3em;
	margin: 0 auto 0.7em;
}

#introduction h3 span {
	font-size: 70%;
	font-weight: bold;
}

.lesson10 #introduction h3 {
	background: #FF7575;
}

#introduction p {
	color: #333;
	font-size: 100%;
	letter-spacing: 0.1em;
	line-height: 2.15;
}

@media (max-width: 660px) {
	#introduction h3 {
		font-size: 100%;
		line-height: 1.6;
		letter-spacing: 0.04em;
		padding: 0.8em;
		margin: 0 auto 1em;
	}
	#introduction h3 span {
		font-size: 69%;
		letter-spacing: -0.01em;
	}

	#introduction p {
		font-size: 68.75%;
		letter-spacing: 0.04em;
		line-height: 2.2;
		text-align: left;
		padding: 0 0.4em;
	}

	#introduction p br {
		display: none;
	}
}


/* ========================================
  lecture
======================================== */
#lecture {
	display: block;
	width: 100%;
	/*overflow: hidden;*/
}

#lecture > ul > li {
	overflow: hidden;
}

#lecture > ul > li > section {
	display: block;
	width: 100%;
	padding-top: 7em;
	clear: both;
	position: relative;
}

@media (max-width: 660px) {
	#lecture > ul > li > section {
		padding-top: 3.6em;
	}
}

#lecture h4 {
	text-align: center;
	line-height: 1.2;
	position: relative;
	z-index: 1;
}

#lecture h4 .triangle {
	display: block;
	width: 6.25em;
	height: 3.75em;
	margin: 0 auto;
	position: absolute;
	left: 0;
	right: 0;
	top: -2em;
}

body.animation #lecture1 h4 .triangle,
body.animation #lecture2 h4 .triangle,
body.animation #lecture3 h4 .triangle,
body.animation #lecture4 h4 .triangle,
body.animation #lecture5 h4 .triangle {
	visibility: hidden;
}

body.animation #lecture1.active h4 .triangle,
body.animation #lecture2.active h4 .triangle,
body.animation #lecture3.active h4 .triangle,
body.animation #lecture4.active h4 .triangle,
body.animation #lecture5.active h4 .triangle {
	visibility: visible;
	-webkit-animation: show_lectureTriangle 1s cubic-bezier(0.23, 1, 0.32, 1) both;
	   -moz-animation: show_lectureTriangle 1s cubic-bezier(0.23, 1, 0.32, 1) both;
	    -ms-animation: show_lectureTriangle 1s cubic-bezier(0.23, 1, 0.32, 1) both;
	     -o-animation: show_lectureTriangle 1s cubic-bezier(0.23, 1, 0.32, 1) both;
	        animation: show_lectureTriangle 1s cubic-bezier(0.23, 1, 0.32, 1) both;
}

@-webkit-keyframes show_lectureTriangle {
	0% { -webkit-transform: rotateY(0) scale(0);}
	100% { -webkit-transform: rotateY(360deg) scale(1);}
}

@-moz-keyframes show_lectureTriangle {
	0% { -moz-transform: rotateY(0) scale(0);}
	100% { -moz-transform: rotateY(360deg) scale(1);}
}

@-ms-keyframes show_lectureTriangle {
	0% { -ms-transform: rotateY(0) scale(0);}
	100% { -ms-transform: rotateY(360deg) scale(1);}
}

@-o-keyframes show_lectureTriangle {
	0% { -o-transform: rotateY(0) scale(0);}
	100% { -o-transform: rotateY(360deg) scale(1);}
}

@keyframes show_lectureTriangle {
	0% { transform: rotateY(0) scale(0);}
	100% { transform: rotateY(360deg) scale(1);}
}




#lecture h4 > span {
	display: block;
	width: 1em;
	height: 1em;
	color: #fff;
	font-family: 'Nunito';
	font-size: 150%;
	margin: 0 auto;
	position: absolute;
	left: 0;
	right: 0;
	top: -0.4em;
	z-index: 1;
}

body.animation #lecture h4 > span {
	-webkit-transform: scale(0);
	   -moz-transform: scale(0);
	    -ms-transform: scale(0);
	     -o-transform: scale(0);
	        transform: scale(0);
}

body.animation #lecture1.active h4 > span,
body.animation #lecture2.active h4 > span,
body.animation #lecture3.active h4 > span,
body.animation #lecture4.active h4 > span,
body.animation #lecture5.active h4 > span {
	-webkit-animation: show_lectureNumber 0.4s cubic-bezier(0.23, 1, 0.32, 1) 0.4s both;
	   -moz-animation: show_lectureNumber 0.4s cubic-bezier(0.23, 1, 0.32, 1) 0.4s both;
	    -ms-animation: show_lectureNumber 0.4s cubic-bezier(0.23, 1, 0.32, 1) 0.4s both;
	     -o-animation: show_lectureNumber 0.4s cubic-bezier(0.23, 1, 0.32, 1) 0.4s both;
	        animation: show_lectureNumber 0.4s cubic-bezier(0.23, 1, 0.32, 1) 0.4s both;
}


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

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

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

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

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






#lecture h4 > strong {
	display: inline-block;
	font-size: 188%;
	font-weight: 500;
	letter-spacing: 0.06em;
	margin-top: 1.94em;
	margin-bottom: 1.04em;
	position: relative;
	z-index: 1;
}

#lecture h4 > strong br {
	display: none;
}

#lecture .area_02C p + h6{
	margin-top:0.6em;
}

#lecture .area_02C h6 + h6{
	width:100%;
	height:0;
	margin:0;
	padding:0;
}

#lesson br.br {
	display: inherit !important;
}


body.animation #lecture1 h4 > strong,
body.animation #lecture2 h4 > strong,
body.animation #lecture3 h4 > strong,
body.animation #lecture4 h4 > strong,
body.animation #lecture5 h4 > strong {
	opacity: 0;
	-webkit-transform: scale(1.1);
	   -moz-transform: scale(1.1);
	    -ms-transform: scale(1.1);
	     -o-transform: scale(1.1);
	        transform: scale(1.1);
}

body.animation #lecture1.active h4 > strong,
body.animation #lecture2.active h4 > strong,
body.animation #lecture3.active h4 > strong,
body.animation #lecture4.active h4 > strong,
body.animation #lecture5.active h4 > strong {
	-webkit-animation: show_lectureHeadline_transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.5s both,
                     show_opacity 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) 0.5s both;
     -moz-animation: show_lectureHeadline_transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.5s both,
                     show_opacity 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) 0.5s both;
      -ms-animation: show_lectureHeadline_transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.5s both,
                     show_opacity 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) 0.5s both;
       -o-animation: show_lectureHeadline_transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.5s both,
                     show_opacity 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) 0.5s both;
          animation: show_lectureHeadline_transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.5s both,
                     show_opacity 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) 0.5s both;
}

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

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

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

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

@keyframes show_lectureHeadline_transform {
  0% { transform: scale(1.1);}
  100% { transform: scale(1);}
}



#lecture h4:before {
	content: "";
	display: block;
	width: 100%;
	height: auto;
	padding-top: 25%;
	position: absolute;
	left: 0;
	top: 0;
}

.lesson10 #lecture h4:before {
	background: #FF7575;
}

#lecture h4:after {
	content: "";
	display: block;
	width: 3.2em;
	height: 1px;
	background: #000;
	margin: 0 auto;
	position: relative;
	z-index: 1;
}


@media (max-width: 660px) {
	#lecture h4 .triangle {
		width: 3.125em;
		height: 1.875em;
		top: -1em;
	}

	#lecture h4 > span {
		font-size: 75%;
		top: -0.4em;
	}

	#lecture h4 > strong {
		font-size: 112.5%;
		font-weight: bold;
		line-height: 1.48;
		margin-top: 1.36em;
		margin-bottom: 0.6em;
	}

	#lecture h4 > strong br {
		display: block;
	}

	#lecture h4:before {
		padding-top: 54%;
	}

	#lecture h4:after {
		width: 1.6em;
		height: 1px;
	}

	#lecture .catch {
		font-size: 100%;
	}

}






#lecture .left {
	padding-right: 2%;
	float: left;
}
#lecture .right {
	padding-left: 2%;
	float: right;
}
#lecture .center {
	text-align: center;
	margin: 0 auto;
}

@media (max-width: 660px) {
	#lecture .left {
		padding-right: 0;
		float: none;
	}
	#lecture .right {
		padding-left: 0;
		float: none;
	}
}



.portrait,
.discription {
	display: block;
	width: 50%;
	box-sizing: border-box;
}

.discription p {
	color: #333;
	font-size: 93.75%;
	letter-spacing: 0.02em;
	line-height: 2.2;
	text-align: left;
}


@media (max-width: 660px) {
	.portrait {
		width: 100%;
	}

	.portrait > figure,
	.discription > figure {
		width: 85%;
		margin-left: auto;
		margin-right: auto;
	}

	.portrait + .discription {
		margin-top: 0.8em;
	}

	.discription {
		width: 100%;
	}

	.discription p {
		font-size: 75%;
		line-height: 2;
		background: #fff;
	}

	.column{
		margin-top:60px!important;
	}

	#lecture3 figure{
		margin-top:20px;
	}
}







#lecture figure {
	position: relative;
}

#lecture figure img {
	width: 100%;
	height: auto;
}

#lecture figure p {
	padding:5px 0 20px 0;
}

#lecture figure p.right {
	padding:5px 0 0 0;
}

#lecture figure figcaption {
	display: block;
	width: 0;
	height: 0;
	overflow: hidden;
}


body.animation #lecture .portrait figure {
	opacity: 0;
	-webkit-transform: scale(0.8);
	   -moz-transform: scale(0.8);
	    -ms-transform: scale(0.8);
	     -o-transform: scale(0.8);
	        transform: scale(0.8);

}

body.animation #lecture .portrait figure.active {
	-webkit-animation: show_portrait_transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.4s both,
                     show_opacity 0.4s cubic-bezier(0.23, 1, 0.32, 1) 0.4s both;
     -moz-animation: show_portrait_transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.4s both,
                     show_opacity 0.4s cubic-bezier(0.23, 1, 0.32, 1) 0.4s both;
      -ms-animation: show_portrait_transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.4s both,
                     show_opacity 0.4s cubic-bezier(0.23, 1, 0.32, 1) 0.4s both;
       -o-animation: show_portrait_transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.4s both,
                     show_opacity 0.4s cubic-bezier(0.23, 1, 0.32, 1) 0.4s both;
          animation: show_portrait_transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.4s both,
                     show_opacity 0.4s cubic-bezier(0.23, 1, 0.32, 1) 0.4s both;

}

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

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

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

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

@keyframes show_portrait_transform {
  0% { transform: scale(0.8);}
  100% { transform: scale(1);}
}


.circleA{
	position:absolute;
	top:-20px;
	left:-25px;
	width:80px;
	height:80px;
	background:#FFF;
	border-radius:40px;
	box-sizing:border-box;
	color:#FD7575;
	font-size:14px;
	font-weight:bold;
	text-align:center;
	line-height:80px;
	z-index:999;
}

.circleB{
	position:absolute;
	top:-20px;
	left:-25px;
	width:84px;
	height:84px;
	padding:2px;
	z-index:999;
}

.circleB span{
	width:80px;
	height:80px;
	background:#FD7575;
	border-radius:40px;
	color:#FFF;
	font-size:14px;
	font-weight:bold;
	text-align:center;
	line-height:80px;
	display:block;
}

.circleC{
	position:absolute;
	top:-20px;
	left:-25px;
	width:80px;
	height:80px;
	background:#FD7575;
	border-radius:40px;
	box-sizing:border-box;
	color:#FFF;
	font-size:26px;
	font-weight:bold;
	text-align:center;
	line-height:80px;
	z-index:999;
}

@media (max-width: 980px) {
.circleA{
	position:absolute;
	top:-10px;
	left:-10px;
	width:50px;
	height:50px;
	border-radius:25px;
	line-height:50px;
	font-size:12px;
}

.circleB{
	position:absolute;
	top:-10px;
	left:-10px;
	width:54px;
	height:54px;
	padding:2px;
	z-index:999;
}

.circleB span{
	width:50px;
	height:50px;
	border-radius:25px;
	line-height:50px;
	font-size:12px;
}

.circleC{
	position:absolute;
	top:-10px;
	left:-10px;
	width:50px;
	height:50px;
	border-radius:25px;
	box-sizing:border-box;
	line-height:50px;
	font-size:18px;
}
}



@media (max-width: 660px) {
.circleA{
	position:absolute;
	top:-10px;
	left:-10px;
	width:45px;
	height:45px;
	border-radius:45px;
	line-height:45px;
	font-size:12px;
}

.circleB{
	position:absolute;
	top:-10px;
	left:-10px;
	width:49px;
	height:49px;
	padding:2px;
	z-index:999;
}

.circleB span{
	width:45px;
	height:45px;
	border-radius:22.5px;
	line-height:45px;
}

.circleC{
	position:absolute;
	top:-10px;
	left:-10px;
	width:50px;
	height:50px;
	border-radius:40px;
	box-sizing:border-box;
	line-height:50px;
	font-size:20px;
}
}


/* ========================================
  area_02A
======================================== */
.area_02A {
	padding-top: 40px;
	position: relative;
}
.area_02A:after {
    content:" ";
    display:block;
    clear:both;
}
.area_02A .portrait {
	position: relative;
	z-index: 1;
}
.area_02A .discription {
  position: relative;
  z-index: 0;
}
.area_02A .discription p:before {
  content: "";
  display: block;
  width: 5000px;
  width: 80vw;
  height: 100%;
  background: #fff;
  position: absolute;
  left: -20%;
  top: 0;
  z-index: -1;
}
.area_02A .discription p {
	display: block;
	width: 100%;
	box-sizing: border-box;
	padding: 16.4% 0;
	position: relative;
	z-index: 1;
}
.area_02A .discription figure {
	margin-top: 8%;
	position: relative;
	z-index: 1;
}


@media (max-width: 660px) {
	.area_02A {
		margin-bottom:70px!important;
		padding-top: 20px;
	}
	.area_02A .discription p {
		width: 90%;
		margin: 0 auto;
		padding: 3.2%;
	}
	.area_02A .discription p:before {
		display: none;
	}
	.area_02A .discription figure {
		width: 75%;
		margin: 0.6em auto 0;
	}
}

/* ========================================
  area_02B
======================================== */
.area_02B {
	padding-top: 40px;
	position: relative;
}
.area_02B:after {
    content:" ";
    display:block;
    clear:both;
}
.area_02B .discription {
	display: table;
	width: 100%;
	clear: both;
	position: relative;
}
.area_02B .discription:before {
	content: "";
	display: block;
	width: 5000px;
	width: 80vw;
	height: 100%;
	background: #fff;
	position: absolute;
	right: 40%;
	top: 0;
	z-index: -1;
}
.area_02B .discription h5 {
	font-size: 150%;
	font-weight: bold;
	letter-spacing: 0.08em;
	margin-bottom: 20px;
}
.lesson10 .area_02B .discription h5 {
	color: #FF7575;
}
.area_02B .discription div.area_02B_pc {
	float: left;
	width: 48%;
	padding-top: 4%;
	padding-right: 4%;
	text-align: left;
}
.area_02B .discription figure {
	float: right;
	width: 48%;
}

@media (max-width: 660px) {
	.area_02B {
		padding-top: 0.8em;
	}
	.area_02B .discription {
		display: block;
		padding-top: 0;
	}
	.area_02B .discription:before {
		display: none;
	}
	.area_02B .discription div.area_02B_pc,
	.area_02B .discription div.area_02B_sp {
		float: none;
		margin: 0 auto;
		background: #fff;
		padding-top: 0%;
		padding-right: 0%;
		box-sizing: border-box;
	}
	.area_02B .discription div.area_02B_pc {
		width: 100%;
	}
	.area_02B .discription div.area_02B_sp {
		width: 90%;
		padding: 3.2%;
	}
	.area_02B .discription h5 {
		font-size: 90%;
		margin-bottom: 5px;
		padding: 1% 0;
		text-align: center;
	}
	.area_02B .discription figure {
		float: none;
		width: 89.7%;
		margin: 0.8em auto 0.6em auto;
	}
}


/* ========================================
  small
======================================== */
#lecture h4.small:before {
	padding-top: 11em;
}

/* ========================================
  area_01A
======================================== */
.area_01A {
	padding-top: 40px;
	position: relative;
}
.area_01A:after {
    content:" ";
    display:block;
    clear:both;
}
.area_01A .discription {
	display: table;
	width: 100%;
	clear: both;
	position: relative;
	padding: 2.8em 0em;
	background: #fff;
}

.area_01A .discription:before {
	content: "";
	display: block;
	width: 5000px;
	width: 200vw;
	height: 100%;
	background: #fff;
	position: absolute;
	left: -50%;
	top: 0;
	z-index: -1;
}

@media (max-width: 660px) {
	.area_01A {
		padding-top: 20px;
	}
	.area_01A .discription {
		display: block;
		width: 90%;
		margin: 0 auto;
		padding: 3.2%;
	}
	.area_01A .discription:before {
		display: none;
	}
}

/* ========================================
  area
======================================== */
.area {
	display: block;
	width: 90%;
	max-width: 1160px;
	box-sizing: border-box;
	margin: 80px auto 0 auto;
	padding: 40px;
	position: relative;
	z-index: 1;
	background: #fff;
}
.area:after {
    content:" ";
    display:block;
    clear:both;
}
.area div.box {
	width: 100% !important;
	/*overflow: hidden;*/
}

@media (max-width: 660px) {
	.area {
		width: 90%;
		margin: 20px auto 0;
		padding: 3.2%;
		background: #fff;
		box-sizing: border-box;
	}
	.area .discription p {
		background: transparent;
	}
}

/* ========================================
  area h5
======================================== */

.area .h5_box{
	position: absolute;
	top: -40px;
	left:0;
	width:100%;
	display:block;
}

.area.h5 {
	margin: 80px auto 0;
}
.area h5 {
	display: inline-block;
	/*position: absolute;
	top: -40px;
	left: 20%;
	width: 60%;*/
	width:auto;
	font-size: 150%;
	font-weight: bold;
	letter-spacing: 0.08em;
	padding: 2%;
	background: #fff;
	box-shadow: 7px 7px #d6d6d6;
}
.lesson10 .area h5 {
	color: #FF7575;
}
.area h5 br {
	display: none;
}


/* ========================================
  h6
======================================== */
h6.typeA {
	display: inline-block;
	color: #fff;
	font-size: 140%;
	font-weight: bold;
	letter-spacing: 0.1em;
	margin-bottom: 40px;
	/*margin-top:40px;*/
	padding: 0.6em 1.2em;
	z-index: 2;
	box-sizing:border-box;
}
.lesson10 h6.typeA {
	background: #FF7575;
}
h6.w150 {
	width: 150px;
}
h6.w240 {
	width: 240px;
}
h6.w300 {
	width: 300px;
}
h6.w330 {
	width: 330px;
}
h6.w430 {
	width: 430px;
}
h6.typeB {
	position: static;
	width: auto;
	color: #FF7575;
	font-weight: bold;
	background: none;
	font-size: 130%;
	text-align: left;
	letter-spacing: 0.05em;
	margin: 15px 0 10px 0;
	padding: 0;
	display: block;
}
h6.typeB:before {
	background: none;
}
h6.typeC {
	font-size: 160%;
	font-weight: bold;
	margin-top: 35px;
	clear: both;
	display: block;
	color: #FF7575;
}
h6.typeD {
	font-size: 160%;
	font-weight: bold;
	margin-bottom: 25px;
	clear: both;
	display: block;
	color: #FF7575;
}
h6.bg:before {
	content: "";
	display: block;
	width: 100%;
	height: auto;
	padding-top: 44%;
	position: absolute;
	left: 0;
	top: 27px;
	z-index: -1;
}

#lecture2 h6.bg:before {
	top:6.5em!important;
	padding-top: 33%;
}
#lecture3 .area_02C h6.bg:before {
	top:27px!important;
	padding-top: 33%;
}
#lecture3 .column h6.bg:before {
	padding-top: 33%;
}
#lecture4 h6.bg:before {
	/*top:-3.5em!important;*/
	padding-top: 36%;
}
#lecture4 .lead h6.bg:before {
	top:8em!important;
	padding-top: 36%;
}
#lecture4 .area_01B h6.bg:before {
    padding-top: 16%;
}
.lesson10 h6.bg:before {
	background: #FFD5D6;
}
.no_h6 h6.bg {
	background: transparent;
}


@media (max-width: 1040px) {
#lecture4 .area_01B h6.bg:before {
    padding-top: 7.5em;
}

#lecture4 .area_01B .clear{
	text-align:left;
}
}

@media (max-width: 1020px) {
#lecture4 .area_01B h6.bg:before {
    padding-top: 9em;
}

#lecture4 .area_01B .clear{
	text-align:left;
}
}

@media (max-width: 980px) {
h6.typeA {
	margin-bottom: 30px;
	font-size: 115%;
}

.area_01B .typeA {
    margin-top: 10px;
	margin-bottom:10px!important;
}

.tips .right h6 {
    font-size: 140%!important;
}
h6.w300 {
	width: 90%;
}
}

@media (max-width: 680px) {
#lecture4 .area_01B h6.bg:before {
    padding-top: 11em;
}

#lecture4 .area_01B .clear{
	text-align:left;
}
}

@media (max-width: 660px) {
	.area.h5 {
		margin: 70px auto 0;
	}
	.area h5 {
		width: 60%;
		left: 5%;
		font-size: 93.75%;
		letter-spacing: 0.06em;
		/*line-height: 0.8;*/
		padding: 5%;
		box-shadow: 5px 5px #d6d6d6;
	}
	.area h5 br {
		display: block;
	}
	h6.typeA {
		font-size: 93.75%;
		width: 85%;
		line-height: 1.2;
		margin-bottom: 1em;
		padding: 0.5em 0.8em;
	}
	h6.typeB {
		font-size: 93.75%;
		text-align: center;
	}
	h6.typeC {
		font-size: 93.75%;
		margin-top: 15px;
		line-height: 1.4;
	}
	h6.typeD {
		font-size: 93.75%;
		margin-top: 10px;
		margin-bottom: 10px;
		line-height: 1.4;
	}
	h6.w150 {
		width: 100px;
	}
	h6.w240 {
		width: 170px;
	}
	h6.w300 {
		width: 190px;
	}
	h6.w330 {
		width: 220px;
	}

	#lecture1 h6.bg:before {
		top:1%!important;
		height:99%;
		padding-top: 0;
	}

	#lecture2 h6.bg:before {
		top:0%!important;
		height:100%;
		padding-top: 0;
	}
	#lecture3 .area_02C h6.bg:before {
		top:27px!important;
		padding-top: 33%;
	}
	#lecture3 .column h6.bg:before {
		top:20px;
		padding-top: 65%;
	}
	#lecture4 h6.bg:before {
		top:2%!important;
		height:98%;
		padding-top: 0!important;
	}
	#lecture4 .lead h6.bg:before {
		top:0!important;
		height:100%!important;
		padding-top: 0%!important;
	}
	#lecture4 .area_01B h6.bg:before {
		top:5%!important;
		padding-top: 0!important;
	}
	.lead-after{
		position:inherit;
		margin-top:0.6em;
		padding-top:0.6em;
	}
	#lecture4 .lead-after{
		margin-top:1.6em;

	}
	#lecture4 .lead-after > h6{
		top:-1.6em;
	}
	.lesson10 h6.bg:before {
		background: #FFD5D6;
	}
	.no_h6 h6.bg {
		background: transparent;
	}

	.tips .right h6 {
		font-size: 93.75% !important;
	}
}



/*
@media (max-width: 580px) {
	#lecture4 h6.bg:before {
		top:8em;
		height:100%;
		padding-top: 0;
	}
}

@media (max-width: 480px) {
	#lecture4 h6.bg:before {
		top:11.5em;
		height:100%;
		padding-top: 0;
	}
}
*/

/* ========================================
  area_03A
======================================== */
.area_03A {
	padding-top: 70px;
	position: relative;
}
.area_03A:after {
    content:" ";
    display:block;
    clear:both;
}
#lecture .area_03A .left {
	padding-right: 0;
}
.area_03A .portrait {
	width: 32%;
	margin-right: 2%;
	box-sizing: border-box;
	position: relative;
}
.area_03A .portrait.last {
	margin-right: 0%;
}
.area_03A .discription {
    width: 100%;
}
.area_03A .discription {
	margin-top: 10px;
}
.area .area_03A h6.typeA {
	position: absolute;
	top: -25px;
	left: 0;
	right: 0;
	margin: auto;
}

@media (max-width: 660px) {
	.area_03A {
		padding-top: 20px;
	}
	.area_03A .portrait dl.left {
		margin-right: 0%;
	}
	.area_03A .portrait {
		margin-top: 17px;
	}
	.area_03A .portrait {
		width: 100%;
	}
	.area_03A .portrait figure {
		width: 90%;
		margin: 0 auto!important;
	}
	.area_03A .portrait + .portrait {
		margin-top: 30px;
	}
	.area_03A .portrait .discription {
		width: 100%;
	}
	.area .area_03A h6.typeA {
		top: -17px;
	}
}

/* ========================================
  button01
======================================== */
.button01 {
	display: inline-block;
	text-align: center;
	line-height: 1.0!important;
	margin: 40px auto 0 auto;
	padding: 1em 1.2em;
	background: #000;
 }
.button01 a {
	font-weight: bold;
    font-size: 125%;
	color: #fff;
}
.button01 a .window {
  display: inline-block;
  width: 12px;
  height: 10px;
  vertical-align: middle;
  margin-top: -0.25em;
  -webkit-transition: transform 0.4s cubic-bezier(0.19, 1, 0.22, 1);
     -moz-transition: transform 0.4s cubic-bezier(0.19, 1, 0.22, 1);
      -ms-transition: transform 0.4s cubic-bezier(0.19, 1, 0.22, 1);
       -o-transition: transform 0.4s cubic-bezier(0.19, 1, 0.22, 1);
          transition: transform 0.4s cubic-bezier(0.19, 1, 0.22, 1);
	margin-left: 12px;
	background: url(/sp/cosgenic/common/images/button01.png) left center no-repeat;
	background-size: contain;
}
.button01 a .arrow {
  display: inline-block;
  width: 0.7em;
  height: 0.8em;
  vertical-align: middle;
  margin-top: -0.25em;
  -webkit-transition: transform 0.4s cubic-bezier(0.19, 1, 0.22, 1);
     -moz-transition: transform 0.4s cubic-bezier(0.19, 1, 0.22, 1);
      -ms-transition: transform 0.4s cubic-bezier(0.19, 1, 0.22, 1);
       -o-transition: transform 0.4s cubic-bezier(0.19, 1, 0.22, 1);
          transition: transform 0.4s cubic-bezier(0.19, 1, 0.22, 1);
	margin-left: 0.6em;
	background: url(/sp/cosgenic/common/images/arrow-right-wh.svg) left center no-repeat;
	background-size: contain;
}
.button01 a:hover .window,
.button01 a:hover .arrow {
  -webkit-transform: rotate(360deg);
     -moz-transform: rotate(360deg);
      -ms-transform: rotate(360deg);
       -o-transform: rotate(360deg);
          transform: rotate(360deg);
}

@media (max-width: 660px) {
	.button01 {
		margin: 20px auto 10px auto;
		padding: 0.7em 1em;
	}
	.button01 a {
		font-size: 80%;
		line-height: 1.4;
	}
	.button01 a .window,
	.button01 a .arrow {
		width: 0.7em;
		height: 0.8em;
	}
}

/* ========================================
  img_wide
======================================== */
.img_wide h6.bg:before {
	padding-top: 33%;
}
.img_wide .portrait {
	width: 57%;
}
.img_wide .discription {
	width: 43%;
}

@media (max-width: 660px) {
	.img_wide .portrait,
	.img_wide .discription  {
		width: 100%;
	}
}

/* ========================================
  area_02C
======================================== */
.area_02C {
	/*margin-top: -1.6em;*/
	position: relative;
}

.area_02C img{
	display:block;
}

.area_02C:after {
    content:" ";
    display:block;
    clear:both;
}

/*.area_02C .right figure {
	margin-top: 40px;
}*/

.area_02C h6.bg:before {
	top:-27px!important;
}

.area_02C .box{
	margin-top:2.0em!important;
	margin-bottom:1.6em!important;
	padding: 0% 0.2%;
}

#lecture .area_02C .box{
	margin-top:2em!important;
	margin-bottom:1.6em!important;
}

#lecture2 .area_02C p{
	letter-spacing: 0em;
}

#lecture3 .area_02C .box{
	padding-top:3.5em!important;
	margin-top:0!important;
	margin-bottom:1.6em!important;
}

#lecture4 .area_02C .box{
	margin-top:0!important;
}

#lecture4 .area_02C .lead-after p{
	font-size: 93%;
	letter-spacing: 0em;
}

#lecture4 .area_02C .lead-after > h6{
	margin-top:10px!important;
}

.area_02C p{
	padding:1.6em 0 0 0;
	text-align:left;
	color: #333;
	font-size: 93.75%;
	letter-spacing: 0.02em;
	line-height: 2.2;
	text-align: left;
}

.area_02C .portrait figure{
	position:relative;
	/*top:-4em;*/
}

.area_02C .typeA{
	position:relative;
	z-index:1;
	/*margin-bottom:0;*/
}

/*.area_02C.lead h6.bg:before {
	top: 127px;
}*/

.typeA + figure{
	margin-top:-4em;
}

.clear{
	clear:both;
}

.pt20{
	padding-top:20px;
}


@media (max-width: 1220px) {
	.area_02C .box {
		padding: 0% 3.2% 0% 3.2%;
	}

}

@media (max-width: 980px) {
	#lecture1 h6.w240 {
		width: 180px!important;
	}
}

@media (max-width: 760px) {
	#lecture1 h6.w240 {
		width: 130px!important;
	}
}

@media (max-width: 660px) {
	.area_02C{
		margin-top:10px;
	}
	.area_02C .right figure {
		margin-top:-0.5em!important;
	}
	.area_02C .portrait > figure,
	.area_02C .discription > figure {
		width: 100%;
	}
	.area_02C .discription > p {
		margin-bottom: 1em;
	}
	.area_02C .box {
		margin-bottom:0!important;
		padding: 0% 3.2% 3.2% 3.2%;
	}

	#lecture .area_02C .box{
		margin-top:0!important;
		margin-bottom:0!important;
	}

	.area .area_02C h6.bg:before {
		padding-top: 270%;
	}
	.area_02C.no_h6 .box {
		padding: 0 3.2% 3.2% 3.2%;
	}

	#lecture1 .area_02C.no_h6 .box {
		padding: 8% 3.2% 3.2% 3.2%;
	}

	#lecture1 .area_02C .box1-1{
		margin-top:2em!important;
	}

	#lecture1 .area_02C .box1-1 .left{
		padding-top:6%;
	}

	.area .area_02C.no_h6 h6.bg:before {
		padding-top: 250%;
	}
	.area_02C .right figure {
		margin-top: 0;
		/*top:-3em;*/
	}
	.area_02C .typeA{
		margin-bottom:-4em;
	}

	#lecture .area_02C p + h6{
		margin-bottom:1em;
	}

	.area_02C figure{
		margin-top:-0.5em;
		/*z-index:-99;*/
	}

	.area_02C p{
		padding:1.0em 0 0 0;
		text-align:left;
		color: #333;
		font-size: 75%;
		letter-spacing: 0.02em;
		line-height: 2.2;
		text-align: left;
	}

	.area_02C .left p{
		padding:1.0em 0;
	}

	#lecture2 .area {
		margin-top:60px;
	}

	.area_02C.lead > p {
		padding:2% 3.2%;
	}

	.area_02C p.right {
		font-size: 75%;
		text-align:right;
	}

	#lecture3 .area_02C .box{
		padding-top:1.3em!important;
	}

	#lecture4 .area_02C .lead-after p{
	font-size: 75%;
		letter-spacing: 0em;
	}

	#lecture4 .area_02C .lead-after > h6{
		margin-top:0!important;
	}

}

/* ========================================
  area_01B
======================================== */
.area_01B {
	margin-top: 40px;
	position: relative;
}
.area_01B:after {
    content:" ";
    display:block;
    clear:both;
}
.area_01B .discription {
	width: 100%;
	margin-bottom: 20px;
}

.area_01B .typeA{
	margin-bottom:20px;
}

.area_01B .right {
	font-size: 93.75%;
	letter-spacing: 0.02em;
	line-height: 2.2;
	text-align: left;
}

.area_01B p{
	font-size: 93.75%;
	letter-spacing: 0.02em;
	line-height: 2.2;
	color:#333;
}


@media (max-width: 1220px) {
	.area_01B .box {
		padding: 0% 3.2% 0% 3.2%;
	}
}

@media (max-width: 660px) {
	.area_01B {
	margin-top: 20px;
	}
	.area_01B .box {
		padding: 0% 3.2% 0 3.2%;
	}
	.area_01B .portrait > figure,
	.area_01B .discription > figure {
		width: 100%;
	}
	/*.area .area_01B h6.bg:before {
		padding-top: 140%;
	}*/

	.area_01B .right {
		font-size: 75%;
		text-align:right;
	}

	.area_01B p{
		font-size: 75%;
		line-height: 2.2;
		text-align:left;
	}


	.area_01B .typeA {
		margin-top: 0px;
		margin-bottom:20px!important;
	}
}

/* ========================================
  tips
======================================== */
.tips {
	display: block;
	width: 90%;
	max-width: 1160px;
	box-sizing: border-box;
	margin: 110px auto 0;
	padding: 70px 40px 40px 40px;
	position: relative;
	z-index: 1;
	background: #fff url(/sp/cosgenic/common/images/tips-bg.gif) center center repeat;
}
.tips:after {
    content:" ";
    display:block;
    clear:both;
}
.tips div.box {
	width: 100% !important;
	overflow: hidden;
}

#lecture2 .tips .area_02C .box,
#lecture4 .tips .area_02C .box {
	width: 100% !important;
	margin-bottom:0!important;
	overflow: hidden;
}

.tips h3:before,
.tips h3:after {
	background: none !important;
}
.tips h3 {
	position: absolute;
	top: -50px;
	left: 50%;
	margin-left: -50px;

	width: 100px;
	height: 100px;
	border-radius: 50%;
	-moz-border-radius: 50%;
	-webkit-border-radius: 50%;
	-o-border-radius: 50%;
	-ms-border-radius: 50%;
	font-size: 20px;
	color: #000;
	background: #000;
	text-align: center;
}
.tips h3 span {
	display: inline-block;
	color: #fff;
	position: relative;
	margin: 0px;
	top:50%;
	left: 1%;
	transform: translateY(-50%);
	font-family: 'Nunito' !important;
	font-weight: bold !important;
	font-size: 100%;
	letter-spacing: 0.15em;
}
.tips h5 {
	font-size: 150%;
	font-weight: bold;
	padding: 15px 20px;
	display: inline-block;
	background: #ffe609;
	box-sizing:border-box;
}
.tips h5.no02 {
	margin-top: 55px;
}

.tips .right h5{
	width:100%;
}

.tips .right h6{
	font-size:150%;
}


.tabletsize{display:none;}

@media (max-width: 1040px) {
#lecture4 .tips .area_02C .box h5{
	padding:15px 0!important;
}

.tabletsize{display:block;}
}


@media (max-width: 660px) {
	.tips {
		width: 100%;
		margin: 60px auto 0;
		padding: 45px 15px 15px 15px;
		background: #fff url(/sp/cosgenic/common/images/tips-bg.gif) center center repeat;
		background-size: 20% auto;
	}
	.tips .discription p {
		background: transparent;
	}
	.tips h3 {
		font-size: 70%;
		top: -30px;
		left: 50%;
		margin-left: -30px;
	    height: 60px;
	    width: 60px;
	}
	.tips h5 {
		font-size: 93.75%;
		padding: 10px 15px;
		line-height: 1.4;
	}
	.tips h5.no02 {
		margin-top: 30px;
	}
	.tips h6 {
		line-height: 1.4;
	}
	.tips .right h6{
		font-size:100%;
	}
}

/* ========================================
  area_02D
======================================== */
.area_02D {
	position: relative;
	margin-bottom:20px!important;
}
.area_02D:after {
    content:" ";
    display:block;
    clear:both;
}
.area_02D .discription {
	width: 100%;
	margin-top: 20px;
}
.area_02D .portrait {
	width: 50%;
	margin-top: 70px;
	box-sizing: border-box;
	position: relative;
}
.area_02D.no_h6 .portrait {
	margin-top: 40px;
}
.area_02D h6.typeA {
	position: absolute;
	top: -25px;
	left: 0;
	right: 0;
	margin: auto;
}

@media (max-width: 660px) {
	.tips .area_02D .discription {
		margin-top: 10px;
	}
	.area .area_02D .discription {
		margin-top: 0;
	}
	.area.h5 .area_02D .discription {
		margin-top: 35px;
	}
	.area_02D figure {
		width: 89.7%;
		margin: 0 auto;
	}
	.area.h5 .area_02D figure {
		margin-bottom: 0.6em;
	}
	.area_02D .portrait {
		width: 100%;
		margin-top: 40px;
	}
	.area_02D h6.typeA {
		top: -17px;
	}
	.area_02D.no_h6 .portrait {
		margin-top: 20px;
	}
}

/* ========================================
  area_02E
======================================== */
.area_02E {
	margin-top: 40px;
	position: relative;
}
.area_02E.no_h6 {
	margin-top: 20px;
}
.area_02E:after {
    content:" ";
    display:block;
    clear:both;
}
.area .area_02E h6.bg:before {
	padding-top: 30%;
}
.area_02E .discription p {
	margin-top: 10px;
}
.area_02E .discription .img_long {
	margin-top: 40px;
	margin-left: 15%;
	width: 70%;
}
.area_02E .discription .img_wide {
	margin-top: 20px;
}

@media (max-width: 1220px) {
	.area_02E .box {
		padding: 0% 3.2% 0% 3.2%;
	}
}

@media (max-width: 660px) {
	.area_02E {
		margin-top: 20px;
	}
	.area_02E.no_h6 {
		margin-top: 0px;
	}
	.area .area_02E h6.bg:before {
		padding-top: 70%;
	}
	.area_02E.no_h6 {
		padding-top: 20px;
	}
	.area_02E .portrait > figure {
		width: 89.7%;
	}
}

/* ========================================
  area_02F
======================================== */
.area_02F {
	margin-top: 40px;
	position: relative;
}
.area_02F:after {
    content:" ";
    display:block;
    clear:both;
}
.area_02F .discription {
	width: 100%;
}
.area_02F .portrait {
	width: 50%;
	margin-top: 70px;
	box-sizing: border-box;
	position: relative;
}
.area_02F .portrait h6.typeA {
	position: absolute;
	top: -25px;
	left: 0;
	right: 0;
	margin: auto;
}

@media (max-width: 1220px) {
	.area_02F .box {
		padding: 0% 3.2% 0% 3.2%;
	}
}

@media (max-width: 660px) {
	.area_02F .portrait {
		width: 100%;
		margin-top: 50px;
	}
	.area_02F .box {
		padding: 0% 3.2% 3.2% 3.2%;
	}
	.area_02F .portrait h6.typeA {
		top: -17px;
	}
	.area .area_02F h6.bg:before {
		padding-top: 300%;
	}
	.area_02F .portrait figure {
		width: 100%;
	}
}

/* ========================================
  area_02G
======================================== */
.area_02G {
	margin-top: 40px;
	position: relative;
}
.area_02G:after {
    content:" ";
    display:block;
    clear:both;
}
.area_02G.no_h6  {
	margin-top: 0px;
	position: relative;
}
.area_02G .left figure {
	margin-top: 40px;
}

@media (max-width: 1220px) {
	.area_02G .box {
		padding: 0% 3.2% 0% 3.2%;
	}
}

@media (max-width: 660px) {
	.area_02G {
		margin-top: 20px;
	}
	.area_02G .left figure {
		margin-top: 0px;
	}
	.area_02G .portrait > figure,
	.area_02G .discription > figure {
		width: 100%;
	}
	.area_02G .discription > p {
		margin-bottom: 1em;
	}
	.area_02G .box {
		padding: 0% 3.2% 3.2% 3.2%;
	}
	.area .area_02G h6.bg:before {
		padding-top: 200%;
	}
	.area_02G.no_h6  {
		margin-top: 10px;
	}
	.area_02G.no_h6 .box {
		padding: 2% 3.2% 3.2% 3.2%;
	}
	.area .area_02G.no_h6 h6.bg:before {
		padding-top: 250%;
	}
}


/*========================================
  conclusion
========================================*/
#conclusion {
	display: block;
	width: 100%;
	margin-top: 8.2%;
	/*padding-bottom: 100px;*/
	padding-bottom: 3em;
	clear: both;
	position: relative;
}

.lesson10 #conclusion {
	background: #FF7575;
}

@media (max-width: 660px) {
	#conclusion {
		margin-top: 3.68em;
	}
}




#conclusion h4 {
	text-align: center;
	position: relative;
	z-index: 1;
}



#conclusion h4 > span {
	display: block;
	width: 6.4em;
	height: 6.4em;
	color: #fff;
	font-size: 87.5%;
	font-weight: 500;
	box-sizing: border-box;
	padding-top: 1em;
	margin: 0 auto;
	background: #000;
	border-radius: 50%;
	position: absolute;
	left: 0;
	right: 0;
	top: -3.2em;
	z-index: 1;
}

body.animation #conclusion h4 > span {
  visibility: hidden;
}

body.animation #conclusion.active h4 > span {
  visibility: visible;
  -webkit-animation: show_conclusionHeadlineCircle 1s cubic-bezier(0.23, 1, 0.32, 1) both;
     -moz-animation: show_conclusionHeadlineCircle 1s cubic-bezier(0.23, 1, 0.32, 1) both;
      -ms-animation: show_conclusionHeadlineCircle 1s cubic-bezier(0.23, 1, 0.32, 1) both;
       -o-animation: show_conclusionHeadlineCircle 1s cubic-bezier(0.23, 1, 0.32, 1) both;
          animation: show_conclusionHeadlineCircle 1s cubic-bezier(0.23, 1, 0.32, 1) both;
}

@-webkit-keyframes show_conclusionHeadlineCircle {
  0% { -webkit-transform: rotateY(0) scale(0);}
  100% { -webkit-transform: rotateY(360deg) scale(1);}
}

@-moz-keyframes show_conclusionHeadlineCircle {
  0% { -moz-transform: rotateY(0) scale(0);}
  100% { -moz-transform: rotateY(360deg) scale(1);}
}

@-ms-keyframes show_conclusionHeadlineCircle {
  0% { -ms-transform: rotateY(0) scale(0);}
  100% { -ms-transform: rotateY(360deg) scale(1);}
}

@-o-keyframes show_conclusionHeadlineCircle {
  0% { -o-transform: rotateY(0) scale(0);}
  100% { -o-transform: rotateY(360deg) scale(1);}
}

@keyframes show_conclusionHeadlineCircle {
  0% { transform: rotateY(0) scale(0);}
  100% { transform: rotateY(360deg) scale(1);}
}






#conclusion h4 > span img {
	display: block;
	width: 2.3em;
	height: auto;
	margin: 0.4em auto 0;
}

#conclusion h4 > strong {
	display: inline-block;
	font-size: 150%;
	font-weight: 500;
	letter-spacing: 0.08em;
	line-height: 2;
	margin-top: 2.88em;
	position: relative;
	z-index: 1;
}


body.animation #conclusion h4 > strong {
  opacity: 0;
  -webkit-transform: scale(1.1);
     -moz-transform: scale(1.1);
      -ms-transform: scale(1.1);
       -o-transform: scale(1.1);
          transform: scale(1.1);
}

body.animation #conclusion.active h4 > strong {
  -webkit-animation: show_conclusionHeadlineText_transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.5s both,
                     show_opacity 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) 0.5s both;
     -moz-animation: show_conclusionHeadlineText_transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.5s both,
                     show_opacity 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) 0.5s both;
      -ms-animation: show_conclusionHeadlineText_transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.5s both,
                     show_opacity 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) 0.5s both;
       -o-animation: show_conclusionHeadlineText_transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.5s both,
                     show_opacity 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) 0.5s both;
          animation: show_conclusionHeadlineText_transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.5s both,
                     show_opacity 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) 0.5s both;
}

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

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

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

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

@keyframes show_conclusionHeadlineText_transform {
  0% { transform: scale(1.1);}
  100% { transform: scale(1);}
}







@media (max-width: 660px) {
	#conclusion {
		padding-bottom: 40px;
	}
	#conclusion h4 > span {
		width: 7em;
		height: 7em;
		font-size: 62.5%;
		padding-top: 1.2em;
		top: -3.2em;
	}

	#conclusion h4 > span img {
		width: 1.8em;
	}

	#conclusion h4 > strong {
		font-size: 93.75%;
		font-weight: bold;
		letter-spacing: 0.06em;
		line-height: 1.6;
		text-align: left;
		margin-top: 3.6em;
		padding: 0 3.2%;
	}

	#conclusion h4 strong br {
		display: none;
	}
}






/*========================================
  credit
========================================*/
#credit {
	display: block;
	width: 100%;
	background: #FFE2EC;
}

#credit > div.box {
	/*padding: 100px 3% 0.8em;*/
	padding: 3em 3% 0.8em;
	text-align: left;
}

#credit h4 {
	display: block;
	width: 0;
	height: 0;
	overflow: hidden;
}

#credit p,
#credit dt,
#credit dd {
	color: #555;
	font-size: 87.5%;
	letter-spacing: 0.02em;
	line-height: 2;
}

#credit dt{
	padding-top:0.1em;
}

#credit a {
	display: inline-block;
	line-height: 1;
	margin-left: 1em;
	padding: 0.2em;
	background: #ffe100;
	vertical-align: middle;
	position: relative;
	overflow: hidden;}

#credit a:before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: #000;
  position: absolute;
  left: 100%;
  top: 0;
  z-index: 0;
  -webkit-transition: left 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
     -moz-transition: left 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
      -ms-transition: left 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
       -o-transition: left 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
          transition: left 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
}

#credit a:hover:before {
  left: 0;
}

#credit a span {
  color: #555;
  font-family: 'Nunito';
  font-weight: 300;
  letter-spacing: 0.06em;
  position: relative;
  word-break: keep-all;
  z-index: 1;
  -webkit-transition: color 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
     -moz-transition: color 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
      -ms-transition: color 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
       -o-transition: color 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
          transition: color 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
}

#credit a:hover span {
  color: #fff;
}

#credit p.note {
	font-size: 75%;
	letter-spacing: 0.04em;
	margin-top: 1.5em;
}

#credit dl dt{
	float:left;
	width:8%;
	margin-bottom:2em;
}

#credit dl dd{
	float:left;
	width:92%;
	margin-bottom:2em;
}


@media (max-width: 660px) {
	#credit > div.box {
		padding: 40px 3.2% 0.6em;
	}

	#credit p {
		line-height: 1.4;
		font-size: 75%;
	}

	#credit a {
		margin-left: 0;
		padding: 0.2em;
	}

	#credit p.note {
		font-size: 62.5%;
		margin-top: 1.6em;
		line-height: 1.6;
	}

	#credit p,
	#credit dl {
		margin-bottom:1em;
		color: #555;
		font-size: 75%;
		letter-spacing: 0.02em;
		line-height: 1.2;
	}

	#credit dl dt{
		float:none;
		width:100%;
		margin-bottom:0;
		font-size: 100%;
		line-height:1.4;
	}

	#credit dl dd{
		float:none;
		width:100%;
		margin-bottom:0em;
		font-size: 100%;
		line-height:1.4;
	}

	#credit a span{
		font-size: 100%;
	}
}



/*========================================
  pager
========================================*/
.pager {
	display: block;
	width: 100%;
	text-align: center;
	padding-top: 3.6em;
	padding-bottom: 8em;
	background: #FFE2EC;
}

.pager ul {
	display: block;
	width: 100%;
	font-size: 0;
}

.pager ul li {
	display: inline;
}

.pager ul li + li:before {
	content: "";
	display: inline-block;
	width: 1px;
	height: 1.8em;
	vertical-align: middle;
	background: #000;
}

.pager a {
	display: inline-block;
	width: 10em;
	color: #fff;
	font-size: 125%;
	font-family: 'Nunito';
	letter-spacing: 0.08em;
	box-sizing: border-box;
	margin: 0 2em;
	padding: 1em 0.5em;
	background: #000;
	white-space: nowrap;
}

.pager a .arrow {
  display: inline-block;
  width: 0.7em;
  height: 0.8em;
  vertical-align: middle;
  margin-top: -0.25em;
  -webkit-transition: transform 0.4s cubic-bezier(0.19, 1, 0.22, 1);
     -moz-transition: transform 0.4s cubic-bezier(0.19, 1, 0.22, 1);
      -ms-transition: transform 0.4s cubic-bezier(0.19, 1, 0.22, 1);
       -o-transition: transform 0.4s cubic-bezier(0.19, 1, 0.22, 1);
          transition: transform 0.4s cubic-bezier(0.19, 1, 0.22, 1);
}

.pager a.next .arrow {
	margin-left: 0.6em;
	background: url(/cms/sp/cosgenic/common/images/arrow-right-wh.svg) left center no-repeat;
	background-size: contain;
}

.pager a.prev .arrow {
	margin-right: 0.6em;
	background: url(/cms/sp/cosgenic/common/images/arrow-left-wh.svg) left center no-repeat;
	background-size: contain;
}

.pager a:hover .arrow {
  -webkit-transform: rotate(360deg);
     -moz-transform: rotate(360deg);
      -ms-transform: rotate(360deg);
       -o-transform: rotate(360deg);
          transform: rotate(360deg);
}

@media (max-width: 660px) {
	.pager {
		padding-top: 2em;
		padding-bottom: 5em;
	}

	.pager ul li + li:before {
		height: 1.6em;
	}

	.pager a {
		font-size: 75%;
    letter-spacing: 0.05em;
		margin: 0 1.2em;
		padding: 1em 0.5em;
	}

	.pager a .arrow {
	  width: 0.43em;
    height: 0.5em;
	}
}



/*========================================
  information
========================================*/
aside.information {
	display: block;
	width: 100%;
	height: 0;
	position: relative;
}

aside.information dl {
	display: inline-block;
	width: 9em;
	height: 9em;
	background: #fff;
	text-align: center;
	border-radius: 50%;
	margin: 0 auto;
	position: absolute;
	left: 0;
	right: 0;
	top: -4.5em;

box-shadow:0px 0px 0px 1px #dedede;
-moz-box-shadow:0px 0px 0px 1px #dedede;
-webkit-box-shadow:0px 0px 0px 1px #dedede;

}

@media (max-width: 1280px) {
	aside.information dl {
		width: 8.5em;
		height: 8.5em;
		top: -4.25em;
	}
}

@media (max-width: 1140px) {
	aside.information dl {
		width: 8em;
		height: 8em;
		top: -4em;
	}
}

@media (max-width: 1000px) {
	aside.information dl {
		width: 8em;
		height: 8em;
		top: -4em;
	}
}



@media (max-width: 660px) {
	aside.information dl {
		width: 6em;
		height: 6em;
		top: -3em;

	}
}


body.animation aside.information dl {
  visibility: hidden;
  -webkit-transform: scale(0.6);
     -moz-transform: scale(0.6);
      -ms-transform: scale(0.6);
       -o-transform: scale(0.6);
          transform: scale(0.6);
}

body.animation aside.information.active dl {
  visibility: visible;
  -webkit-animation: show_information 3.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) infinite;
     -moz-animation: show_information 3.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) infinite;
      -ms-animation: show_information 3.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) infinite;
       -o-animation: show_information 3.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) infinite;
          animation: show_information 3.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) infinite;
}

@-webkit-keyframes show_information {
  0% { -webkit-transform: scale(0.6); opacity: 0;}
  25% { -webkit-transform: scale(1); opacity: 1;}
  100% { -webkit-transform: scale(1); opacity: 1;}
}

@-moz-keyframes show_information {
  0% { -moz-transform: scale(0.6); opacity: 0;}
  25% { -moz-transform: scale(1); opacity: 1;}
  100% { -moz-transform: scale(1); opacity: 1;}
}

@-ms-keyframes show_information {
  0% { -ms-transform: scale(0.6); opacity: 0;}
  25% { -ms-transform: scale(1); opacity: 1;}
  100% { -ms-transform: scale(1); opacity: 1;}
}

@-o-keyframes show_information {
  0% { -o-transform: scale(0.6); opacity: 0;}
  25% { -o-transform: scale(1); opacity: 1;}
  100% { -o-transform: scale(1); opacity: 1;}
}

@keyframes show_information {
  0% { transform: scale(0.6); opacity: 0;}
  25% { transform: scale(1); opacity: 1;}
  100% { transform: scale(1); opacity: 1;}
}





aside.information dl dt {
	display: inline-block;
	color: #fff;
	font-family: 'Nunito';
	font-size: 82.5%;
	font-weight: bold;
	text-transform: uppercase;
	margin: 17% auto 6%;
	padding: 0.3em 0.4em 0.16em;
}

.lesson10 aside.information dl dt {
	background: #FF7575;
}





aside.information dl dd {
	display: block;
	color: #4ecccc;
}

.lesson10 aside.information dl dd {
	color: #FF7575;
}

aside.information dl dd .letterspacing {
	letter-spacing: 0em;
	font-size: 100%;
}




aside.information dl dd em {
	font-family: 'Nunito';
	font-size: 96.25%;
	font-weight: bold;
	letter-spacing: 0.04em;
}

aside.information dl dd strong {
	display: block;
	font-family: 'Nunito';
	font-size: 206%;
	font-weight: bold;
	letter-spacing: 0.165em;
	line-height: 0.8;
	margin: 0.2em auto 0;
}

aside.information dl dd strong.japanese {
	font-size: 160%;
	letter-spacing: 0em;
	line-height: 1.1;
}

aside.information dl dd span {
	font-family: 'Nunito';
	font-size: 82.5%;
	font-weight: bold;
	letter-spacing: 0.06em;
}


@media (max-width: 660px) {
	aside.information dl dt {
		font-size: 62.5%;
		margin: 12% auto 2%;
		padding: 0.3em 0.4em 0.16em;
	}

	aside.information dl dd em {
		font-size: 68.75%;
	}

	aside.information dl dd strong {
		font-size: 144%;
		line-height: 0.7;
		margin: 0.2em auto 0;
	}
	aside.information dl dd strong.japanese {
		font-size: 120%;
	}

	aside.information dl dd span {
		font-size: 62.5%;
	}
}