/*就活ページ*/
body { 
	width:100%;
        margin:0;
	font-family: 'メイリオ','Meiryo', sans-serif;
}
html{font-family: 'メイリオ’, sans-serif; 
}

.intro{
	text-align:center;
	color:#000;
	font-size:100%;
	font-weight:bold;
}



.btn-square {
  display: inline-block;
  padding: 0.5em 1em;
  text-decoration: none;
  background: #FFF;/*ボタン色*/
  color: #000;
  border-top: solid 4px #000;
  border-bottom: solid 4px #000;
  border-left: solid 4px #000;
  border-right: solid 4px #000;
  border-radius: 3px;
  width:90px;
  height:20px;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: (0,0,0,0);
 font-weight:bold;
}


.btn-square:active {  /*ボタンを押したとき*/
  -webkit-transform: translateY(4px);
  transform: translateY(4px);/*下に動く*/
  border-bottom: none;/*線を消す*/
  color:#000;
}
.btn-square:hover{
	background-color:orange;
}
.button{
	text-align:center;
}
/* 小見出し*/
h2{
width: 200px;
border-bottom:solid 10px #73e600;
font-size:25px;
margin:10px;
}
h3{
width: 200px;
border-bottom:solid 10px #73e600;
font-size:25px;
}

.menu { 
  
  max-width: 90%; 
  padding: 10px 10px 20px; 
} 
.menu input { 
  display: none; /*チェックボックスを隠す*/ 
} 
 
/*バー部分*/ 
.menu label { 


  

  cursor :pointer; 
  display: block; 
  text-decoration: none; 
  color: #000; 
  line-height: 1; 
  position: relative; 
  margin: 0 0 10px; 
  padding: 10px; 
  background-color: #fff;
  font-size: 15px;
} 
.btn-square:hover{
	background-color:orange;
	color:#fff;
	border-top: solid 4px #000;
  border-bottom: solid 4px #000;
  border-left: solid 4px #000;
  border-right: solid 4px #000;
}
 
/*開いたときに表示される部分*/ 
.menu ul { 

   left: 100px;

  margin: 0; 
  padding: 0; 
  list-style: none; 
  margin-bottom: 5px; 
} 

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

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

#menu_bar01:checked ~ #links01 li, 
#menu_bar02:checked ~ #links02 li,
#menu_bar03:checked ~ #links03 li,
#menu_bar04:checked ~ #links04 li,
#menu_bar05:checked ~ #links05 li,
#menu_bar06:checked ~ #links06 li,
#menu_bar07:checked ~ #links07 li,
#menu_bar08:checked ~ #links08 li,
#menu_bar09:checked ~ #links09 li,
#menu_bar10:checked ~ #links10 li,
#menu_bar11:checked ~ #links11 li,
#menu_bar12:checked ~ #links12 li,
#menu_bar13:checked ~ #links13 li{ 
  max-height: 500px; /*開いたときに表示されるliの高さ*/ 
  opacity: 1; 
  -webkit-transition: 0s; /*開くときのアニメーション*/ 
  -moz-transition: 0s; 
  -ms-transition: 0s; 
  -o-transition: 0s; 
  transition: 0s; 
} 


 /*開いたときの下の余白*/ 
/*＞＞＞＞さっきと同様に必要な項目分コピーして増やす＜＜＜＜*/
#menu_bar01:checked ~ #links01 li:last-child, 
#menu_bar02:checked ~ #links02 li:last-child,
#menu_bar03:checked ~ #links03 li:last-child,
#menu_bar04:checked ~ #links04 li:last-child,
#menu_bar05:checked ~ #links05 li:last-child,
#menu_bar06:checked ~ #links06 li:last-child,
#menu_bar07:checked ~ #links07 li:last-child,
#menu_bar08:checked ~ #links08 li:last-child,
#menu_bar09:checked ~ #links09 li:last-child,
#menu_bar10:checked ~ #links10 li:last-child,
#menu_bar11:checked ~ #links11 li:last-child,
#menu_bar12:checked ~ #links12 li:last-child,
#menu_bar13:checked ~ #links13 li: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: 80%;
}
p.sample {
     
     text-align: center;
}
div  li.active{
background:#ffa500;
color: #ffffff;
cursor:default;
}