.card-box {
    width:500px;
}
 
.card-box .card {
	box-shadow:0 2px 5px rgba(0, 0, 0, 0.3);
	padding:10px;
	background-color:#fff;
	cursor:pointer;
	border-radius: 10px;
}
 
.card-box .card p.image {
	margin:-10px -10px 0;
}
 
.card-box .card p.image img {
	vertical-align:top;
}
 
.card-box .card p.text {
	margin:10px 0 0;
}

.card-box .card {
	transition:box-shadow 0.3s, transform 0.3s;
}
 
.card-box .card:hover {
	box-shadow:0 6px 14px rgba(0, 0, 0, 0.24);
	transform:translate(0, -20px);
	background-color:#f0f0f0;
}

.image-container {
	display: flex;
	justify-content: space-around; /* 子要素を均等に配置します */
	align-items: center; /* 子要素を縦方向の中心に揃えます */
	height: 100vh; /* ビューポートの高さに合わせます（任意） */
}

.image-container img {
	max-width: 30%; /* 画像の最大幅を設定します */
	height: auto; /* 画像の縦横比を維持します */
}
body{
	width: 500px;
	height: auto;
	margin: 0 auto;
}
.cstm-box-fluffy {
   margin: 2em auto; /* 外側余白 */
   padding: 2em;   /* 内側余白 */
   background-color:#fff; /* 背景色 */
   box-shadow: 0 0 6px 1px #c2d0e0, 0 0 6px 1px #c2d0e0 inset; /*ふわりとした影*/
   border-radius: 8px;
   max-width: 800px; /* 最大幅 */
}

/* ボックス内の段落 */
.cstm-box-fluffy p { margin:0; }