インタビューページのスタイル修正

@@ -3437,7 +3437,6 @@ body.itemid-132 table {
 	border-top: 5px solid #003894;
 	border-top: 5px solid #003894;
 	display: flex;
 	display: flex;
 	flex-direction: row-reverse;
 	flex-direction: row-reverse;
-	justify-content: space-between;
 	align-items: center;
 	align-items: center;
 	position: relative;
 	position: relative;
 }
 }
@@ -3449,20 +3448,6 @@ body.itemid-132 table {
 
 
 .interview .items-leading div .page-header {
 .interview .items-leading div .page-header {
 	display: block;
 	display: block;
-}
-
-.interview .items-leading div .item-image {
-	display: block;
-}
-
-.interview .items-leading div .article-info {
-	display: flex;
-	position: absolute;
-	bottom: -45px;
-	right: 0;
-}
-
-.interview .items-leading div .page-header {
 	width: 100%;
 	width: 100%;
 	max-width: 800px;
 	max-width: 800px;
 	padding: 0;
 	padding: 0;
@@ -3477,9 +3462,31 @@ body.itemid-132 table {
 	padding: 0;
 	padding: 0;
 }
 }
 
 
+.interview .items-leading div .article-info {
+	/* 記事情報が一つ以上表示された場合に横並びにする */
+	display: flex;
+	/* 記事情報のpositionを右下に指定 */
+	position: absolute;
+	bottom: -45px;
+	right: 0;
+}
+
 .interview .items-leading div .item-image {
 .interview .items-leading div .item-image {
-	width: 160px;
+	display: flex;
+	/* 配下のimage要素a要素を縦方向にセンタリング */
+  align-items: center;
+	width: 100px;
+	/* 横並びしている隣のdivに潰されないようにmin-widthを指定。 */
+	min-width: 100px;
+	height: 100px;
+	/* デフォルトでかかっているfloatプロパティの解除 */
 	float: none;
 	float: none;
+	/* 配下の画像のはみ出した部分は非表示にし、トリミングする */
+	overflow: hidden;
+	margin: 12px 24px 12px 0;
+}
+.interview .items-leading div .item-image a {
+	width: 100%;
 }
 }
 
 
 .interview .items-leading div .item-image img {
 .interview .items-leading div .item-image img {
@@ -3487,34 +3494,26 @@ body.itemid-132 table {
 	width: 100%;
 	width: 100%;
 }
 }
 
 
-.interview .items-leading div .item-image {
-	margin: 24px 24px 24px 0;
-}
-
 /* レスポンシブ */
 /* レスポンシブ */
 @media (max-width: 500px) {
 @media (max-width: 500px) {
 	.interview .items-leading > div {
 	.interview .items-leading > div {
+		/* 縦並びに変更 */
 		flex-direction: column-reverse;
 		flex-direction: column-reverse;
 	}
 	}
+
 	.interview .items-leading div .page-header {
 	.interview .items-leading div .page-header {
+		/* 記事情報が入るのでmargin-bottomは大きめにする */
 		margin: 16px 0 32px;
 		margin: 16px 0 32px;
 	}
 	}
-	.interview .items-leading div .article-info {
-		font-size: 90%;
-	}
 
 
 	.interview .items-leading div .item-image {
 	.interview .items-leading div .item-image {
 		max-width: 500px;
 		max-width: 500px;
 		width: 100%;
 		width: 100%;
+		/*max-height = 画面幅 - 両サイドのpaddingとしてwidthと揃え、正方形にトリミングする */
+		max-height: calc(100vw - 30px);
+		height: auto;
+		margin-top: 20px;
 	}
 	}
-	.interview .items-leading div .item-image img {
-		max-width: 500px;
-		width: 100%;
-	}
-	.interview .items-leading div .item-image {
-		margin: 20px 0 0;
-	}
-
 }
 }
 
 
 /* -------------------------------------------------------------------------
 /* -------------------------------------------------------------------------