button {
  /*width: 150px;
height: 40px;
    padding: 0 15px;
  margin: 0 auto 20px;*/
  color: #fff;
  border: none;
  font:  16px / 2 "游ゴシック","ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", ;
  background:none;
 
}



button:focus {
  outline: none;
}
ul.test01{
	display:flex;
}
ul.test01 li{
	width:30%;
}
ul.test002{
	padding-top:200px;}
/*---------------------
  ふきだし
  --------------------*/
.balloon{
 position: relative;
 /*  width: 240px;
 /* height: 30px;*/
  padding: 20px;
  color: #666;
  background: #e8f1da;
  text-align: left;
  -webkit-filter:drop-shadow(0px 0px 2px rgba(0, 0, 0, 0.1));
  border-radius: 5px;
  font:  16px / 2 "游ゴシック","ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", ;
  
 
}
.balloon p,.balloon02 p,.balloon03 p,.balloon04 p,.balloon05 p, .balloon06 p{
	padding-bottom:0.8em;
	
}
.balloon p a,.balloon02 p a,.balloon03 p a,.balloon04 p a,.balloon05 p a,.balloon06 p a{
	display:block;
	padding:5px;
	color:#960;
	margin:0 auto;
}
.balloon p a:hover,.balloon02 p a:hover,.balloon03 p a:hover,.balloon04 p a:hover,.balloon05 p a:hover,.balloon06 p a:hover{
	color:#362e2b;

	background-color:#FFFFFF;
	border-radius:5px;


}
.balloon02{
 position: relative;
  /* left:280px;
  top:20px;
  width: 240px;
 /* height: 30px;*/
  padding: 10px;
  color: #666;
  background: #d1e6f7;
  text-align: left;
  -webkit-filter:drop-shadow(0px 0px 2px rgba(0, 0, 0, 0.1));
  border-radius: 5px;
  font:  16px / 2 "游ゴシック","ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", ;
}
.balloon03{
 position: relative;
   /*  left:500px;
  width: 240px;
 /* height: 30px;*/
  padding: 10px;
  color: #666;
  background: #f5dad5;
  text-align: left;
  -webkit-filter:drop-shadow(0px 0px 2px rgba(0, 0, 0, 0.1));
  border-radius: 5px;
  font:  16px / 2 "游ゴシック"."ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", ;
}

/*---------------------
  ふきだしの三角形部分
  --------------------*/
.balloon::before{
  content: "";
  display: block;
  position: absolute;
  top: -18px;
  left: 20px;
  border-style: solid;
  border-width: 0 10px 20px 10px;
  border-color: transparent transparent #e8f1da transparent;
}
.balloon02::before {
  content: "";
  display: block;
  position: absolute;
  top: -18px;
  left: 20px;
  border-style: solid;
  border-width: 0 10px 20px 10px;
  border-color: transparent transparent #d1e6f7 transparent;
}
.balloon03::before {
  content: "";
  display: block;
  position: absolute;
  top: -18px;
  left: 20px;
  border-style: solid;
  border-width: 0 10px 20px 10px;
  border-color: transparent transparent #f5dad5 transparent;
}

 
/*---------------------
  ふきだし スマホ対応（たてver）
  --------------------*/
.balloon04{
 /* position: relative;*/
  width: 240px;
  margin:0 auto;
 /* height: 30px;*/
  padding: 10px;
  color: #fff;
  background: #f9f2f0;
  text-align: center;
  -webkit-filter:drop-shadow(0px 0px 2px rgba(0, 0, 0, 0.1));
  border-radius: 5px;
  font:  16px / 2 "游ゴシック","ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", ;
}
.balloon05{
  /*position: relative;*/
  width: 240px;
  margin:0 auto;
 /* height: 30px;*/
  padding: 10px;
  color: #fff;
  background: #f9f2f0;
  text-align: center;
  -webkit-filter:drop-shadow(0px 0px 2px rgba(0, 0, 0, 0.1));
  border-radius: 5px;
  font:  16px / 2 "游ゴシック","ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", ;
}
.balloon06{
 /* position: relative;*/
  width: 240px;
  margin:0 auto;
 /* height: 30px;*/
  padding: 10px;
  color: #fff;
  background: #f9f2f0;
  text-align: center;
  -webkit-filter:drop-shadow(0px 0px 2px rgba(0, 0, 0, 0.1));
  border-radius: 5px;
  font:  16px / 2 "游ゴシック","ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", ;
}

/*---------------------
  ふきだしの三角形部分
  --------------------*/
.balloon04::before,.balloon05::before,.balloon06::before {
  content: "";
  display: block;
  position: absolute;
  top: -18px;
  left: 20px;
  border-style: solid;
  border-width: 0 10px 20px 10px;
  border-color: transparent transparent #f9f2f0 transparent;
}