@charset "UTF-8";
/**------------------
ニュース
------------------ */
.news-item {
  font-family: OpenSans-Light;
  display: flex;
}

.news-item .news-item-box {
  width: 30%;
  margin-right: 5%;
}

.news-item .news-item-box a {
  display: block;
}

.news-item .news-item-box a .news-item-img {
  margin-bottom: 0.5rem;
}

.news-item .news-item-box a .news-item-img img {
  width: 100%;
}

.news-item .news-item-box a .news-item-text .date {
  font-size: 0.75rem;
  font-family: OpenSans-Light;
}

.news-item .news-item-box a .news-item-text p {
  font-size: 0.9rem;
}

.news-item .news-item-box .read-more {
  text-align: center;
  display: block;
  width: 100%;
  color: #ffffff;
  font-size: 0.8rem;
  background-color: #A6AFB5;
  font-family: OpenSans-Light;
  transition: 0.5s;
}

.news-item .news-item-box:hover .read-more {
  background-color: #38383A;
}

.news-item div.news-item-box:nth-child(n+3) {
  margin-right: 0;
}

@media screen and (max-width: 700px) {
  .news-item {
    display: block;
  }
  .news-item .news-item-box {
    width: 100%;
    margin-bottom: 50px;
  }
  .news-item .news-item-box a .news-item-text .date {
    font-size: 1.25rem;
  }
  .news-item .news-item-box a .read-more {
    padding: 0.5rem;
    font-size: 1.25rem;
  }
}

/**------------------
ラインキング
------------------ */
.ranking-item {
  font-family: OpenSans-Light;
  display: flex;
}

.ranking-item p, .ranking-item h3 {
  margin: 0;
}

.ranking-item .ranking-item-box {
  width: 30%;
  margin-right: 5%;
}

.ranking-item .ranking-item-box .ranking-item-img {
  margin-bottom: 0.5rem;
}

.ranking-item .ranking-item-box .ranking-item-img img {
  width: 100%;
}

.ranking-item .ranking-item-box .ranking-info {
  display: table;
  border-bottom: solid 1px #38383A;
  padding-bottom: 5px;
  width: 100%;
}

.ranking-item .ranking-item-box .ranking-info div {
  display: table-cell;
  vertical-align: middle;
}

.ranking-item .ranking-item-box .ranking-info .rank {
  width: 30px;
  padding-right: 15px;
}

.ranking-item .ranking-item-box .ranking-info .rank span {
  font-family: OpenSans-Light;
  display: block;
  width: 30px;
  height: 30px;
  color: #ffffff;
  text-align: center;
  border-radius: 50%;
  line-height: 30px;
}

.ranking-item .ranking-item-box .ranking-info .rank .rank1 {
  background-color: #38383A;
}

.ranking-item .ranking-item-box .ranking-info .rank .rank2 {
  background-color: #82898e;
}

.ranking-item .ranking-item-box .ranking-info .rank .rank3 {
  background-color: #A6AFB5;
}

.ranking-item .ranking-item-box .ranking-info .rank-title h3 {
  font-size: 0.9rem;
  font-family: OpenSans-Light;
  letter-spacing: 3px;
  text-align: left;
}

.ranking-item .ranking-item-box .ranking-info .rank-title h3 span {
  display: block;
  font-size: 0.75rem;
}

.ranking-item .ranking-item-box .price {
  text-align: right;
}

.ranking-item div.ranking-item-box:nth-child(n+3) {
  margin-right: 0;
}

@media screen and (max-width: 700px) {
  .ranking-item {
    display: block;
  }
  .ranking-item .ranking-item-box {
    width: 100%;
    margin-bottom: 50px;
  }
  .ranking-item .ranking-item-box .ranking-info h3 {
    font-size: 1.5rem;
  }
  .ranking-item .ranking-item-box .ranking-info .price {
    font-size: 1.25rem;
  }
  .ranking-item .ranking-item-box .ranking-item-text .date {
    font-size: 0.75rem;
    font-family: OpenSans-Light;
  }
  .ranking-item .ranking-item-box .ranking-item-text p {
    font-size: 0.9rem;
  }
}

/**------------------
アバウト
------------------ */
.about {
  width: 1100px;
  height: 500px;
  margin: 0 auto;
  margin-bottom: 50px;
}

.about {
  clear: both;
  background-image: url("../img/bg-top-1.png");
  background-repeat: no-repeat;
  background-position: right 50px;
  box-sizing: border-box;
  padding-left: 100px;
  padding-right: 100px;
}

.about h2 {
  margin-bottom: 50px;
}

@media screen and (max-width: 1100px) {
  .about {
    width: 100%;
    padding-left: 50px;
  }
}

@media screen and (max-width: 700px) {
  .about {
    height: 100%;
    padding-left: 5%;
    padding-right: 5%;
    background-size: contain;
    padding-bottom: 100%;
    background-position: center bottom;
  }
  .about section {
    margin: 0;
  }
  .about section img {
    max-width: 100%;
  }
  .about p {
    text-shadow: #FFF 1px 1px 2px, #FFF -1px 1px 2px,
 #FFF 1px -1px 2px, #FFF -1px -1px 2px;
  }
}