* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: "Hiragino Kaku Gothic ProN", sans-serif;
}

a {
  text-decoration: none;
  color:#000000;
}

.clear {
  clear: left;
}

.container {
  max-width: 1170px;
  width: 100%;
  padding: 0 15px;
  margin: 0 auto;
}

.btn {
  padding: 8px 24px;
  color: white;
  display: inline-block;
  opacity: 0.8;
  border-radius: 4px;
  text-align: center;
}

.btn:hover {
  opacity: 1;
}

.fa {
  margin-right: 5px;
}

.lesson-wrapper {
  padding-left: 5%;
  padding-right: 5%;
  text-align: center;
}

.heading {
  color: #5f5d60;
  text-decoration: underline;
}

.heading h2 {
  font-weight: normal;
}

.lesson {
  float: left;
  width: 25%;

}
.lesson-box{
  border:solid 1px #cbccd1;
  box-shadow:0 3px 5px rgba(0, 0, 0, 0.22);
  margin:1%;
}


.lesson-box:hover {
  opacity: 1;
}

.lesson-icon {
  position: relative;

}
img {
   object-fit: cover;
    width: 100%;
}

.lesson-icon p {
  top: 44%;
  width: 100%;
  font-weight: bold;
}

.text-contents {
  width: 80%;
  display: inline-block;
  margin-top: 15px;
  font-size: 13px;
  color: #b3aeb5;
}


/* 繧ｿ繝悶Ξ繝�ヨ蜷代￠繝ｬ繧､繧｢繧ｦ繝� */
@media all and (max-width:600px) {
  .lesson {
    width: 50%;
  }

  footer {
    text-align: center;
  }

  .top-wrapper h1 {
    font-size: 32px;
  }

  .heading h2 {
    font-size: 20px;
  }
}

/* 繧ｹ繝槭�蜷代￠繝ｬ繧､繧｢繧ｦ繝� */
@media all and (max-width: 300px) {
  .lesson {
    width: 100%;
  }

  .btn {
    width: 100%;
  }

  .facebook {
    margin-bottom: 10px;
  }

  .top-wrapper {
    text-align: left;
  }

  /* header-right繧ｯ繝ｩ繧ｹ縺ｮdisplay繧地one縺ｫ謖�ｮ壹＠縺ｦ縺上□縺輔＞ */
  .header-right {
    display: none;
  }

  /* menu-icon繧ｯ繝ｩ繧ｹ縺ｮdisplay繧鍛lock縺ｫ謖�ｮ壹＠縺ｦ縺上□縺輔＞  */
  .menu-icon {
    display: block;
  }

  .top-wrapper h1 {
    font-size: 24px;
  }

  .top-wrapper p {
    font-size: 14px;
  }
}