@charset "UTF-8";


/* ------ ランキング01　------ */
.rank01 {position: relative; margin: 0 0 15px; padding: 0; border: 4px solid ; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px;}
.rank01 .idx {padding: 8px 0 4px; background-color:  ; display: block; }
.rank01 .idx img{position: absolute; top: -16px; left: 0; max-width: 80px; }
.rank01 .idx .product {margin: 0; padding: 0 0 4px 85px; color: ; font-size: 1.38em; font-weight: bold;} 
.rank01 .rankinner {padding: 15px;}
.rank01 .rankinner .right-column {float: right; width: 58%;}
.rank01 .rankinner .img-set {float: left; max-width: 40%; border: 1px solid #CCC; overflow: hidden;}
.rank01 .rankinner .img-set img {max-width: 100%;}
.rank01 .rankinner .check {padding: 0; color: ; line-height: 2.2em; font-size: 0.92em; font-weight: bold; background-color: #F3F3F3; display: flex;}
.rank01 .rankinner .check .check-idx { margin-right: 5px; padding: 0 6px; color: #FFF; font-weight: bold; background-color: ;}
.rank01 .rankinner ul { padding: 5px 0; list-style: none; display: block;}
.rank01 .rankinner ul li{ position: relative; margin-left: 1.5em; padding: .2em .5em .2em 0 ; font-size: 0.9em; line-height: 1.5em;}
.rank01 .rankinner ul li:before {font-family: 'FontAwesome'; content: "\f0a9"; position: absolute; padding: 0em; left: -1.2em; top: 0.2em; font-size: 1.2em; color: ;}
.rank01 .rankinner .right-column table {margin: 5px 0; width: 100%; text-align: center; border: 1px solid ; border-collapse: collapse;}
.rank01 .rankinner .right-column table th {text-align: center; color: ; border: solid 1px  ; padding : 3px; background-color: ; font-size: 0.92em;}
.rank01 .rankinner .right-column table td{font-weight: bold; border: solid 1px  ; padding: 3px; font-size: 0.92em;}
.rank01 .rankinner .exp { margin: 15px 0 10px; border: 3px solid ; padding: 10px 15px; font-size: 0.92em; line-height: 1.5em; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px;}
.rank01 .rankinner .exp .exp-idx { margin: -20px 0 5px -5px; padding: 0 6px; width: 80px; text-align: center; color: #FFF; font-weight: bold; background-color: ;}
.rank01 .rankinner .r-link {text-align: right;}

/* ------ ランキング02　------ */
.rank02-pt {padding-bottom: 15px; letter-spacing: -.4em;}
.rank02 {position: relative; display: inline-block; vertical-align: top; width: 31.33%; margin:0 1% ;padding: 0; border-width : 2px; border-style: solid; border-color: ; 
  -moz-border-radius: 5px;  -webkit-border-radius: 5px; border-radius: 5px; background-color: #FFF; letter-spacing: 0;}
.rank02-color01 {border-color: ;}
.rank02-color02 {border-color: ;}
.rank02-color03 {border-color: ;}
.rank02-color04 {border-color: ;}
.rank02-color05 {border-color: ;}
.rank02-color06 {border-color: ;}
.rank02-color07 {border-color: ;}
.rank02-color08 {border-color: ;}
.rank02-color09 {border-color: ;}
.rank02 .idx {margin: 0; padding: 5px 5px 0; background-color: ;}
.rank02 .idx-color01 {background-color: ;}
.rank02 .idx-color02 {background-color: ;}
.rank02 .idx-color03 {background-color: ;}
.rank02 .idx-color04 {background-color: ;}
.rank02 .idx-color05 {background-color: ;}
.rank02 .idx-color06 {background-color: ;}
.rank02 .idx-color07 {background-color: ;}
.rank02 .idx-color08 {background-color: ;}
.rank02 .idx-color09 {background-color: ;}
.rank02 .idx img {position: absolute; top: -10px; left: -5px; max-width: 50px;} 
.rank02 .idx .product {margin: 0; padding: 5px 0 10px 45px; font-size: 107%; font-weight: 600; line-height: 1.2em;} 
.rank02 .idx-color01 .product {color: ;}
.rank02 .idx-color02 .product {color: ;}
.rank02 .idx-color03 .product {color: ;}
.rank02 .idx-color04 .product {color: ;}
.rank02 .idx-color05 .product {color: ;}
.rank02 .idx-color06 .product {color: ;}
.rank02 .idx-color07 .product {color: ;}
.rank02 .idx-color08 .product {color: ;}
.rank02 .idx-color09 .product {color: ;}
.rank02 .inner{margin: 0; padding: 10px ;  text-align: justify; text-justify: inter-ideograph;}
.rank02 .inner .img-set { max-width: 100%; border: 1px solid #CCC; text-align: center; overflow: hidden; }
.rank02 .inner .t_link {font-size: 1.08em; line-height: 1.4em; text-align: right;}
.rank02 .inner .exp {margin: 0; padding: 10px 0; font-size: .9em; line-height: 1.4em; color: #333;}

/* ------ 縦並びランキング　------ */
.rank03 {margin: 0.2em 0 1em; padding: 0; line-height: 1.8em;}
.rank03-01 {border: 1px solid ;border-top: 5px solid ;}
.rank03-02 {border: 1px solid ;border-top: 5px solid ;}
.rank03-03 {border: 1px solid ;border-top: 5px solid ;}
.rank03-04 {border: 1px solid ;border-top: 5px solid ;}
.rank03 .idx {position: relative;}
.rank03 .idx-01{margin: 0; padding: 0 5px 5px ; border-bottom: 1px solid ; background-color: ;}
.rank03 .idx-02{margin: 0; padding: 0 5px 5px ; border-bottom: 1px solid ; background-color: ;}
.rank03 .idx-03{margin: 0; padding: 0 5px 5px ; border-bottom: 1px solid ; background-color: ;}
.rank03 .idx-04{margin: 0; padding: 0 5px 5px ; border-bottom: 1px solid ; background-color: ;}
.rank03 .idx img{position: absolute; left: -10px; top: -15px; max-width: 62px;} 
.rank03 .product{margin: 0; padding: 0.4em 0 0 50px; font-size: 1.2em; font-weight: bold; line-height: 1.2em;}
.rank03 .h-01{color: !important;}
.rank03 .h-02{color: ;!important;}
.rank03 .h-03{color: ;!important;}
.rank03 .h-04{color: ;!important;}
.rank03 .rankinner{margin: 0; padding: 10px 20px ; line-height: 150%;}
.rank03 .rankinner .b_link img{float: left; margin: 0 10px 10px 0; max-width: 180px;}
.rank03 .rankinner .t_link{text-align: right; font-size: 1.08em}
.rank03 .exp {padding: 10px 0; font-size: 0.92em; color: #222;}
.rank03 .toku {margin-bottom: 10px;:  vertical-align: middle; font-size: 100%; font-weight: bold; color: #444;}
.rank03 .toku:before {content: '特　徴'; font-size: 1em; color: #FFF; font-weight: bold!important; margin-right: 10px; padding: 5px 20px; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; background: ;}
.rank03 .c-copy1 { font-size: 1em; color: #FFF; font-weight: 600!important; font-style: italic; margin: 20px 0; padding: 3px 2em; background-color: ;
    -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; }
.rank03 .c-copy2 { font-size: 1em; color: #FFF; font-weight: 600!important; font-style: italic; margin: 20px 0; padding: 3px 2em; background-color: ;
    -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; }


/* ------ ランキング04----- */
.rank04 {margin: 0 0 1em; padding: 0; border: 5px solid ;}
.rank04-title {margin: 0; padding: 10px; font-size: 1em; line-height: 1.2em; color: #FFF; font-weight: bold; background-color: ;}
.rank04 .inner {padding: 10px;}
.rank04 .inner .idx {margin-bottom: 5px; padding: 4px 8px; color: #FFF; font-weight: bold; font-size: 0.92em; line-height: 1.2em; background-color: ;}
.rank04 .inner p {margin: 0; padding: 5px 0; font-size: 0.92em; line-height: 1.5em; text-align: justify; text-justify: inter-ideograph; }
.rank04 .img-set {max-width: 100%; text-align: center; overflow: hidden;}
.rank04 .img-set img{ max-width: calc(100% - 2px); }
.rank04 .inner .b-link {margin: 0; padding: 6px; font-size: 0.92em; line-height: 1.2em; text-align: right; color: #FFF; font-weight: normal; background-color: ; display: block;}
.rank04 .inner .b-link:before{content: '≫'; color:; font-size: 1.2em; padding-right: 5px;}
.corner5 {-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;}
.rank04 .inner div.line {margin: 15px 0; line-height: 8px; border-bottom: 1px dotted #CCC;}
.rank04 .inner div:last-child.line {margin: 0; line-height: 8px; border-bottom: none;}

/* ------ リンク表示 ----- */
.rank01 .slink a, .rank02 .slink a, .rank03 .slink a {width: 120px; margin: 5px 0 0 5px; padding: 5px 0; display: inline-block; text-align: center; border:2px solid #FFF; box-shadow: 1px 1px 3px #666; font-size: 12px; font-weight: bold; line-height: 1.2em;color: #FFF; text-decoration:none;
    -webkit-border-radius: 6px;-moz-border-radius: 6px;border-radius: 6px;
    background:-moz-linear-gradient(top, #5fc9f3 0%, #5fc9f3 49%, #2e79ba 50%, #2e79ba);
    background:-webkit-gradient( linear,left top,left bottom, from(#5fc9f3), color-stop(0.49,#5fc9f3), color-stop(0.50,#2e79ba), to(#2e79ba));
}
.rank01 .slink a:hover, .rank02 .slink a:hover, .rank03 .slink a:hover {filter: alpha(opacity=80); -moz-opacity:0.80; -ms-filter: "alpha( opacity=80 )"; opacity:0.80;}

.rank01 .klink a, .rank02 .klink a, .rank03 .klink a {width: 120px; margin: 5px 0 0 5px; padding: 5px 0px; display: inline-block; text-align: center; border:2px solid #FFF; box-shadow: 1px 1px 3px #666; font-size: 12px; font-weight: bold; line-height: 1.2em;color: #FFF; text-decoration:none;
    -webkit-border-radius: 6px;-moz-border-radius: 6px;border-radius: 6px;
    background:-moz-linear-gradient(top, #D11F7E 0%, #D11F7E 49%, #86134f 50%, #86134f);
    background:-webkit-gradient( linear,left top,left bottom, from(#D11F7E), color-stop(0.49,#D11F7E), color-stop(0.50,#86134f), to(#86134f));
}
.rank01 .klink a:hover, .rank02 .klink a:hover, .rank03 .klink a:hover {filter: alpha(opacity=80); -moz-opacity:0.80; -ms-filter: "alpha( opacity=80 )"; opacity:0.80;} 

/* ------ ～479px ------ */
@media screen and (max-width: 479px) {
  /* ------ ランキング01　------ */  
  .rank01 .rankinner .right-column {float: none; width: 100%;}
  .rank01 .rankinner .img-set {float: none; max-width: 100%; margin-bottom: 10px; overflow: hidden;}
  .rank01 .rankinner .r-link {text-align: center;}
  /* ------ ランキング02　------ */  
  .rank02 {width: 100%; margin: 0 0 15px 0;}
  /* ------ ランキング03　------ */  
  .rank03 {width: 100%; margin: 0 0 15px 0;}
  .rank03 .rankinner .b_link img {float: none; max-width: 100%;}
}

/* ------ 共通 ------ */
.bld {font-weight: bold;}
.red {color: #C00;}
.waku {border: 1px solid #CCC;}
.textleft{text-align: left;}
.textright{text-align: right;}
.textcenter{{text-align: center;}
.clr{clear: both;}