p {margin-bottom:1em;}

h2 {
font-size:140%;
font-weight:bold;
color:#990000;
}

ul.yoko {
list-style-type : none ;
padding: 0 ;
margin: 3px 5px 0px 5px ;
/*display : inline ;*/
}

li.yoko {
padding: 0 ;
margin: 0 0 0 1em ;
font-size: 120% ; vertical-align: middle;
display : inline ;
}

li.setsumei {
list-style-position: outside;
list-style-type:none;
margin:5px 0px;
padding:0 0 0 0.3em;
border-left:solid #D56A00 15px;
}

.dan3 {
width : 65% ;
margin: 20px auto ;
text-align:left;
/*border:solid 1px blue;*/
}

@media all and (max-width:720px) {
.dan3 {
width : 90% ;
margin: 20px auto ;
text-align:left;
/*border:solid 1px blue;*/
}
}


.expl {
font-size:100%;
color:#3333cc ;
margin-left:0.5em;
background:url(image/mark.gif) no-repeat left center;
padding-left:20px;
}


.expl2 {
font-size:120%;
color:#990000 ;
font-weight:bold;
}


.expl3 {
font-size:110%;
color:#3333cc ;
line-height:1.4em;
}

.grad {
background:url("../gradation.jpg") repeat-x bottom;
}

.example1 {margin:auto;width:640px;height:60em;text-align:left;background-color:#FFFFCC;
}
.example2 {margin:0 auto;width:600px;height:60em;text-align:left;
}
.example3 {position:relative;
}

@media all and (min-width:681px) {
.example3 > h3 {
font-size:110%;
font-weight:bold;
text-align:center;
}

.first {position:absolute;top:180px;
}
.second {position:absolute;top:50px;left:150px;
}
.third {position:absolute;top:50px;left:300px;
}
.fourth {position:absolute;top:180px;left:450px;
}
.circle_center {position:absolute;top:300px;left:160px;border:solid blue 0px;width:270px;height:200px;padding:10px;
} 
.fifth {position:absolute;top:440px;
}
.sixth {position:absolute;top:440px;left:450px;
} 
.seventh {position:absolute;top:570px;left:150px;
}
.eighth {position:absolute;top:570px;left:300px;
} 
}

@media all and (max-width:680px) {
h2 {
font-size:140%;
font-weight:bold;
color:#990000;
}

ul.yoko {
list-style-type : none ;
padding: 0 ;
margin: 3px 5px 0px 5px ;
/*display : inline ;*/
}

li.yoko {
padding: 0 ;
margin: 0 0 0 1em ;
font-size: 120% ; vertical-align: middle;
display : block ;
line-height:2em;
}

.example1 {
margin:auto;
padding-bottom: 3em;
width:100%;
height:auto;
text-align:left;
background-color:#FFFFCC;
}
.example2 {
margin:0 auto;
width:100%;
height:auto;
text-align:left;
}

.example3 {
margin: 0 auto;
display: -webkit-flex;
display:         flex;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
justify-content: center;
}

.example3 > h3 {
font-size:120%;
font-weight:bold;
text-align:left;
}

.expl{
display:inline;
}

.circle_center {border:solid blue 0px;width:95%;padding:10px;
} 
.first {
display:flex;
width:150px;
margin:5px 10px;
}
.second {
display:flex;
width:150px;
margin:5px 10px;
}
.third {
display:flex;
width:150px;
margin:5px 10px;
}
.fourth {
display:flex;
width:150px;
margin:5px 10px;
}
.fifth {
display:flex;
width:150px;
margin:5px 10px;
}
.sixth {
display:flex;
width:150px;
margin:5px 10px;
} 
.seventh {
display:flex;
width:150px;
margin:5px 10px;
}
.eighth {
display:flex;
width:150px;
margin:5px 10px;
} 
}