html{
	font-family: "Arial",sans-serif;
}
body{
  width: 100%;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  margin: 0px;
}
li{
  list-style:none;
}
.langbtns{
  margin: auto;
  margin-left: 20px;
}
.backbtn{
  display    : inline-block;
  border     : 1px solid #ccc;
  box-shadow : 2px 2px #999;
  background-color: white;
  padding    : 6px;
  height     : 20px;
  margin: auto;
}
.backbtn a{
  text-decoration: none;
  color      : black;
}

 /* === ラジオボタンは非表示 ================== */
#langChenge input[type="radio"]{
  display    : none;
}
 
 /* === 各ラジオボタンのラベルをボタンに変更 == */
#langChenge label{
  display    : inline-block;
  border     : 1px solid #ccc;
  box-shadow : 2px 2px #999;
  padding    : 6px;
  color      : white;
  height     : 20px;
}
 
 /* === 選択されていない言語は非表示にする ==== */
#langEn:not(:checked) ~ * *:lang(en) {
  display    : none;
}
#langJa:not(:checked) ~ * *:lang(ja) {
  display    : none;
}
 
 /* === 選択されている言語のラベル色を変更 ==== */
#langEn:checked ~ label[for="langEn"] {
  background : white;
}
#langJa:checked ~ label[for="langJa"] {
  background : white;
}

.imagetext{
  display: flex;
  flex-direction: column;
}
.imagerow{
  width: 100%;
  display: flex;
}
.captiontext{
  padding: 5px;
}
.movies{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  margin: auto;
}
.moviecontena{
  display: flex;
  flex-flow: column;
  padding: 3px;
}
.movieimage{
  width: 100%;
}
.movieballon {
  position   : relative;                /* 指定した分だけ相対的に移動 */
}
.movieballon:hover .balloon {
  display: inline;                /* インライン要素として表示 */
}
.balloon {
  position   : absolute;                /* 親要素を基準 */
  display: none;                        /* 要素を非表示 */
  padding: 0px;                         /* テキストの前後の余白 */
  background-color: rgba(255, 255, 255, 0.80);       /* 背景色（透明度） */
  width:200px;                          /* 吹き出し全体の幅 */
  left : -5%;                           /* 表示位置 */
  top: 10%;
  font-size: 100%;                       /* 文字サイズ */
}

.moviebox{
  border: 1px solid;
  background-color: yellow;
  text-align: left;
  width: 70%;
  margin: auto;
  display: flex;
}
summary{
  border-bottom: 1px solid; /*境界線の指定*/
}
details{
  border-bottom: 1px solid; /*境界線の指定*/
}


.contents{
  width: 90%;
  margin: auto;
}
.contents h1{
  padding: 5px;
  align-items: center;
  margin: auto;
  margin-bottom: 20px;
}
.contents h1 span{
  background-color: yellow;
  padding: 5px;
  align-items: center;
  margin: auto;
  margin-bottom: 20px;
}

table{
	width: 100%;
	table-layout: fixed;
}
.list {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(10, auto);
}


.lpgroup{
  display: flex;
  flex-direction: column;
  width: 80%;
  margin: auto;
  margin-bottom: 20px;
  background: yellow;
  border: solid;
  padding: 5px;
}
.lpbox{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
  justify-content: flex-start;
}
.lpboxmin{
  width: 24%;
  background: yellow;
  border: thick double;
}
.lpboxmin img{
  width: 100%;
  margin: 0px;
}



@keyframes fadeIn {
  0% { opacity: 0;}
  100% { opacity: 1;}
}