/* CSS Document */

.blockNormal01 {
  background:url(../../../img/v3/lesson/lesson_bg01.png) ;
}
.topBlockNormal {
  padding: 20px 27px;
  border-radius: 10px 10px 0 0;
}
@media screen and (max-width:768px) {
  .topBlockNormal {
    padding: 20px 5px;
    border-radius: 0;
  }
}

.topBlockDetails {
  padding: 20px 35px;
  border-radius: 10px 10px 0 0;
}
@media screen and (max-width:768px) {
  .topBlockDetails {
    padding: 20px 0px;
    border-radius: 0;
  }
}

.lessonArea {
  overflow:hidden;
}

.lessonAreaRight {
  float:right;
  width:710px;
}

.lessonAreaLeft {
  float:left;
  width:230px;
}
@media screen and (max-width:768px) {
  .lessonAreaLeft,
  .lessonAreaRight {
    float:none;
    width:100%;
    overflow:hidden;
  }
  .lessonAreaRight{
    margin-bottom:20px;
  }
}

.lessonMenuTitle{
  border-radius: 3px;
  text-align:center;
  font-weight:bold;
  font-size:1.4rem;
  color:#ffffff;
  background-color:#ff6600;
  margin-bottom:2px;
  padding: 10px 5px 7px 5px;
}
@media screen and (max-width:768px) {
  .lessonMenuTitle{
      border-radius: 0px;
  }
}
.lessonMenuTabList{
}
.lessonMenuTab01{
  border-radius: 3px;
  background-color:#ffffff;
  margin-bottom:1px;
}

.lessonMenuTabLink01{
  display:block;
  float:none;
  padding:12px 12px 0px;
  font-size: 1.2rem;
}

/* flex
.lessonMenuTabLink01{
  float:none;
  font-size: 1.2rem;
  display:flex;
  align-items: center;
}
*/


@media screen and (max-width:768px) {
  .lessonMenuTab01{
    display:block;
    padding:0px;
    border-radius: 3px;
    width:50%;
    float:left;
    box-sizing: border-box;
  }
  li.lessonMenuTab01:nth-child(odd){
    border-right:#ffa23f 1px solid;
  }
  .lessonMenuTabLink01{
    padding: 7px 6px 0px;
  }
  li.lessonMenuTab01:nth-child(2n+1):last-child{
    width:100%;
    border-right:none;
  }
}
@media screen and (max-width:320px) {
  .lessonMenuTabLink01{
    font-size:1.1rem;
  }
}
.lessonMenuTabMark01{
  margin-right:3px;
}

.onDisp{
  background-color:#fef68f;
  border-radius: 3px;
}

.onGandum{
  margin-top:10px;
}

.onBukatsu{
  background-color:#d9ecff;
  border-radius: 3px;
}

@media screen and (max-width:768px) {
  .onGandum {
    margin-top:0;
  }
}
.wonderMark{
  color:#ff0000;
}

.downloadMark{
  vertical-align: -3px;
  font-size: 22px;
  color:#66cc00;
}

.downloadMark02{
  margin-right: 3px;
  vertical-align: -3px;
  font-size: 22px;
  color:#66cc00;
}

.markRightMargin{
  margin-right:6px;
}

.lessonContentsList{
  overflow:hidden;
  background-color:#ffffff;
  margin-bottom:5px;
}

.lessonContentsPicArea{
  float:left;
  width:38%;
  position:relative;
}
.lessonContentsPic{
  width:100%;
}
.lessonContentsPicLink{
  display: block;
}

.lessonContentsTextArea{
  float:right;
  width:62%;
}
.lessonContentsTextTitle{
  font-weight:bold;
  font-size:1.6rem;
  padding: 0;
}

.lessonContentsTextTeacher,
.lessonContentsTextOpen,
.lessonContentsTextData{
  font-size:1.4rem;
  margin-bottom:3px;
}
@media screen and (max-width:414px) {
  .lessonContentsPicArea{
    width:50%;
  }
  .lessonContentsTextArea{
    width:50%;
  }
  .lessonContentsTextTitle{
    font-size:1.2rem;
  }
  .lessonContentsTextTeacher{
    font-size: 1.2rem;
  }
.lessonContentsTextOpen,
.lessonContentsTextData{
    font-size:1rem;
  margin-bottom: 0;
  }
}

.lessonContentsAreaWrapper{
  padding:6px;
}

.viewingAlreadyMark {
  position: absolute;
  top: 10px;
  right: 10px;
  background: #ff3300;
  opacity: 1;
  padding: 6px 14px 4px;
  text-align:center;
  line-height:1;
  color: #ffffff;
  font-size: 12px;
  font-size: 1.2rem;
  border-radius: 5px;
  font-weight: normal;
  border:#ffffff 2px solid;
}
@media screen and (max-width:414px) {
  .viewingAlreadyMark {
    padding: 3px 7px 2px;
    text-align:center;
    line-height:1;
    font-size: 10px;
    font-size: 1rem;
    border:#ffffff 1px solid;
  }
}

/* 授業トップ限定：ソート機能 */
.selectArea{
  display:none;
}

.rankingSelect{
  display:inherit;
  border-radius: 3px;
  background-color:#ffffff;
  padding:8px 0px 5px;
  margin:10px 0px;
}
.rankingSelectLink{
    font-size: 1.4rem;
    padding: 0px 20px;
}

@media screen and (max-width:768px) {
  .selectArea{
    display:inherit;
    overflow:hidden;
  }
  .selectCategory{
    width:100%;
    float:left;
  }
  /* .selectRange{
    width:48%;
    float:right;
  } */

  /* .rankingSelect{
    display:none;
  } */
}

/* common.css 上書き・継承 */

.pager {/* 160 line */
  margin:10px 10px 10px 0px;
}

.sort-wrap,
.sort-wrap .sort{/* 85 line */
  width:100%;
  background-color: #ff6600;
  border-color:#ff5500;
}
.category{/* 15 line */
  background-color:#ff6600;
  bottom:6px;
  left:6px;
  padding: 5px 25px 3px 25px;
}

@media screen and (max-width:320px) {
  .category {
      bottom: 6px;
      left: 6px;
      padding: 2px 20px 1px 5px;
      font-size: 10px;
      font-size: 1rem;
  }
}

/* style.css 上書き・継承 */

.textButton{/* 46 line */
    background-color:#33cc00;
    padding: 10px 0 6px;
    margin-bottom:20px;
 }
 .textButton .text{
   color:#FFFFFF;
 }
.textButton:hover .text, .textButton:hover:after {
  color: #FF6600;
}
.textButton:after {
  color: #FFFFFF;
  margin-top: -15.5px;
}

@media screen and (max-width: 768px){
  .textButton {
      padding: 10px 0 8px;
  }
  .textButton:after {
    margin-top: -11px;
  }
}