body{
font-family:'メイリオ', sans-serif;
margin:0;
}




h2{
text-indent:inherit;
width: 200px;
border-bottom:solid 10px #73e600;
font-size:25px;
margin:10px;
}


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


.profile{
text-align:center;
margin:10px;
}



/*ボタンデザイン*/
.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:fit-content;
  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);/*下に動く*/
  color:#ffc000;
}
.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;
}
.button{
	text-align:center;
}
/*ボタンデザインここまで*/


/*以下アコーディオン*/

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

/*選択部分の色変え*/
.menu label:not(.open_btn_a):hover{
    background:#dcdcdc;
    color:#000;
    transition: .3s ease;
}

/*バー部分*/ 
.menu label:not(.open_btn_a){ 
  cursor :pointer; 
  display: block; 
  text-decoration: none; 
  color: #333; 
  line-height: 1; 
  position: relative; 
  margin: 0 0 10px; 
  padding: 10px; 
  background-color: #fff;
  font-size:15px;
  
} 
 
/*開いたときに表示される部分*/ 
.menu ul { 
  margin: 0; 
  padding: 0; 
  list-style: none; 
  margin-bottom: 5px; 
} 
.menu li { 
  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: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
 { 
  max-height: 2000px; /*開いたときに表示される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 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
{ 
  margin-bottom: 20px; 
} 
 
/*閉じた状態の矢印描画*/ 
.menu label:after{ 
  content:""; 
  display:block; 
  width:8px; 
  height:8px; 
  border-top: #000 2px solid; 
  border-right: #000 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; 
} 

/*サブメニュー*/
.accordion ul {
	list-style: none;
	margin:0;
}
.accordion label{
	cursor: pointer;
}
.toggle{
	display: none;
}
.toggle + ul{
	max-height: 0;
	overflow: hidden;
	transition: all 0s ease-out;
}
.toggle:checked + ul{
	max-height: 1000px;
	transition: all 0s ease-in;
}

.toggle li{
list-style:none;
width:33%;
float:left;
}

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




/*サブメニューここまで*/





/*ポップアップ*/
.popup_syugo input {
  display: none;
}


.popup_it input {
  display: none;
}

.popup_java input {
  display: none;
}

.popup_overlay {
  display: flex;
  justify-content: center;
  overflow: auto;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  opacity: 0;
  transition: opacity 0.5s, transform 0s 0.5s;
  transform: scale(0);
}

.popup_trigger {
  position: absolute;
  width: 100%;
  height: 100%;
}

.popup_content {
  position: relative;
  align-self: center;
  width: 90%;
  max-width: 800px;
  padding: 30px 30px 15px;
  box-sizing: border-box;
  background: #fff;
  line-height: 1.4em;
  transition: 0.5s;
}

.close_btn {
  position: absolute;
  top: 14px;
  right: 16px;
  font-size: 30px;
  cursor: pointer;
}
.popup_syugo input:checked ~ .popup_overlay {
  opacity: 1;
  transform: scale(1);
  transition: opacity 0.5s;
}

.open_btn_a{
 font-size:80%;
  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:fit-content;
  height:auto;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: (0,0,0,0);
 
}

.open_btn_a:active {  /*ボタンを押したとき*/
  -webkit-transform: translateY(4px);
  transform: translateY(4px);/*下に動く*/
  color:#ffc00;
}
.open_btn_a: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;
}
label.open_btn_a:after{
display:none;
}

/*ポップアップここまで*/



div  li.active{
background:#ffa500;
color: #ffffff;
cursor:default;
}