/**
 * MONOCO専用検索窓CSS by Hiroomi Izumi
 * @see http://kachibito.net/snippets/jquery-input-auto-resize
 */
div#monoco-searchbox-layout {
    float: left;
    margin-left: 10px;
}
input#monoco-searchbox {
    width:100px;
    color: #888;
    position: fixed;
    z-index: 100000;
    background: #FFF url(../images/search-icon.png) no-repeat 5px center;
    font-size: 13px;
}
@media screen and (max-width: 480px){
    div#header-logo {
        display: none;
    }
    div#monoco-searchbox-layout {
        margin: 0px;
        padding: 0px;
    }
    input#monoco-searchbox {
        width:15px;
        color: #888;
        position: fixed;
        z-index: 100000;
        background: #FFF url(../images/search-icon.png) no-repeat 5px center;
        font-size: 12px;
    }
}




/* 検索履歴追加に伴う改修 */
#masthead form.search input::placeholder { color: #CECECE;}
#masthead form.search input:-ms-input-placeholder {color: #CECECE;} /* IE */
#masthead form.search input::-ms-input-placeholder {color: #CECECE;} /* Edge */

#masthead #monoco-searchbox-layout form.search input[name="search"] {
    background: #FFF url(/modules/searchbox/images/search-icon.png) no-repeat 5px center;
    color: #CECECE;
    padding-left: 25px;
}
#masthead #monoco-searchbox-layout form.search input[name="search"].focus {
    background: #FFF;
    color: #000;
    padding-left: 10px;
}
#masthead .search-modal form.search input[name="search"] {
    background: #FFF url(/modules/searchbox/images/search-icon.png) no-repeat 5px center;
    color: #CECECE;
    padding-left: 25px;
}
#masthead .search-modal form.search input[name="search"].focus {
    background: #FFF;
    color: #000;
    padding-left: 10px;
}

.scrollReset { height: 0; display: block;visibility: hidden;}
body.search-modal-open .search-modal {
    display: block;
}
.search-modal {
    display: none;
    position: absolute;
    z-index: 10;
    top: 48px;
    left: 61px;
    width: 310px;
    background-color: #FFF;
    box-shadow: 0 0 4px rgba(0,0,0,0.2);
    max-height: calc(100vh - 50px);
    overflow: auto;
}
.search-modal .search-modal-inner {
    padding: 20px;
}
.search-modal p {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 15px;
}
#header_inner .search-modal ul {
    border-top: 1px solid #DBDBDB;
    margin-bottom: 30px;
}
#header_inner .search-modal ul:last-child {
    margin-bottom: 0;
}
#header_inner .search-modal li {
    display: block;
    position: relative;
}
#header_inner .search-modal li a {
    border-bottom: 1px solid #DBDBDB;
    color: #000;
    font-size: 14px;
    padding: 15px 0;
    display: block;
}
#header_inner .search-modal li a:hover {
    background: #eee;
}
#header_inner .search-modal li .del {
    position: absolute;
    right: 0;
    top: 0;
}
#header_inner .search-modal li .del span {
    content: '';
    display: block;
    width: 20px;
    height: 20px;
    position: absolute;
    right: 0;
    top: 13px;
    background: #F3F3F3;
    border-radius: 50%;
    cursor: pointer;
}
#header_inner .search-modal li .del span:before ,
#header_inner .search-modal li .del span:after {
    content:'';
    display: block;
    width: 8px;
    height: 1px;
    background: #9B9B9B;
    position: absolute;
    left: 6px;
    top: 9px;
}
#header_inner .search-modal li .del span:before {
    transform: rotate(45deg);
}
#header_inner .search-modal li .del span:after {
    transform: rotate(-45deg);
}
#header_inner .search-modal li .del span:hover {
    background: #9B9B9B;
}
#header_inner .search-modal li .del span:hover:before ,
#header_inner .search-modal li .del span:hover:after {
    background: #F3F3F3;
}
#search-sp,
body.search-modal-open .search-modal-cancel {
    display: none;
}
.search-hisotry-title.none,
.search-hisotry.none { display: none; }


body.search-modal-open.headerHidden .search-modal {
    display: none;
}
@media screen and (max-width: 1212px) {
    body.search-modal-open .search-modal {
        top: 40px;
        left: 131px;
    }
}
@media screen and (max-width: 768px) {

    #masthead form.search input[name="search"] {
        background: #FFF url(/modules/searchbox/images/search-icon.png) no-repeat 5px center;
        color: #CECECE;
        padding-left: 20px;
    }
    #masthead form.search input[name="search"].focus {
        background: #FFF;
        color: #000;
        padding-left: 10px;
    }
    /* 検索履歴追加に伴う改修 */
    body.search-modal-open #masthead { position: static; }
    body.search-modal-open #header_inner { padding: 0; }
    body.search-modal-open #masthead .search-modal + ul { height: 0; display: block;visibility: hidden;}
    body.search-modal-open #navi_menu_open,
    /* body.search-modal-open .header-tagList, */
    body.search-modal-open #sb-site{
        visibility: hidden;
        overflow-y: hidden;
        min-height:0 !important;
        margin: 0;
        width: 100%;
        height: 0;
    }
    body.search-modal-open .search-modal {
        box-shadow: unset;
        position: relative;
        top: auto;
        left: 0px;
        z-index:999999;
        overflow: visible;
        max-height: unset;
    }
    body.search-modal-open #masthead .search-modal .submitbtn {
        padding: 0;
        width: 0;
        left: -10px
    }
    body.search-modal-open #masthead .search-modal {
        /* max-height: 100vh; */
        height: auto;
        width: 100vw;
        -webkit-overflow-scrolling: touch;
    }
    body.search-modal-open #masthead .search-modal .search-modal-inner {
        padding: 0;
    }
    #search-sp { }
    body.search-modal-open #masthead .search-modal form {
        padding: 20px;
        height: 35px;
        display: block;
    }
    body.search-modal-open #masthead .search-modal input {
        width: calc(100vw - 120px);
        height: 35px;
        padding: 0 15px;
        background-size: 15px auto !important;
        box-sizing: border-box;
        font-size: 12px;
        background: url(/modules/searchbox/images/search-icon.png) 5px center no-repeat rgb(255, 255, 255);
        color: rgb(206, 206, 206);
    }
    body.search-modal-open .search-modal-cancel {
        display: block;
        font-size: 12px;
        position: absolute;
        right: 20px;
        line-height: 36px;
        color: #8D8D8D;
        cursor: pointer;
    }
    body.search-modal-open #masthead .search-modal .search {
        margin-bottom: 0;
        display: block;
    }
    body.search-modal-open #masthead .search-modal p {
        clear: both;
        font-size: 16px;
        padding: 0 15px;
        margin-bottom: 23px;
    }
    body.search-modal-open #masthead .search-modal ul {
        margin-bottom: 23px;
    }
    body.search-modal-open #masthead .search-modal li {
    }
    body.search-modal-open #masthead .search-modal li a {
        font-size: 16px;
        padding:15px 54px 15px 50px;
    }
    #header_inner .search-modal li .del {
        width: 54px;
        height: 47px;
    }
    #header_inner .search-modal li .del span {
        right: 18px;
        top: 50%;
        margin-top: -9px;
        width: 18px;
        height: 18px;
    }
    #header_inner .search-modal li .del span:before ,
    #header_inner .search-modal li .del span:after {
        left: 5px;
        top: 8px;
    }
}