@charset "UTF-8";

/***************** MENU SETTING *****************/
/*開閉用ボタン（ハンバーガーボタン）*/
.menu-btn {
position: fixed;
top: 3%;
right: 30px;
width: 50px;
height: 50px;
border-radius: 50%;
cursor: pointer;
z-index: 9999;
border: none;
-webkit-transition: all 3s ease-in-out;
transition: all .3s ease-in-out;
background: #FFF;
}
.menu-btn-line {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
height: 1px;
width: 30%;
background: #72c38a;
-webkit-transition: all 3s ease-in-out;
transition: all .3s ease-in-out;
}
.menu-btn-line::before,
.menu-btn-line::after {
content: "";
height: 1px;
width: 100%;
background: #72c38a;
position: absolute;
left: 0;
-webkit-transition: inherit;
transition: inherit;
}
.menu-btn-line::before{
top: -5px;
}
.menu-btn-line::after{
top: 5px;
}

/* 開閉用ボタンがクリックされた時のスタイル */
.open .menu {
-webkit-transition: all .5s;
transition: all .5s;
visibility: visible;
opacity: 1;
}
.open .menu-btn {
border-color: #72c38a
}
.open .menu-btn-line{
background-color: transparent;
}
.open .menu-btn-line::before,
.open .menu-btn-line::after {
top: 0;
background: #72c38a
}
.open .menu-btn-line::before {
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
.open .menu-btn-line::after {
-webkit-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
}

/*開いたメニュー*/
.menu {
position: fixed;
display: flex;
justify-content: center;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url("../images/common/illust06.png") no-repeat right center rgba(30,128,184,0.95);
-webkit-transition: all .5s;
transition: all .5s;
visibility: hidden;
opacity: 0;
z-index: 9998;
}
.menu ul {
/*transform: translateY(30%);*/
padding: 0;
margin: auto;
list-style-type: none;
width: 80%;
}
.menu li {
width: 100%;
margin: 2% auto;
height: auto;
text-align: left;
font-size: 100%;
letter-spacing: 5px;
}
.menu li span {
    font-size: 11px;
    margin-right: 20px;
    padding: 2px 20px;
    border-radius: 30px;
    border:1px solid #FFF;
    letter-spacing: 3px;
}
.menu li a {
display: block;
font-size: 1.4rem;
color: #fff;
text-decoration: none;
-webkit-transition: all .2s;
transition: all .2s;
}
.menu li a:hover {
transform: translateX(5px);
-webkit-transition: all .2s;
transition: all .2s;
}

.menu li a:hover span {
    border-radius: 30px;
    border:1px solid #72c38a;
    background: #FFF;
    color: #72c38a;
}

/******* MENU DESIGN SETTING *******/
.menu h1 {
    width: 100%;
    margin: auto;
    font-size: 150%;
}

.menu h1 img { width: 30%;}



@media screen and (max-width: 767px) {
    
/***************** MENU SETTING *****************/
/*開閉用ボタン（ハンバーガーボタン）*/
.menu-btn {
position: fixed;
top: 5px;
right: 5px;
width: 50px;
height: 50px;
border-radius: 50%;
cursor: pointer;
z-index: 9999;
border: none;
-webkit-transition: all 3s ease-in-out;
transition: all .3s ease-in-out;
background: #FFF;
}
    
/******* MENU DESIGN SETTING *******/
.menu {
    background: rgba(30,128,184,0.95);
    width: 100%;
    height: 100%;
    margin: auto;
    overflow-y: scroll;
}
    
.menu h1 {
    width: 80%;
    margin: auto;
    font-size: 150%;
}    
.menu h1 img { width: 100%;}    
    
.menu ul {
    padding: 5% 0;
}    
    
.menu li {
width: 100%;
letter-spacing: 3px;
margin-bottom: 15px;
}    
    
.menu li a {
display: block;
font-size: 100%;
}

    
    
}