/*----------------------------------------
 header
----------------------------------------*/
header {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
position: fixed;
z-index: 9999 !important;
top:0;
left: 0;
background-color: #fff;
}

.is-animation{
background-color: rgba(0, 0, 0, 1);
}

.logo{
display: flex;
justify-content: flex-start;
align-items: center;
width: 100%;
padding: 0 0 0 1%;
}

.logo a {
display: flex;
align-items: center;
width: auto;
height: 70px;
}

.logo a img {
width: auto;
height: 40px;
margin: 0 0 0 0;
}

.logotype{
display: flex;
justify-content: center;
align-items: center;
width: 100%;
}

.logotype a {
display: flex;
align-items: center;
width: auto;
height: 70px;
}

.logotype a img {
width: auto;
height: 35px;
margin: 0 0 0 0;
}


/*----------------------------------------
 nav
----------------------------------------*/

nav {
position: fixed;
left: 0;
top: 0;
display: none;
z-index: 8000;
background-image: linear-gradient( 109.6deg, rgba(156,252,248,1) 11.2%, rgba(110,123,251,1) 91.1% );
width: 100%;
height: 100%;
}
 

nav.open {
display: block;
animation-name: SlideIn_menu;
animation-fill-mode: forwards;
animation-duration: 0.5s;
}

@keyframes SlideIn_menu {
  from {
    transform: translateY(-100%);
  }
  to {
    transform: translateY(0);
  }
}

nav.close {
display: none;
}


.nav {
position: relative;
overflow-x: hidden;
overflow-y: auto;
display: flex;
justify-content: flex-start;
align-items: flex-start;
flex-wrap: wrap;
width: 100%;
 -ms-overflow-style: none;    /* IE, Edge 対応 */
}

.nav::-webkit-scrollbar {  /* Chrome, Safari 対応 */
display:none;
}



nav ul.gnav {
display: flex;
justify-content: flex-start;
align-items: flex-start;
flex-wrap: wrap;
width: 50%;
margin-top: 100px;
}

nav ul.gnav li {
width: 100%;
margin: 20px 0;
}

nav ul.gnav li a {
text-decoration: none;
color: #333 !important;
letter-spacing: 2px;
padding: 30px;
font-size: 3vw;
font-family: 'Oswald', sans-serif;
font-style: oblique;
font-weight: 300;
}

nav ul.gnav li a:hover {
color: #fff !important;
}

nav ul.gnav li a span {
margin-left: 10px;
font-size: 1vw;
font-weight: 300;
font-family:"Noto Sans JP","游ゴシック","Yu Gothic",YuGothic,"Hiragino Kaku Gothic ProN","Hiragino Kaku Gothic Pro","メイリオ ",Meiryo,"MS ゴシック",sans-serif;
}


nav ul.nav_profile {
display: flex;
justify-content: flex-start;
align-items: flex-start;
flex-wrap: wrap;
width: 48%;
margin: 100px 1% 0 1%;
list-style: none;
}

nav ul.nav_profile li {
width: 33.333%;
}

nav ul.nav_profile li a:hover {
opacity: 0.7;
}
    

/*メニューボタン*/

.sp_nav{
display: flex;
justify-content: flex-end;
align-items: center;
flex-wrap: wrap;
width: 100%;
height: 70px;
text-align: center;
padding: 0 1% 0 0;
}

.nav-button {
display: block;
cursor: pointer;
}

.nav-button,
.nav-button span {
display: inline-block;
transition: all 0.5s;
box-sizing: border-box;
}

.nav-button {
z-index: 9999;
position: relative;
width: 20%;
height: 43px;
top: 0;
right: 0;
}

.nav-button p {
position: absolute;
left: 0;
bottom: 0 !important;
color: #333 !important;
font-size: 1rem;
width: 100%;
text-align: center;
}


.nav-button span {
position: absolute;
left: 30%;
width: 40%;
height: 1px;
background-color: #333;
}

.nav-button span:nth-of-type(1) {
top: 0;
}

.nav-button span:nth-of-type(2) {
top: 10px;
}

.nav-button span:nth-of-type(3) {
top: 20px;
}

.nav-button.active span:nth-of-type(1) {
-webkit-transform: translateY(10px) rotate(-45deg);
transform: translateY(10px) rotate(-45deg);
}

.nav-button.active span:nth-of-type(2) {
opacity: 0;
}

.nav-button.active span:nth-of-type(3) {
-webkit-transform: translateY(-10px) rotate(45deg);
transform: translateY(-10px) rotate(45deg);
}


@media screen and (max-width : 896px) {

.logotype{
display: none;
}

.nav-button {
width: 40%;
}

nav ul.nav_profile {
display: none;
}

nav ul.gnav {
width: 100%;
margin-top: 70px;
}

nav ul.gnav li a {
font-size: 5vw;
padding: 10px 20px;
}

nav ul.gnav li a:hover {
color: #fff !important;
}

nav ul.gnav li a span {
font-size: 3vw;
}

	
}