body {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; /* 可愛らしいフォントに戻す */
  margin: 0;
  padding: 0;
  background: linear-gradient(to bottom, #ffe6f2, #ffffff); /* 縦方向のピンクから白へのグラデーション */
}

.container {
  max-width: 800px;
  margin: 50px auto;
  text-align: center;
}

h1 {
  font-size: 36px;
  color: #ff69b4;
}

.links {
  display: flex;
  flex-direction: column; /* リンクを縦に並べる */
  align-items: center; /* リンクを中央寄せ */
}

.link {
  margin: 10px;
}

.link img {
  max-width: 400px; /* 画像の幅を最大90%に制限 */
  height: auto;
}

.link li {
  max-width: 100px; /* 画像の幅を最大90%に制限 */
  height: auto;
}


.box{
  background:#333;
  padding:20px;
  width:50%;
}

.content{
  background:#ffffbc;
  position:relative;
  padding:10px;
  transition:all .2s;
  
}

.content a{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
}

.content:hover{
  cursor:pointer;
  background:#ffd700;
}

.frame img {
    width:20%;
	border-radius: 50%;
}