/*
@media only screen and (max-width: 768px){}
↑スマホ画面の場合のみ適用（横幅が768px以下の場合にCSSを適用）
*/
@charset "UTF-8";
/*Noto Sans JPと源ノ角ゴシック／Source Han Sansは同一フォントです*/
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap');
/*なんかスクロールが滑らかになるやつ*/
*{
    box-sizing: border-box;
}

html {scroll-behavior: smooth;}

:root{
    --blue: #00479d;
    --green: #c7db5e;
    --gray: #dedee3;
}


.contents{
  padding: 14vw 5vw 0 5vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-repeat: no-repeat;
  background-size: cover;
}
@media only screen and (min-width: 769px){
  .contents{
    background-image: url(../img/movie/movie-bg__pc.png);
  }
}
@media only screen and (max-width: 768px){
  .contents{
    background-image: url(../img/movie/movie-bg__sp.png);
  }
}

.movie__header{
  width: 100%;
  align-items: center;
  justify-content: center;
}


.movie__child{
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}


.movie-titele{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: start;
}

.header-iframe{
  height: auto;
  aspect-ratio: 16/9;
}
@media only screen and (min-width: 769px){
  .header-iframe{
    width: 60%;
  }
}
@media only screen and (max-width: 768px){
  .header-iframe{
    width: 80%;
  }
}

.movie__select {
  margin-top: 8vw;
  margin-bottom: calc(8vw + 60px);
  display: grid;
}
@media only screen and (min-width: 769px){
  .movie__select {
    margin-top: 8vw;
    margin-bottom: calc(8vw + 60px);
    width: 80%;
    grid-template-columns: repeat(3, 1fr);
    gap: 4vw;
  }
}
@media only screen and (max-width: 768px){
  .movie__select {
    margin-top: 8vw;
    margin-bottom: calc(8vw + 60px);
    width: 80%;
    grid-template-columns: repeat(2, 1fr);
    gap: 4vw;
  }
}

.item{
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  border-radius: 15% 0;
  display: flex;
  flex-direction: column;
  background: #fff;
  cursor: pointer;
  overflow: hidden;
  box-shadow: 0.4vw 0.4vw 6px #00000040;
}

.item-thumbnail{
  width: 100%;
  height: auto;
  aspect-ratio: 4/3;
  background: #00479d4a;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.item-name{
  width: 100%;
  height: auto;
  aspect-ratio: 4/1;
  display: flex;
  align-items: center;
  justify-content: center;
}


.movie__header .movie__child{
  display: none;
}

.contents:has(#movie1:checked) .movie__header .movie__child:nth-child(1){
  display: flex;
}

.contents:has(#movie2:checked) .movie__header .movie__child:nth-child(2){
  display: flex;
}

.contents:has(#movie3:checked) .movie__header .movie__child:nth-child(3){
  display: flex;
}





/*
サムネイル追加

.movie"動画番号"{
  background-image: url(画像指定);
}
*/
.movie1{
  background-image: url();
}