body{ background-color: #f5fffa; /*背景 色指定*/ min-height: 98vh; /*高さの最小値*/ margin: 3ex; /*余白*/ } p.kage{ color: #191970; font-size: 20px; text-shadow: #6495ed 3px 3px 1px; } p.maru{ border: dashed 3px #ee82ee; /*点線*/ border-radius: 30px 30px; /*丸める*/ color: #483d8b; padding-left: 1em; } div.kagekage{ box-shadow: #6495ed 3px 3px 1px; background-color: #b0c4de; color: #191970; padding-left: 1em; } div.marumaru{ border: dashed #ee82ee 3px; border-radius: 50%; width: 5em; height: 5em; } div.marumaru p{ color: #483d8b; text-align: center; padding-top: 0.9em; } div.haikei{ width: 100%; height: 100%; } div.pic{ background: url("photo/Cloak-2021-09-09.png") no-repeat; /*繰り返さない*/ background-size: auto; width: 400px; height: 300px; position: relative; top: 20px; left: 10px; opacity: 0.5; } p.moji{ width: 6.5em; height: 1.5em; color: #800000; background-color: #ff8c00; text-align: center; font-size: 30px; font-weight: bold; position: absolute; margin: auto; top: 18.5em; left: 5em; z-index: 100; /*数大きい方手前*/ } p.naname{ transform: rotate(3deg); /*時計回り*/ width: 60%; border: dashed 3px #ee82ee; background-color: #ffe0ff; color: #800080; font-weight: bold; margin-top: 1.5em; } div.mawaru{ border: dashed 3px #ee82ee; background-color: #ffe0ff; color: #800080; font-weight: bold; text-align: center; width: 60%; } div.mawaru:hover{ transform: rotate(-30deg); /*反時計回り*/ transition: 2s; }