サムネイル付き記事一覧のスタイル指定

@@ -3435,8 +3435,10 @@ body.itemid-132 table {
 ------------------------------------------------------------------------- */
 ------------------------------------------------------------------------- */
 .interview div.items-leading > div {
 .interview div.items-leading > div {
 	border-top: 5px solid #003894;
 	border-top: 5px solid #003894;
-	position: relative;
-	min-height: 120px;
+	display: flex;
+	flex-direction: row-reverse;
+	justify-content: space-between;
+	align-items: center;
 }
 }
 
 
 /* イントロテキストを表示しない設定ができないので、以下の設定で、一旦全てを非表示にする */
 /* イントロテキストを表示しない設定ができないので、以下の設定で、一旦全てを非表示にする */
@@ -3444,50 +3446,59 @@ body.itemid-132 table {
 	display: none;
 	display: none;
 }
 }
 
 
+.interview div.items-leading > div > div {
+	display: block;
+}
+
 .interview div.items-leading div div.page-header {
 .interview div.items-leading div div.page-header {
-	/* display: block;で再表示させる */
-	display: block !important;
+  width: 100%;
 }
 }
 
 
 .interview div.items-leading div div.page-header h2 {
 .interview div.items-leading div div.page-header h2 {
 	/* .blogに対して指定されているスタイルを取り消し */
 	/* .blogに対して指定されているスタイルを取り消し */
 	border-top: none;
 	border-top: none;
 	border-bottom: none;
 	border-bottom: none;
-	/* .blogに対して指定されているスタイルを取り消しここまで */
-	padding-top: 16px;
-	padding-bottom: 0px;
-	padding-left: 120px;
-	margin-bottom: 0px;
-}
-
-.interview div.items-leading div dl.article-info {
-	/* display: block;で再表示させる */
-	display: block !important;
-	padding-left: 120px;
 }
 }
 
 
 .interview div.items-leading div div.item-image {
 .interview div.items-leading div div.item-image {
-	/* display: block;で再表示させる */
-	display: block !important;
-	height: 75px;
 	width: 100px;
 	width: 100px;
-	margin-top: 21px;
-	text-align: center;
-	/* ポジションを親要素を基準に相対位置で指定 */
-	position: absolute;
-	top: 0px;
-	bottom: 0px;
-	left: 0px;
-	right: 0px;
+	float: none;
 }
 }
 
 
 .interview div.items-leading div div.item-image img {
 .interview div.items-leading div div.item-image img {
 	/* 画像ごとによって縦横幅が自動設定。最大値以上にはならないように指定 */
 	/* 画像ごとによって縦横幅が自動設定。最大値以上にはならないように指定 */
-	height: auto;
-	width: auto;
-	/* 上記の自動設定の、最大値を指定 */
-	max-height: 75px;
-	max-width: 100px;
+	width: 100%;
+}
+
+.interview div.items-leading div div.item-image {
+	margin: 20px 20px 20px 0;
+}
+
+/* レスポンシブ */
+@media (max-width: 500px) {
+	.interview div.items-leading > div {
+		flex-direction: column-reverse;
+	}
+
+	.interview div.items-leading div div.page-header h2 {
+		font-size: 90%;
+	}
+	.interview div.items-leading div dl.article-info {
+		font-size: 90%;
+	}
+
+	.interview div.items-leading div div.item-image {
+		max-width: 500px;
+		width: 100%;
+	}
+	.interview div.items-leading div div.item-image img {
+		max-width: 500px;
+		width: 100%;
+	}
+	.interview div.items-leading div div.item-image {
+		margin: 20px 0 0;
+	}
+
 }
 }
 
 
 /* -------------------------------------------------------------------------
 /* -------------------------------------------------------------------------