@import url('https://fonts.googleapis.com/css2?family=Fredericka+the+Great&family=Klee+One&family=Playball&display=swap');

@font-face
{
font-family: ロゴたいぷゴシック;
src: url('https://cdn.leafscape.be/logotype/logotype_web.woff2')
     format("woff2");
}

*,::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.85em;
font-family: 'Klee One', cursive;
line-height: 1.5;
}

a{
text-decoration: none;
color: #3cb37a;
font-weight: bold;
}

a:hover{
color: #b33f3d;
}

em{
font-style: normal;
font-weight: bold;
background:linear-gradient(transparent 60%, #ece093 60%);
}

header{
height: 500px;
color: #fcfcfc;
font-family: 'Fredericka the Great', cursive;
font-size:18px;
text-align: center;
padding:200px;
background: #b33f3d url(back.jpg) no-repeat center top/contain;}

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

.wrp2{
background: #b33f3d;
color: #fcfcfc;
text-align: center;
padding: 10px 0;
}
.box2{
background: #fff;
color: #333;
width:100%;
text-align: left;
}

h1{
font-family: 'Fredericka the Great', 'Klee One', cursive;
font-size:40px;
font-weight: normal;
}

h2 {
font-family: ロゴたいぷゴシック;
background-color: #3cb37a;
background-image:repeating-linear-gradient(-45deg,#b33f3d, #b33f3d 10px,transparent 0, transparent 20px);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

h3 {
font-family: ロゴたいぷゴシック;
}
h3:before{
color: #ece093;
display: inline-block;
content: "\f79c";
font-family: "Font Awesome 5 Free";
font-weight: 900;
margin:0 5px;
font-size: 1.5em;
}

.box{
padding: 0.5em 1em;
margin: 10px;
}

p{
padding: 0 1em;
margin-bottom: 10px;
}

hr{
border: none;
height: 50px;
}

nav{
font-family: 'Playball', cursive;
font-size:1.5em;
text-align: center;
color: #ece093;
}
nav ul{
margin: 0.5em;
padding: 0 ;
}
nav ul li{
list-style: none;
display: inline-block;
}
nav ul:before, nav li:after{
display: inline-block;
content: "\f7aa";
font-family: "Font Awesome 5 Free";
font-weight: 900;
margin:0 5px;
padding-left: 5px;
font-size: 1.5em;
}
nav a{
font-weight: normal;
}

.atgk{
text-align: right;
font-size: 0.95em;
border: 3px double #333;
margin: 15px 0;
}

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

@media screen and (max-width: 750px) {
header{
height: auto;
font-size: 10px;
text-align: center;
padding:25% 0;}

h1{
font-size: 23px;}

}