/*ナビゲーション*/
.flex_nav{
display: flex;
justify-content:space-between;
align-items: flex-start;
width: 100%;
margin: 0 auto;
padding-top: 10px;
}
.top_logo{width: 20%;}
.logo_img{width:  100%;}
.top_logo img{width: 100%;}
.top_menu{display: flex;flex-direction: column;}
.top_btn{margin-left: auto;}
.top_btn ul{display: flex;}
.top_btn ul li{margin: 20px 10px 10px 0;}
.top_btn ul li a{
background: #FFFFFF;
border-radius: 30px;
padding: 10px 30px;
color: #007C9A;
text-decoration: none;
}
.top_btn ul li a:hover{
background: #007C9A;
color: #FFFFFF;
transition: 0.25s ease-in;
}
.top_navi ul{
display: flex;
justify-content: flex-end
}
.top_navi ul li{
margin: 5px 10px 20px 0;
}
.top_navi ul li a{
padding: 10px 15px;
color: #FFFFFF;
position: relative;
display: inline-block;
text-decoration: none;
white-space: nowrap;
}
.top_navi ul li a:hover{
cursor: pointer;
text-shadow:
0 0 10px rgba(255,255,255, 1),
0 0 50px rgba(255, 255, 255, .8),
0 0 75px rgba(255, 255, 255, .6),
0 0 76px rgba(255, 255, 255, .4),
0 0 77px rgba(255, 255, 255, .5),
0 0 78px rgba(255, 255, 255, .4),
0 0 79px rgba(255, 255, 255, .3),
0 0 80px rgba(255, 255, 255, .2),
0 0 85px rgba(255, 255, 255, .1);
}
.top_navi ul a::after {
position: absolute;
bottom: 5px;
left: 25%;
content: '';
width: 50%;
height: 1px;
background: #ffffff;
transform: scale(0, 1);
transform-origin: left top;
transition: transform .3s;
}
.top_navi ul a:hover::after {
transform: scale(1, 1);
}
.hamburger{display: none}
.globalMenuSp{display: none;}
@media screen and (max-width: 960px) {
.top_navi{display: none;}
/*　ハンバーガーボタン　*/
.hamburger {
display : block;
position: fixed;
z-index : 541;
right : 8px;
top   : 3px;
width : 42px;
height: 42px;
cursor: pointer;
text-align: center;
}
.hamburger span {
display : block;
position: absolute;
width   : 30px;
height  : 3px ;
left    : 6px;
background : #007C9A;
-webkit-transition: 0.3s ease-in-out;
-moz-transition   : 0.3s ease-in-out;
transition        : 0.3s ease-in-out;
}
.hamburger span:nth-child(1) {
top: 10px;
}
.hamburger span:nth-child(2) {
top: 20px;
}
.hamburger span:nth-child(3) {
top: 30px;
}
/* ナビ開いてる時のボタン */
.hamburger.active {
-webkit-transition: all 0.3s ease-in-out;
-o-transition     : all 0.3s ease-in-out;
transition        : all 0.3s ease-in-out;
-webkit-transition-delay: 0.6s;
-o-transition-delay     : 0.6s;
transition-delay        : 0.6s;
-webkit-transform: rotate(45deg);
-ms-transform    : rotate(45deg);
-o-transform     : rotate(45deg);
transform        : rotate(45deg);
}
.hamburger.active span:nth-child(2){
width: 0px;
background: #ffffff;
}
.hamburger.active span:nth-child(1),
.hamburger.active span:nth-child(3){
-webkit-transition-delay: 0.3s;
-o-transition-delay: 0.3s;
transition-delay: 0.3s;
background: #ffffff;
}
.hamburger.active span:nth-child(1){
-webkit-transform: translateY(4px);
-ms-transform    : translateY(4px);
-o-transform     : translateY(4px);
transform        : translateY(4px);
background: #ffffff;
}
.hamburger.active span:nth-child(3){
-webkit-transform: translateY(-16px) rotate(90deg);
-ms-transform: translateY(-16px) rotate(90deg);
-o-transform : translateY(-16px) rotate(90deg);
transform    : translateY(-16px) rotate(90deg);
background: #ffffff;
}
nav.globalMenuSp {
position: fixed;
display: block;
z-index : 540;
top  : 0;
left : 0;
text-align: center;
transform: translateY(-100%);
transition: all 0.9s;
width: 100%;
}
nav.globalMenuSp .nav_inner{
width: 100%;
background-image: linear-gradient(45deg, #03657C 0%, #267C92 100%); 
}	
nav.globalMenuSp .nav_inner p{
color: #ffffff;
font-weight: bold;
}	
.flex_nav_sp{
display: flex;
justify-content:flex-start;
flex-direction: row;
flex-wrap: wrap;
}
nav.globalMenuSp ul {
margin: 0 auto;
padding: 0;
padding:10px 5px;
}
nav.globalMenuSp ul li {
list-style-type: none;
border-radius: 5px;
padding: 10px 5px;
margin: 5px;
width: 160px;
height: 160px;
color: #ffffff;
}
nav.globalMenuSp ul li:last-child {
}
nav.globalMenuSp ul li:hover{
opacity: 0.7;
}
nav.globalMenuSp ul li a {
display: block;
text-decoration :none;
font-size: 90%;
font-weight: 500;
}
.nav_img{width: 60%;margin: 0 auto;}
.nav_img img{width: 100%;}
.nav_logo_img{width: 25%;margin: 0 auto;}
.nav_logo_img img{width: 100%;	}
/* このクラスを、jQueryで付与・削除する */
nav.globalMenuSp.active {transform: translateY(0%);}
.top_btn{display: none;}
}

@media screen and (max-width: 479px) {
nav.globalMenuSp ul li {
width: 100px;
height: 100px;
}
.top_logo{
width: 27%;
padding-left: 5px;
}
}