body{ 
line-height:150%;
background-color:#AAB;
font-family: 'Avenir','Helvetica Neue','Helvetica','Arial','Hiragino Sans','ヒラギノ角ゴシック',YuGothic,'Yu Gothic','メイリオ', Meiryo,'ＭＳ Ｐゴシック','MS PGothic'  
}

h1{ 
font-family: "HG行書体","HGP行書体", serif
}

div.contents{ 
  margin: 0em auto;
  max-width:650px;
  min-width:350px;
  padding-left: 1.5em;
  padding-right: 1.5em;
  padding-bottom: 1em;
  padding-top: 1em;
  letter-spacing:1px;
  background-color:#FFF;
 font-weight: normal;
}
div.paragraph{ 
  margin: 1em 1em;
}

div.headline{
  padding-top: 0em;
  padding-bottom: 0.5em;
  padding-left: 0.25em;
  padding-right: 0.25em;
  font-size: 80%; 
}
span.heading{ 
  margin-left:-0.5em;
  padding:0.1em 0.5em;
  font-weight: bold;
  background: #DDD;
}
span.problem{ 
  margin-left:-0.5em;
  padding:0.1em 0.5em;
  font-weight: bold;
  background: #EBB;
}
/*%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%*/
div.theorem{ 
  margin: 1em auto;
  padding:0.5em 1em;
  line-height:130%;
  width:80%;
}

div.proof{ 
  margin: 1em auto;
  border-style:solid;
  border-width:1px;
  padding:0.5em 1em;
  line-height:130%;
  width:100%;
}

div.example{ 
  margin: 1em auto;
  border-style:solid;
  border-width:1px;
  padding:0.5em 1em;
  line-height:130%;
}
div.practice{ 
max-width:400px;
}



.bordered{
  border-style:solid;
  border-width:1px;
}

.borderless{ 
  border-style:none;
}

/*%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%*/
.small{
font-size:small;
}
.medium{ 
  font-size:medium;
}
.normal{ 
  font-size:100%;
}

.centerb{ 
  margin: 1em auto;
}

.center{ 
  text-align:center;
}
.left{ 
  text-align:left;
}
.right{ 
  text-align:right;
}
.fright{ 
 float: right
}


.normalheight{
  line-height:1.0em;
}
.semihigh{
  line-height:1.5em;
}
.high{
  line-height:2em;
}
.semiarray{
  line-height:2.5em;
}
.array{
  line-height:3em;
}
.arraysemihigh{
  line-height:3.5em;
}
.arrayhigh{
  line-height:4em;
}

/*%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%*/
.mg{
  margin:1em;
}
.mgt{
  margin-top:1em;
}
.mgb{
  margin-bottom:1em;
}
.mgthalf{
  margin-top:0.5em;
}
.mgbhalf{
  margin-bottom:0.5em;
}
.mgt2{
  margin-top:2em;
}
.mgb2{
  margin-bottom:2em;
}

.mgl{
  margin-left:1em;
}
.mgr{
  margin-right:1em;
}
.mgl2{
  margin-left:2em;
}
.mgr2{
  margin-right:2em;
}
.mgl3{
  margin-left:3em;
}
.mgr3{
  margin-right:3em;
}
.mgl4{
  margin-left:4em;
}
.mgr4{
  margin-right:4em;
}
.mgl5{
  margin-left:5em;
}
.mgr5{
  margin-right:5em;
}
.mgl6{
  margin-left:6em;
}
.mgr6{
  margin-right:6em;
}



.pd{
  padding: 1em;
}
.pdt{
  padding-top: 1em;
}
.pdb{
  padding-bottom: 1em;
}
.pdl{
  padding-left: 1em;
}
.pdr{
  padding-right: 1em;
}
.pdthalf{
  padding-top: 0.5em;
}
.pdbhalf{
  padding-bottom: 0.5em;
}
.pdtqt{
  padding-top: 0.25em;
}
.pdbqt{
  padding-bottom: 0.25em;
}

/*%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%*/

.min280{
  min-width:280px;
}
.max250{
  max-width:250px;
}
.max300{
  max-width:300px;
}
.max400{
  max-width:400px;
}

.nowrap{
white-space:nowrap;
}

.tale{
  text-align-last:end;
}

/*%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%*/
div.math{ 
  margin-left:5em;
  margin-right:5em;
 }
@media screen and (max-width:500px){
div.math{
  margin-left:1em;
  margin-right:1em;
 }
}

div.mathidt{ 
  margin-left:7em;
  margin-right:5em;
 }
@media screen and (max-width:500px){
div.mathidt{
  margin-left:2em;
  margin-right:1em;
 }
}

div.mathib{
  display:inline-block;
  vertical-align:top;
}

@media screen and (max-width:550px){
 .floatright550{
    float:right;
 }
}
@media screen and (max-width:650px){
 .floatright650{
    float:right;
 }
}


@media screen and (max-width:400px){
 .tale400{
  text-align-last:end;
  }
}
@media screen and (max-width:500px){
 .tale500{
  text-align-last:end;
  }
}
@media screen and (max-width:550px){
 .tale550{
  text-align-last:end;
  }
}
@media screen and (max-width:600px){
 .tale600{
  text-align-last:end;
  }
}
@media screen and (max-width:700px){
 .tale700{
  text-align-last:end;
  }
}

/*%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%*/
div.detail{ 
  margin: 1em auto;
  border-style:solid;
  border-width:1px;
  padding:1em;
  line-height:130%;
}
@media screen and (min-width:500px){
  div.detail{ 
  width:80%;
  }
}

div.answer{
  margin: 1em auto;
  padding:1em;
  border-style:solid;
  border-width:1px;
  line-height:130%;
  max-width:400px;
}


/*%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%*/
table.top td{ 
vertical-align: top;
}

table.middle td{ 
vertical-align: middle;
}



/*%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%*/
table.logic{ 
  margin-top: 0em;
  border-style:solid;
  border-width:1px;
  border-collapse:collapse;
}
table.logic td{ 
  text-align: center;
  border-style:solid;
  border-width:1px;
  padding: 0em 0.5em;
  line-height: 120%;
}
/*%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%*/
button.example{
  position: relative;
  display: inline;
  font-weight: normal;
  font-size: 80%; 
  padding: 0.05em 0.5em;
  text-decoration: none;
  color: #0B0;
  background: #EFE;
  border: solid 0px #DDD;
}
button.remark{
  position: relative;
  display: inline;
  font-weight: normal;
  font-size: 80%; 
  padding: 0.05em 0.2em;
  text-decoration: none;
  color: #B00;
  background: #FFD;
  border: solid 0px #DDD;
}
button.proof{
  position: relative;
  display: inline;
  font-weight: normal;
  font-size: 80%; 
  padding: 0.05em 0.5em;
  text-decoration: none;
  color: #00B;
  background: #EEF;
  border: solid 0px #DDD;
}
button.detail{
  position: relative;
  display: inline;
  font-weight: normal;
  font-size: 80%; 
  padding: 0.05em 0.5em;
  text-decoration: none;
  color: #B00;
  background: #FFD;
  border: solid 0px #DDD;
}
button.answer{
  position: relative;
  display: inline;
  font-weight: normal;
  font-size: 80%; 
  padding: 0.05em 0.2em;
  text-decoration: none;
  color: #00B;
  background: #EEF;
  border: solid 0px #DDD;
}
button.quiz{
  position: relative;
  display: inline;
  font-weight: normal;
  font-size: 80%; 
  padding: 0.1em 0.2em;
  text-decoration: none;
  color: #00B;
  background: #EEF;
  border: solid 0px #DDD;
}
button.qanswer{
  position: relative;
  display: inline;
  font-weight: normal;
  font-size: 100%; 
  padding: 0.05em 0.2em;
  text-decoration: none;
  color: #00B;
  background: #EEF;
  border: solid 0px #DDD;
}
button.close{
  position: relative;
  display: inline;
  font-weight: normal;
  font-size: 80%; 
  padding: 0.05em 0.5em;
  text-decoration: none;
  color: #000;
  background: #DDD;
  border: solid 0px #DDD;
}
button.plain{
  position: relative;
  display: inline-block;
  font-weight: bold;
  font-size: 100%; 
  padding: 0.2em 0.5em;
  text-decoration: none;
  color: #000;
  background: #FFD;
  border: solid 1px #BBB;
  transition: 0.3s;
}
button.plain:hover{
  background: #EEC;
  color: white;
}






li.matrix{ 
line-height:4.5em;
}

li{ 
margin-left: -1em;
margin-bottom: 1em;
}

ol.parentheses{
  list-style-type: none;
  margin-top:0.5em;
}
ol.parentheses li{
  counter-increment: cnt;
  margin-left:-0.5em;
}
ol.parentheses li:before{
  content: "(" counter(cnt) ") ";
  display:inline-block;
  width: 1.5em; /* いい塩梅の幅を設定したまえ */
  margin-left:-2em; /* いい塩梅の幅を設定したまえ */
}