/*--------------------------------*/
/* header for sp
/* 2020/03
/*--------------------------------*/

/*-----------------------------------------------------------*/
/* English button tublet */
/*-----------------------------------------------------------*/

@media only screen and (max-width: 768px) {
#eng_btn {
    top:12px;
    right:325px;
}

#eng_btn a {
    display:block;
    width:30px;
    height:30px;
    background:url("../../images/common/header_btn_eng_sp.png") no-repeat center center;
    background-size:contain;
    margin:0;
    padding:0;
    line-height:inherit;
    text-indent:-9999px;
}


#eng_btn a:hover {
    opacity:0.7;
}

}

/*-----------------------------------------------------------*/
/* Header SP size */
/*-----------------------------------------------------------*/
@media only screen and (max-width: 640px) {


/* logo */
#responsiveHead h1 {
    position:relative;
    float:left;
    width:53%;
    max-width:242px;
    height:60px;
    margin-left:2%;
    padding:0;
}

#responsiveHead h1 a {
    display:block;
    position:absolute;
    top:0;
    left:0;
    bottom:0;
    width:100%;
    height:0;
    background:url("/images/common/logo.svg") no-repeat center center;
    background-size:contain;
    margin:auto;
    padding-top:14.035%;
    text-align:center;
    text-indent:-9999px;
}


/* Eng button */
#eng_btn {
    display:none;
}

#eng_btn_sp {
    position:absolute;
    top:12px;
    right:21%;
    width:34px;
    height:34px;
    z-index:9999;
}


#eng_btn_sp a {
    display:block;
    width:100%;
    height:100%;
    background:url("../../images/common/header_btn_eng_sp.png") no-repeat center center;
    background-size:contain;
    margin:0;
    padding:0;
    line-height:inherit;
    text-indent:-9999px;
}
#eng_btn_sp a:hover {
    opacity:0.7;
}


/*-----------------------------------------------------------*/
/* Search button */
/*-----------------------------------------------------------*/

#header_search_sp {
    width:100%;
}
#header_search_sp * {
    box-sizing:border-box;
}

#search_window_sp {
    overflow:hidden;
    height:0;
    opacity:0;
    transition:all .3s linear;
    
    /* style */
    width:100%;
    background:#ececec;
    padding:0;
    z-index:99999;
}

input#search_button_sp {display:none;}
label.search_label {
    float:right;
    margin-top:12px;
    margin-right:0%;
    display:block;
    width:34px;
    height:34px;
    background-repeat:no-repeat;
    background-position:center top;
    background-image:url("../../images/common/header_btn_search_sp.png");
    background-size:contain;
    transition:all .1s linear;
    cursor:pointer;
    z-index:9999;
}
input#search_button_sp:checked + label.search_label {
    height:48px;
    background-image:url("../../images/common/header_btn_search_close_sp.png");
    background-color:#ececec;
}
input#search_button_sp:checked + label.search_label + #search_window_sp {
    height:auto;
    padding:3% 0;
    opacity:1;
}


/* search box */
#search_box {
    overflow:hidden;
    position:relative;
    width:90%;
    margin:0 auto;
    border:1px solid #cccccc;
}

#search_window_sp input[type="submit"] {
    display:block;
    position:absolute;
    top:0;
    right:0;
    width:12%;
    height:100%;
    background-repeat:no-repeat;
    background-position:center center;
    background-image:url("../../images/common/header_btn_search_box_sp.png");
    background-size:34px;
    background-color:#666666;
    border:0;
    border-radius:0;
    text-indent:-9999px;
    outline:none;
    cursor:pointer;
    -webkit-appearance:none;
}
#search_window_sp input[type="submit"]:hover {
    opacity:0.7;
}
#search_window_sp input[type="submit"]:hover,
#search_window_sp input[type="submit"]:focus,
#search_window_sp input[type="text"]:hover,
#search_window_sp input[type="text"]:focus {
    border:0;
    outline:none;
}

#search_window_sp input[type="text"] {
    width:88%;
    background-color:#ffffff;
    padding:0.3em;
    line-height:2.0em;
    font-size:16px;
    border:0;
    border-radius:0;
    box-shadow:none;
    -webkit-appearance:none;
}

#search_window_sp input[type="text"]::placeholder {color:#555555;}
#search_window_sp input[type="text"]::-webkit-input-placeholder {color:#555555;}
#search_window_sp input[type="text"]:-moz-placeholder {color:#555555;}
#search_window_sp input[type="text"]::-moz-placeholder {color:#555555;}
#search_window_sp input[type="text"]:-ms-input-placeholder {color:#555555;}

#search_window_sp input[type="text"]:focus::placeholder {color:transparent;}
#search_window_sp input[type="text"]:focus::-webkit-input-placeholder {color:transparent;}
#search_window_sp input[type="text"]:focus:-moz-placeholder {color:transparent;}
#search_window_sp input[type="text"]:focus::-moz-placeholder {color:transparent;}
#search_window_sp input[type="text"]:focus:-ms-input-placeholder {color:transparent;}



}/* end -640px */


/*-----------------------------------------------------------*/
/* Responsive setting */
/*-----------------------------------------------------------*/

@media only screen and (max-width: 480px) {

#eng_btn_sp {
    top:14px;
    right:29%;
    width:30px;
    height:30px;
}

label.search_label {
    width:30px;
    height:30px;
    margin-top:14px;
}

#search_window_sp input[type="submit"] {
    width:14%;
    background-size:30px;
}
#search_window_sp input[type="text"] {
    width:86%;
    line-height:1.8em;
}

}/* end -480px */

@media only screen and (max-width: 375px) {

#eng_btn_sp {
}

label.search_label {
}

}/* end -375px */

@media only screen and (max-width: 320px) {

#responsiveHead h1 {
    height:50px;
}

#eng_btn_sp {
    top:12px;
    right:30%;
    width:28px;
    height:28px;
}


label.search_label {
    width:28px;
    height:28px;
    margin-top:12px;
}
input#search_button_sp:checked + label {
    height:38px;
    background-image:url("../../images/common/header_btn_search_close_sp.png");
    background-color:#ececec;
}

#search_window_sp input[type="submit"] {
    background-size:28px;
}

}/* end -320px */