@charset "UTF-8";

/* ==========================================================================
   MV
========================================================================== */
#mv {
  padding-top: 45%;
  background-color: var(--black);
  color: #FFF;
  text-align: center;
  position: relative;
  overflow: hidden;
} 
#mv .mv__video {
  width: 100%;
  height: 100%;
}
#mv .mv__video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);

  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);

  opacity: .8;
}

/* ==========================================================================
   Top Contents (Slider)
========================================================================== */
#top-contents {
  margin: 0 auto;
}

#top-contents > .slider-wrapper {
  position: relative;
}

#top-contents .arrow {
  display: none;
}



/* ==========================================================================
   Information
========================================================================== */
#news-feed .lists > a.list {
  padding: .5rem 0;
  border-color: transparent;
}
#news-feed .entry__meta {
  margin-bottom: 0;
  margin-right: 1em;
}
#news-feed .lists .list .ttl {
  font-size: .938rem;
}
@media screen and (min-width: 768px) {
  #news-feed .lists .list__inner {
    display: flex;
    align-items: center;
  }
  #news-feed .lists > a.list {
    padding: 1rem 0;
  }
  #news-feed .lists .list .list__inner {
    display: flex;
    align-items: center;
  }
}


#important .lists > a.list {
  color: var(--red);
}
#important .entry__meta {
  color: var(--red);
}

#news-feed p.more {
  margin-top: 1em;
}

/* ==========================================================================
   Class info
========================================================================== */
#class-info ul {
  list-style-type: none;
  margin: 0;
  padding: .5em;
  border-top: 1px solid var(--border1);
}
#class-info ul:last-of-type {
  border-bottom: 1px solid var(--border1);
}
#class-info ul li:not(:last-child) {
  margin-bottom: .25em;
}
#class-info ul > li > span {
  display: block;
}

#class-info .cancel .badge {
  color: var(--red);
}
#class-info .change .badge {
  color: var(--blue);
}

#class-info p.more {
  margin-top: 1em;
}

/* ==========================================================================
   pickup-movie
========================================================================== */
#pickup-movie .movie-thumb a {
  display: block;
  width: 100%;
  padding-top: 56.25%;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  color: #FFF;
  position: relative;
}

/* ==========================================================================
   Contents List
========================================================================== */
#contents-list {
  padding: 15px 0;
  color: #FFF;
}

#contents-list .instructor a {
  display: block;
  margin: 15px 0;
  text-decoration: none;
  position: relative;
}
#contents-list .instructor a img {
  min-width: 100%;
}
#contents-list .instructor a .ttlBox {
  display: block;
  font-weight: 700;
  line-height: 1.25;
  position: absolute;
  left: -.5rem;
  bottom: .5rem;
  text-shadow: 0 0 4px rgb(0 0 0 / 25%);
}
#contents-list .instructor a .sub_ttl {
  display: block;
}
#contents-list .instructor a .ttl  {
  display: block;
}

#contents-list .links {
  padding: 15px 0 14px;
}
#contents-list .link {
  display: flex;
  align-items: center;
  padding: 15px;
  margin-bottom: 1px;
  line-height: 1.5;
  background-color: rgba(255,255,255,0.05);
  text-decoration: none;
  transition: .4s cubic-bezier(0.190, 1.000, 0.220, 1.000);
}
#contents-list .link .imgBox {
  padding: 0 15px;
}
#contents-list .link .txtBox {
  padding: 0 15px;
}
#contents-list .link .txtBox small {
  display: block;
}
#contents-list .link:hover {
  background-color: rgba(255,255,255,0.1);
}
#contents-list .link i {
  opacity: .2;
}

#contents-list #information {
  padding-bottom: 15px;
}
#contents-list #information .list {
  display: flex;
  padding: .5em 0;
  border: none;
}
#contents-list #information .list .ttl {
  font-size: .875rem;
  font-weight: 400;
}
#contents-list #information .list:hover {
  background-color: transparent;
}
#contents-list #information .list:hover .ttl {
  text-decoration: underline;
}
#contents-list #information .list .entry__meta {
  margin-bottom: 0;
  margin-right: 1em;
}

/* ==========================================================================
   Workshop
========================================================================== */

#workshop p.more {
  margin-top: 1em;
}
#workshop .keen-slider:not([data-keen-slider-disabled]) {
  overflow: visible;
}

@media (max-width: 575px) {
  #workshop .slider-wrapper {
    margin-right: -15px;
  }
}
@media (min-width: 575px) {
  #workshop .slider-wrapper {
    margin-right: calc(((100vw - 100%)/2)*-1);
  }
}
@media (min-width: 992px) {
  #workshop .slider-wrapper {
    margin-right: -31px;
  }
}
@media (min-width: 1180px) {
  #workshop .slider-wrapper {
    margin-right: -15px;
  }
}
@media (min-width: 1270px) {
  #workshop .slider-wrapper {
    margin-right: calc(((100vw - 310px - 900px)/2)*-1);
  }
}

@media (min-width: 1293px) {
  #workshop .slider-wrapper {
    margin-right: -31px;
  }
}


/* ==========================================================================
   Banner
========================================================================== */
#bnrList .hero,
#bnrList .hero {
  padding: 2em 0 2.25em;
}

/* ==========================================================================
   Rental
========================================================================== */
#bnr_rental .content__header {
  text-align: center;
  padding: 3px 0;
  border-top: 3px solid currentColor;
  border-bottom: 3px solid currentColor;
}
#bnr_rental .content__header .ttl {
  font-size: 12.25vw;
  letter-spacing: .08em;
  line-height: 1.35;
  padding-bottom: 2px;
  border-top: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
}
#bnr_rental .btn {
  text-align: center;
}

@media only screen and (max-width: 767px) {
  #bnr_rental .imgBox {
    margin-top: -1rem;
  }
  #bnr_rental .txtBox p {
    margin-top: 1rem;
    margin-bottom: 1rem;
  }
}

@media only screen and (min-width: 576px) {
  #bnr_rental .content__header .ttl {
    font-size: 4.125rem;
  }
}
/* ==========================================================================
   Slider(keen-slider.js)
========================================================================== */
.navigation-wrapper {
  position: relative;
}
.dots {
  display: flex;
  padding: 15px 0 0;
  justify-content: center;
}
.dot {
  border: none;
  width: 6px;
  height: 6px;
  background: #c5c5c5;
  border-radius: 50%;
  margin: 0 6px;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}
.dot:focus {
  outline: none;
}
.dot--active {
  background: var(--color2);
  transform: scale(1.5);
}

.arrow {
  width: 30px;
  height: 30px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  fill: #fff;
  cursor: pointer;
}
.arrow--left {
  left: 5px;
  fill: "#fff";
  background-image: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' %3E%3Cpath d='M16.67 0l2.83 2.829-9.339 9.175 9.339 9.167-2.83 2.829-12.17-11.996z' %3E%3C/path%3E%3C/svg%3E");
}
.arrow--right {
  left: auto;
  right: 5px;
  background-image: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg'  viewBox='0 0 24 24' %3E%3Cpath d='M5 3l3.057-3 11.943 12-11.943 12-3.057-3 9-9z'%3E%3C/path%3E%3C/svg%3E");
}
.arrow--disabled.arrow--left {
  background-image: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' fill='grey' viewBox='0 0 24 24' %3E%3Cpath d='M16.67 0l2.83 2.829-9.339 9.175 9.339 9.167-2.83 2.829-12.17-11.996z' %3E%3C/path%3E%3C/svg%3E");
}
.arrow--disabled.arrow--right {
  background-image: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' fill='grey' viewBox='0 0 24 24' %3E%3Cpath d='M5 3l3.057-3 11.943 12-11.943 12-3.057-3 9-9z'%3E%3C/path%3E%3C/svg%3E");
}