@import url("../base2.css");

body {
  line-height: 100%;
  background-color: #451010;
}

#page {
  width: 800px;
  margin: 50px auto;
  background-color: #451010;
}

#header { width: 800px; }

#header #mail {
  font-size: 12px;
  text-align: right;
  padding-right: 30px;
}
#header #mail a { color:#FFF; text-decoration:none; }
#header #mail a:hover { text-decoration:underline; }

#header ul {
  text-align:center;
  font-size:11px;
  color:#FFF;
  margin-top:10px;
}
#header ul li { display:inline; }
#header ul li a { color:#FFF; text-decoration:none; }
#header ul li a:hover { text-decoration:underline; }

#main {
  background:#FFF;
  border:3px double #333;
  width:750px;
  margin:5px auto;
  padding:40px 0;
}
#mainp { margin:0 20px; font-size:13px; line-height:15px; }

/* グリッドレイアウト */
.movie-grid {
  display:grid;
  grid-template-columns: repeat(4,1fr);
  gap:20px;
  margin-top:20px;
}

.movie-item {
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:space-between;
  text-align:center;
  min-height:250px;
}

/* 縦ポスター */
.poster-vertical {
  width:130px;
  height:183px;
  border:3px double #333;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#fff;
  margin:3px 0;
}

/* 横ポスター */
.poster-horizontal {
  width:180px;
  height:130px;
  border:3px double #333;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#fff;
  margin:8px 0;
}

.poster-vertical img,
.poster-horizontal img {
  display:block;
  /* オリジナルサイズそのまま表示 */
}

.movie-title {
	font-size: 13px;
	line-height: 15px;
	margin-bottom: 1px;
	min-height: 45px; /* 2行分のスペースを確保 */
	display: flex;
	align-items: center;
	justify-content: center;
}

.movie-date {
	font-size: 13px;
	line-height: 15px;
	margin-top: 1px; /* 下に配置 */
}

#footer {
  font-size:12px;
  color:#FFF;
  text-align:right;
  padding-right:35px;
}