.menu { 
  width: 50%; 
  padding: 10px 10px 20px; 
} 
.menu input { 
  display: none; /*チェックボックスを隠す*/ 
} 
 
/*バー部分*/ 
.menu label { 
  cursor :pointer; 
  display: block; 
  text-decoration: none; 
  color: #333; 
  line-height: 1; 
  position: relative; 
  margin: 0 0 10px; 
  padding: 10px; 
  background-color: #cdcdcd; 
} 
 
/*開いたときに表示される部分*/ 
.menu ul { 
  margin: 0; 
  padding: 0; 
  list-style: none; 
  margin-bottom: 30px; 
} 

/*＞＞＞＞もしほかのところでも箇条書き項目ul,liを使っている場合は、ここのアコーディオンの中の箇条書きタグと見分けがつくようにそっちをp liとかdiv liとかnav liとかにして明確に分けておく＜＜＜＜*/
.menu p { 
  max-height: 0; 
  overflow-y: hidden; 
  -webkit-transition: all 0s; /*閉じるときのアニメーション*/ 
  -moz-transition: all 0s; 
  -ms-transition: all 0s; 
  -o-transition: all 0s; 
  transition: all 0s; 
} 

/*＞＞＞＞↓ここの「#menu_bar01:~~#links01 li」が02までしかなかったので必要な項目分コピーして同様の書式で続ける＜＜＜＜*/

#menu_bar01:checked ~ #links01 p, 
#menu_bar02:checked ~ #links02 p { 
  max-height:50px; /*開いたときに表示されるliの高さ*/ 
  opacity: 1; 
  -webkit-transition: all 0s; /*開くときのアニメーション*/ 
  -moz-transition: all 0s; 
  -ms-transition: all 0s; 
  -o-transition: all 0s; 
  transition: all 0s; 
} 


 /*開いたときの下の余白*/ 
/*＞＞＞＞さっきと同様に必要な項目分コピーして増やす＜＜＜＜*/
#menu_bar01:checked ~ #links01 p:last-child, 
#menu_bar02:checked ~ #links02 p:last-child { 
  margin-bottom: 20px; 
} 
 

/*閉じた状態の矢印描画*/ 
.menu label:after{ 
  content:""; 
  display:block; 
  width:8px; 
  height:8px; 
  border-top: #333 2px solid; 
  border-right: #333 2px solid; 
  -webkit-transform: rotate(135deg); 
  -ms-transform: rotate(135deg); 
  transform: rotate(135deg); 
  position:absolute; 
  right: 2%; 
  top: 0; 
  bottom: 15%; 
  margin:auto; 
} 
/*開いた状態の矢印描画*/ 
.menu input[type=checkbox]:checked + label:after{ 
  content:""; 
  display:block; 
  width:8px; 
  height:8px; 
  border-top: #ffa500 2px solid; 
  border-right: #ffa500 2px solid; 
  -webkit-transform: rotate(-45deg); 
  -ms-transform: rotate(-45deg); 
  transform: rotate(-45deg); 
  position:absolute; 
  right: 2%; 
  top: 7%; 
  bottom: 0; 
  margin:auto; 
} 
/*画像のサイズ*/
p.sample img {
     width: 50%;
}