@charset "UTF-8";
/* CSS Document */

.menu-content {
font-weight:700;
}

/*========================================================================================================================
  for Smartphone
========================================================================================================================*/

@media (max-width:640px) {

header {
background-color:#38beef;
width:100%;
position:sticky;
top:0;
height:50px;
right:0;
z-index:100;
}

.menu-btn {
position:fixed;
top:0;
right:0;
display:flex;
height:50px;
width:50px;
justify-content:center;
align-items:center;
z-index:90;
}
.menu-btn span,
.menu-btn span:before,
.menu-btn span:after {
content:'';
display:block;
height:1px;
width:25px;
border-radius:0;
background-color:#ffffff;
position:absolute;
transition:all 0.3s;
}
.menu-btn span:before {bottom:8px;}
.menu-btn span:after {top:8px;}

#menu-btn-check:checked ~ .menu-btn span {
background-color:rgba(255, 255, 255, 0);/*メニューオープン時は真ん中の線を透明にする*/
}
#menu-btn-check:checked ~ .menu-btn span::before {
bottom:0;
transform:rotate(45deg);
transition:all 0.3s;
}
#menu-btn-check:checked ~ .menu-btn span::after {
top:0;
transform:rotate(-45deg);
transition:all 0.3s;
}

#menu-btn-check {display:none;}

.menu-content {
opacity:0;
width:100%;
height:100%;
position:fixed;
top:-100%;
left:0;
z-index:80;
background-color:#000;
}

.menu-content ul {
padding:70px 10px 0;
}

.menu-content ul li {
border-bottom-color:rgba(255,255,255,0.3);
border-bottom-width:1px;
border-bottom-style:solid;
list-style:none;
}

.menu-content ul li:first-child {
border-top-color:rgba(255,255,255,0.3);
border-top-width:1px;
border-top-style:solid;
}

.menu-content ul li a {
display:block;
width:100%;
font-size:15px;
box-sizing:border-box;
color:#ffffff;
text-decoration:none;
padding:20px 15px 20px 10px;
position:relative;
transition:all 0.2s;
}

.menu-content ul li a:link {
background:none;
color:#fff;
}
.menu-content ul li a:visited {
background:none;
color:#fff;
}
.menu-content ul li a:hover {
background-image: linear-gradient(124deg, rgba(124, 192, 255, 1) 1%, rgba(148, 197, 220, 1));
color:#fff;
}


.menu-content ul li a.no:hover {
background:none;
}

.menu-content ul li a::before {
content:"";
width:7px;
height:7px;
border-top:solid 3px #ffffff;
border-right:solid 3px #ffffff;
transform:rotate(45deg);
position:absolute;
right:11px;
top:26px;
}

.menu-content {
opacity:0;
width:100%;
height:100%;
position:fixed;
top:-100%;
left:0;
z-index:80;
background-color:#38beef;
transition:all 0.5s;/*アニメーション設定*/
}

#menu-btn-check:checked ~ .menu-content {
left:0;
top:0;
opacity:1;
/*メニューを画面内へ*/}

body {
margin:0;
width:100%;
}

}

/*==================================================================================================================================
for PC 
==================================================================================================================================*/

@media all and (min-width:641px) {

body {
margin:0;
width:100%;
}

header {
position:sticky;
top:0;
z-index:100;
}

#menu-btn-check,
menu-btn {display:none;}

.menu-content {
flex:1;
display:flex;
}

.menu-content ul {
display:flex;
flex:1;
width:100%;
}

.menu-content ul li {
text-align:center;
flex:1;
}

.menu-content ul li a {
border-left-width:1px;
border-left-color:rgba(255,255,255,0.3);
border-left-style: solid;
color:#fff;
height:100%;
width:100%;
padding:20px 5px;
box-sizing:border-box;
transition:all 0.7s;
display: flex;
align-items: center;
justify-content: center;
}

.menu-content ul li:last-child a {
border-right-width:1px;
border-right-color:rgba(255,255,255,0.3);
border-right-style: solid;
}

.menu-content ul li a:link {background:none;}
.menu-content ul li a:visited {background:none;}
.menu-content ul li a:hover {
background-image: linear-gradient(124deg, rgba(124, 192, 255, 1) 1%, rgba(148, 197, 220, 1));
}

.menu-content ul li a.no:hover {
background:none;
}

}