@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;
}

.lesson1 #main {
  background: #d4f3f3;
}

.lesson2 #main {
  background: #ecdbf0;
}

.lesson3 #main {
  background: #ffdce3;
}

.lesson4 #main {
  background: #d3e9fa;
}

.lesson5 #main {
  background: #d5f1c8;
}

.lesson6 #main {
  background: #feeebc;
}

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

@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;
}

.lesson1 #hero .flag svg {
  fill: #70d7d7;
}

.lesson2 #hero .flag svg {
  fill: #c999d3;
}

.lesson3 #hero .flag svg {
  fill: #fe9bae;
}

.lesson4 #hero .flag svg {
  fill: #91c9f2;
}

.lesson5 #hero .flag svg {
  fill: #88d762;
}

.lesson6 #hero .flag svg {
  fill: #fdce3e;
}


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 0.8em;
  margin: 0 auto 0.7em;
}

.lesson1 #introduction h3 {
  background: #70d7d7;
}

.lesson2 #introduction h3 {
  background: #c999d3;
}

.lesson3 #introduction h3 {
  background: #fe9bae;
}

.lesson4 #introduction h3 {
  background: #91c9f2;
}

.lesson5 #introduction h3 {
  background: #88d762;
}

.lesson6 #introduction h3 {
  background: #fdce3e;
}

#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 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;
  margin-bottom: 40px;
  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 {
  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 {
  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;
}

#lecture .catch {
  position: inherit;
  display: inline-block;
  font-size: 150%;
  font-weight: bold;
  letter-spacing: 0.1em;
  padding: 0.7em 1em;
  color: #c999d3;
  background: #fff;
  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 {
  -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;
}

#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 {
  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 {
  -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;
}

#lecture h4.style06:before {
  padding-top: 10em;
}

#lecture h4.style09:before {
  padding-top: 15em;
}

.lesson1 #lecture h4:before {
  background: #70d7d7;
}

.lesson2 #lecture h4:before {
  background: #c999d3;
}

.lesson3 #lecture h4:before {
  background: #fe9bae;
}

.lesson4 #lecture h4:before {
  background: #91c9f2;
}

.lesson5 #lecture h4:before {
  background: #88d762;
}

.lesson6 #lecture h4:before {
  background: #fdce3e;
}



#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 {
    margin-bottom: 20px;
  }

  #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.style09:before {
    padding-top: 8.3em;
  }

  .lesson2 #lecture2 h4:before {
    padding-top: 210%;
  }

  #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 2em auto;
}

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

  #lecture .right {
    padding-left: 0;
    float: none;
  }

  #lecture .center {
    margin: 0 auto 1em auto;
  }
}





.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: 75%;
    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;
  }
}







#lecture figure {
  position: relative;
}

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



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

#lecture figure.caption figcaption {
  margin-top: 10px;
  display: block;
  width: auto;
  height: auto;
  overflow: visible;
  text-align: left;
  font-size: 93.75%;
}


@media (max-width: 660px) {
  #lecture1 .discription figure.caption {
    width: 90% !important;
  }

  #lecture figure.caption figcaption {
    font-size: 75%;
    line-height: 1.5em;
  }
}



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);
  }
}




/*========================================
  style01
========================================*/
.style01 .portrait {
  position: relative;
  z-index: 1;
}

.style01:after {
  display: block;
  clear: both;
  height: 0px;
  visibility: hidden;
  content: ".";
}

.style01 {
  min-height: 1px;
}

* html .style01 {
  height: 1px;
  height: auto;
  overflow: hidden;
}

.style01 .discription {
  position: relative;
  z-index: 0;
}

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

.style01 .discription p {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 11% 0;
  position: relative;
  z-index: 1;
}

.style01 .discription figure {
  margin-top: 8%;
  position: relative;
  z-index: 1;
}


@media (max-width: 660px) {
  .style01 .discription p {
    width: 90%;
    margin: 0 auto;
    padding: 3.2%;
  }

  .style01 .discription p:before {
    display: none;
  }

  .style01 .discription figure {
    width: 75%;
    margin: 0.8em auto 0;
  }
}




/*========================================
  style02
========================================*/
.style02 .portrait {
  width: 100%;
  margin-top: 4em;
}

.lesson6 .noheadline .style02 .portrait {
  margin-top: 1em;
}

.lesson6 section.change>ul.noheadline,
.lesson6 #lecture3 section.change>ul {
  padding-bottom: 0%;
}

.style02:after {
  display: block;
  clear: both;
  height: 0px;
  visibility: hidden;
  content: ".";
}

.style02 {
  min-height: 1px;
}

* html .style02 {
  height: 1px;
  height: auto;
  overflow: hidden;
}

.style02 .portrait dl {
  width: 48%;
  box-sizing: border-box;
  margin-bottom: 4%;
  padding: 0 !important;
  position: relative;
}

.style02 .portrait dl dt {
  display: block;
  width: 5em;
  height: 5em;
  font-family: 'Nunito';
  font-size: 100%;
  font-weight: bold;
  line-height: 5em;
  letter-spacing: 0.04em;
  text-align: center;
  border-radius: 50%;
  position: absolute;
  left: -1.8em;
  top: -2em;
  z-index: 10;
  overflow: visible;
}

.style02 .portrait dl.before dt {
  background: #fff;
}

.style02 .portrait dl.after dt {
  color: #fff;
}


.lesson1 .style02 .portrait dl.before dt {
  color: #24b7bc;
}

.lesson2 .style02 .portrait dl.before dt {
  color: #b46cc4;
}

.lesson3 .style02 .portrait dl.before dt {
  color: #fe9bae;
}

.lesson4 .style02 .portrait dl.before dt {
  color: #91c9f2;
}

.lesson5 .style02 .portrait dl.before dt {
  color: #5cb631;
}

.lesson6 .style02 .portrait dl.before dt {
  color: #fdce3e;
}

.lesson1 .style02 .portrait dl.after dt {
  background: #24b7bc;
}

.lesson2 .style02 .portrait dl.after dt {
  background: #b46cc4;
}

.lesson3 .style02 .portrait dl.after dt {
  background: #fe9bae;
}

.lesson4 .style02 .portrait dl.after dt {
  background: #91c9f2;
}

.lesson5 .style02 .portrait dl.after dt {
  background: #5cb631;
}

.lesson6 .style02 .portrait dl.after dt {
  background: #fdce3e;
}



@media (max-width: 660px) {
  .lesson1 .style02 .portrait {
    margin-top: 1em;
  }

  .style02 .portrait {
    margin-top: 2em;
  }

  .style02 .portrait dl {
    width: 75%;
    margin-left: auto;
    margin-right: auto;
  }

  .style02 .portrait dl+dl {
    margin-top: 2em;
  }

  .style02 .portrait dl dt {
    font-size: 62.5%;
  }

  .lesson6 section.change>ul.noheadline {
    padding-bottom: 3.2%;
  }

  .lesson6 .style02 .portrait dl dt {
    left: -1em;
    top: -1em;
  }

  .lesson6 .style02 .portrait dl+dl {
    margin-top: 6%;
  }
}






/*========================================
  style03
========================================*/
.style03 .discription {
  display: table;
  width: 100%;
  clear: both;
  position: relative;
}

.style03 .discription:before {
  content: "";
  display: block;
  width: 5000px;
  width: 80vw;
  height: 100%;
  background: #fff;
  position: absolute;
  right: 40%;
  top: 0;
  z-index: -1;
}

.style03 .discription>p {
  float: left;
  width: 48%;
  padding-top: 7%;
  padding-right: 4%;
}

.style03 .discription>figure {
  float: right;
  width: 48%;
}


@media (max-width: 660px) {
  .style03 .discription {
    display: block;
    padding-top: 0;
  }

  .style03 .discription:before {
    display: none;
  }

  .style03 .discription p {
    float: none;
    width: 90%;
    box-sizing: border-box;
    margin: 0 auto;
    padding: 3.2%;
  }

  .style03 .discription>figure {
    float: none;
    width: 75%;
    margin: 0.8em auto;
  }
}



/*========================================
  style04
========================================*/
.style04 .discription {
  display: table;
  width: 100%;
  clear: both;
  position: relative;
  padding: 2.8em 0em;
  background: #fff;
}

.style04 .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) {
  .style04 .discription {
    display: block;
    width: 90%;
    margin: 0 auto;
    padding: 3.2%;
  }

  .style04 .discription:before {
    display: none;
  }
}


/*========================================
  change
========================================*/
section.change {
  display: block;
  width: 80%;
  max-width: 1000px;
  box-sizing: border-box;
  margin: 6em auto 0;
  position: relative;
  z-index: 1;
}


section.change:before {
  content: "";
  display: block;
  width: 116%;
  height: 120%;
  font-size: 188%;
  background: #fff;
  position: absolute;
  left: -8%;
  top: -2em;
  z-index: -1;
}


@media (max-width: 660px) {
  section.change {
    width: 100%;
    margin: 2em auto 0;
  }

  section.change:before {
    width: 90%;
    height: 100%;
    font-size: 100%;
    padding: 0;
    background: #fff;
    margin: 0 auto;
    position: absolute;
    left: 5%;
    right: 5%;
    top: -1em;
  }

  .lesson1 section.change {
    margin: 4em auto 0;
  }

}





section.change h5 {
  display: inline-block;
  font-size: 150%;
  font-weight: bold;
  letter-spacing: 0.08em;
  margin-top: -2.0em;
  padding: 1.2em 1.66em;
  background: #fff;
  box-shadow: 7px 7px #d6d6d6;
}

.lesson1 section.change h5 {
  color: #4ecccc;
}

.lesson2 section.change h5 {
  color: #c999d3;
}

.lesson3 section.change h5 {
  color: #fe9bae;
}

.lesson4 section.change h5 {
  color: #91c9f2;
}

.lesson5 section.change h5 {
  color: #88d762;
}

.lesson6 section.change h5 {
  color: #fdce3e;
}


section.change h5 br {
  display: none;
}



@media (max-width: 660px) {
  section.change h5 {
    font-size: 93.75%;
    letter-spacing: 0.06em;
    line-height: 1.46;
    margin-bottom: 4%;
    padding: 0.68em 2.16em;
    box-shadow: 5px 5px #d6d6d6;
  }

  .lesson6 section.change h5 {
    padding: 0.68em 0.8em;
  }

  section.change h5 br {
    display: block;
  }
}



section.change>p {
  margin-top: 2em;
}

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


section.change>ul {
  padding-bottom: 4%;
}

section.change>ul>li {
  display: block;
  width: 100%;
  margin-top: 7%;
  position: relative;
}


@media (max-width: 660px) {
  section.change p {
    width: 90%;
    font-size: 68.75%;
    line-height: 2;
    box-sizing: border-box;
    margin: 0 auto;
    padding: 3.2% 3.2% 0;
  }

  section.change>ul {
    padding-bottom: 2.2em;
  }

  section.change>ul>li {
    margin-top: 1.5em;
  }
}






section.change h6 {
  display: inline-block;
  color: #fff;
  font-size: 150%;
  font-weight: bold;
  letter-spacing: 0.1em;
  margin-top: -1.7em;
  margin-bottom: 1em;
  padding: 0.7em 2em;
}

.lesson1 section.change h6 {
  background: #70d7d7;
}

.lesson2 section.change h6 {
  background: #c999d3;
}

.lesson3 section.change h6 {
  background: #fe9bae;
}

.lesson4 section.change h6 {
  background: #91c9f2;
}

.lesson5 section.change h6 {
  background: #88d762;
}

.lesson6 section.change h6 {
  background: #fdce3e;
}


section.change h6:before {
  content: "";
  display: block;
  width: 108%;
  height: auto;
  padding-top: 38%;
  position: absolute;
  left: -4%;
  top: 0;
  z-index: -1;
}

.lesson1 section.change h6:before {
  background: #bde9eb;
}

.lesson2 section.change h6:before {
  background: #ecdbf0;
}

.lesson3 section.change h6:before {
  background: #ffdce3;
}

.lesson4 section.change h6:before {
  background: #d3e9fa;
}

.lesson5 section.change h6:before {
  background: #d5f1c8;
}

.lesson6 section.change h6:before {
  background: #feeebc;
}

.lesson6 section.change h6.style08:before {
  background: #fdce3e;
}


section.change>ul.noheadline>li {
  margin-top: 4.5%;
}

section.change>ul.noheadline>li h6 {
  padding: 0em 2em;
  background: transparent;
}

@media (max-width: 1024px) {
  .lesson6 section.change h6::before {
    content: "";
    display: block;
    width: 108%;
    height: auto;
    padding-top: 28%;
    position: absolute;
    left: -4%;
    top: 0;
    z-index: -1;
  }

  .lesson6 section.change .style02 .portrait h6.style08 {
    padding: 0.5em 0em;
  }
}


@media (max-width: 660px) {
  section.change h6 {
    font-size: 93.75%;
    margin-top: 0;
    margin-bottom: 0.9em;
    padding: 0.7em 2em;
  }

  section.change h6:before {
    width: 82.8%;
    height: 5em;
    padding: 0;
    margin: 0 auto;
    left: 0;
    right: 0;
    top: 1.2em;
  }

  section.change>ul.noheadline>li {
    margin-top: 0%;
  }

}





section.change div.box {
  width: 100% !important;
  overflow: hidden;
}

section.change .discription p {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding-bottom: 8%;
  position: relative;
}




/*========================================
  change02
========================================*/
section.change02 {
  margin: 4em auto 0;
}

section.change02:before {
  top: 0.3em;
  height: 100%;
}

.lesson6 section.change#lesson6_2_2 {
  margin: 4.9em auto 0;
}

.lesson6 section.change#lesson6_2_2:before {
  top: 0em;
  height: 100%;
}

.lesson6 section.change02 div.box {
  overflow: visible;
}

@media (max-width: 660px) {
  section.change02 {
    margin: 2em auto 0;
  }

  section.change02:before {
    top: 0.3em;
  }

  section.change02>ul {
    padding-bottom: 3.2%;
  }

  .lesson6 section.change#lesson6_2_2 {
    margin: 2em auto 0;
  }

  .lesson6 section.change#lesson6_2_2>ul {
    padding-bottom: 3.2%;
  }

  .lesson6 section.change h6::before {
    width: 83%;
    height: auto;
    padding-top: 48%;
    top: 2%;
    left: 0%;
  }

}


/*========================================
  change03
========================================*/
section.change03 {
  margin: 40px auto 0;
  padding: 65px 0px 40px 0px;
}

.lesson6 section.change03 {
  margin: 0em auto 0;
  padding: 0px 0px 0px 0px;
}

section.change03:before {
  top: 0em;
  height: 100%;
}

section.change03 div.box {
  overflow: visible;
}

section.change .style02 .portrait h6.style08 {
  position: absolute;
  top: -1.2em;
  left: 0;
  right: 0;
  margin: auto;
  padding: 0.7em 0em;
  width: 160px;
  z-index: 2;
  box-sizing: border-box;
}

section.change .style02 .portrait h6.style08.long {
  width: 190px;
}

section.change .style02 .portrait h6.style08.long2 {
  width: 210px;
}

section.change .style02 .portrait h6.style08.long3 {
  width: 330px;
}

section.change .style02 .portrait h6.style08.long4 {
  width: 400px;
}

section.change03 .style02 .style07 {
  overflow: hidden;
  width: 100%;
  padding: 65px 40px 30px 40px;
  margin-left: -40px;
}

.lesson5 section.change03 .style02 .style07 {
  background: #d5f1c8;
}

.lesson6 section.change03 .style02 .style07 {
  padding: 65px 40px 0px 40px;
}

section.change03 h6:before {
  background: transparent !important;
}

section.change03 .style02 .portrait dl {
  margin-top: -4em !important;
  margin-bottom: 0;
}

section.change03 .style02 .discription {
  margin-top: 30px;
  display: block;
  width: 100%;
}

section.change03 .style02 .discription p {
  padding-bottom: 0px;
}

.lesson5 section.change03 .style02 .portrait dl.before dt {
  border: 2px solid #5cb631;
}


@media (max-width: 980px) {
  h6 {
    padding: 0.6em 1.2em !important;
    font-size: 115% !important;
  }

  dd h6::before {
    width: auto !important;
    padding-top: 0 !important;
  }

  .style08.long3,
  .style08.long4 {
    width: 90% !important;
  }
}


@media (max-width: 660px) {
  h6 {
    font-size: 93.75% !important;
  }

  section.change03 {
    margin: 1em auto 0;
    padding: 65px 0px 3.2% 0px;
  }

  section.change .style02 .portrait h6.style08 {
    top: -1.3em;
    /*width: 90%;*/
  }

  section.change .style02 .portrait h6.style08.long {
    width: 140px;
  }

  .lesson5 section.change.change03 .portrait:before,
  .lesson6 section.change.change02 .style07 .portrait:before,
  .lesson6 section.change.change02 h6:before {
    background: transparent;
  }

  .lesson6 section.change.change02 .portrait {
    padding-bottom: 0%;
  }

  section.change.change03 .discription p {
    width: 105%;
    margin-left: -2%;
  }

  section.change03 .style02 .style07 {
    overflow: visible;
    width: 83%;
    padding: 65px 0px 0px 0px;
    margin-left: 8.5%;
  }

  .lesson6 section.change03 .style02 .style07 {
    padding: 65px 0px 0px 0px;
  }

  section.change03 .style02 .style07 .discription p {
    background: transparent;
  }

  section.change03 .style02 .style07 .portrait dl {
    width: 90%;
  }

  section.change03 .style02 .portrait dl.after dt {
    font-size: 68%;
    left: -0.7em;
    top: -2em;
    z-index: 10;
    overflow: visible;
  }

  section.change03 .style02 .style07 .portrait .left {
    margin-bottom: 4em;
  }

  section.change .style02 .portrait h6.style08.long2 {
    width: 180px;
  }

  section.change .style02 .portrait h6.style08.long3 {
    width: 220px !important;
  }

  section.change .style02 .portrait h6.style08.long4 {
    width: 280px !important;
  }

  .lesson6 section.change02 div.box dl dt {
    left: -0.7em;
    z-index: 10;
  }

  .style02 .discription p {
    padding-bottom: 20px !important;
  }

  .lesson6 #lecture3 section.change02 ul {
    padding-bottom: 0px !important;
  }

}

@media (max-width: 500px) {
  section.change .style02 .portrait h6.style08.long4 {
    width: 90% !important;
  }
}


/*========================================
  style05
========================================*/
.style05:after {
  display: block;
  clear: both;
  height: 0px;
  visibility: hidden;
  content: ".";
}

.style05 {
  position: relative;
  min-height: 1px;
}

* html .style05 {
  height: 1px;
  height: auto;
  overflow: hidden;
}

section.change .style05 .discription {
  width: 100%;
}

section.change .style05 .discription p {
  padding-bottom: 2em;
  position: absolute;
  top: 0;
  left: 0;
}

section.change .style05 .portrait {
  margin-top: 6em;
}

.lesson6 #lecture3 section.change .style02.style05 .portrait {
  margin-top: 0em;
  padding-top: 7em;
}

section.change .style05.line03 .portrait {
  margin-top: 7em;
}

.lesson4 section.change .style05 .portrait.center {
  margin: 6em auto -4em auto !important;
}

.lesson6 section.change .style05 .portrait.center {
  margin: 0em auto 0em auto !important;
  padding-top: 6em;
}

.lesson4 section.change .style05.line03 .portrait.center {
  margin: 7em auto -5em auto !important;
}

section.change .style05 .portrait.second {
  margin-top: 2em !important;
}

.lesson6 #lecture3 section.change02 h6.pc {
  display: inline-block !important;
}

.lesson6 #lesson6_3_2 {
  margin-top: 4.5em;
}

@media (max-width: 660px) {
  section.change .style05 .discription p {
    padding-bottom: 0em;
  }

  section.change .style05 .portrait,
  section.change .style05.line03 .portrait {
    margin-top: 0em !important;
  }

  .lesson4 section.change .style05 .portrait.center,
  .lesson4 section.change .style05.line03 .portrait.center {
    margin: 0em auto 0em auto !important;
  }

  section.change .style05 .portrait.second {
    margin-top: 0em !important;
  }

  section.change .style05 .discription p {
    position: relative;
  }

  .lesson6 section.change .style05 .portrait.center {
    padding-top: 0em;
  }

  .lesson6 #lecture3 section.change02 h5 {
    margin-bottom: 0%;
  }

  .lesson6 #lecture3 section.change02 .style02.style05 .portrait {
    margin-top: 0em;
    padding-top: 0em;
  }

  .lesson6 #lecture3 section.change02 .style02.style05 .portrait:before {
    height: 110%;
    top: -6%;
  }

  .lesson6 #lecture3 section.change02 h6 {
    position: absolute;
    top: -3.7em;
    left: 0;
    right: 0;
    margin: auto;
    padding: 0.7em 0em;
    width: 160px;
    z-index: 2;
    box-sizing: border-box;
  }

  .lesson6 #lecture3 section.change02 ul {
    margin-top: 4.7em;
    padding-bottom: 3.2%;
  }

  .lesson6 #lecture3 section.change02 h6.pc {
    display: none !important;
  }

  .lesson6 #lesson6_3_2 {
    margin-top: 3.3em;
  }

}









@media (max-width: 660px) {
  section.change .discription p {
    width: 90%;
    margin: 0 auto;
    padding: 3.2%;
  }

  section.change .portrait {
    padding-bottom: 3.2%;
    position: relative;
  }

  section.change .portrait:before {
    content: "";
    display: block;
    width: 82.8%;
    height: 100%;
    margin: 0 auto;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
  }

  .lesson1 section.change .portrait:before {
    background: #bde9eb;
  }

  .lesson2 section.change .portrait:before {
    background: #ecdbf0;
  }

  .lesson3 section.change .portrait:before {
    background: #ffdce3;
  }

  .lesson4 section.change .portrait:before {
    background: #d3e9fa;
  }

  .lesson5 section.change .portrait:before {
    background: #d5f1c8;
  }

  .lesson6 section.change .portrait:before {
    background: #feeebc;
  }

  .lesson4 section.change .portrait.nobg:before,
  .lesson6 #lecture3 section.change.change03 .portrait:before {
    background: none;
  }

  .lesson4 section.change .portrait.nobg {
    margin-top: 0.5em !important;
  }

  .lesson6 #lecture2 section.change#lesson6_2_1 .portrait:before {
    height: 105.2%;
    top: -3.2%;
  }

  section.change .portrait>figure {
    display: block;
    width: 75%;
  }

  section.change .discription {
    margin-top: 0 !important;
  }

  section.change .discription>figure {
    width: 75%;
    margin: 0 auto;
  }
}







/*========================================
  trial
========================================*/
.trial {
  display: block;
  width: 100%;
  margin-top: 2.5em;
}

.trial li.box {
  margin-top: 2.5em !important;
  position: relative;
  z-index: 0;
  overflow: hidden;
}

@media (min-width: 661px) {
  .trial li.box:nth-of-type(odd) {
    text-align: left;
  }

  .trial li.box:nth-of-type(odd) .portrait {
    padding-right: 2%;
  }

  .trial li.box:nth-of-type(odd) .discription {
    padding-left: 2%;
    text-align: left;
    left: 50%;
  }

  .trial li.box:nth-of-type(even) {
    text-align: right;
  }

  .trial li.box:nth-of-type(even) .portrait {
    margin-left: auto;
    padding-left: 2%;
  }

  .trial li.box:nth-of-type(even) .discription {
    padding-right: 2%;
    text-align: right;
    left: 0;
  }
}



@media (max-width: 660px) {

  .lesson6 #lecture4 .trial {
    margin-top: 7em !important;
  }

  .trial li.box {
    margin-top: 6em !important;
    overflow: visible;
  }

  .trial li.box .portrait {
    position: static;
  }

  .trial li.box.noheadline {
    margin-top: 1em !important;
  }
}

@media (min-width: 661px) {
  .trial li.box .discription {
    position: absolute;
    top: 50%;
    z-index: 1;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
  }

  .trial li.box.noheadline .discription {
    top: 32%;
  }

}








.trial li.box .discription h5 {
  display: inline-block;
  color: #fff;
  font-size: 150%;
  font-weight: bold;
  letter-spacing: 0.1em;
  line-height: 1.8;
  margin-left: -16%;
  padding: 2.8em 3.4em;
  position: relative;
  z-index: 1;
}

.trial li.box .discription h5.line01 {
  min-height: 2em;
  padding: 2.3em 3.4em;
}

.trial li.box:nth-of-type(odd) .discription h5 {
  margin-left: -16%;
}

.trial li.box:nth-of-type(even) .discription h5 {
  margin-right: -16%;
}

.lesson1 .trial li.box .discription h5 {
  background: #70d7d7;
}

.lesson2 .trial li.box .discription h5 {
  background: #c999d3;
}

.lesson3 .trial li.box .discription h5 {
  background: #fe9bae;
}

.lesson4 .trial li.box .discription h5 {
  background: #70d7d7;
}

.lesson5 .trial li.box .discription h5 {
  background: #88d762;
}

.lesson6 .trial li.box .discription h5 {
  background: #fdce3e;
}


@media (max-width: 1140px) {
  .trial li.box .discription h5 {
    padding: 2.2em 3em;
  }
}

@media (max-width: 1000px) {
  .trial li.box .discription h5 {
    padding: 1.8em 2.4em;
  }
}

@media (max-width: 860px) {
  .trial li.box .discription h5 {
    font-size: 137.5%;
    padding: 1.4em 2em;
  }
}

@media (max-width: 768px) {
  .trial li.box .discription h5 {
    padding: 1.2em 1.8em;
  }
}

@media (max-width: 660px) {
  .trial li.box .discription h5 {
    display: block;
    width: 10em;
    font-size: 93.75%;
    letter-spacing: 0.08em;
    line-height: 1.4;
    margin: 0 auto !important;
    padding: 1.4em 2.2em;
    position: absolute;
    left: 0;
    right: 0;
    top: -5em;
    z-index: 1;
  }

  .lesson3 .trial li.box .discription h5 {
    width: 11em;
    padding: 1.4em;
    top: -3.5em;
  }

  .trial li.box .discription h5.line01 {
    min-height: 2em;
    padding: 1.8em 2em;
  }
}


body.animation .trial li.box .discription h5 {
  opacity: 0;
  -webkit-transform: translateX(-5%);
  -moz-transform: translateX(-5%);
  -ms-transform: translateX(-5%);
  -o-transform: translateX(-5%);
  transform: translateX(-5%);
}

body.animation .trial li.box .discription h5.active {
  -webkit-animation: show_trialHeadline_transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) both,
    show_opacity 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) both;
  -moz-animation: show_trialHeadline_transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) both,
    show_opacity 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) both;
  -ms-animation: show_trialHeadline_transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) both,
    show_opacity 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) both;
  -o-animation: show_trialHeadline_transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) both,
    show_opacity 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) both;
  animation: show_trialHeadline_transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) both,
    show_opacity 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) both;

}

@-webkit-keyframes show_trialHeadline_transform {
  0% {
    -webkit-transform: translateX(-5%);
  }

  100% {
    -webkit-transform: translateX(0);
  }
}

@-moz-keyframes show_trialHeadline_transform {
  0% {
    -moz-transform: translateX(-5%);
  }

  100% {
    -moz-transform: translateX(0);
  }
}

@-ms-keyframes show_trialHeadline_transform {
  0% {
    -ms-transform: translateX(-5%);
  }

  100% {
    -ms-transform: translateX(0);
  }
}

@-o-keyframes show_trialHeadline_transform {
  0% {
    -o-transform: translateX(-5%);
  }

  100% {
    -o-transform: translateX(0);
  }
}

@keyframes show_trialHeadline_transform {
  0% {
    transform: translateX(-5%);
  }

  100% {
    transform: translateX(0);
  }
}






.trial li.box .discription p {
  display: block;
  width: 100%;
  color: #333;
  font-size: 93.75%;
  letter-spacing: 0.02em;
  line-height: 2.2;
  text-align: left;
  box-sizing: border-box;
  margin-top: -8%;
  padding: 22% 8% 14%;
  background: #fff;
  position: relative;
  z-index: 0;
}

@media (max-width: 1000px) {
  .trial li.box .discription p {
    line-height: 2.2;
  }
}

@media (max-width: 860px) {
  .trial li.box .discription p {
    line-height: 2;
    padding: 18% 8% 10%;
  }
}

@media (max-width: 768px) {
  .trial li.box .discription p {
    line-height: 1.9;
    padding: 18% 8% 10%;
  }
}

@media (max-width: 660px) {
  .trial li.box .discription p {
    display: block;
    width: 90%;
    font-size: 75%;
    line-height: 2;
    box-sizing: border-box;
    margin: 0 auto;
    padding: 3.2%;
  }
}







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

.lesson1 #conclusion {
  background: #70d7d7;
}

.lesson2 #conclusion {
  background: #c999d3;
}

.lesson3 #conclusion {
  background: #fe9bae;
}

.lesson4 #conclusion {
  background: #91c9f2;
}

.lesson5 #conclusion {
  background: #88d762;
}

.lesson6 #conclusion {
  background: #fdce3e;
}


body.information #conclusion {
  padding-bottom: 4em;
}

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

  body.information #conclusion {
    padding-bottom: 4em;
  }
}






#conclusion h4 {
  text-align: center;
  margin-bottom: 1.68em;
  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 h4 {
    margin-bottom: 1.2em;
  }

  #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;
  }
}






#conclusion .charactor {
  display: inline-block;
  font-size: 75%;
  vertical-align: top;
}

#conclusion .charactor>span {
  display: block;
  width: 6.8em;
  height: 6.8em;
  margin-bottom: 0.8em;
  border-radius: 50%;
  overflow: hidden;
}

#conclusion .charactor>span img {
  width: 100%;
  height: 100%;
}


@media (max-width: 660px) {
  #conclusion .charactor {
    font-size: 62.5%;
  }

  .lesson6 #conclusion .charactor {
    margin-top: 5em;
  }

  #conclusion .charactor>span {
    width: 5.6em;
    height: 5.6em;
    margin-bottom: 0.4em;
  }

  #conclusion .charactor>span img {
    width: 100%;
    height: 100%;
  }
}






#conclusion>i {
  max-width: 730px;
  display: inline-block;
  color: #333;
  font-size: 93.75%;
  letter-spacing: 0.02em;
  line-height: 1.9;
  text-align: left;
  box-sizing: border-box;
  padding: 1.6em 2em;
  margin-left: 2em;
  background: #fff;
  vertical-align: top;
  position: relative;
}

#conclusion>i:before {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border: 1em solid transparent;
  border-right: 1.3em solid #fff;
  margin: auto 0;
  position: absolute;
  left: -2em;
  top: 0;
  bottom: 0;
}


@media (max-width: 980px) {
  #conclusion>i {
    max-width: 80%;
  }
}


@media (max-width: 660px) {
  #conclusion>i {
    width: 56%;
    font-size: 68.75%;
    line-height: 1.8;
    padding: 1em;
    margin-left: 2em;
  }

  #conclusion>i:before {
    content: "";
    display: block;
    width: 0;
    height: 0;
    border: 1em solid transparent;
    border-right: 1.3em solid #fff;
    margin: auto 0;
    position: absolute;
    left: -2em;
    top: 0;
    bottom: 0;
  }

  #conclusion>i br {
    display: none;
  }

  #conclusion>i>span+span {
    margin-top: 0;
  }
}








/*========================================
  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;
}

@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;
}

.lesson1 aside.information dl dt {
  background: #4ecccc;
}

.lesson2 aside.information dl dt {
  background: #c999d3;
}

.lesson3 aside.information dl dt {
  background: #fe9bae;
}

.lesson4 aside.information dl dt {
  background: #91c9f2;
}

.lesson5 aside.information dl dt {
  background: #88d762;
}

.lesson6 aside.information dl dt {
  background: #fdce3e;
}





aside.information dl dd {
  display: block;
  color: #4ecccc;
  line-height: 1.3em;
}

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

.lesson2 aside.information dl dd {
  color: #c999d3;
}

.lesson3 aside.information dl dd {
  color: #fe9bae;
}

.lesson4 aside.information dl dd {
  color: #91c9f2;
}

.lesson5 aside.information dl dd {
  color: #88d762;
}

.lesson6 aside.information dl dd {
  color: #fdce3e;
}

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;
}

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%;
  }
}


/*========================================
  tips
========================================*/
#tips {
  display: block;
  width: 100%;
  padding: 7.5% 0 4.2%;
  background: #e2e2e2;
}


body.information #tips {
  padding-top: 6em;
}

.announce {
  box-sizing: border-box;
  position: relative;
  max-width: 1000px;
  margin: 0.5em auto 6em auto;
  padding: 1.5em;
  background: #fff;
  text-align: center;
  font-size: 93.75%;
}

.announce:after {
  content: "";
  position: absolute;
  top: -1em;
  left: 50%;
  margin-left: -1em;
  display: block;
  width: 0px;
  height: 0px;
  border-style: solid;
  border-width: 0 1em 1em 1em;
  border-color: transparent transparent #ffffff transparent;
}

.announce dl {
  width: auto;
  display: inline-block;
  margin: 0px auto;
}

.announce dl dt {
  display: inline-block;
  width: 5em;
  padding: 10px;
  background: #ffe609;
}

.announce dl dd {
  display: inline-block;
  padding-left: 5em;
  padding: 10px;
}

@media (max-width: 660px) {
  .announce {
    margin: 1em auto 3.5em auto;
    padding: 1.3em 0.3em 0.5em 0.3em;
    max-width: 90%;
  }

  .announce dl dt {
    font-size: 81.25%;
    font-weight: bold;
  }

  .announce dl dd {
    font-size: 68.75%;
    line-height: 1.8;
    text-align: left;
  }
}




#tips>div.box {
  padding: 3%;
  background: url(/sp/cosgenic/common/images/tips-bg.gif) center center repeat #fff;
}


@media (max-width: 660px) {
  #tips {
    padding: 4em 0 2em;
  }

  body.information #tips {
    padding-top: 4em;
  }


  #tips>div.box {
    padding: 2.8em 3.2% 1em;
    background-size: 14%;
  }
}


body.animation #tips>div.box {
  opacity: 0;
  -webkit-transform: translateY(15%);
  -moz-transform: translateY(15%);
  -ms-transform: translateY(15%);
  -o-transform: translateY(15%);
  transform: translateY(15%);
}

body.animation #tips.active>div.box {
  -webkit-animation: show_tips 2s cubic-bezier(0.165, 0.84, 0.44, 1) 0.4s both;
  -moz-animation: show_tips 2s cubic-bezier(0.165, 0.84, 0.44, 1) 0.4s both;
  -ms-animation: show_tips 2s cubic-bezier(0.165, 0.84, 0.44, 1) 0.4s both;
  -o-animation: show_tips 2s cubic-bezier(0.165, 0.84, 0.44, 1) 0.4s both;
  animation: show_tips 2s cubic-bezier(0.165, 0.84, 0.44, 1) 0.4s both;
}

@-webkit-keyframes show_tips {
  0% {
    -webkit-transform: translateY(15%);
    opacity: 0;
  }

  100% {
    -webkit-transform: translateY(0);
    opacity: 1;
  }
}

@-moz-keyframes show_tips {
  0% {
    -moz-transform: translateY(15%);
    opacity: 0;
  }

  100% {
    -moz-transform: translateY(0);
    opacity: 1;
  }
}

@-ms-keyframes show_tips {
  0% {
    -ms-transform: translateY(15%);
    opacity: 0;
  }

  100% {
    -ms-transform: translateY(0);
    opacity: 1;
  }
}

@-o-keyframes show_tips {
  0% {
    -o-transform: translateY(15%);
    opacity: 0;
  }

  100% {
    -o-transform: translateY(0);
    opacity: 1;
  }
}

@keyframes show_tips {
  0% {
    transform: translateY(15%);
    opacity: 0;
  }

  100% {
    transform: translateY(0);
    opacity: 1;
  }
}






#tips h4 {
  display: block;
  width: 7.5em;
  height: 7.5em;
  max-width: 120px;
  max-height: 120px;
  text-align: center;
  box-sizing: border-box;
  padding: 0.6em 0;
  background: url(/sp/cosgenic/common/images/tips-title-bg.gif) center center no-repeat;
  background-size: contain;
  position: absolute;
  left: 5%;
  top: -3em;
}

#tips h4 em {
  display: block;
  color: #ff359a;
  font-family: 'Nunito';
  font-size: 100%;
  margin-top: 0.4em;
}

#tips h4 img {
  width: 30%;
  height: auto;
}


@media (max-width: 1000px) {
  #tips h4 {
    width: 6em;
    height: 6em;
    left: 3%;
    top: -2.4em;
  }

  #tips h4 em {
    font-size: 87.5%;
  }
}

@media (max-width: 860px) {
  #tips h4 {
    width: 5.5em;
    height: 5.5em;
    left: 2%;
    top: -4.5em;
  }

  #tips h4 em {
    font-size: 75%;
    margin-top: 0.6em;
  }

  #tips h4 img {
    width: 28%;
  }
}

@media (max-width: 660px) {
  #tips h4 {
    width: 4em;
    height: 4em;
    margin: 0 auto;
    padding: 0.3em 0;
    left: 0;
    right: 0;
    top: -2em;
  }

  #tips h4 em {
    display: block;
    color: #ff359a;
    font-family: 'Nunito';
    font-size: 62.5%;
    margin-top: 0.3em;
  }

  #tips h4 img {
    width: 30%;
    height: auto;
  }
}





#tips h5 {
  display: inline-block;
  font-size: 150%;
  font-weight: 500;
  letter-spacing: 0.1em;
  margin-bottom: 3%;
  padding: 0.5em 0.8em;
  background: #ffe100;
}

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

@media (max-width: 660px) {
  #tips h5 {
    font-size: 81.25%;
    font-weight: bold;
    margin-bottom: 3%;
    padding: 0.8em 1em;
  }

  #tips p {
    font-size: 75%;
    line-height: 2;
  }
}












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

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

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

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

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

#credit p 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 p a:hover:before {
  left: 0;
}

#credit p 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 p a:hover span {
  color: #fff;
}

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



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

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

  #credit p a {
    font-size: 75%;
    margin-left: 0;
    padding: 0.2em;
  }

  .lesson1 #credit p a,
  .lesson2 #credit p a {
    margin-top: 0.8em;
  }

  .lesson3 #credit p a {
    margin-top: 0.5em;
  }

  .lesson4 #credit p a,
  .lesson5 #credit p a {
    margin-top: 0.2em;
  }

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










/*========================================
  hacosta
========================================*/
#hacosta {
  display: block;
  width: 100%;
  padding-top: 1.8em;
  background: #fff;
}

#hacosta>div.box {
  padding: 2.2% 3%;
  text-align: left;
  border: 8px solid #e2e2e2;
}

#hacosta h4 {
  display: block;
  width: 100%;
  font-size: 87.5%;
  font-weight: bold;
  letter-spacing: 0.12em;
  text-align: center;
}

#hacosta h4:after {
  content: "";
  display: block;
  width: 5%;
  height: 1px;
  background: #000;
  margin: 0.2em auto 0;
}

#hacosta h4 img {
  width: 13%;
  height: auto;
  vertical-align: middle;
  margin-right: 0.7em;
  position: relative;
  top: -0.34em;
}

#hacosta p {
  color: #555;
  font-size: 87.5%;
  letter-spacing: 0.02em;
  line-height: 2;
  margin-top: 1.2em;
}



@media (max-width: 660px) {
  #hacosta {
    box-sizing: border-box;
    padding: 0.8em 4.6% 0em;
  }

  #hacosta>div.box {
    padding: 3.2%;
    border-width: 4px;
  }

  #hacosta h4 {
    font-size: 62.5%;
  }

  #hacosta h4:after {
    width: 10%;
    margin-top: 0;
  }

  #hacosta h4 img {
    width: 34%;
    margin-right: 0.4em;
    top: -0.3em;
  }

  #hacosta p {
    color: #555;
    font-size: 75%;
    line-height: 2;
    box-sizing: border-box;
    margin: 0 auto;
    padding: 3.2%;
  }
}


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

.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;
  }
}