@charset "UTF-8";

*, *::before, *::after{
margin: 0;
padding: 0;
box-sizing: border-box;
}

img{
max-width: 100%;
height: auto;
vertical-align: middle;
}

.container{
width: 1080px;
margin: 0 auto;
}


body{
min-width: 1180px;
}
@media only screen and (max-width: 767px){
body{
min-width: 100%;
}
}
.header{
background-color: aqua;
}
.header__logo{
width: 180px;
}
.header__nav ul{
display: flex;
list-style-type: none;
}
@media only screen and (max-width: 767px){
.header__nav ul{
display: block;
position: fixed;
top: 0;
left: 100%;
background-color: aquamarine;
width:100%;
height: 100%;
padding: 5%;
transition: 0.5s;
}
.header__nav.is-open ul{
left: 0;
}
}
.header__nav a{
text-decoration: none;
color: #333;
display: block;
padding: 20px;
}
.header__nav a:hover{
background-color: #f9f9f9;
}
.header .container{
display: flex;
justify-content: space-between;
align-items: center;
}

.header__btn{
width: 80px;
height: 80px;
background-color:cadetblue;
border: none;
position: fixed;
right: 0;
top: 0;
display: none;
flex-direction: column;
justify-content: space-between;
padding: 20px;
}
@media only screen and (max-width: 767px){
.header__btn{
display: flex;
}
}
.header__btn span,
.header__btn::before,
.header__btn::after
{
content: "";
display: block;
width:100%;
height: 4px;
background-color: #fff;
transition: 0.5s;
/*border: 1px solid #000;*/
}

.header__btn::before{
background-color: #f00;
position: relative;
top: 0;
}
.header__btn::after{
background-color: #00f;
position: relative;
bottom: 0;
}
.header__btn.is-open span{
width: 0;
}
.header__btn.is-open::before{
transform: rotate(45deg);
top:calc(50% - 2px);
}
.header__btn.is-open::after{
transform: rotate(-45deg);
bottom:calc(50% - 2px);
}

.header__btn::before{
background-color: #f00;
position: relative;
top: 0;
}
.header__btn::after{
background-color: #00f;
position: relative;
bottom: 0;
}
.header__btn.is-open span{
width: 0;
}
.header__btn.is-open::before{
transform: rotate(45deg);
top:calc(50% - 2px);
}
.header__btn.is-open::after{
transform: rotate(-45deg);
bottom:calc(50% - 2px);
}