@charset "UTF-8";
/*----------------
------videos------
----------------*/


/* head
-------------------------------------------------*/

.pageTitle {
  max-width: 252px;
}

.pageLead {
  margin-bottom: 50px;
}

@media screen and (min-width: 768px) {
  .pageTitle {
    max-width: 627px;
  }

  .pageLead {
    margin-bottom: 55px;
    text-align: center;
  }
}

/* latest
-------------------------------------------------*/

#latest .videoItem {
  margin: 0 auto;
  max-width: 330px;
}

@media screen and (min-width: 901px) {
  .korogaru-profile {
    display: flex;
    gap: 30px;
    padding: 50px 0 180px;
  }
}

/* videoList
-------------------------------------------------*/

#videoList-wrap {
  margin: 0 auto 50px;
  max-width: 900px;
}
@media screen and (min-width:768px) {
    #videoList-wrap {
      margin: 0 auto 80px;
  }
}

.tab {
    flex-direction: row;
    margin-bottom: .7em;
}

.tabItem {
    width: 48.5%;
}
@media screen and (max-width:300px) {
    .tabItem {
      width: 100%;
  }
}
@media screen and (min-width:900px){
    .tabItem {
        width: 24%;
    }
}

.tabLink {
    margin-bottom: .5em;
    padding: .6em .2em;
    font-size: 1.8rem;
    border: #3D7B1C 2px solid;
}

.tabLink.on {
    color: #fff;
    background-color: #3D7B1C;
}

.tabBody {
  padding: 30px 25px;
  background: #fff;
  border-radius: clamp(20px, 5vw, 30px);
}
@media screen and (min-width:900px){
    .tabBody {
      padding: 60px 90px;
    }
}
@media screen and (max-width:300px) {
    .tabBody {
      padding: 60px 0;
  }
}

.tabBody__item {
    display: none;
}
.tabBody__item.on {
    display: block;
}

.videoList {
  display: flex;
  flex-direction: column;
  gap: 30px;
}
@media screen and (min-width: 901px) {
    .videoList {
      flex-direction: row;
      gap: 60px;
    }
}

.videoList .videoItem {
  margin: 0 auto;
  width: 50%;
  max-width: 200px;
}

/*すべての動画をみる*/
.allVideos-btn {
  margin: 0 auto;
  width: 95%;
  max-width: 400px;
}
@media screen and (min-width: 768px) {
    .allVideos-btn {
        max-width: 680px;
        transform: translateX(5%);
    }
}