/*-------------------------------------
base
-------------------------------------*/
* {
  box-sizing: border-box; }

html {
  font-size: 62.5%; }

body {
  font-family: "Mplus 1p", "Kokoro", "Roboto", Meiryo, "Hiragino Kaku Gothic Pro", sans-serif;
  color: #333;
  background: #e8e8e8;
  font-size: 16px;
  font-size: 1.6rem;
  line-height: 1.125;
  font-feature-settings: "palt";
  word-break: break-all; }

a {
  color: #337ab7;
  text-decoration: none;
  transition: opacity .3s; }
  a:hover {
    opacity: .7;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; }

em {
  color: #d00e0e;
  font-style: normal;
  font-weight: bold; }

button {
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background: none; }

img {
  max-width: 100%;
  vertical-align: middle;
  border-style: none; }

body, h1, h2, h3, h4, h5, p, ul {
  margin: 0;
  padding: 0; }

ul {
  list-style: none; }

html {
  width: 100%;
  height: 100%; }

body {
  width: 100%;
  height: 100%; }

#react-body {
  width: 100%;
  height: 100%; }

.body-inner {
  width: 100%;
  height: 100%; }

/*-------------------------------------
partial
-------------------------------------*/
/*-------------------------------------
header
-------------------------------------*/
.header {
  position: relative;
  overflow: hidden;
  height: 100%;
  box-shadow: 0 0 15px 0px rgba(0, 0, 0, 0.4);
  color: #fff;
  font-weight: 300; }
  .header a {
    color: #fff; }
  .header .bg-header {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 100%; }
    .header .bg-header div {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%; }
    .header .bg-header .bg-header-01 {
      background: url(../img/ss/1.jpg) no-repeat center top;
      background-size: cover; }
    .header .bg-header .bg-header-02 {
      background: url(../img/ss/0.jpg) no-repeat center top;
      background-size: cover; }
  .header .nav {
    background: rgba(0, 0, 0, 0.8); }
    .header .nav .nav-inner {
      display: -ms-flexbox;
      display: flex;
      margin: 0 auto;
      padding: 10px;
      max-width: 1280px;
      width: 100%;
      -ms-flex-align: center;
          align-items: center; }
    .header .nav .hdg-l1 {
      margin-right: auto; }
    .header .nav .list-nav {
      display: none; }
      .header .nav .list-nav li {
        margin-left: 12px; }
        .header .nav .list-nav li:first-child {
          margin-left: 0; }
  .header .mv {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
        flex-direction: column;
    margin: 0 auto;
    width: 90%;
    height: 100%;
    text-align: center;
    text-shadow: 0 0 2px rgba(0, 0, 0, 0.4), 0 0 8px rgba(0, 0, 0, 0.4);
    -ms-flex-pack: center;
        justify-content: center; }
    .header .mv .lead {
      margin-top: 30px;
      line-height: 2; }

/*-------------------------------------
main
-------------------------------------*/
.main {
  overflow: hidden;
  margin-top: 15px;
  padding-bottom: 15px; }

.list-data {
  margin: 0 auto;
  max-width: 900px;
  width: 100%;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -ms-flex-pack: center;
      justify-content: center; }
  .list-data > li {
    position: relative;
    overflow: hidden;
    margin-top: 12px;
    width: 96%;
    background: #fff;
    box-shadow: 0 0 15px 0px rgba(0, 0, 0, 0.4); }
    .list-data > li:first-child {
      margin-top: 5px; }
    .list-data > li .media {
      display: block;
      box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.2); }
      .list-data > li .media img {
        width: 100%; }
    .list-data > li .list-contents {
      padding: 14px; }
      .list-data > li .list-contents .caption {
        margin-top: 5px;
        font-size: 14px;
        font-size: 1.4rem; }
  .list-data .coverView {
    position: absolute;
    top: 0;
    left: -100%;
    z-index: 2;
    width: 100%;
    height: 100%;
    color: #fff;
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; }
    .list-data .coverView .btn-share {
      position: absolute;
      right: 20px;
      bottom: 20px;
      z-index: 2;
      background: #fff;
      color: #000; }
    .list-data .coverView .btn-website {
      position: absolute;
      right: 85px;
      bottom: 20px;
      z-index: 2;
      background: #fff;
      color: #000; }
    .list-data .coverView .bg-coverView {
      position: relative;
      left: -100%;
      z-index: 1;
      display: block;
      padding: 20px;
      width: 100%;
      height: 100%;
      color: #fff;
      text-align: center; }
      .list-data .coverView .bg-coverView:hover {
        opacity: 1;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; }
    .list-data .coverView .coverView-inner {
      position: relative;
      top: 50%;
      transform: translateY(-50%); }
    .list-data .coverView:after {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: #000;
      content: "";
      opacity: .8;
      -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; }

.comment {
  position: relative;
  left: -100%;
  margin-top: 25px;
  line-height: 1.4; }

.on .coverView {
  left: 0;
  transition: all .3s ease-out; }
  .on .coverView .bg-coverView {
    left: 0;
    transition: all .3s ease-out .2s; }

.on .comment {
  left: 0;
  transition: all .3s ease-out .3s; }

.off .coverView {
  left: 100%;
  transition: all .3s ease-out .4s; }
  .off .coverView .bg-coverView {
    left: 100%;
    transition: all .4s ease-out .2s; }

.off .comment {
  left: 100%;
  transition: all .5s ease-out .1s; }

.col-2 {
  display: table;
  margin-top: 10px;
  width: 100%; }
  .col-2 .col {
    display: table-cell;
    vertical-align: bottom; }

.list-btn {
  margin-left: -5px; }
  .list-btn li {
    display: inline-block;
    margin-left: 5px;
    margin-top: 5px; }
    .list-btn li .btn-publisher {
      background: #e1c854; }
    .list-btn li .btn-category {
      background: #54e16f; }
    .list-btn li .btn-model {
      background: #54b4e1; }

.btn {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 3px;
  color: #fff;
  font-size: 12px;
  font-size: 1.2rem; }

.btn-score {
  text-align: right;
  min-width: 82px; }
  .btn-score a {
    background: #e15454; }

.list-graphs {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
      justify-content: center; }
  .list-graphs li {
    position: relative;
    margin-left: 10px; }
    .list-graphs li:first-child {
      margin-left: 0; }
    .list-graphs li .score {
      position: absolute;
      top: 43%;
      width: 100%;
      text-align: center;
      line-height: 1;
      transform: translateY(-50%);
      font-size: 22px;
      font-size: 2.2rem; }
    .list-graphs li .category-name {
      line-height: 1; }

canvas {
  transform: rotate(-90deg); }

/*-------------------------------------
footer
-------------------------------------*/
/*-------------------------------------
headings
-------------------------------------*/
.hdg-l1 {
  font-weight: 300;
  font-size: 20px;
  font-size: 2rem; }

.hdg-l2 {
  font-weight: 300;
  font-size: 24px;
  font-size: 2.4rem; }

.hdg-l3 {
  margin-top: 5px;
  font-size: 20px;
  font-size: 2rem; }

.hdg-l4 {
  font-size: 18px;
  font-size: 1.8rem; }

/*-------------------------------------
lists
-------------------------------------*/
/*-------------------------------------
Common
-------------------------------------*/
.key_color-01 {
  color: #e1c854 !important; }

.key_color-02 {
  color: #54e16f !important; }

.key_color-03 {
  color: #54b4e1 !important; }

.key_color-04 {
  color: #e15454 !important; }

.align-c {
  text-align: center !important; }

.align-r {
  text-align: right !important; }

.align-l {
  text-align: left !important; }

.w-5 {
  width: 5% !important; }

.w-10 {
  width: 10% !important; }

.w-15 {
  width: 15% !important; }

.w-20 {
  width: 20% !important; }

.w-25 {
  width: 25% !important; }

.w-30 {
  width: 30% !important; }

.w-35 {
  width: 35% !important; }

.w-40 {
  width: 40% !important; }

.w-45 {
  width: 45% !important; }

.w-50 {
  width: 50% !important; }

.w-55 {
  width: 55% !important; }

.w-60 {
  width: 60% !important; }

.w-65 {
  width: 65% !important; }

.w-70 {
  width: 70% !important; }

.w-75 {
  width: 75% !important; }

.w-80 {
  width: 80% !important; }

.w-85 {
  width: 85% !important; }

.w-90 {
  width: 90% !important; }

.w-95 {
  width: 95% !important; }

.w-100 {
  width: 100% !important; }

.mt-5 {
  margin-top: 5px !important; }

.mt-10 {
  margin-top: 10px !important; }

.mt-15 {
  margin-top: 15px !important; }

.mt-20 {
  margin-top: 20px !important; }

.mt-25 {
  margin-top: 25px !important; }

.mt-30 {
  margin-top: 30px !important; }

.mt-35 {
  margin-top: 35px !important; }

.mt-40 {
  margin-top: 40px !important; }

.mt-45 {
  margin-top: 45px !important; }

.mt-50 {
  margin-top: 50px !important; }

.mt-55 {
  margin-top: 55px !important; }

.mt-60 {
  margin-top: 60px !important; }

.mt-65 {
  margin-top: 65px !important; }

.mt-70 {
  margin-top: 70px !important; }

.mt-75 {
  margin-top: 75px !important; }

.mt-80 {
  margin-top: 80px !important; }

.mt-85 {
  margin-top: 85px !important; }

.mt-90 {
  margin-top: 90px !important; }

.mt-95 {
  margin-top: 95px !important; }

.mt-100 {
  margin-top: 100px !important; }

@media screen and (min-width: 414px) {/*414~*/ }

@media screen and (max-width: 500px) {/*~500*/
  .comment {
    margin-top: 20px; }
  .list-graphs li .score {
    top: 38%;
    font-size: 2rem; }
  canvas {
    width: 80px;
    height: 80px; } }

@media screen and (min-width: 768px) {/*768~*/
  html {
    font-size: 70%; }
  .header .nav .nav-inner {
    padding: 10px 20px; }
  .header .nav .list-nav {
    display: -ms-flexbox;
    display: flex; }
  .list-graphs li {
    margin-left: 30px; }
  .hdg-l2 {
    font-size: 5rem; } }

@media screen and (min-width: 1280px) {/*920~*/
  html {
    font-size: 80%; } }

@media screen and (max-width: 340px) {
  html {
    font-size: 60%; } }

@media screen and (min-width: 900px) {
  .main {
    margin-top: 30px;
    padding-bottom: 40px; }
  .list-data {
    max-width: 1280px;
    -ms-flex-pack: justify;
        justify-content: space-between; }
  .list-data > li {
    margin-top: 12px;
    width: 49.5%; }
  .list-data > li:first-child {
    margin-top: 12px; }
  .list-graphs li {
    margin-left: 10px; }
  .list-graphs li .score {
    top: 41%; }
  canvas {
    width: 90px;
    height: 90px; } }

@media screen and (max-width: 400px) {
  .list-data .coverView .coverView-inner {
    font-size: 1.4rem; }
  .comment {
    margin-top: 10px; } }

@media screen and (max-width: 390px) {
  canvas {
    width: 60px;
    height: 60px; } }