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;
}