html{
	font-family: "Arial",sans-serif;
}
body{
  width: 100%;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  margin: 0px;
}
li{
  list-style:none;
}
.text{
  background-color: yellow;
  width: 200px;
  height: 90px;
}
header{
  display: flex;
  flex-direction: column;
  margin: auto;
  justify-content: center;
}
.captext{
  text-align: center;
  max-width: 900px;
  margin: auto;
}
.captext2 span{
  background: white;
}
.captext span{
  background: white;
}
.titlelogo{
  margin: auto;
}
.titlelogo img{
  max-width: 350px;
}
.personaltext{
  margin: auto;
}
.personaltext img{
  max-width: 600px;
}
.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      : black;
  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;
}

.chattingbox{
  background: white;
}
.chattingbox .fill{
  background: blue;
}
.chattingbox .fill a{
  color: white;
}
.chattingbox2{
  background: white;
}
.blogbox{
  margin: auto;
  margin-top: 120px;
}
.blog{
  color: black;
  padding: 0px;
  margin: auto;
  margin-bottom: 20px;
  max-width: 1000px;
}
.blogtitle{
  text-align: left;
  font-family: "Germania One", system-ui;
  font-weight: 400;
  font-style: normal;
  font-size: 40px;
  padding-left: 15px;
  padding-top: 20px;
}
.blogtext{
  text-align: left;
  font-family: "Germania One", system-ui;
  font-weight: 400;
  font-style: normal;
  font-size: 20px;
  padding: 15px;
}
.blogend{
  color: black;
  background-color: #CCCCCC;
  text-align: right;
  font-size: 15px;
  padding: 5px;
  padding-right: 15px;
}
.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; /*境界線の指定*/
}

h1{
  background-color: yellow;
  padding: 5px;
  width: 220px;
  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);
}
@keyframes fadeIn {
  0% { opacity: 0;}
  100% { opacity: 1;}
}