@import url('https://fonts.googleapis.com/css2?family=Fontdiner+Swanky&family=New+Tegomin&family=Shippori+Mincho&family=Special+Elite&display=swap');

*,::after,::before{box-sizing:border-box}
*{margin: 0; padding: 0;}
ol,ul{list-style:none}
img{max-width:100%}
table{border-collapse:collapse}
textarea{white-space:revert}

body{
color: #fff;
font-size: 0.9em;
font-family: 'Shippori Mincho', serif;
line-height: 1.5;
background: url(back2.png) repeat fixed;
}

a{
font-family: 'Special Elite', 'New Tegomin';
text-decoration: none;
color: #fff;
background: #e5a323;
margin: 5px;
}
a:hover{
color: #6e1799;
}

header{
font-size:1.1em;
text-align: right ;
margin: 50px auto 50px;
}

header a{
font-family: 'Special Elite', cursive;
font-size: 20px;
text-decoration: none;
color: #fff;
text-shadow:  1px 1px 3px #6e1799,-1px -1px 3px #6e1799;
background: none;
line-height: 2;
}

.wrp{
background-color: rgba(0,0,0,0.3);
width: 100%;
height: 100%;
max-width:600px;
margin: 0 auto;
padding: 15px;
}

h1 {
font-family: 'Fontdiner Swanky', cursive;
font-size: 35px;
color: #000;
text-shadow: 3px 3px 3px #fff;
}

h1 span{
color: #9370db;
}

h2 {
font-family: 'Special Elite', 'New Tegomin';
font-size: 25px;
font-weight: 400;
text-align: right;
color: #fff;
text-shadow: 0 0 5px #9370db;
}

h2 span{
font-size: 15px;
}

section{
background-color: rgba(51,51,51,0.7);
border-radius: 8px;
margin: 1em 1em 3em;
padding: 1.5em;
filter: drop-shadow(4px 4px 3px #ccc);
}

/* 枯れ木の囲み枠 */
.tree{
background-color: rgba(51,51,51,0.7);
border-radius: 8px;
margin: 1.5em 80px 3em 0;
padding: 1.5em 40px 30px 1em;
position: relative;
filter: drop-shadow(4px 4px 3px #ccc);
}
.tree::after {
content : '';
background: url(tree.png) no-repeat center/contain;
width: 150px;
height: 150px;
bottom:-20px ;
right: -70px;
position: absolute;
filter: drop-shadow(4px 4px 3px #e5a323);
}
.tree a{
text-shadow: 0 0 5px #e5a323;
background: none;
}
.tree a:hover{
color: #e5a323;
}

/* 魔女の囲み枠 */
.witch{
background-color: rgba(51,51,51,0.7);
border-radius: 8px;
margin: 1.5em 0 3em 80px;
padding: 60px 1em 1.5em 40px;
position: relative;
filter: drop-shadow(4px 4px 3px #ccc);
}
.witch::after {
content : '';
background: url(witch.png) no-repeat center/contain;
width: 150px;
height: 150px;
top:-80px ;
left: -60px;
position: absolute;
filter: drop-shadow(4px 4px 3px #9370db);
}
.witch a{
text-shadow: 0 0 5px #6e1799;
background: none;
}
.witch a:hover{
color: #6e1799;
}

p span{
background: #333;
color: #e5a323;
margin: 2px;
padding: 2px;
}

p{
margin: 1em;
}

footer{
text-align: center ;
margin: 50px auto 20px;
}