body {background: white ;
 text-align:center;
margin-left:auto;
margin-right:auto;
font-family: MyWebFont;
}

@font-face {
   font-family: MyWebFont;
   src: url('Hannari.otf') format("opentype");
}



h2{color:palevioletred}
h2 { font-size: 2em; }
p { line-height: 1.3em; }
em {font-style: normal; font-weight:bold; color:palevioletred; }
em.osusume{font-size: 0.7em; color: black;}
strong{font-style: normal; font-weight:bold; color:palevioletred; }
a { text-decoration: none;}
a:link { color: blue; }
a:visited { color: purple; }
a:hover { color: palevioletred; }

img {
    border-style:none;
}

@media screen and (min-width:481px) {

body {
width:900px;}
.works-container {
display: flex;
flex-direction: column;
}

.works-1, .works-2 {
display: flex;
justify-content: center;

}

.works-cell1, .works-cell2, .works-cell3, .works-cell4,
.works-cell5, .works-cell6, .works-cell7, .works-cell8 {
width: 25%;
padding: 1%;
}



}

@media screen and (max-width:480px) {

.box1 {
display: flex;
flex-direction:column;
justify-content: center;
align-items: center;
}

.box2 {
display: flex;
flex-direction:column;
justify-content: center;
align-items: center;
}

img {
  max-width: 100%;
  height: auto;
}
}