/* 1. タグセレクター：ページ全体のフォントや背景を設定 */

/*/h1 {
  color: #2c3e50;
  border-bottom: 3px solid #3498db;
  display: inline-block;
}*/
h1 {
  color: #505050;/*文字色*/
  padding: 0.5em;/*文字周りの余白*/
  display: inline-block;/*おまじない*/
  line-height: 1.3;/*行高*/
  background: #dbebf8;/*背景色*/
  vertical-align: middle;
  border-radius: 25px 0px 0px 25px;/*左側の角を丸く*/
}

h1:before {
  content: '●';
  color: white;
  margin-right: 8px;
}

body {
    max-width: 1000px;
    margin: auto;
    padding: 20px;
    font-family: "Yu Gothic", sans-serif;
    background: linear-gradient(
        135deg,
        #f7f9fc 0%,
        #eef4ff 100%
    );
}


video {
  width: 400px;
}

div {
  border: none;
  border-radius: 18px;
  padding: 15px;
  margin-bottom: 20px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.08);
}

img {
  width: 300px;
  border-radius: 50px; /* 写真の角を丸くする */
  border: 5px solid #fff;
  box-shadow: 0 4px 8px rgba(0,0,0,0.5);
}


/* 2. クラスセレクター：特定のグループ（枠線や余白）を指定 */
.love {
	background-color: lightpink;
}

.will {
	background-color: lightblue;
}

.msg {
	background-color: lightyellow;
}

/* 3. IDセレクター：特定の1か所（写真）だけに適用 */
/* HTML側を <img id="profile-img" ...> に書き換えて使用 */
#profile-img {
  width: 200px;
  border-radius: 50%; /* 写真を丸くする */
  border: 5px solid #fff;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

h3 {
    border-left: 5px solid #3498db;
    padding-left: 10px;
    color: #2c3e50;
}


.book-list img{
    width:18%;
    height:auto;
}
.books img{
    width: 15%;
    height: auto;
    object-fit: contain;
}
body {
  font-family: 'Noto Sans JP', sans-serif;
}
.skill-card .bar{
    width:100%;
    height:25px;
    background:#ddd;
    border-radius:20px;
    overflow:hidden;
}

.fill{
    height:100%;
    color:white;
    text-align:center;
    line-height:25px;
    font-size:14px;
}

.game{
    width:80%;
    background:#3498db;
}

.html{
    width:40%;
    background:#e67e22;
}

.book{
    width:90%;
    background:#27ae60;
}
.timeline ul{
    list-style:none;
    padding-left:20px;
}

.timeline li{
    border-left:3px solid #3498db;
    padding:10px 20px;
    margin:10px 0;
}

.timeline span{
    font-weight:bold;
    color:#3498db;
}