/*****************************************************************************
CSS only for library page
*****************************************************************************/

/* Library
-----------------------------------------*/
.Library {
  max-width: 976px;
  margin: 0 auto;
}
@media screen and (max-width: 976px) {
  .Library {
    margin: 0 20px;
  }
}
.Library--top {
  margin-top: 132px;
}
@media screen and (max-width: 767px) {
  .Library {
    margin-top: 55px;
  }
}
.Library__sec + .Library__sec{
  margin-top: 100px;
}
.Library__wrapper {
  margin-top: 40px;
}
@media screen and (max-width: 767px) {
  .Library__wrapper {
    margin-top: 32px;
  }
}

/* Billboard
-----------------------------------------*/
.Billboard {
  text-align: center;
}
.Billboard img {
  width: 2025px;
  max-width: 100%;
  height: auto;
}
@media screen and (max-width: 767px) {
  .Billboard img {
    width: auto;
  }
}

/* SecTitle
-----------------------------------------*/
.SecTitle {
  font-weight: bold;
  text-align: center;
  padding-top: 118px;
  margin-bottom: 68px;
}
@media screen and (max-width: 767px) {
  .SecTitle {
    padding-top: 80px;
    margin-bottom: 40px;
  }
}
.SecTitle > strong {
  font-size: 4.2rem;
  display: block;
  position: relative;
  padding-top: 25px;
}
@media screen and (max-width: 767px) {
  .SecTitle > strong {
    font-size: 2.5rem;
  }
}
.SecTitle > strong::before {
  content: "";
  width: 75px;
  height: 4px;
  background-color: #004ea2;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%);
}
.SecTitle small {
  font-size: 1.4rem;
  display: block;
}
@media screen and (max-width: 767px) {
  .SecTitle small {
    font-size: 1.2rem;
  }
}

/* MovieList
-----------------------------------------*/
.MovieList {
  overflow: hidden;
}
.MovieList__box {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: -24px;
}
.MovieList__item {
  width: 31%;
  margin-bottom: 24px;
  margin-right: 3.5%;
}

@media screen and (max-width: 767px) {
  .MovieList__item {
    width: 48.5%;
    margin-right: 3%;
  }
}
.MovieList__item:nth-child(3n) {
  margin-right: 0;
}
@media screen and (max-width: 767px) {
  .MovieList__item:nth-child(3n) {
    margin-right: 3%;
  }
  .MovieList__item:nth-child(2n) {
    margin-right: 0;
  }
}
.MovieList__item img {
  max-width: 100%;
  height: auto;
}
.MovieList__item a {
  color: #000;
  text-decoration: none;
}
.MovieList__item a:visited {
  color: #000;
  text-decoration: none;
}
.MovieList__item a:link {
  color: #000;
  text-decoration: none;
}
.MovieList__item a:hover {
  opacity: .8;
}
.MovieList__text {
  font-size: 14px;
  font-size: 1.4rem;
  margin-top: 7px;
}
.MovieList__text strong {
  display: block;
}
.MovieList__text small {
  color: #666;
  font-size: 12px;
  font-size: 1.2rem;
  display: inline-block;
}

/* PhotoList
-----------------------------------------*/
.PhotoList {
  position: relative;
}
.PhotoList__wrapper {
  position: relative;
  overflow: hidden;
}
.PhotoList__box {
  margin: 0 -1.666% -1.666% 0;
}
@media screen and (max-width: 767px) {
  .PhotoList__box {
    margin: 0 -2.333% -2.333% 0;
  }
}
.PhotoList__box:after {
  content: "";
  display: block;
  clear: both;
}
.PhotoList__item {
  float: left;
  width: 15%;
  margin: 0 1.666% 1.666% 0;
  overflow: hidden;
}
@media screen and (max-width: 767px) {
  .PhotoList__item {
    width: 31%;
    margin: 0 2.333% 2.333% 0;
  }
}
.PhotoList__item a {
  position: relative;
  display: block;
  padding-top: 100%;
}
.PhotoList__item a img {
  position: absolute;
  top: 0;
  left: 50%;
  width: auto;
  height: 100%;
  -webkit-transform: translate(-50%, 0%);
  transform: translate(-50%, 0%);
}
.PhotoList__item a img:not([data-loaded]){
  display: none;
}
.PhotoList__item a img[data-loaded="false"] {
  visibility: hidden;
  width: 100%;
}
.PhotoList__item:not(:has(img[data-loaded])) {
  display: none;
}
.PhotoList__item a:has(img[data-loaded="false"])::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  display: block;
  transform: translate(-50%,-50%);
  width: 20px;
  height: 20px;
  border: 3px solid #ccc;
  border-top: 3px solid black;
  border-radius: 50%;
  animation: PhotoList__item_a_loading .5s linear infinite;
}
@keyframes PhotoList__item_a_loading {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(360deg); }
}
.PhotoList__item.is-hidden {
  display: none;
}

/* .Morelink
-----------------------------------------*/
.MoreBtn {
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 93px;
  padding-top: 33px;
  background: -moz-linear-gradient(bottom, #F1f1f1 89%, rgba(235,235,235,1) 91%, rgba(239,239,239, .7) 96%, rgba(247,247,247, .4) 98%,rgba(255,255,255, .2) 100%);
  background: -webkit-linear-gradient(bottom, #F1f1f1 89%, rgba(235,235,235,1) 91%, rgba(239,239,239, .7) 96%, rgba(247,247,247, .4) 98%,rgba(255,255,255, .2) 100%);
  background: linear-gradient(to top, #F1f1f1 89%, rgba(235,235,235,1) 91%, rgba(239,239,239, .7) 96%, rgba(247,247,247, .4) 98%,rgba(255,255,255, .2) 100%);
  text-align: center;
  margin-top: 50px;
  cursor: pointer;
}
@media screen and (max-width: 767px) {
  .MoreBtn {
    height: 56px;
    padding-top: 28px;
    background: -moz-linear-gradient(bottom, #F1f1f1 56%, rgba(224,224,224, .9) 59%, rgba(226,226,226, .8) 65%, rgba(230,230,230, .6) 75%,rgba(255,255,255, .2) 100%);
    background: -webkit-linear-gradient(bottom, #F1f1f1 56%, rgba(224,224,224, .9) 59%, rgba(226,226,226, .8) 65%, rgba(230,230,230, .6) 75%,rgba(255,255,255, .2) 100%);
    background: linear-gradient(to top, #F1f1f1 56%, rgba(224,224,224, .9) 59%, rgba(226,226,226, .8) 65%, rgba(230,230,230, .6) 75%,rgba(255,255,255, .2) 100%);
    margin-top: 25px;
  }
}
.MoreBtn.MoreBtn--open {
  position: static;
  height: auto;
  padding-top: 0;
  background: none;
}
.MoreBtn p {
  width: 328px;
  margin: 0 auto;
}
@media screen and (max-width: 767px) {
  .MoreBtn p {
    width: auto;
  }
}
.MoreBtn a {
  position: relative;
  display: block;
  text-align: center;
  background-color: #000;
  font-weight: 700;
  font-style: italic;
  text-transform: uppercase;
  font-size: 16px;
  font-size: 1.6rem;
  font-family: 'Roboto', sans-serif;
}
@media screen and (max-width: 767px) {
  .MoreBtn a {
    display: inline-block;
    background-color: transparent;
    padding-left: 23px;
  }
}
.MoreBtn a::before {
  content: "";
  position: absolute;
  top: 29px;
  left: 23px;
  width: 14px;
  height: 2px;
  background-color: #FFF;
}
@media screen and (max-width: 767px) {
  .MoreBtn a::before {
    top: 5px;
    left: 0;
    width: 15px;
    height: 15px;
    background-color: #000;
  }
}
.MoreBtn a::after {
  position: absolute;
  top: 23px;
  left: 29px;
  content: "";
  width: 2px;
  height: 14px;
  background-color: #FFF;
}
@media screen and (max-width: 767px) {
  .MoreBtn a::after {
    display: none;
  }
}
.MoreBtn.MoreBtn--open a::after {
  display: none;
}
.MoreBtn a span {
  position: relative;
  display: flex;
  height: 60px;
  justify-content: center;
  align-items: center;
  padding-left: 60px;
}
@media screen and (max-width: 767px) {
  .MoreBtn a span {
    display: inline-block;
    height: auto;
    padding-left: 0;
  }
}
@media screen and (max-width: 767px) {
  .MoreBtn a span::before {
    position: absolute;
    top: 12px;
    left: -19px;
    content: "";
    width: 7px;
    height: 1px;
    background-color: #FFF;
  }
}
.MoreBtn a span::after {
  content: "";
  position: absolute;
  top: 0;
  left: 60px;
  bottom: 0;
  border-right: solid 2px #FFF;
}
@media screen and (max-width: 767px) {
  .MoreBtn a span::after {
    top: 9px;
    left: -16px;
    content: "";
    width: 1px;
    height: 7px;
    background-color: #FFF;
  }
  .MoreBtn.MoreBtn--open a span::after {
    display: none;
  }
}
.MoreBtn a:hover {
  opacity: .8;
}
.MoreBtn a:link    {color: #FFF; text-decoration: none;}
.MoreBtn a:visited {color: #FFF; text-decoration: none;}
.MoreBtn a:hover   {color: #FFF; text-decoration: none;}
.MoreBtn a:focus   {color: #FFF; text-decoration: none;}
.MoreBtn a:active  {color: #FFF; text-decoration: none;}

@media screen and (max-width: 767px) {
  .MoreBtn a:link    {color: #000;}
  .MoreBtn a:visited {color: #000;}
  .MoreBtn a:hover   {color: #000;}
  .MoreBtn a:focus   {color: #000;}
  .MoreBtn a:active  {color: #000;}
}