@charset "UTF-8";


/* ------ ランキング01　------ */
.rank01 {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{ margin: -15px 5px 0 -5px; float: left; }
.rank01 .idx .product {margin: 0; padding-bottom: 4px; 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{ margin: 4px 0; font-size: 0.92em; line-height: 1.5em;}
.rank01 .rankinner ul li:before {content: url('../img/list_pink_small.png'); vertical-align: top; padding-right: 3px;}
.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 {display: inline-block; vertical-align: top; width: 31.5%; margin: 0 0 15px 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;}
.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 {margin: -15px 0px 5px -10px; float: left;} 
.rank02 .idx .product {margin: 0; padding: 5px 0; 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 ; font-size: 92%; line-height: 1.5em; 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 {text-align: right;}
.rank02 .inner .exp {margin: 0; padding: 10px 0;}

/* ------ ランキング03----- */
.rank03 { margin: 30px 0.5em 0; padding: 15px;  border: 3px solid ; background: #FFF; -webkit-border-radius: 8px;-moz-border-radius: 8px;border-radius: 8px;}
.rank03 * {-webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box;}
.rank03 .hdx { margin: -35px 0 10px -10px; background-color: ; width: 190px; height: 36px; line-height: 36px; font-size: 1.538em; font-weight: bold; color: #FFF; text-align: center; 
  -webkit-border-radius: 30px 4px 30px 4px; -moz-border-radius: 30px 4px 30px 4px;  border-radius: 30px 4px 30px 4px; }
.rank03 .img-hdx { margin: -40px 0 10px -10px;}
.rank03 .idx  { position: relative; margin-bottom: 10px; padding: 0.4em 0.5em; font-size: 128%; font-weight: bold; line-height: 1.4em; color: ; border-left: 6px solid ; background-color: ; display: block;  text-align: justify; text-justify: inter-ideograph;}
.rank03 .idx::after { position: absolute; left: 0; bottom: 0; content: '';	width: 100%;	 height: 0; border-bottom: 1px solid #CCC;}
.rank03 .exp {padding: 10px 0; color: #444; text-align: justify; text-justify: inter-ideograph;}
.rank03 .r3-box {display: inline-block; vertical-align: top; width: calc( 100% / ) ; margin: 0 0 10px -1px ;border: 1px solid ; }
.rank03 .r3-box .box-index {text-align: center; padding: 2px 0; border-bottom: 1px solid ; background-color: ;}
.rank03 .r3-box .box-dat {text-align: center; padding: 5px 0; font-weight: bold;}
.rank03 .button {text-align: center; display: block; margin: 10px 0;}
.rank03 .button a{padding: 10px 3em; background-color: ; border: 2px solid ; color: #FFF;	line-height: line-height: 1.5em;margin: 0 auto;  -webkit-border-radius: 6px;-moz-border-radius: 6px;border-radius: 6px;}
.rank03 .button a:before{content: '＞'; font-weight: bold; padding-right: 5px;}
.rank03 .button a:hover { background-color: #FFF; 	color: ; text-decoration: none;}



/* ------ ランキング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, #ff847c 0%, #ff847c 49%, #e84a5f 50%, #e84a5f);
    background:-webkit-gradient( linear,left top,left bottom, from(#ff847c), color-stop(0.49,#ff847c), color-stop(0.50,#e84a5f), to(#e84a5f));
}
.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;}
  /* ------ ランキング02　------ */  
  .rank03 .rankinner{margin: 0; padding: 10px 5px ;}
  .rank03 .rankinner .b_link {text-align: center;}
  .rank03 .rankinner .b_link { float: none; margin: 0 0 10px; max-width: 100%;}
  /* ------ ランキング03　------ */  
  .rank03 .r3-box { width: 50%!important;}
}

/* ------ 共通 ------ */
.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;}