/* 写真　縦長・横長で幅を変える */
}
.msg > div {	/* https://webparts.cman.jp/string/strong/ */
	border: none;
	padding: 3px;
	display       : inline-block;        /* ブロック化              */
	font-weight   : bold;                /* 太字                    */
	font-size     : 200%;                /* 文字を大きくする        */
	transform     : rotate(-5deg);      /* 傾ける                  */
	color         : #000000;             /* 文字色                  */
	background    : linear-gradient(transparent 50%, #ff66ff 65%);  /* ラインマーカーを付ける  */
}


/* ① 写真がふわっと浮き上がる */
img {
  transition: transform 0.25s ease; /* 変化をなめらかに */
}
img:hover {
  transform: scale(1.12) rotate(2deg); /* 拡大して少し傾ける */
}
.books img:hover{
    transform: scale(1.05);
}

/* ② リスト項目にマウスを乗せると右にずれる */
li {
  transition: all 0.3s ease;
  cursor: pointer;
}
li:hover {
  padding-left: 15px;
  color: #e74c3c;
  font-weight: bold;
}

/* ③ 「ひとこと」エリアに影がついて浮き上がる */
.msg {
  transition: box-shadow 0.3s ease, background-color 0.3s;
}
.msg:hover {
  background-color: #fffde7;
  box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}