.listB ul, .listP ul, .listG ul, .listY ul{
	overflow: hidden;
	margin: 10 10px 10px -40px;
	padding: 5px 0;
	border-bottom: 1px solid #fff;
	list-style: none;
}
.listB ul{
	background: #0000ff !important;
}
.listP ul{
	background: hotpink !important;
}
.listG ul{
	background: green !important;
}
.listY ul{
	background: orange !important;
}
.listB li, .listP li, .listG li, .listY li{
	margin: 0;
	padding: 0.5em 1em;
	border-top-color: transparent;
	background: #FFFFFF;
	box-shadow: 0 1px 6px rgba(0, 0, 0, .4);
	text-shadow: 0 1px 1px #fff;
}

ul.postitB, ul.postitP, ul.postitG, ul.postitY {
  padding: 0;
}
ul.postitB li, ol.postitB li,ul.postitP li, ol.postitP li, ul.postitG li, ol.postitG li, ul.postitY li, ol.postitY li {
  color: #404040;

  border-bottom: solid 2px #dadada;/*下に灰色線*/
  background: ivory;
  margin-bottom: 5px;/*下のバーとの余白*/
  line-height: 1.5;
  padding: 0.5em;
  list-style-type: none!important;/*ポチ消す*/
  font-weight: normal;
}
ul.postitB li, ol.postitB li {
  border-left: solid 6px blue;/*左側の線*/
}
ul.postitP li, ol.postitP li {
  border-left: solid 6px mediumvioletred;/*左側の線*/
}
ul.postitG li, ol.postitG li {
  border-left: solid 6px darkgreen;/*左側の線*/
}
ul.postitY li, ol.postitY li {
  border-left: solid 6px orange;/*左側の線*/
}
  
.boxlistB ol, .boxlistP ol, .boxlistG ol, .boxlistY ol{
  counter-reset:number; /*数字をリセット*/
  list-style-type: none!important; /*数字を一旦消す*/
  padding: 0.3em 0.8em;
}
.boxlistB ol{
  border: solid 2px mediumblue;
}
.boxlistP ol{
  border: solid 2px mediumvioletred;
}
.boxlistG ol{
  border: solid 2px mediumseagreen;
}
.boxlistY ol{
  border: solid 2px orange;
}
.boxlistB ol li,.boxlistP ol li, .boxlistG ol li, .boxlistY ol li{
  position: relative;
  padding: 0.5em 0.5em 0.5em 30px;
  line-height: 1.5em;
}
.boxlistB ol li{
  border-bottom: dashed 1px mediumblue;
}
.boxlistP ol li{
  border-bottom: dashed 1px mediumvioletred;
}
.boxlistG ol li{
  border-bottom: dashed 1px mediumseagreen;
}
.boxlistY ol li{
  border-bottom: dashed 1px orange;
}

.boxlistB ol li:before, .boxlistP ol li:before, .boxlistG ol li:before, .boxlistY ol li:before{
  /* 以下数字をつける */
  position: absolute;
  counter-increment: number;
  /*content: counter(number);*/
  content: counter(number,decimal);
/*
circle（白丸）
cjk-ideographic（漢数字）
decimal（算用数字 。olデフォルト値）
decimal-leading-zero（先頭に0をつけた算用数字で、01, 02, 03, 等）
georgian（グルジア数字）
hebrew（ヘブライ数字）
hiragana（ひらがな – あいうえお順）
hiragana-iroha（ひらがな – いろは順）
inherit listStyleType（プロパティの値は親要素から継承することを指定する）
katakana（カタカナ – アイウエオ順）
katakana-iroha（カタカナ – イロハ順）
lower-alpha（小文字のアルファベットで、a, b, c, d, e 等）
lower-greek（小文字のギリシャ文字）
lower-latin（小文字のアルファベットで、a, b, c, d, e 等）
lower-roman（T小文字のローマ数字で、i, ii, iii, iv, v 等）
upper-alpha（大文字のアルファベットで、A, B, C, D, E 等）
upper-latin（大文字のアルファベットで、A, B, C, D, E 等）
upper-roman（大文字のローマ数字で、I, II, III, IV, V 等）
*/


  /*数字のデザイン変える*/
  display:inline-block;

  color: white;
  font-family: 'Avenir','Arial Black','Arial',sans-serif;
  font-weight:bold;
  font-size: 15px;
  border-radius: 50%;
  left: 0;
  width: 25px;
  height: 25px;
  line-height: 25px;
  text-align:center;
  /*以下 上下中央寄せのため*/
  top: 50%;
  -moz-transform: translateY(-50%);
  	-webkit-transform: translateY(-50%);
  	-o-transform: translateY(-50%);
  	-ms-transform: translateY(-50%);
  	transform: translateY(-50%);
}
.boxlistB ol li:last-of-type, .boxlistP ol li:last-of-type, .boxlistG ol li:last-of-type, .boxlistY ol li:last-of-type{
  border-bottom: none; /*最後のliの線だけ消す*/
}
.boxlistB ol li:before{
  background: mediumblue;
}
.boxlistP ol li:before{
  background: mediumvioletred;
}
.boxlistG ol li:before{
  background: mediumseagreen;
}
.boxlistY ol li:before{
  background: orange;
} 





.squareListB ol, .squareListP ol,.squareListG ol, .squareListY ol {
  counter-reset:number; /*数字をリセット*/
  list-style-type: none!important; /*数字を一旦消す*/
  padding:0.5em;
  /*枠線はあとで指定 border: dashed 1px gray;*/
}

.squareListB ol li, .squareListP ol li, .squareListG ol li, .squareListY ol li {
  position: relative;
  line-height: 1.5em;
  padding: 0.5em 0.5em 0.5em 30px;
}

.squareListB ol li:before, .squareListP ol li:before, .squareListG ol li:before, .squareListY ol li:before{
  /* 以下数字をつける */
  position: absolute;
  counter-increment: number;
  content: counter(number);
  /*数字のデザイン変える*/
  display:inline-block;
  color: white;
  font-family: 'Avenir','Arial Black','Arial',sans-serif;
  font-weight:bold;
  font-size: 15px;
  left: 0;
  width: 25px;
  height: 25px;
  line-height: 25px;
  text-align: center;
  /*以下上下中央寄せのため*/
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}
.squareListB ol {
 border: dashed 1px mediumblue;
}
.squareListP ol {
 border: dashed 1px mediumvioletred;
}
.squareListG ol {
 border: dashed 1px teal;
}
.squareListY ol {
 border: dashed 1px darkorange;
}

.squareListB ol li:before{
  background: mediumblue;
}
.squareListP ol li:before{
  background: mediumvioletred;
}
.squareListG ol li:before{
  background: teal;
}
.squareListY ol li:before{
  background: darkorange;
}



/* circleNumber */
.circleNumB2, .circleNumP2, .circleNumG2, .circleNumY2{
  counter-reset:number; /*数字をリセット*/
  list-style-type: none!important; /*数字を一旦消す*/
  padding: 0.3em 0.8em;
}
.circleNumB2{
  border: solid 2px mediumblue;
}
.circleNum2P{
  border: solid 2px mediumvioletred;
}
.circleNumG2{
  border: solid 2px mediumseagreen;
}
.circleNumY2{
  border: solid 2px orange;
}
.circleNumB2 li, .circleNum2P li, .circleNumG2 li, .circleNumY2 li{
  position: relative;
  padding: 0.5em 0.5em 0.5em 30px;
  line-height: 1.5em;
}
.circleNumB2 li{
  border-bottom: dashed 1px mediumblue;
}
.circleNumP2 li{
  border-bottom: dashed 1px mediumvioletred;
}
.circleNumG2 li{
  border-bottom: dashed 1px mediumseagreen;
}
.circleNumY2 li{
  border-bottom: dashed 1px orange;
}

.circleNumB2 li:before, ol.circleNumP2 li:before, ol.circleNumG2 li:before, ol.circleNumY2 li:before{
  /* 以下数字をつける */
  position: absolute;
  counter-increment: number;
  content: counter(number);
  /*数字のデザイン変える*/
  display:inline-block;

  color: white;
  font-family: 'Avenir','Arial Black','Arial',sans-serif;
  font-weight:bold;
  font-size: 15px;
  border-radius: 50%;
  left: 0;
  width: 25px;
  height: 25px;
  line-height: 25px;
  text-align:center;
  /*以下 上下中央寄せのため*/
  top: 50%;/*50%*/
  -moz-transform: translateY(-50%);
  	-webkit-transform: translateY(-50%);
  	-o-transform: translateY(-50%);
  	-ms-transform: translateY(-50%);
  	transform: translateY(-50%);
}
ol.circleNumB2 li:last-of-type, ol.circleNumP2 li:last-of-type, ol.circleNumG2 li:last-of-type, ol.circleNumY2 li:last-of-type{
  border-bottom: none; /*最後のliの線だけ消す*/
}
ol.circleNumB2 li:before{
  background: mediumblue;
}
ol.circleNumP2 li:before{
  background: mediumvioletred;
}
ol.circleNumG2 li:before{
  background: mediumseagreen;
}
ol.circleNumY2 li:before{
  background: orange;
}

/* squareNum2 */
.squareNumB2, .squareNumP2,.squareNumG2, .squareNumY2 {
  counter-reset:number; /*数字をリセット*/
  list-style-type: none!important; /*数字を一旦消す*/
  padding:0.5em;
  /*枠線はあとで指定 border: dashed 1px gray;*/
}

.squareNumB2 li, .squareNumP2 li, .squareNumG2 li, .squareNumY2 li {
  position: relative;
  line-height: 1.5em;
  padding: 0.5em 0.5em 0.5em 30px;
}

.squareNumB2 li:before, .squareNumP2 li:before, .squareNumG2 li:before, .squareNumY2 li:before{
  /* 以下数字をつける */
  position: absolute;
  counter-increment: number;
  content: counter(number);
  /*数字のデザイン変える*/
  display:inline-block;
  color: white;
  font-family: 'Avenir','Arial Black','Arial',sans-serif;
  font-weight:bold;
  font-size: 15px;
  left: 0;
  width: 25px;
  height: 25px;
  line-height: 25px;
  text-align: center;
  /*以下上下中央寄せのため*/
  top: 50%;/*50%*/
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}
.squareNumB2 {
 border: dashed 1px mediumblue;
}
.squareNumP2 {
 border: dashed 1px mediumvioletred;
}
.squareNumG2 {
 border: dashed 1px teal;
}
.squareNumY2 {
 border: dashed 1px darkorange;
}

.squareNumB2 li:before{
  background: mediumblue;
}
.squareNumP2 li:before{
  background: mediumvioletred;
}
.squareNumG2 li:before{
  background: teal;
}
.squareNumY2 li:before{
  background: darkorange;
}

/* fieldset風の囲みとリスト */
.fsetListB, .fsetListP, .fsetListG, .fsetListY {
    position: relative;
    margin: 1em 0;
    padding: 0.5em 0.5em;
    border-radius: 8px;
}
.fsetListB {
    border: solid 3px #4169E1;
}
.fsetListP {
    border: solid 3px mediumvioletred;
}
.fsetListG {
    border: solid 3px forestgreen;
}
.fsetListY {
    border: solid 3px orange;
}

.fsetListB-title, .fsetListP-title, .fsetListG-title, .fsetListY-title {
    position: absolute;
    display: inline-block;
    top: -13px;
    left: 10px;
    padding: 0 9px;
    line-height: 1;
    font-size: 19px;
    background: #FFF;
    font-weight: bold;
}
.fsetListB-title {
    color: #4169E1;
}
.fsetListP-title {
    color: mediumvioletred;
}
.fsetListG-title {
    color: forestgreen;
}
.fsetListY-title {
    color: #ff8000;
}


.fsetListB ol, .fsetListP ol, .fsetListG ol, .fsetListY ol{
  counter-reset:number; /*数字をリセット*/
  list-style-type: none!important; /*数字を一旦消す*/
  padding:0.5em;
  background: white;
}
.fsetListB ol li, .fsetListP ol li, .fsetListG ol li, .fsetListY ol li{
  position: relative;
  padding-left: 30px;
  line-height: 1.5em;
  padding: 0.5em 0.5em 0.5em 30px;/* 番号の後のリストの位置*/
}
.fsetListB ol li:before, .fsetListP ol li:before, .fsetListG ol li:before, .fsetListY ol li:before{
  /* 以下数字をつける */
  position: absolute;
  counter-increment: number;
  content: counter(number);
  /*以下数字のデザイン変える*/
  display:inline-block;
  color: white;
  font-family: 'Avenir','Arial Black','Arial',sans-serif;
  font-weight:bold;
  font-size: 15px;
  border-radius: 50%;
  left: 0;
  width: 25px;
  height: 25px;
  line-height: 25px;
  text-align:center;
  /*以下 上下中央寄せのため*/
  top: 50%;
  -moz-transform: translateY(-50%);
  	-webkit-transform: translateY(-50%);
  	-o-transform: translateY(-50%);
  	-ms-transform: translateY(-50%);
  	transform: translateY(-50%);
}
.fsetListB ol li:before{
  background: #5c9ee7;
}
.fsetListP ol li:before{
  background: mediumvioletred;
}
.fsetListG ol li:before{
  background: forestgreen;
}
.fsetListY ol li:before{
  background: orange;
}


/*見出し付きリスト*/
.midashiListB,.midashiListP, .midashiListG, .midashiListY{
    position: relative;
    margin: 2em 0;
    padding: 0.5em 1em;
}
.midashiListB {
    border: solid 3px royalblue;
}
.midashiListP {
    border: solid 3px mediumvioletred;
}
.midashiListG {
    border: solid 3px mediumseagreen;
}
.midashiListY {
    border: solid 3px darkorange;
}

.midashiListB-title, .midashiListP-title, .midashiListG-title, .midashiListY-title {
    position: absolute;
    display: inline-block;
    top: -27px;
    left: -3px;
    padding: 0 9px;
    height: 25px;
    line-height: 25px;
    vertical-align: middle;
    font-size: 17px;
    color: #ffffff;
    font-weight: bold;
    border-radius: 5px 5px 0 0;
}
.midashiListB-title {
    background: royalblue;
}
.midashiListP-title {
    background: mediumvioletred;
}
.midashiListG-title {
    background: mediumseagreen;
}
.midashiListY-title {
    background: darkorange;
}



.midashiListB p,.midashiListP p, .midashiListG p, .midashiListY p {
    margin: 0; 
    padding: 0;
}
ol.midashiListBorder, ol.midashiListPorder, ol.midashiListGorder, ol.midashiListYorder{
  counter-reset:number; /*数字をリセット*/
  list-style-type: none!important; /*数字を一旦消す*/
  padding:0.5em;
  background: white;
}

ol.midashiListBorder li, ol.midashiListPorder li, ol.midashiListGorder li, ol.midashiListYorder li{
  position: relative;
  padding-left: 30px;
  line-height: 1.5em;
  padding: 0.5em 0.5em 0.5em 30px;
}

ol.midashiListBorder li:before, ol.midashiListPorder li:before, ol.midashiListGorder li:before, ol.midashiListYorder li:before{
  /* 以下数字をつける */
  position: absolute;
  counter-increment: number;
  content: counter(number);
  /*以下数字のデザイン変える*/
  display:inline-block;
  color: white;
  font-family: 'Avenir','Arial Black','Arial',sans-serif;
  font-weight:bold;
  font-size: 15px;
  border-radius: 50%;
  left: 0;
  width: 25px;
  height: 25px;
  line-height: 25px;
  text-align:center;
  /*以下 上下中央寄せのため*/
  top: 50%;
  -moz-transform: translateY(-50%);
  	-webkit-transform: translateY(-50%);
  	-o-transform: translateY(-50%);
  	-ms-transform: translateY(-50%);
  	transform: translateY(-50%);

}
ol.midashiListBorder li:before{
  background: royalblue;
}
ol.midashiListPorder li:before{
  background: mediumvioletred;
}
ol.midashiListGorder li:before{
  background: mediumseagreen;
}
ol.midashiListYorder li:before{
  background: darkorange;
}




/* 番号付きリスト  */
.counterB ol, .counterP ol, .counterG ol, .counterY ol{
    counter-reset:item;
    list-style-type:none;
    margin : 0.5em !important;
}
.counterB li:before, .counterP li:before, .counterG li:before, .counterY li:before{
    counter-increment:item;
    content:counters(item, "-")". ";
    font-weight:bold;
}
.counterB li:before{
    color:mediumblue;/*項目番号の色の指定*/
}
.counterP li:before{
    color:mediumvioletred;/*項目番号の色の指定*/
}
.counterG li:before{
    color:mediumseagreen;/*項目番号の色の指定*/
}
.counterY li:before{
    color:darkorange;/*項目番号の色の指定*/
}
.counterB ol ol, .counterP ol ol, .counterG ol ol, .counterY ol ol{
    text-indent:30px;
}
.counterB ol ol ol, .counterP ol ol ol, .counterG ol ol ol, .counterY ol ol ol{
    text-indent:60px;
}

.latin{
  font-size:110%;
  list-style-type: upper-latin;
}
.latin2{
  font-size:110%;
  list-style-type: lower-latin;
}
.decimal{
  font-size:110%;
  padding-left:20px;
  list-style-type: decimal;

}
.roman1{
  list-style-type: upper-roman;
}
.roman2{
  list-style-type: lower-roman;
}
.left30{
 left:30px;
}

/*
circle（白丸）
cjk-ideographic（漢数字）
decimal（算用数字 。olデフォルト値）
decimal-leading-zero（先頭に0をつけた算用数字で、01, 02, 03, 等）
georgian（グルジア数字）
hebrew（ヘブライ数字）
hiragana（ひらがな – あいうえお順）
hiragana-iroha（ひらがな – いろは順）
inherit listStyleType（プロパティの値は親要素から継承することを指定する）
katakana（カタカナ – アイウエオ順）
katakana-iroha（カタカナ – イロハ順）
lower-alpha（小文字のアルファベットで、a, b, c, d, e 等）
lower-greek（小文字のギリシャ文字）
lower-latin（小文字のアルファベットで、a, b, c, d, e 等）
lower-roman（T小文字のローマ数字で、i, ii, iii, iv, v 等）
upper-alpha（大文字のアルファベットで、A, B, C, D, E 等）
upper-latin（大文字のアルファベットで、A, B, C, D, E 等）
upper-roman（大文字のローマ数字で、I, II, III, IV, V 等）
*/

/* 番号付きリスト  */
.counterB ol, .counterP ol, .counterG ol, .counterY ol{
    counter-reset:item;
    list-style-type:none;
    margin : 0.5em !important;
}
.counterB li:before, .counterP li:before, .counterG li:before, .counterY li:before{
    counter-increment:item;
    content:counters(item, "-")". ";
    font-weight:bold;
}
.counterB li:before{
    color:mediumblue;/*項目番号の色の指定*/
}
.counterP li:before{
    color:mediumvioletred;/*項目番号の色の指定*/
}
.counterG li:before{
    color:mediumseagreen;/*項目番号の色の指定*/
}
.counterY li:before{
    color:darkorange;/*項目番号の色の指定*/
}
.counterB ol ol, .counterP ol ol, .counterG ol ol, .counterY ol ol{
    text-indent:30px;
}
.counterB ol ol ol, .counterP ol ol ol, .counterG ol ol ol, .counterY ol ol ol{
    text-indent:60px;
}

/* 番号付きリスト  */
.counterx ol{
    counter-reset:item;
    list-style-type:none;
    margin : 0.5em !important;
}

.counterx li:before{
    counter-increment:item;
    content:counters(item, "-")". ";
}
.counterx ol ol{
    text-indent:30px;
}
.counterx ol ol ol{
    text-indent:60px;
}
/* --------------------------------------------------------
	container1
-------------------------------------------------------- */
.container1 {
	width: 90%;
	margin: 5px 5px auto;
}
/* -----------------------------------------------------------
	topics
----------------------------------------------------------- */
.ttl {
font-size: 120%;
font-weight: bold;
color: #dc4e95;
padding: 5px 0 2px 0;
border-bottom: solid 2px #dc4e95;
}

.topics {
margin: 10px 0 0;
}

.topics dl {
padding: 5px 0;
border-bottom: 1px solid #ccc;
}

.topics dt {
padding-bottom: 5px;
}

@media screen and (min-width: 768px) {
.topics dt {
clear: left;
float: left;
width: 10%;
font-weight: bold;
padding-left: 10px;
}
.topics dd { 
margin-left: 11%;
}