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

.articleArea {
  overflow:hidden;
}

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

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

.menuTitle{
  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) {
  .menuTitle{
      border-radius: 0px;
  }
}
.menuTab01{
  border-radius: 3px;
  background-color:#ffffff;
  margin-bottom:1px;
}

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


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

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

.wonderMark{
  color:#ff0000;
}

.contentsList{
  overflow:hidden;
  background-color:#ffffff;
  margin-bottom:5px;
}
.contentsPicArea .contentsAreaWrapper{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  vertical-align: middle;
}
.contentsPicArea{
  float:left;
  width:30%;
  position:relative;
}
.contentsPic{
  max-width: 200px;
  width: auto;
  height: auto;
  max-height: 150px;
  display: block;
  margin: auto;
}
.contentsPicLink{
  display: block;
}

.contentsTextArea{
  float:right;
  width:69%;
  margin-right: 6px;
}
.contentsTextTitle{
  font-weight:bold;
  font-size:1.8rem;
  padding: 0;
  margin-top: 5px;
  max-height: 54px;
}

.contentsTextTeacher{
  font-size:1.8rem;
  margin-top: 5px;
  max-height: 48px;
  color: #808080;
}

.contentsTextOpen,
.contentsTextData{
  font-size:1.6rem;
  position: absolute;
  bottom: 0;
  margin-bottom: 5px;
}
.contentsTextOpen{
  right: 0;
}
@media screen and (max-width:414px) {
  .contentsPic{
    max-width: 100%;
    height: auto;
  }
  .contentsListWrapper{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap:5px;
  }
  .contentsPicArea{
    width:100%;
    float: none;
  }
  .contentsTextArea{
    width:100%;
    margin-right: 0;
    float: none;
  }
  .contentsTextTitle{
    font-size:1.2rem;
    margin-top: 0;
    max-height: none;
  }
  .contentsTextTeacher{
    font-size: 1.2rem;
    margin-top: 0;
    height: auto;
    max-height: none;
  }
.contentsTextOpen,
.contentsTextData{
    font-size:1rem;
    margin-bottom: 0;
    margin-top: 0;
    position: static;
  }
  .contentsTextOpen{
    float: none;
  }
}

.contentsAreaWrapper{
  padding:6px;
  position: relative;
  height: 150px;
}

.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;
  }
  .contentsAreaWrapper{
    height: auto;
  }
}

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

.rankingSelect{
  display:inherit;
  border-radius: 3px;
  background-color:#ffffff;
  padding:8px 0px 5px;
  margin:10px 0px;
}

/* 科学部専用ソート */
@media screen and (min-width:768px){
  .scienceStyle{
    width: 45%;
  }
  .scienceSeachArea{
    display: flex;
  }
  .scienceCategoryList{
    position: relative;
    width: 100%;
    background-color: #ff6600;
    border-color: #ff5500;
    color: #fff;
    margin-top: 10px;
    margin-left: 10px;
    height: 35px;
    padding: 5px;
    outline: none;
    appearance: none;
    
  }
  .scienceSort{
    position: relative;
    width: 50%;
  }
  .scienceSort:before{
    content: "\f04b";
    position: absolute;
    top: 50%;
    right: 5px;
    margin-top: -13.5px;
    font-family: FontAwesome;
    transform: rotate(90deg);
    color: #fff;
    font-size: 18px;
    z-index: 9999;
    pointer-events: none;
  }
}

@media screen and (max-width:768px){
  .scienceCategoryList{
    position: relative;
    width: 100%;
    background-color: #ff6600;
    border-color: #ff5500;
    color: #fff;
    margin-top: 10px;
    height: 35px;
    padding: 5px;
    outline: none;
    appearance: none;
    
  }
  .scienceSort{
    position: relative;
    width: 50%;
  }
  .scienceSort:before{
    content: "\f04b";
    position: absolute;
    top: 50%;
    right: 15px;
    margin-top: -8.5px;
    font-family: FontAwesome;
    transform: rotate(90deg);
    color: #fff;
    font-size: 18px;
    z-index: 9999;
    pointer-events: none;
  }
}

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

.more_text{
  text-align: right !important;
  margin-top: 10px;
}

.seeMoreButton {
  position: static;
  float: right;
}

.seeMoreButton .link {
  box-sizing: border-box;
  padding: 10px 20px;
  overflow: hidden;
  border-radius: 5px;
  border-radius: 6px;
  display: inline-block;
}
.seeMoreButton .link .text {
  color: #fff;
  font-size: 15px;
  font-size: 1.5rem;
  font-weight: bold;
}
.seeMoreButton .link .text .fa {
  color: #fff;
  font-size: 30px;
  font-size: 3.0rem;
  vertical-align: -4px;
  text-indent: 10px;
}

.seeMoreButton01 .link {
  box-shadow: 1px 1px 4px #6f3711;
  background-color: #ff6600;
}

.clubCategory{
  background-color: #d9ecff;
}

.onGundam{
  margin-top: 10px;
}

@media screen and (max-width:768px) {
  .seeMoreButton {
    position: static;
    text-align: center;
    margin-bottom: 10px;
    float: none;
  }
  .seeMoreButton .link {
    padding: 5px 20px;
  }
  .categoryMoreButton{
   float: none;
  }
  .onGundam{
    margin-top: 0px;
  }
}

@media screen and (max-width:320px) {
  .seeMoreButton .link .text {
    font-size: 13px;
    font-size: 1.3rem;
  }
}