@import url('https://fonts.googleapis.com/css2?family=RocknRoll+One&family=Stick&family=ZCOOL+KuaiLe&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: #333;
font-size: 0.9em;
font-family: 'RocknRoll One', sans-serif;
line-height: 1.5;
background: #ffa500 url(back.png) no-repeat right bottom/180px fixed;
}

a{
font-family: 'ZCOOL KuaiLe', 'Stick';
text-decoration: none;
margin: 2px;
padding: 2px;
color: #fff;
}
a:hover{
color: #fff;
text-shadow:  0px 0px 3px #6e1799;
}

header{
font-size:1.1em;
text-align: right ;
margin: 50px auto 50px;
}
.title{
height:200px;
padding-top:70px; 
text-align: center;
background: url(title.png) no-repeat center/contain;
}

header p{
font-family: 'Stick', sans-serif;
font-size: 15px;
font-weight: bold;
text-shadow: none;
margin:0;
line-height: 1.5;
}

header a{
font-family: 'ZCOOL KuaiLe', cursive;
font-size: 20px;
text-decoration: none;
color: #6e1799;
padding: 0 10px;
}
header a:hover{
color: #fff;
text-shadow:  1px 1px 3px #6e1799,-1px -1px 3px #6e1799;}

.wrp{
width: 90%;
max-width:600px;
margin: 10px auto;
}

h1 {
font-family: 'ZCOOL KuaiLe', cursive;
font-size: 35px;
color: #e5a323;
text-shadow: -4px -4px 3px #666,  4px 4px 3px #333;
}

h2 {
font-family: 'ZCOOL KuaiLe', 'Stick';
font-size: 25px;
color: #6e1799;
}

h2 span{
font-size: 15px;
}

section{
margin: 0.3em 0 1em 0;
padding: 0.5em;
}

p span{
background: #dda0dd;
margin: 2px 2px 2px -12px;
padding: 2px;
}

p{
margin: 1em;
}

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

 /* 以下スマホ用調整 */
@media screen and (max-width: 480px) {

header{
margin: 50px auto 100%;
}

section{
 margin: 2em auto; 
 padding: 1em 1.5em;
 width: 90%;
 background-color: rgba(255, 165, 0, 0.7);
 border: 4px solid #6e1799;
 border-radius: 3em .8em 3em .7em/.9em 2em .8em 3em;
}

}