@import url('https://fonts.googleapis.com/css2?family=Great+Vibes&family=Klee+One&family=Noto+Serif+JP&family=Playfair+Display&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}
hr { height: 0; margin: 0; padding: 0; border: 0;}

body{
background: url(/data/pasta_prof/img/pasta_prof_upld_2.jpg) repeat;
font-family: 'Playfair Display', 'Noto Serif JP', serif;
font-size:0.85em;
line-height:1.5;
margin: 0;
padding: 0;
}

a{
text-decoration:none;
color: #999;
}

.wrp{
background: #fff;
width: 90%;
max-width: 600px;
margin: 0 auto;
padding: 10px;
}

header{
font-family: 'Great Vibes', 'Klee One';
font-size:1.2em;
text-align: center ;
margin: 50px auto 20px;
}
.icon{
position: relative;
width: 100px;
margin: 20px auto;
}
.icon::after {
content: '';
position: absolute;
top: -20px;
left: -20px;
width: 140px;
height: 140px;
background: url(/data/pasta_prof/img/pasta_prof_upld_1.png);
filter: invert(50%) sepia(0%) saturate(11%) hue-rotate(143deg) brightness(101%) contrast(93%);
background-size:cover;
}
hr {
height: 1px;
background-image: -webkit-gradient(linear, left top, right top, from(transparent), color-stop(#ccc), to(transparent));
background-image: linear-gradient(to right, transparent, #ccc, transparent);
}

h1{
font-size:2.5em;
color: #ccc;
font-weight:400;
position: relative;}

h1 span{
font-size: 0.6em;
color:#000;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);}

h2{
font-size:1.5em;
text-shadow: 0px 0px 3px #666;
margin: 0.2em 1.2em;
}

ul{
list-style: none;
display: flex;
justify-content: center;
flex-wrap: wrap;
text-align: center;
}
li {
width: 125px;
padding-bottom: 1em;
margin: 5px 20px;
}
li > div {
padding: 0.2em 1em;
margin-bottom: 0.5em;
background: #fff;
border-radius: 4px;
box-shadow: 0 0 5px #ccc;
}

section{
margin: 0 15px 2em; 
}

.text{
adding-right: 1.5em;
padding-left: 1.5em;
line-height: 2em;
background-image: linear-gradient(transparent 0, transparent 97%, #ccc 100%);
background-size: 100% 2em;
}

footer{
font-family: 'Klee One';
text-align: center ;
margin: 50px auto 20px;
}