@charset "utf-8";


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

#header #search-wrap .search-area input {
border-style: none;
height:60px;
}
.search-area input[type="search"] {
    width: 100%;
    max-width: 700px;   /* お好みで600～800px程度 */
    height: 60px;       /* 高さ */
    padding: 0 20px;    /* 左右の余白 */
    font-size: 1.2rem;  /* 文字サイズ */
    border: 2px solid var(--deepBlue);
    border-radius: 8px;
    box-sizing: border-box;
}
.open-btn img {
background:#fff url("https://bestec-j.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:60%;
position: relative;
}


#search-wrap form{
position: relative;
height: 60px;
font-size:var(--fs-h5);
color:var(--black);	
}

#search-wrap input{
-webkit-appearance:none;
outline: none;
cursor: pointer;
font-size:var(--fs-h4);
color:var(--black);	
}

#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://bestec-j.jp/images/svg-search.svg") no-repeat 15px center;
-webkit-mask: url("https://bestec-j.jp/images/svg-search.svg") no-repeat 15px center;
}
.open-btn {
background: transparent;
border: none;
padding: 0;
}
.close-btn{
background: transparent;
color:var(--white);
border:none;
position: absolute;
top:33px;
right:10px;
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%;
}