body {
 color: #333333; /* 文字色 */
 font-family: Verdana, sans-serif; /* 文字の種類 */
 margin: 0; /* マージン */
 }
header {
 background-color: #efefef; /* 背景色 */
 padding-top: 32px; /* 内側上部の余白 */
 padding-bottom: 32px; /* 内側下部の余白 */
}
#container { /* #id名 でセレクタを指定する。 */
 width: 500px; /* 横幅 */
 margin-left: auto;
 margin-right: auto;
 display: flex;
 align-items: center; /* ブロック内の要素の縦方向の配置位置を中央揃え */
}
.icon img { /* .クラス名 でセレクタを指定 */
 border-radius: 50%; /* 四隅の角を丸く */
 border-width: 1px; /* 線の幅 */
 border-style: solid; /* 実線 */
 border-color: white; /* 線の色 */
}
.info {
 margin-left: 32px; /* 左余白 */
}
.contents {
 margin:0 10%; /* 上下のマージンは0, 左右のマージンは画面の10%
*/
 display: flex;
}
.block {
 flex: 1; /* block 要素を同じサイズにする */
 margin: 0 5px; /* 上下のマージン0, 左右のマージン 5px */
 padding: 5px 5px; /* 上下左右の余白5px */
 min-height: 200px; /* 最小限の高さを200px */
}
.block h2 {
 font-weight: normal; /* 文字の太さ */
 background: linear-gradient(transparent 70%, #a7d6ff 70%);
}
footer p {text-align: center; /* 中央寄せ */
 font-size: 14px; /* 文字サイズ */
 padding-top: 30px; /* 上部のマージン */
 padding-bottom: 30px; /* 下部のマージン */
 color: gray; /* 文字色 */
}