@charset "UTF-8";

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.osusume{font-size: 0.7em; color: black;}
em {
  font-style: normal; 
  font-weight: bold; 
  color: palevioletred; 
}

strong {
  font-style: normal; 
  font-weight: bold; 
  color: black; }
a { text-decoration: none;}
a:link { color: blue; }
a:visited { color: purple; }
a:hover { color: palevioletred; }

ul {
  list-style: none;
}

li {
  list-style: none;
}



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

body {
width:900px;}

.box1 {
  display: flex;
}

.box1-1 {
  display: flex;
  flex-direction: column;
  width: 30%;
}

.box1-2 {
width: 50%;
text-align: left;
}

.box1-1-2 img {
  width: 30%;
  height: auto;
}

.box2 {
  display: flex;
}

.box2-1 {
  display: flex;
  flex-direction: column;
  width: 30%;
}

.box2-2 {
width: 50%;
text-align: left;
}

.box2-1-2 img {
  width: 50%;
  height: auto;
}

}

@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;
}
}