@charset "utf-8";

/*★下層用CSS*/

#footerArea {padding-bottom: 3em;}


/*右側：検索ボックス*/
.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;}
#searchBox .backBtn{display:none;}
.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(110%);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);}
}


/* ページネーション */
 
ul.page-numbers{display: flex;justify-content:center;gap: 6px;}
ul.page-numbers li{margin:0 0.5em;align-content: center;}
ul.page-numbers li a.page-numbers,
ul.page-numbers li span.page-numbers.current{
    position: relative;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding-bottom: 0;
    color: #b75e2c;
    background-color: #fff;
    border-radius: 3px;
    transition: color .3s cubic-bezier(0.25, 1, 0.5, 1);
    /* transition: .2s ease-in-out; */
    /* opacity: 1; */
}
ul.page-numbers li a.page-numbers.prev,
ul.page-numbers li a.page-numbers.next{
    width: 45px;
}
ul.page-numbers li a.page-numbers:before,
ul.page-numbers li span.page-numbers.current:before{
    position: absolute;
    top: -2px;
    left: -2px;
    z-index: -1;
    width: calc(100% + 4px);
    height: calc(100% + 4px);
    content: "";
    background-color: #ea8046;
    border-radius: 5px;
    /* transition: .2s ease-in-out; */
}
ul.page-numbers li span.page-numbers:hover,
ul.page-numbers li a.page-numbers:hover {
    color: #fff;
}

ul.page-numbers li span.page-numbers:hover.prev::after,
ul.page-numbers li span.page-numbers:hover.next::after,
ul.page-numbers li a.page-numbers:hover.prev::after,
ul.page-numbers li a.page-numbers:hover.next::after {
    background-color: rgba(0,0,0,0);
    background-image: linear-gradient(90deg, #e5004d 0%, #ff324b 23.44%, #ff5d02 47.92%, #ff7204 72.4%, #f5a000 100%, #f5a000 100%)
}

ul.page-numbers li span.page-numbers.current,
ul.page-numbers li a.page-numbers.current {
    color: #a6a6a6;
    pointer-events: none;
    background-color: #f2f2f2
}

ul.page-numbers li span.page-numbers.current::before,
ul.page-numbers li a.page-numbers.current::before {
    background-color: #cbcbcb;
}
@media screen and (max-width: 768px) {
    ul.page-numbers {
        gap: 2.5%;
    }
    ul.page-numbers li{margin:0;}
    ul.page-numbers li span.page-numbers.current,
    ul.page-numbers li a.page-numbers {
        width: 35px;
        height: 35px;
    }
}




/* 固定バナー */

.sessionBnr{
    text-align: center;
}
.fixedBnr a{
    max-width: 90vw;
}
/* ------------------------------------------------------------------
   popup表示用 ボタン
------------------------------------------------------------------ */
{}
.popupSearchBox{
    width: 98%;
    max-width: 600px;
    margin: auto;
    background: #efefef;
    border: 1px solid #d5d5d5;
    padding: 0.8em;
    z-index: 9990;
}
@media screen and (min-width: 800px) {
    .popupSearchBox{display:none;}
}
 .popupSearchBox .popupSearchBoxInner{
    text-align: center;
}
 .popupSearchBox .popupSearchBoxInner{}
 .popupSearchBox .popupSearchBoxInner .searchHeadTxt{
    text-align: center;
    font-weight: bold;
    margin-bottom: 0.3em;
}
 .popupSearchBox .popupSearchBoxInner .searchLists{
    justify-content: center;
}
 .popupSearchBox .popupSearchBoxInner .searchLists li{
    padding: 0.4em 0.75em;
    
}
 .popupSearchBox .popupSearchBoxInner .searchLists li.borderLists{border-right: 1px solid #d5d6d5;}
 .popupSearchBox .popupSearchBoxInner .searchLists li.searchInfo{border:none;background: #d21926;color: #fff;border-radius: 4px;padding: 0.4em 0.95em;}


#popupHeaderFadeIn{display: block;transition: 0.4s ease-in-out;height: 0;opacity: 0;}
#popupHeaderFadeIn.is-active{height: auto;opacity: 1;}
#popupHeaderFadeIn.is-active .popupSearchBox{position:fixed;top: 63px;right: 0;left: 0;}


/* ------------------------------------------------------------------
   popup 
------------------------------------------------------------------ */
.lity {
  z-index: 9990;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  white-space: nowrap;
  background: #0b0b0b;
  background: rgba(35, 35, 35, 0.5);
  outline: none !important;
  opacity: 0;
}
.lity.lity-opened {
  opacity: 1;
}
#popup{height:auto;/* max-height: 100vh!important; */}
/*右側：検索ボックス*/
#popup .titleBox{display:none;}
#popup.sideBox{width: 90vw;background: #f8f8f8;transform: translateX(0%) translateY(120%);z-index: 10000;overflow: auto;}
.lity-content #popup.sideBox{transform: translateX(-50%) translateY(45%);}

#popup.sideBox .sideBoxInner{padding: 1em 1.5em 1.2em;}
#popup.sideBox #searchBox{font-size:0.75em;}
#popup.sideBox #searchBox .searchBoxInner{
    max-height: 57vh;
    overflow-y: scroll;
    background: #fff;
    padding: 2.5%;
}
#popup.sideBox .titleBox .ttl{font-size:1.4em;margin-bottom:1em;}
#popup.sideBox .titleBox .ttl img{display:block;width:100%;max-width:140px;height:auto;margin-bottom:.5em;}
#popup.sideBox .checkBox .ttl{font-weight:700;border-left:4px solid #e85a24;padding-left:.5em;}
#popup.sideBox ul{margin: 1em auto 1.6em;padding-left: 2.5%;}
#popup.sideBox ul.ulBox_two{
    display: flex;
    justify-content: normal;
    /* flex-wrap: wrap; */
    gap: 0.7em 2%;
}
#popup.sideBox ul.ulBox_two li{
    width: auto;
}
#popup.sideBox ul.ulBox_two.ulBox_age li label{
    font-size: 130%;
}
#popup.sideBox ul li input{/* display:none; */}
#popup.sideBox ul li input:checked~label{border:1px solid #ea8046;background:#ea8046;color:#fff;}
#popup.sideBox ul li label{font-size: 130%;padding: .5em 1.25em .5em;margin: 0;}
#popup.sideBox .otherOptionBox ul{display:flex;flex-wrap:wrap;margin-bottom:2em;justify-content: normal;gap: 0.5em 2%;}
#popup.sideBox .otherOptionBox li{font-size:.6em;width: auto;}
#popup.sideBox .otherOptionBox label{margin:.2em;}
#popup.sideBox button{color:#fff;text-align:center;margin: 1em auto;padding:.7em 3em;border:none;background-color:#ee141e;background-repeat:no-repeat;background-position:95% center;display:block;cursor:pointer;}

#popup.sideBox .sa_period ul.ulBox_two {justify-content: flex-start;}
#popup.sideBox .sa_period ul.ulBox_two li{
    /* width: 32%; */
    margin-right: 0;
}
#popup.sideBox .sa_period ul.ulBox_two li:nth-child(3n) {
  margin-right: 0;
}
#popup.sideBox .backBtn{display:block;text-align:center;}
#popup.sideBox .backBtn a{background:#d9d9d9;color:#000;padding:0.4em 1.3em;border:1px solid #b7b7b8;border-radius:4px;}

#searchBox .searchBtn{display: none;}

/* SP用 ボタンレイアウト*/
/* @media screen and (max-width:800px){
    .popupBox{width: 84vw;position: fixed;bottom: 0;left: 0;right: 0;margin: auto;height: fit-content;top: auto;z-index: 1000;filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, .75));background: #fff;}
    .popupBox.active{#categorySec .popupBox{/* width: 30%; */};max-height: 90vh;overflow-y: scroll;}
    .popupBox .popupBoxInner{padding: 1.5em 5% 1.5em;}
    .popupBox .titleBox{position: relative;margin-bottom: 1em;}
    .popupBox .titleBox .ttl{margin-bottom: 0;}
    .popupBox .titleBox .ttl .txtTop{display: flex;font-size: 1.2em;font-weight: bold;}
    .popupBox .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);
    }
    
    .popupBox{transform: translateX(-50%) translateY(50%);transition: .5s;}
    .popupBox.active{transform: translateY(0%);transition: .5s;}
        
    .popupBox .checkBox .ttl{font-size:1.7em; }
    .popupBox ul{display: flex;flex-wrap: wrap;/* justify-content: space-between; */}
    .popupBox ul li{/* width: 50%; */}
    .popupBox ul li label{/* margin: 0.5em 0; */font-size: 135%;} 
    .popupBox ul.ulBox_two.ulBox_age li label{font-size:130%;}
    .popupBox .sa_period ul.ulBox_two {justify-content: flex-start;}
    .popupBox .sa_period ul.ulBox_two li{
        width: 23%;
        margin-right: 2%;
    }
    .popupBox .sa_period ul.ulBox_two li:nth-child(3n) {margin-right: 2%;}
    .popupBox .sa_period ul.ulBox_two li:nth-child(4n) {margin-right: 0;}
    .popupBox .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);}
}