@import url('https://fonts.googleapis.com/css?family=Noto+Serif+JP|Quicksand&display=swap');

@font-face {
    font-family: 'はんなり明朝';
    font-display: swap;
    src: url('https://cdn.leafscape.be/hannari/hannari_web.woff2') format("woff2");
}

body{
font-family: 'Noto Serif JP', serif;
font-size:12px;
letter-spacing:2.2px;
line-height:1.9;
color: #fff;
background:#f8ecd6;
margin:0;
padding:0;}

.kazari{color:black; background: linear-gradient(transparent 80%, #ECA4A4 80%);}
.luca{color:black; background: linear-gradient(transparent 80%, #F3D2C2 80%);}
.hibiki{color:black; background: linear-gradient(transparent 80%, #EF9681 80%);}
.yuni{color:black; background: linear-gradient(transparent 80%, #C4C4C4 80%);}
.sayuki{color:black;  background: linear-gradient(transparent 80%, #ECCCB4 80%);}
/*.motsu{color:black; }*/


#top{
margin:0;
padding:20px;}

a{
/*color:#ffb1a8;*/
background:none;
text-decoration:none;
padding:0 3px;
transition:0.5s;
}

a:hover{
color:#efefef;
}

#bx{
margin:0 auto;
max-width:500px;
}

#bx div{
font-size:12px;
margin:0 6px 15px 6px;
padding:10px 10px;
text-align:center;
color:#555;
border:#fff solid 4px;
background-color:#fff;
}

#bx a:hover{
color:#efefef;
/*border-bottom:dashed 2px #a6c8b2;*/}


.info{
margin:0 auto 50px;
padding:10px 10px 20px;
background:#fff;
text-align:center;
color:#555;
max-width:600px;}

.info a{
color:#f7b977;
}

.info a:hover{
color:#ccc;
border-bottom:dashed 2px #fff;}

strong{
background:linear-gradient(transparent 40%, #f8e58c 0%);
font-weight:normal;
margin:0 1px;
padding:0 2px;}

header{
color:#ccc;
text-align:center;
margin:0;
padding:0;}

@media screen and (min-width:601px){
.wrp{
width:500px;
margin:0 auto;}
}

@media screen and (max-width: 600px){
.wrp{
width:100%;
margin:0 auto;}
    img {
        max-width: 90%;
        height: auto;
	padding:10px 0px;
    }
}