img.center_png {
    display: block;
    width: 60%;
    margin: 30px auto 30px;
    border: 4px solid;
}

span.highlight_large {
	background: yellow;
	font-size: larger;
	font-weight: bold;
}

span.highlight {
	background: yellow;
	font-weight: bold;
}

ol {
  counter-reset:number; /*数字をリセット*/
  list-style-type: none; /*数字を一旦消す*/
}
ol li {
  position: relative;
  padding-left: 30px;
  line-height: 1.5em;
  padding: 0.5em 0.5em 0.5em 30px;
}

ol li:before{
  /* 以下数字をつける */
  position: absolute;
  counter-increment: number;
  content: counter(number);
  /*以下数字のデザイン変える*/
  display:inline-block;
  background: #5c9ee7;
  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%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

span.underline {
border-bottom:dotted;/*下線を点線にする*/
border-width:1px;
}

span.cube{
border-style: solid; /* ボーダーを実線に */
border-width: 1px;  /* ボーダー線の太さを1pxに  */
border-color: #7e4d4d ;  /* ボーダー線の色を指定 */
color:#000000; /* 文字色を黒に  */
font-size: 80% ; /* フォントのサイズを80%に縮小して表示 */
border-radius: 2px 2px 2px 2px;  /* 囲い四角の四隅に丸みをつける  */ 
padding:  2px 2px 2px ; /* 文字と四角の間に余白をつくる  */
margin-left : 2px; /* 左隣りの文字とのスペースを2pxつくる  */
margin-right: 2px; /* 右隣りの文字とのスペースを2pxつくる  */
vertical-align: 3%;  /* 上下のずれを微修正；少し上に移動  */
background-color:  #FC9B9B; /* 背景に色を付ける  */ 
box-shadow: 1px 1px 5px rgba(20,20,20,0.2); /*囲いに影をつける */
font-weight: bold;
}

.vedeo_frame {
	margin-left: 30px;
    margin-right: 30px;	
}

video {
    width: 100%;
}

@media screen and (max-width:480px) {
img.center_png {
    width: 90%;
}
h1{
	margin-left: 10px;
    margin-right: 10px;	
}
.vedeo_frame {
	width:100%;
}