@charset "utf-8";

/*★下層用CSS*/

/*右側：検索ボックス*/
.sideBox{width: 265px;position:-webkit-sticky;position:sticky;top: 4.7em;height:100%;filter:drop-shadow(1px 1px 2px rgba(0,0,0,.75));background:#fff;}
.sideBox .sideBoxInner{padding: 1em 1.5em 1.2em;}
#searchBox{font-size:0.75em;}
.sideBox .titleBox .ttl{font-size:1.4em;margin-bottom:1em;}
.sideBox .titleBox .ttl img{display:block;width:100%;max-width:140px;height:auto;margin-bottom:.5em;}
.sideBox .checkBox .ttl{font-weight:700;border-left:4px solid #e85a24;padding-left:.5em;}
.sideBox ul{margin-bottom: 1.6em;}
.sideBox ul.ulBox_two{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
.sideBox ul.ulBox_two li{
    width: 49%;
}
.sideBox ul.ulBox_two.ulBox_age li label{
    padding:0.5em;
    font-size:95%;
}
.sideBox ul li input{display:none;}
.sideBox ul li input:checked~label{border:1px solid #ea8046;background:#ea8046;color:#fff;}
.sideBox ul li label{text-align:center;font-size:100%;display:block;color:#777;border:1px dashed #909090;border-radius:1em;padding:.5em 1.2em .5em;margin: 4% auto;cursor:pointer;}
.sideBox .otherOptionBox ul{display:flex;flex-wrap:wrap;margin-bottom:2em;}
.sideBox .otherOptionBox li{font-size:.6em;}
.sideBox .otherOptionBox label{margin:.2em;}
.sideBox button{color:#fff;text-align:center;margin:auto;padding:.7em 3em;border:none;background-color:#ee141e;background-repeat:no-repeat;background-position:95% center;display:block;cursor:pointer;}

.sideBox .sa_period ul.ulBox_two {justify-content: flex-start;}
.sideBox .sa_period ul.ulBox_two li{
    width: 32%;
    margin-right: 2%;
}
.sideBox .sa_period ul.ulBox_two li:nth-child(3n) {
  margin-right: 0;
}

#searchBox .searchBtn{display: none;}
/* SP用 ボタンレイアウト*/
@media screen and (max-width:800px){
    .sideBox{width: 100%;position: fixed;bottom: 0;left: 0;right: 0;margin:0 auto; height: fit-content;top: auto;z-index: 1000;}
    .sideBox.active{#categorySec .sideBox{/* width: 30%; */};max-height: 90vh;overflow-y: scroll;}
    .sideBox .sideBoxInner{padding: 1.5em 2.5em 1.5em;}
    .sideBox .titleBox{position: relative;margin-bottom: 1em;}
    .sideBox .titleBox .ttl{margin-bottom: 0;}
    .sideBox .titleBox .ttl .txtTop{display: flex;font-size: 1.2em;font-weight: bold;}
    .sideBox .titleBox .ttl img{margin-right: 0.3em;margin-top:0;width: 37%;}

    #searchBox .searchBtn {
        display: inline-block;
        background-color: inherit;
        padding: 0.1em;
        position: absolute;
        right: -1em;
        bottom: 0em;
    }
    #searchBox .searchBtn .searchCircle{
        transform:ease-in-out .3s;
        border: 1px solid #909090;
        width: 40px;
        height: 40px;
        padding: 0;
        border-radius: 50%;
        position: relative;
    }
    #searchBox .searchBtn .searchArrow{
        width:20px;
        height:9px;
        position: absolute;
        right: 0;
        left: 0;
        margin: auto;
        background:#909090;
        display: inline-block;
        clip-path: polygon(50% 0, 100% 50%, 100% 100%, 50% 50%, 0 100%, 0 50%);
    }

    #searchBox .searchBtn .searchArrow:first-child{
        top: calc(0% + 9px);
    }
    #searchBox .searchBtn .searchArrow:last-child{
        bottom: calc(0% + 11px);
    }

    #searchBox .searchBtn.active .searchArrow{
        clip-path: polygon(50% 50%, 100% 0, 100% 50%, 50% 100%, 0 50%, 0 0);
    }
    #searchBox .searchBtn.active .searchArrow:first-child{
        top: calc(0% + 11px);
    }
    #searchBox .searchBtn.active .searchArrow:last-child{
        bottom: calc(0% + 10px);
    }
    
    .sideBox{transform: translateY(92%);transition: .5s;}
    .sideBox.active{transform: translateY(0%);transition: .5s;}
        
    .sideBox .checkBox .ttl{font-size:1.7em; }
    .sideBox ul{display: flex;flex-wrap: wrap;justify-content: space-between;}
    .sideBox ul li{width: 50%;}
    .sideBox ul li label{margin: 0.5em 0.5em;font-size: 130%;} 
    .sideBox ul.ulBox_two.ulBox_age li label{font-size:130%;}
    .sideBox .sa_period ul.ulBox_two {justify-content: flex-start;}
    .sideBox .sa_period ul.ulBox_two li{
        width: 23%;
        margin-right: 2%;
    }
    .sideBox .sa_period ul.ulBox_two li:nth-child(3n) {margin-right: 2%;}
    .sideBox .sa_period ul.ulBox_two li:nth-child(4n) {margin-right: 0;}
    .sideBox .sa_period ul li label{
    margin: 9% auto 0;
    padding: 0.5em 12% 0.5em;
    width: 100%;
}
   
}
@media screen and (max-width:380px){
    
    #searchBox .searchBtn{bottom: 8%;}
    #searchBox .searchBtn .searchCircle{width: 25px;height: 25px;}
    #searchBox .searchBtn .searchArrow{width: 15px;height:7px; }
    #searchBox .searchBtn .searchArrow:first-child{top: calc(0% + 10px);}
}


/* */
.page-numbers{display: flex;justify-content:center;}
.page-numbers li{margin:0 0.5em}