/* 写真　縦長・横長で幅を変える */
img.yoko {
	width: 400px;
}
.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.3s ease; /* 変化をなめらかに */
}
img:hover {
  transform: scale(1.1) rotate(2deg); /* 拡大して少し傾ける */
}
  
.box {
  background-image: url("sunset.jpg");
  background-size: cover;
  background-position: 0% 0%;
  background-repeat: no-repeat;
  background-attachment: fixed; //固定時に追加するプロパティ
}  
  
}

/* ② リスト項目にマウスを乗せると右にずれる */
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);
}