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

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

@media (max-width:640px) {

header {
background-color:#000;
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:solid 1px #333;
list-style:none;
}

.menu-content ul li:first-child {border-top:solid 1px #333;}

.menu-content ul li a {
display:block;
width:100%;
font-size:15px;
box-sizing:border-box;
color:#ffffff;
text-decoration:none;
padding:9px 15px 10px 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 1px #ffffff;
border-right:solid 1px #ffffff;
transform:rotate(45deg);
position:absolute;
right:11px;
top:16px;
}

.menu-content {
opacity:0;
width:100%;
height:100%;
position:fixed;
top:-100%;
left:0;
z-index:80;
background-color:#000;
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 ul li {
display:table;
float:left;
height:85px;
text-align:center;
width:20%;
}

.menu-content ul li a {
border-left:1px #333 solid;
color:#fff;
display:table-cell;
height:85px;
vertical-align:middle;
width:100%;
box-sizing:border-box;
transition:all 0.7s;
}

.menu-content ul li:last-child a {
border-right:1px #333 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;
}

}