nav.menu_bar{
position: absolute;
top: 0;
background: rgba(253,253,253,0.6);
width: 100%;
margin: 0 auto;
padding: 10px;
display: block;
}
ul.menu{
display: flex;
list-style-type: none;
justify-content: center;
}
.menu li{
text-align: center;
font-weight: 600;
margin: 0 10px;
}
.menu li a{
color: #318C00;
font-size: 110%;
text-decoration: none;
transition: all 0.3s ease 0s;
padding: 10px;
position: relative;
}
.menu li a:hover {
background: #6BBF7D;
color: #fff;
}
.menu li a::after {
position: absolute;
bottom: -2px;
left: 0;
content: '';
width: 100%;
height: 3px;
background: rgba(162,244,119,1.00);
transform: scale(0, 1);
transform-origin: center top;
transition: transform .3s;
}
.menu li a:hover::after {
transform: scale(1, 1);
}


/*acco*/
/*アコーディオン*/
.accordion-container {
position: relative;
width: 100%;
cursor: pointer;
margin: 0 auto;
color: #186A4A;
}
.accordion-container .accordion-title {
display: block;
position: relative;
margin: 10px 20px 10px;
padding: 10px;
font-weight: bold;
border: solid 4px rgba(177,227,119,1.00);
box-shadow: 2px 2px 4px gray;
background: #ffffff;
cursor: pointer;
border-radius: 10px;
 }
.accordion-container .accordion-title:hover,
.accordion-container .accordion-title:active,
.accordion-container .content-entry.open .accordion-title {
background: rgba(5, 163, 216, 0.2); 
 }
.accordion-title{
position: relative;
 }
.accordion-title:after {
content: "";
position: absolute;
right: 25px;
top: 38%;
transition: all 0.2s ease-in-out;
display: block;
width: 8px;
height: 8px;
border-top: solid 2px #186A4A;
border-right: solid 2px #186A4A;
-webkit-transform: rotate(135deg);
transform: rotate(135deg);
 }
.accordion-title.open:after {
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
top: 45%;
}
.accordion-content {
display: none;
padding:  20px 2em;
color: #01151b;
background-color: rgba( 255, 255, 255, 0.5);
}
.accordion-content p{
font-size: 90%;
}
/* CSS for CodePen */
.accordion-container {
width: 100%;
margin: 0 auto;
}
.menu-checkbox {
 display: none;
}
@media screen and (max-width: 1100px){ 

}
/*ハンバーガーメニュー*/
*,
*:before,
*:after {
-webkit-box-sizing: inherit;
box-sizing: inherit;
}


.drawer-menu{
display: none;
}
@media screen and (max-width: 768px){ 
.drawer-menu{	
display: block;
}
nav.menu_bar{
display: none;
}	
/* メニューボタンの装飾 */
.menu-button {
display: block;
position:absolute;
top: 15px;
right: 20px;
z-index: 200;
height: 30px;
width: 40px;
cursor: pointer;
}
.menu-button::before,
.menu-button::after {
content: '';
transition: .3s;
}
.menu-button::before,
.menu-button::after,
.menu-button span {
display: block;
position: absolute;
left: 0;
height: 3px;
width: 100%;
margin-top: -1px;
background-color: #ffffff;
}
.menu-button::before {
top: 0;
}
.menu-button::after {
bottom: 0;
content: 'menu';
color: #ffffff;
}
.menu-button span {
top: 50%;
}
/* メニューボタンのアニメーション */
.menu-checkbox:checked ~ .menu-button::before {
top: 50%;
transform: rotate(45deg);
}
.menu-checkbox:checked ~ .menu-button::after {
display: none;
}
.menu-checkbox:checked ~ .menu-button span {
top: 50%;
transform: rotate(-45deg);
}
/* ドロワーメニューの装飾 */
.drawer-menu {
position: fixed;
top: 0;
left: 0;
z-index: 200;
height: 100%;
width: 250px;
transform: translateX(-100%);
transition: .6s;
background-color: #fff;
}
.drawer-menu ul {
margin: 0;
padding: 0;
list-style-type: none;
}
.drawer-menu ul li{
border-bottom: 1px dashed #186A4A;
}
.drawer-menu a {
display: block;
padding: 8px 20px;
color: #000000;
text-decoration: none;
}
.drawer-menu a:hover{
background: #186A4A;
color: #ffffff;
font-weight: bold;
}
/* ドロワーメニューの開閉 */
.menu-checkbox:checked ~ .drawer-menu {
transform: translateX(0);
}
/* ドロワーメニューの背景 */
.menu-background {
display: none;
position: fixed;
top: 0;
left: 0;
z-index: 100;
height: 100%;
width: 100%;
background-color: rgba(130, 208, 96, 0.555);
cursor: pointer;
}
.menu-checkbox:checked ~ .menu-background {
display: block;
}
/*acco*/
.accordion-container .accordion-title {
border: solid 2px rgba(177,227,119,1.00);
box-shadow: 1px 1px 4px #BFBFBF;
border-radius: 5px;
margin: 0 3px 10px 3px;
padding: 10px;
font-weight: bold;
}
.accordion-title:after {
right: 15px;
top: 45%;
}
.accordion-title{
font-size: 105%;
}
.accordion-content {
padding:  20px;
}
.accordion-content p{
font-size: 95%;
}
.accordion-title.open:after {
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
top: 55%;
}
}
@media screen and (max-width: 486px){ 

}