@charset "utf-8";
/* CSS Document */

@import "../css/common.css";
@import "../css/response.css";
@import "../css/design.css";
@import "../css/icon.css";
@import "../css/font-awesome.min.css";


/*-- 共通 --*/
.shoprank{font-size:80%; margin-bottom:5px; text-align:left;}

/*-- アイコン --*/
.ramazon:before{display:inline-block; content:"a"; background-color:black; color:gold; -moz-border-radius:10%; -webkit-border-radius:10%; -khtml-border-radius:10%; border-radius:10%; padding:0px 3px; font-size:14px; font-weight:bold; margin:0 3px; text-decoration:none; line-height:1;}
.rgetchu:before{display:inline-block; content:"G"; background-color:#FFFFFF; color:#EF5898; -moz-border-radius:20%; -webkit-border-radius:20%; -khtml-border-radius:20%; border-radius:20%; padding:0px 3px; font-size:14px; font-weight:bold; margin:0 3px; text-decoration:none; line-height:1; border:#E4BACE 1px solid;}
.rdmm:before{display:inline-block; content:"D"; background-color:#E90000; color:#ffffff; -moz-border-radius:20%; -webkit-border-radius:20%; -khtml-border-radius:20%; border-radius:20%; padding:0px 3px; font-size:14px; font-weight:bold; margin:0 3px; text-decoration:none; line-height:1;}
.ndate .release:before{content:"予定"; display:inline-block; color:#fff; background-color:#00F; padding:2px; margin-right:4px; font-size:80%; -webkit-border-radius:4px; -moz-border-radius:4px; -ms-border-radius:4px; border-radius:4px;}
.ndate .newitem:before{content:"新作"; display:inline-block; color:#fff; background-color:#F00; padding:2px; margin-right:4px; font-size:80%; -webkit-border-radius:4px; -moz-border-radius:4px; -ms-border-radius:4px; border-radius:4px;}
.ndate .onsales:before{content:"発売日"; display:inline-block; color:#fff; background-color:#666; padding:2px; margin-right:4px; font-size:80%; -webkit-border-radius:4px; -moz-border-radius:4px; -ms-border-radius:4px; border-radius:4px;}
.ndate .onsalesd:before{content:"配信日"; display:inline-block; color:#fff; background-color:#666; padding:2px; margin-right:4px; font-size:80%; -webkit-border-radius:4px; -moz-border-radius:4px; -ms-border-radius:4px; border-radius:4px;}
.rst-even {display:inline-block; margin:0 auto; padding:0; font-size:70%; color:#090;}
.rst-even:before {display:block; font-family:'FontAwesome'; content:"\f061"; color:#090; margin:0 0 0 4px; font-size:inherit; font-size:150%;}
.rst-new {display:inline-block; margin:0 auto; padding:0 1px; color:#fff; background-color:#F00; font-size:70%; -webkit-border-radius:4px; -moz-border-radius:4px; -ms-border-radius:4px; border-radius:4px;}
.rst-up {display:inline-block; margin:0 auto; padding:0; font-size:70%; color:#F00;}
.rst-up:before {display:block; font-family:'FontAwesome'; content:"\f148"; color:#F00; margin:0 0 0 4px; font-size:inherit; font-size:150%;}
.rst-down {display:inline-block; margin:0 auto; padding:0; font-size:70%; color:#00F;}
.rst-down:before {display:block; font-family:'FontAwesome'; content:"\f149"; color:#00F; margin:0 0 0 4px; font-size:inherit; font-size:150%;}


/** Image **/
.itemimg .coverimg {position:relative; color:#FFF; padding:0px;}
.itemimg .coverimg img {border:none !important; margin:0 !important; padding:0 !important;}
.itemimg img.lazy {width:140px; height:auto;}

/** Ranking LIST **/
.item-box .rank .rnumber {margin-bottom:6px; font-size:140%; font-weight:bolder; color:#900; text-align:left;}
.item-box .rank .rst {}

/** Link List **/
.link-list {width:100%; margin:0 auto 24px;}
.link-list > ul {width:100%; margin:0 auto; display:-webkit-box; display:-ms-box; display:-ms-flexbox; display:-webkit-flex; display:flex; -ms-flex-wrap:wrap; -webkit-flex-wrap:wrap; flex-wrap:wrap;}
.link-list > ul > li {margin:0 auto; padding-bottom:12px; -webkit-box-flex:0; box-flex:0; -webkit-flex:0 0 auto; flex:0 0 auto; -webkit-flex-basis:30%; -moz-flex-basis:30%; -ms-flex-basis:30%; flex-basis:30%; max-width:30%;}
.link-list > ul > li a {display:block; width:100%; padding:10px 0; color:#111; border:#CCC 1px solid; font-weight:bolder; filter:progid:DXImageTransform.Microsoft .gradient(GradientType=0,startColorstr='#FFF', endColorstr='#E6E6E6'); -ms-filter:"progid:DXImageTransform.Microsoft.gradient(GradientType=0,startcolorstr=#FFF, endcolorstr=#E6E6E6))"; background:-moz-linear-gradient(top,#FFF 0%,#E6E6E6); background:-webkit-gradient(linear, left top, left bottom, from(#FFF), to(#E6E6E6)); background:linear-gradient(to bottom,#FFF 0%,#E6E6E6); -webkit-border-radius:20px; -moz-border-radius:20px; border-radius:20px;}
.link-list > ul > li a:hover {background:inherit; filter:none; background-color:#F0F0F0; color:#666;}
.link-list > ul > li span {display:block; width:100%; padding:10px 0; color:#666; border:#CCC 1px solid; font-weight:bolder; background-color:#F0F0F0; -webkit-border-radius:20px; -moz-border-radius:20px; border-radius:20px;}


/*-- モバイルレイアウト : 768 px以下 --*/
@media only screen and (min-width: 0px) and (max-width: 768px) {
  /** Ranking LIST **/
  #ranking-list {width:100%; margin:0 auto 12px;}
  #ranking-list > p {width:95%; font-size:80%; color:#333; text-align:left; margin:0 auto 12px;}
  #ranking-list > ul {display:block; width:100%; margin:0 auto;}
  #ranking-list > ul > li {display:block; width:95%; margin:0 auto 12px; padding-bottom:12px; border-bottom:#CCC 1px solid;}
  #ranking-list > ul > li .item-box {display:table; width:100%; vertical-align:top; text-align:center;}
  .item-box .rank {display:table-cell; width:40px; vertical-align:top; text-align:left;}
  .item-box .itemimg {display:table-cell; width:140px; vertical-align:top;}
  .item-box .iteminfo {display:table-cell; width:auto; vertical-align:top; padding-left:10px; box-sizing:border-box; text-align:left;}
  .item-box .iteminfo h4 {margin-bottom:12px;}
  .iteminfo .ndate {font-size:70%; margin:8px 0; text-align:left;}
  .itemimg .coverimg {display:inline-block; overflow:hidden; margin:0;}
  .itemimg .coverimg:after {display:block; width:100%; content:attr(title); position:absolute; left:0; bottom:0; padding:1px; background:#000; filter:Alpha(opacity=60); opacity:0.6; font-size:60%; text-decoration:none; font-style:normal; color:#FFF;}
}

/*-- タブレットレイアウト 769 px ～ 1024 px --*/
@media only screen and (min-width: 769px) and (max-width: 1024px){
  /** Icon **/
  .item {margin-bottom:6px;}
  .actor {margin-bottom:4px;}
  .maker {margin-bottom:4px;}
  /** Ranking LIST **/
  #ranking-list {width:100%; margin:0 auto 12px;}
  #ranking-list > p {font-size:80%; color:#333; text-align:left; margin:0 auto 12px;}
  #ranking-list > ul {display:block; width:100%; margin:0 auto;}
  #ranking-list > ul > li {display:block; width:100%; margin:0 auto 12px; padding-bottom:12px; border-bottom:#CCC 1px solid;}
  #ranking-list > ul > li .item-box {display:table; width:100%; vertical-align:top; text-align:center;}
  .item-box .rank {display:table-cell; width:40px; vertical-align:top; text-align:left;}
  .item-box .itemimg {display:table-cell; width:140px; vertical-align:top;}
  .item-box .iteminfo {display:table-cell; width:auto; vertical-align:top; padding-left:10px; box-sizing:border-box; text-align:left;}
  .item-box .iteminfo h4 {margin-bottom:12px;}
  .iteminfo .ndate {font-size:70%; margin:8px 0; text-align:left;}
  .itemimg .coverimg {display:inline-block; overflow:hidden; margin:0;}
  .itemimg .coverimg:after {display:block; width:100%; content:attr(title); position:absolute; left:0; bottom:0; padding:1px; background:#000; filter:Alpha(opacity=60); opacity:0.6; font-size:60%; text-decoration:none; font-style:normal; color:#FFF;}
}

/*-- デスクトップレイアウト 1024 px ～最大 1280px/16Col  --*/
@media only screen and (min-width: 1025px) {
  /** Icon **/
  .item {margin-bottom:6px;}
  .actor {margin-bottom:4px;}
  .maker {margin-bottom:4px;}
  /** Ranking LIST **/
  #ranking-list {width:100%; margin:0 auto 12px;}
  #ranking-list > p {font-size:80%; color:#333; text-align:left; margin:0 auto 12px;}
  #ranking-list > ul {width:100%; margin:0 auto; display:-webkit-box; display:-ms-box; display:-ms-flexbox; display:-webkit-flex; display:flex; -ms-flex-wrap:wrap; -webkit-flex-wrap:wrap; flex-wrap:wrap;}
  #ranking-list > ul > li {margin:0 0 12px 2%; padding-bottom:12px; border-bottom:#CCC 1px solid; -webkit-box-flex:0; box-flex:0; -webkit-flex:0 0 auto; flex:0 0 auto; -webkit-flex-basis:49%; -moz-flex-basis:49%; -ms-flex-basis:49%; flex-basis:49%; max-width:49%;}
  #ranking-list > ul > li:first-child {margin-left:0;}
  #ranking-list > ul > li:nth-child(2n+1) {margin-left:0;}
  #ranking-list > ul > li .item-box {display:table; width:100%; vertical-align:top; text-align:center;}
  .item-box .rank {display:table-cell; width:35px; vertical-align:top; text-align:left;}
  .item-box .itemimg {display:table-cell; width:140px; vertical-align:top;}
  .item-box .iteminfo {display:table-cell; width:auto; vertical-align:top; padding-left:10px; box-sizing:border-box; text-align:left;}
  .item-box .iteminfo h4 {margin-bottom:12px;}
  .iteminfo .ndate {font-size:70%; margin:8px 0; text-align:left;}
  .itemimg img:hover {filter: alpha(opacity=70); opacity:0.7; -moz-opacity:0.7;}
  .itemimg .coverimg {display:inline-block; overflow:hidden; margin:0;}
  .itemimg .coverimg:hover:after {display:block; width:100%; content:attr(title); position:absolute; left:0; bottom:0; padding:1px; background:#000; filter:Alpha(opacity=60); opacity:0.6; font-size:60%; text-decoration:none; font-style:normal; color:#FFF;}
}