@charset "utf-8";


@media screen and (min-width: 768px) {

.rightHeader ul li {
margin:0 5px;
}
.rightHeader ul li svg {
fill:#999;
}

#header #search-wrap .search-area input {
border-style: none;
height:60px;
}
.open-btn{
background:#fff url("https://mio-corp.jp/images/svg-search.svg") no-repeat center;
background-size:25px 25px;
width:25px;
height:50px;
border-radius: 50%;
cursor: pointer;
}

#search-wrap{
position:fixed;
top: 0;
left: 0;
z-index: -1;
opacity: 0;
transition: all 0.4s;
width:100%;
height: 121px;
}

#search-wrap.panelactive{
opacity: 0.85;
 z-index: 999;
 background:#333;
 display: flex;
 justify-content: center;
 align-items: center;
}

#search-wrap .search-area{
display: block;
}

#search-wrap.panelactive .search-area{
display: block;
width:50%;
position: relative;
}


#search-wrap form{
position: relative;
height: 66px;
}

#search-wrap input{
-webkit-appearance:none;
outline: none;
cursor: pointer;
color: #666;
}

#search-wrap input[type="text"] {
font-size:16px;
width:calc(100% - 90px);
padding: 20px;
border: none;
border-bottom:4px solid #393089;
transition: all 0.5s;
letter-spacing: 0.05em;
border-radius: 6px;
}

#search-wrap input[type="text"]:focus {
background:#fff;
}

 #search-wrap input[type="submit"] {
position: absolute;
top:0;
right:40px;
background-size: 40px 40px;
width:60px;
height: 40px;
border:none;
background-color:#fff;
mask: url("https://mio-corp.jp/images/svg-search.svg") no-repeat 15px center;
-webkit-mask: url("https://mio-corp.jp/images/svg-search.svg") no-repeat 15px center;
}

.close-btn{
position: absolute;
top:35px;
right:120px;
z-index: 9999;
cursor: pointer;
width: 60px;
height:60px;
}
	
.close-btn span{
display: inline-block;
position: absolute;
left: 14px;
height: 3px;
border-radius: 2px;
background-color: #fff;
}


.close-btn span:nth-of-type(1) {
top: 21px;
left: 16px;
transform: translateY(6px) rotate(-135deg);
width: 50%;
}

.close-btn span:nth-of-type(2){
top: 32px;
left: 16px;
transform: translateY(-6px) rotate(135deg);
width: 50%;
}

}