@charset "utf-8";
/* 定義・共通パーツは global.cssに記載 */
.fender-container{
  max-width: 1120px;
}

/* Section-by-section -------------------- */
/* FV  -------------------- */
.fender-container .sec-fv{
  padding-block: 0;
}

.sec-fv .unit-box{
  display: flex;
  flex-direction: column-reverse;
}

.sec-fv .text-block{
  padding-block: 0 .5rem;
}

#wrapper .sec-fv{
  & .unit-box{
    flex-direction: column;
  }
  & .text-block{
    padding-block: .5rem;
    padding-inline: var(--pdin-common);
  }
} 

/* FEATURES  -------------------- */
.sec-features .feature-list{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  & > li{
    display: flex;
    flex-direction: column;
    gap: .5rem 1rem;
  }
@container fender-container-wrapper (max-width: 600px) {
  grid-template-columns: 100%;
  & > li{
    flex-direction: row;
  }
}
@container fender-container-wrapper (max-width: 414px) {
  & > li{
    flex-direction: column;
  }
}
}

.sec-features .image-block{
  & > img{
    display: block;
    width: 100%;
    height: 100%;
    margin-inline: auto;
    object-fit: contain;
  }
@container fender-container-wrapper (max-width: 600px) {
  width: 30%;
  min-width: 100px;
}
@container fender-container-wrapper (max-width: 414px) {
  width: 100%;
  background-color: var(--color-black);
  & > img{
    max-width: 220px;
  }
}
}

.sec-features .text-block{
  flex: 1;
}

.sec-features .catch{
  margin-block: .5rem;
  font-size: 112%;
  font-weight: bold;
}

/* LineUp  -------------------- */
.fender-container .sec-lineup{
  padding-block: 1rem;
}

.sec-lineup .lineup-list{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  & > li > a{
    border-radius: .5rem;
    border: 1px solid var(--color-gray);
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: .5rem;
  }
@container fender-container-wrapper (max-width: 768px) {
  grid-template-columns: repeat(2, 1fr);
}
}

.sec-lineup .ttl{
  width: fit-content;
  margin-inline: auto;
  margin-top: .5rem;
}

/* Movie  -------------------- */
.sec-movie .movie-list{
  padding-bottom: 2rem;
  & > li{
    width: 60%;
    max-width: 320px;
  }
}

.sec-movie .ttl{
  margin-top: .5rem;
}