/*about*/
#about {
  display: block;
  width: 100%;
  margin-bottom: 150px;
  margin-top:150px;
}
#about h2.ttl {
  font-family: 'Catamaran', sans-serif;
  font-size: 40px;
  font-weight: 900;
  margin-bottom: 30px;
  text-align:center;
}
#about .txt {
  font-family: 'Noto Serif JP', serif !important;
  font-size: 20px;
  margin-left: 0;
  line-height: 1.7;
  text-align:center;
}
#about img {
  width: 60%;
  margin-left: 50px;
  float: right;
}
#about img:hover {
  opacity:0.8;
}
@media (max-width: 768px) {
#about {
  display: block;
  width: 100%;
  margin-bottom: 0;
}
#about h2.ttl {
  font-family: 'Catamaran', sans-serif;
  font-size: 40px;
  font-weight: 900;
  margin:0 5% 30px 5%;
  line-height: 1.7;
    text-align:center;
  width:90%;
  
}
#about .txt {
  font-family: 'Noto Serif JP', serif !important;
  font-size: 20px;
  margin:30px 5% 0 0;
  line-height: 1.7;
  text-align:center;
  width:95%;
}
#about img {
  width: 100%;
  margin: 50px 0;
  float: none;
}
}
/*BRS*/
#brs {
  display: block;
  width: 100%;
   margin-bottom: 150px;
}
#brs img {
  width: 60%;
  float: left;
  border:1px solid #eee;
}
#brs img:hover{
  opacity:0.8;
}
#brs .text_area {
  width: 35%;
  height: 400px;
  margin-left:5%;
  float: right;
 text-align:center;
}
#brs .text_area h2.logo img {
  width: 200px !important;
  height: 117px;
  margin: 30px 0 20px 0;
  float: none;
  border:none;
}
#brs .text_area .txt {
  font-family: 'Noto Serif JP', serif !important;
  font-size: 20px;
  line-height: 1.7;
 text-align:center;
}
@media (max-width: 768px) {
#brs {
  display: block;
  width: 100%;
  margin-bottom: 50px;
}
#brs img {
  width: 100%;
  margin: 50px auto 0 auto;
  float: none;
}
#brs .text_area {
  width: 90%;
  height: 400px;
  float: none;
  text-align: center;
  margin:0 auto;
}
#brs .text_area h2.logo img {
  width: 200px !important;
  height: 117px;
  margin: 0 auto 30px auto;
  float: none;
}
#brs .text_area .txt {
  font-family: 'Noto Serif JP', serif !important;
  font-size: 20px;
  line-height: 1.7;
    margin:30px 5%;
  line-height: 1.7;
    text-align:center;
  width:90%;
}
#brs .text_area .txt br.sp{
  display:none;
  }
}
/*b-r-s pro*/
#pro {
  display: block;
  width: 100%;
   margin-bottom: 150px;
}
#pro .text_area {
  width: 40%;
  height: 400px float:left;
  text-align: center;
}
#pro .text_area h2.logo img {
  width: 200px !important;
  height: 117px;
  margin: 40px auto 20px auto;
  float: none;
}
#pro .text_area .txt {
  font-family: 'Noto Serif JP', serif !important;
  font-size: 20px;
  line-height: 1.7;
  text-align:center;
}
#pro img {
  width: 60%;
  float: right;
}
#pro img:hover{
  opacity:0.8;
}
@media (max-width: 768px) {
  #pro {
  display: block;
  width: 100%;
  margin-bottom: 50px;
}
#pro .text_area {
  width: 90%;
  height: 400px float:left;
  text-align: center;
  margin:30px auto;
}
#pro .text_area h2.logo img {
  width: 200px !important;
  height: 117px;
  margin: 0 auto 30px auto;
  float: none;
}
#pro .text_area .txt {
  font-family: 'Noto Serif JP', serif !important;
  font-size: 20px;
  line-height: 1.7;
   text-align: center;
}
#pro .text_area .txt br.sp{
  display:none;
  }
#pro img {
  width:1000%;
  float: none;
}
}
/*ブラシの種類から探す*/
#brush_search {
  display: block;
  width: 100vw;
  padding: 100px 50px;
  background: #f8f8f8;
  text-align: center;
  margin: 0 calc(50% - 50vw);
}
#brush_search h2 {
  font-family: 'Noto Serif JP', serif !important;
  font-weight: 300;
  font-size: 30px;
  line-height: 1;
  margin-bottom: 40px;
}
#brush_search ul {
  max-width: 1200px;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  margin: 40px auto 0 auto;
}

#brush_search ul li.brush_item {
  width: 250px;
  border-radius: 5px;
  padding: 20px;
  text-align: center;
  border: 1px solid #666;
  font-size: 14px;
}
@media (max-width: 768px) {
  #brush_search ul {
  width: 100%;
 flex-flow: row wrap;
  margin: 40px auto 0 auto;
}
#brush_search ul.top{
  margin-top:0;
  }
#brush_search ul li.brush_item {
  width: 40% ;
  border-radius: 5px;
  padding: 15px;
  margin:10px 5%;
  text-align: center;
  border: 1px solid #666;
  font-size: 14px;
}
}
#brush_search ul li.brush_item:hover {
  border: 1px solid #666;
  background: rgba(255, 255, 255, 0.8);
}
/*Ranking*/
#ranking {
  display: block;
  width: 100%;
  margin: 100px 0;
  padding: 0;
  text-align: center;
}
#ranking h2 {
  font-family: 'Noto Serif JP', serif !important;
  font-weight: 300;
  font-size: 30px;
  line-height: 1;
  margin:0;
  padding:0;
}
#ranking ul {
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  margin: 40px 0 0 0;
}
#ranking ul li {
  width: 18%;
  padding: 0;
  text-align: left;
}
#ranking ul li:hover {
  opacity: 0.7;
  filter: alpha(opacity=70);
  -ms-filter: "alpha(opacity=70)";
}
#ranking ul li .seller_teika {
  color: #666;
  text-align: right;
}
#ranking ul li img {
  border: none;
}
#ranking ul li img.rank_no {
  border: none;
  margin-top: -40px;
  margin-bottom: 15px;
  z-index: 1000;
}
@media (max-width: 768px) {
  #ranking ul {
  display: -webkit-flex;
  display: flex;
 flex-flow: row wrap;
  margin: 40px 0 0 0;
}
#ranking ul li {
  width:40%;
  padding: 0;
  margin:0 5%;
  text-align: left;
}
}
/*NEWS*/
#news {
  display: block;
  width: 100vw;
  margin: 0;
  padding: 100px 0;
  background: #f8f8f8;
  text-align: center;
  margin: 0 calc(50% - 50vw);
}
#news h2 {
  font-family: 'Noto Serif JP', serif !important;
  font-weight: 300;
  font-size: 30px;
  line-height: 1;
  text-align: center;
}
#news .inner {
  max-width: 800px;
  text-align: left;
  display: block;
  margin: 40px auto;
}
@media (max-width: 768px) {
  #news .inner {
  width: 90%;
  text-align: left;
  display: block;
  margin: 40px auto;
}
}
#news .inner ul li {
  border-bottom: 1px #dedede solid;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 12px;
  margin-bottom: 15px;
}
#news .inner ul li.date {
  margin-right: 20px;
  color: #666 !important;
}
/*Merxevo-Rank*/
.my-rank {
  text-align: center;
  padding-bottom: 20px;
}
.my-rank span {
    display: inline-block;
    font-size: 0.9rem;
    padding: 5px 10px;
    color: #fff;
    font-weight: 700;
}
.my-rank .rank1 {
  /** color **/
    background: #ada142;
}
.my-rank .rank2 {
  /** color **/
    background: #aaaaa9;
}
.my-rank .rank3 {
  /** color **/
    background: #af927c;
}
.my-rank .rank4 {
  /** color **/
    background: #000;
}
.my-rank .rank5 {
  /** color **/
    background: #000;
}