@charset "UTF-8";

/*===============================================
画面の横幅が798px以上（PC用）
===============================================*/

@media screen and (min-width: 798px){

*, *:before, *:after {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}


  .pc { display:inline; }
  .sp { display:none; }

body { margin: 0; padding: 0;}





/* /// side  ///////////////////////　*/
.side_place {/**/}

.main .side {
    float: right;
    width: 25%;
    margin: 0 0 10%;
}

.side_all {
    margin: 0rem auto 2rem;
    text-align: center;
    width: 100%;
}

.side2{  /* コラム用 */
    margin: 0 auto;
    text-align: center;
    padding: 0;
    width: 100%;
}


/* BN  */
.side_bn-all{
    margin: 0 auto 2rem;
    width: 100%;
}

.side_bnimg{
    margin: 0 auto 2rem;
    width: 100%;}
.side_bnimg img{
}

.side_bn-all a{
transition: 1s all;
}

.side_bn-all a:active,
.side_bn-all a:hover{
opacity: 0.6;}


/* category */
.side_category-all{
    margin: 3rem auto;
    width: 100%;
}


.side_category-all .side-title{
    margin: 3rem auto 1rem;
font-size: 150%;
    font-weight: bold;
    color: #33366a;
    border-bottom: 4px solid #33366a;
}

.side_category-all .side-title .mini-title{
    margin: -1.2rem auto;
    width: 100%;
font-size: 54%;
    padding-bottom: 1rem;
}



.side_category-all .side_category-box{
margin: 0 auto;
    width: 100%;
    text-align: center;
    display: flex;
    flex-wrap: wrap;}
 @media screen and (max-width: 960px) {
.side_category-all .side_category-box{
    margin: 0 auto 0.5rem;
}}


.side_category-all .side_category-box a{
    display: block;
    padding: 0;
    float: left;
    text-decoration: none;
    transition: 1s all;
    color: #333;
    border: 4px solid #fff;
    border-radius: 1.5rem;
width: 100%;
}

.side_category-all .side_category-box a:active,
.side_category-all .side_category-box a:hover{
    text-decoration: none;
    background: #ffff0030;
    border: 4px solid #fff;
    border-radius: 1.5rem;
}



.side_category-all .side_category-box .sidetitle{ 
margin: 0rem auto 0rem;
padding: 0.6rem;
    width: 100%;
    font-size: 1.8rem;
    font-weight: bold;
    line-height: 1.3;
    text-align: center;
    background: #e55d8a;
    color: #fff;}
 @media screen and (max-width: 960px) {
.side_category-all .side_category-box .sidetitle{ 
    font-size: 110%;
}}


.side_category-all .side_category-box .sideimg{ 
    padding: 0.5rem 2%;
    width: 5vw;
    float: left;
    height: 100%;}
 @media screen and (min-width: 1760px) {
.side_category-all .side_category-box .sideimg{ 
    width: auto;
}}
.side_category-all .side_category-box .sideimg img{
    width: 100%;
}


.side_category-all .side_category-box .side-captitle{ 
    margin: 1.4rem 0 0 2%;
    font-size: 100%;
    font-weight: bold;
    line-height: 1.2;
    text-align: left;
    color: #33366a;
    float: left;
    font-feature-settings: "palt";
    width: 68%;}
 @media screen and (max-width: 960px) {
.side_category-all .side_category-box .sidetitle{ 
    font-size: 100%;
}}

.side_category-all .side_category-box .sidecap{ 
    margin: 0.2rem 0% 0 2%;
    font-size: 90%;
    line-height: 1.3;
    text-align: left;
    color: #333;
    float: left;
    width: 68%;}
 @media screen and (max-width: 960px) {
.side_category-all .side_category-box .sidecap{ 
    font-size: 80%;
    width: 75%;
    float: right;
}}





/* キーワード */

.side_keyword-all{
    margin: 3rem auto;
    width: 100%;
}


.side_keyword-all .side-title{
    margin: 3rem auto 1rem;
font-size: 150%;
    font-weight: bold;
    color: #33366a;
    border-bottom: 4px solid #33366a;
}

.side_keyword-all .side-title .mini-title{
    margin: -1.2rem auto;
    width: 100%;
font-size: 54%;
    padding-bottom: 1rem;
}



.side_keyword-all .side_keyword-box{
    margin: 0 auto;
    width: 100%;
    text-align: center;
    display: inline-block;}
 @media screen and (max-width: 960px) {
.side_keyword-all .side_keyword-box{
    margin: 0 auto 2rem;
}}


.side_keyword-all .side_keyword-box a{
    display: block;
    padding: 0;
    text-decoration: none;
    transition: 1s all;
    color: #333;
}

.side_keyword-all .side_keyword-box a:active,
.side_keyword-all .side_keyword-box a:hover{
    text-decoration: none;
    /*background: #ffff0020; */
}

.side-keyword {
    margin: 3rem auto 5rem;
    text-align: center;
    padding: 0.6rem 0;
    border: 3px solid #33366a;
    border-radius: 1rem;
    width: 90%;
}



.side_keyword-box ul{
    margin: 0 auto 1rem;
    text-align: center;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
}

.side_keyword-box ul li{
    margin: 0.6rem;
    text-align: center; 
    color: #333;
    border: 1px solid #ccc;
    border-radius: 1rem;
    display: block;
}

.side_keyword-box ul li.key{
position: relative;
    text-align: center; 
    font-size: 1.6rem;
    color: #333;
    display: block;
     text-indent: 0.4em;
}

.side_keyword-box ul li.key a{
    color: #333;
    font-weight: 500;
    display: block;
    text-decoration: none;
    padding: 5px 1.4rem;
    float: left;
}

.side_keyword-box ul li.key a:active,
.side_keyword-box ul li.key a:hover{
    color: #7ac543;
    display: block;
    text-decoration: none;
    background: #ffff0030;
    border-radius: 1rem;
}

.side_keyword-box ul .key::before{
content: "#";
    position: absolute;
    text-align: right;
    font-size: 2rem;
    font-weight: bold;
    color: #7ac543;
    left: 0%;
    top: 0.1rem;
}





/* NEWS */
.side_NEWS-all{
    margin: 3rem auto;
    width: 100%;
}


.side_NEWS-all .side-title{
    margin: 3rem auto 1rem;
font-size: 150%;
    font-weight: bold;
    color: #33366a;
    border-bottom: 4px solid #33366a;
}

.side_NEWS-all .side-title .mini-title{
    margin: -1.2rem auto;
    width: 100%;
font-size: 54%;
    padding-bottom: 1rem;
}


.side_NEWS-all  .side_item{
    margin: 2rem auto;
    width: 100%;
    /*display: flex;
    flex-wrap: wrap;*/
}

.side_NEWS-all .side_item .side_news-box{
    margin: 0 auto ;
    padding-bottom: 1rem;
    width: 100%;
    text-align: center;
    display: inline-block;
    /*filter: drop-shadow(0px 2px 2px #8386c020);*/

  overflow: hidden;}
 @media screen and (max-width: 960px) {
.side_NEWS-all .side_item .side_news-box{
    margin: 0 auto 1rem;
}}


.side_NEWS-all .side_item .side_news-box a{
    display: block;
    padding: 0;
    float: left;
    text-decoration: none;
    transition: 1s all;
    color: #333;
    text-decoration: none;
    border: 4px solid #fff;
    border-radius: 1.5rem;
}

 .side_NEWS-all .side_item .side_news-box a:active,
 .side_NEWS-all .side_item .side_news-box a:hover{
    text-decoration: none;
    background: #ffff0030;
    border: 4px solid #fff;
    border-radius: 1.5rem;
}



 .side_news-box .sideimg{ 
    padding: 1rem;
    width: 30%;
    float: left;}
 .side_news-box .sideimg img{
    width: 100%;
}


.side_news-box .sidedays{ 
    float: right;
    margin: 1rem 2% 0rem 0;
    font-size: 1.2rem;
    line-height: 1.3;
    text-align: left;
    color: #33366a;
    width: 66%;}
 @media screen and (max-width: 960px) {
.side_news-box .sidedays{ 
    font-size: 90%;

}}

.side_news-box .sidecap{ 
     margin: 0.5rem auto;
    float: right;
    width: 66%;
    font-size: 1.4rem;
line-height: 1.2;
    font-feature-settings: "palt";
    text-align: left;
    font-weight: bold;

  overflow: hidden; /* 二行対応 */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
 @media screen and (max-width: 960px) {
.side_news-box .sidecap2 {
    margin: 1rem auto;
    font-size: 96%;
}}


.side_news-box .sidekey{ 
    margin: 0rem auto;
    width: 66%;
    font-size: 1.2rem;
    line-height: 1.3;
    font-feature-settings: "palt";
    text-align: right;
    float: right;}
 @media screen and (max-width: 960px) {
.side_news-box .sidecap {
    margin: 1rem auto 0.2rem;
    font-size: 96%;
}}





/* RANKING */
.side_ranking-all{
    margin: 3rem auto;
    width: 100%;
/*background: #ffee98;*/
}


.side_ranking-all .side-title{
    margin: 3rem auto 1rem;
font-size: 150%;
    font-weight: bold;
    color: #33366a;
    border-bottom: 4px solid #33366a;
}

.side-title .mini-title{
    margin: -1.2rem auto;
    width: 100%;
font-size: 54%;
    padding-bottom: 1rem;
}


.side_ranking-all .bxslider_side_item {
    margin: 0rem auto;
    /*display: flex;
    flex-wrap: wrap;*/
}

.bxslider_side_item .side_ranking-box{
    margin: 0rem 0;
    padding: 0;
    text-align: center;
    border-radius: 0.5rem 0.5rem 0 0;
    /*filter: drop-shadow(0px 2px 2px #8386c020);*/
  /*overflow: hidden;*/}
 @media screen and (max-width: 960px) {
.bxslider_side_item .side_ranking-box{
    margin: 0 auto 2rem;
}}



.bxslider_side_item .side_ranking-box .side_inbox{
    margin: 0rem auto;
    padding-bottom: 1rem;
    width: 100%;
    text-align: center;
    display: flex;
    flex-wrap: wrap;

    /*filter: drop-shadow(0px 2px 2px #8386c020);*/
  /*overflow: hidden;*/}
 @media screen and (max-width: 960px) {
.bxslider_side_item .side_ranking-box .side_inbox{
    margin: 0 auto 0;
}}


.bxslider_side_item .side_ranking-box .side_inbox a{
    display: block;
    padding: 0;
    text-decoration: none;
    transition: 1s all;
    color: #333;
    margin: 0rem auto;
    background: #fff;
    border: 4px solid #fff;
    border-radius: 1rem;
    transition: 1s all;
    }

.bxslider_side_item .side_ranking-box .side_inbox a:active,
.bxslider_side_item .side_ranking-box .side_inbox a:hover{
    text-decoration: none;
    background: #ffff0030;
    border: 4px solid #fff;
    border-radius: 1.5rem;
}

.side_ranking-box .side_inbox .sidekoumoku{ 
    padding: 0.8rem;
    float: right;
    margin: 0rem auto 2rem;
    font-size: 110%;
    line-height: 1.3;
    text-align: left;
    color: #fff;
    background: #33366a;
    width: 100%;
    border: 3px solid #fff;
    border-radius: 1rem 1rem 0 0;
    text-align: center;
    font-weight: bold;}
 @media screen and (max-width: 960px) {
.side_news-box .side_inbox .sidekoumoku{ 
    font-size: 90%;

}}

 .side_ranking-box .side_inbox .sideimg{ 
    float: left;
    padding: 1rem;
    width: 30%;
    }
 .side_ranking-box .side_inbox .sideimg img{
    width: 100%;
}


#no1img,
#no2img,
#no3img{position: relative;}

#no1img::after,
#no2img::after,
#no3img::after{
content: "";
    position: absolute;
    width: 3rem;
    height: 3rem;
    z-index: 500;
    left: 1rem;
    top: 1rem;
}

#no1img::after{
    background: url(../img/ic_no1.png) no-repeat;
    background-size: contain;
}
#no2img::after{
    background: url(../img/ic_no2.png) no-repeat;
    background-size: contain;
}
#no3img::after{
    background: url(../img/ic_no3.png) no-repeat;
    background-size: contain;
}



.side_ranking-box .side_inbox .sidecap{ 
margin: 1rem 2% 0.4rem;
    float: right;
    width: 66%;
    font-size: 1.3rem;
    line-height: 1.2;
    font-feature-settings: "palt";
    text-align: left;
    font-weight: bold;

  overflow: hidden; /* 二行対応 */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}
 @media screen and (max-width: 960px) {
.side_ranking-box .side_inbox .sidecap2 {
    margin: 1rem auto;
    font-size: 96%;
}}


.side_ranking-box .side_inbox .sidekey{ 
margin: 0rem 5% 1rem;
    float: right;
    font-size: 1.2rem;
    line-height: 1.3;
    font-feature-settings: "palt";
    text-align: right;
    width: 66%;}
 @media screen and (max-width: 960px) {
.side_ranking-box .side_inbox .sidecap {
    font-size: 96%;
}}


}