@charset "utf-8";


/*PC�E�^�u���b�g�E�X�}�z���ʐݒ�
------------------------------------------------------------------------------------------------------------------------------------------------------*/

/*�S�̂̐ݒ�
---------------------------------------------------------------------------*/
/*全体の設定
---------------------------------------------------------------------------*/
html,body {min-height: 100%;}
body {
	margin: 0px;
	padding: 0px;
	color: #666;	/*全体の文字色*/
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;	/*フォント種類*/
	font-size: 14px;	/*文字サイズ*/
	line-height: 2;		/*行間*/
	-webkit-text-size-adjust: none;
	
}

}
h1,h2,h3,h4,h5,p,ul,ol,li,dl,dt,dd,form,figure,form {margin: 0px;padding: 0px;font-size: 100%;}
ul {list-style-type: none;}
ol {padding-left: 40px;padding-bottom: 15px;}
/*---------------------------------------------------------------------------*/
#container {
	width: 80%;			/*ブロックの幅を画面の40%にする設定。*/
	max-width: 1000px;	/*上のwidth指定の追加設定。幅1000pxを最大幅に設定し、それ以上広げない。*/
        margin: 0 auto;		/*HP画面の左右中央に表示させる設定*/
}

#centering_parent {

        /*width: 80%;*/			/*ブロックの幅を画面の40%にする設定。*/
	max-width: 350px;	/*上のwidth指定の追加設定。幅1000pxを最大幅に設定し、それ以上広げない。*/
        margin: 0 auto;		/*HP画面の左右中央に表示させる設定*/
    
}


h2 {line-height: 7px;	
text-align:center;
}
/*-------------------------------------------------------*/

ol.sample1{
        max-width: 320px;	/*上のwidth指定の追加設定。幅1000pxを最大幅に設定し、それ以上広げない。*/
        margin: 0 auto;	

}
ul.sample2 {
        max-width: 320px;	/*上のwidth指定の追加設定。幅1000pxを最大幅に設定し、それ以上広げない。*/
        margin: 0 auto;	

}
/*-------------------------------------------------------*/
ol.sample1{
  counter-reset:list;
  list-style-type:none;
  font: 14px/1.6 'arial narrow', sans-serif;
  padding:0;
}
ol.sample1 li{
  position:relative;
  margin: 7px 0 7px 0px;
  padding-left:40px;
  font-weight: bold;
  font-size:14px;
  line-height: 30px;
  border: solid 1px #F6A38B;
  border-radius:20px;
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
  -o-transition: 0.3s;
  -ms-transition: 0.3s;
  transition: 0.3s;
}
ol.sample1 li:before{
  counter-increment: list;
  content: counter(list);
  position: absolute;
  left: 0px;
  width: 30px;
  height: 30px;
  text-align: center;
  color: #fff;
  line-height:30px;
  background: #F6A38B;
  border-radius: 50%;
  top: 50%;
  -moz-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}
ol.sample1 li:hover{
  background: #F6A38B;
  color: #fff;
}
ol.sample1 li:hover:before{
  background: #fff;
  color: #F6A38B;
}
ul.sample2{
  counter-reset:list;
  list-style-type:none;
  font: 14px/1.6 'arial narrow', sans-serif;
  padding:0px;

}
ul.sample2 li{
  position:relative;
  color: #fff;
  padding: 0 0 0 30px;
  margin: 7px 0 7px 0px;  /*-7px 0 7px 0px-----------------------*/
  font-weight: bold;
  font-size: 14px;
  line-height: 30px;
  background: #77b4fd;
  border-radius: 20px;
  -webkit-box-shadow: 1px 1px 2px #ccc;
  -moz-box-shadow: 1px 1px 2px #ccc;
  box-shadow: 1px 1px 2px #ccc;
}
ul.sample2 li:before{
  counter-increment: list;
  content: counter(list);
  display: block;
  position: absolute;
  left: 10px;
  top: 50%;
  -moz-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}
/*----------------------------------------------------------
  ���쌠�\�L
----------------------------------------------------------*/
#footer p {
  margin: 0px 0px 0px 0px;
  padding: 0.5em 0 0.5em 0;
}