@charset "utf-8";

/* Layout
-------------------------------------------------- */
/* コンテンツ */
main aside h2{
  font-size:1.8rem;
  text-align:center;
  margin-top:10px;
}
main #contents{
  margin-top:20px;
  border-top:1px solid #fe5c5c;
}
main #contents ul.figure{
  margin-top:20px;
  margin-bottom:10px;
  display:flex;
}
main #contents p.lead{
  line-height:130%;
  margin-bottom:20px;
}
main #contents p.lead span.bold{
  font-weight:bold;
}

/* 製品リスト */
main #contents ul.products_list{
  margin-top:20px;
  display:flex;
  flex-wrap:wrap;
}
main #contents ul.products_list li{
  width:50%;
  box-sizing:border-box;
  margin-bottom:20px;
}
main #contents ul.products_list li:nth-child(odd){
  padding-right:10px;
}
main #contents ul.products_list li:nth-child(even){
  padding-left:10px;
}
main #contents ul.products_list .photo{
  text-align:center;
}
main #contents ul.products_list .photo img{
  max-height:80px;
}
main #contents ul.products_list .text{
  margin-top:10px;
}
main #contents ul.products_list .text h3{
  font-size:1.8rem;
  text-align:center;
  margin-bottom:5px;
}
main #contents ul.products_list .text h3 a{
  color:#000000;
  font-weight:normal;
}
main #contents ul.products_list .text p{
  line-height:130%;
  font-size:1.4rem;
}

/* note */
main #contents ul.note{
  margin-top:20px;
}
main #contents ul.note li{
  line-height:130%;
  margin-bottom:10px;
  font-size:1.4rem;
  padding-left:1.5em;
  text-indent:-1.5em;
  list-style:disc inside;
}
main #contents ul.note li a{
  font-weight:bold;
}
main #contents ul.note li span{
  color:rgba(220, 20, 60, 1.0);
  font-weight:bold;
}

main #contents .figure{
  margin-top:30px;
}
main #contents .figure ul{
  display:flex;
  flex-wrap:wrap;
}
main #contents .figure ul li{
  width:25%;
  text-align:center;
  padding-bottom:10px;
}

/* タブレット
-------------------------------------------------- */
@media only screen and (min-width: 667px) {

  /* 製品リスト */
  main #contents ul.products_list li{
    display:flex;
  }
  main #contents ul.products_list .photo{
    width:60px;
    margin-right:10px;
  }
  main #contents ul.products_list .text{
    width:calc(100% - 70px);
  }
  main #contents ul.products_list .text h3{
    text-align:left;
  }

  main #contents .figure ul li{
    width:20%;
  }
}



/* PC
-------------------------------------------------- */
@media only screen and (min-width: 750px) {

  /* コンテンツ */
  main{
    display:flex;
  }
  main aside{
    width:100px;
  }
  main aside h2{
    text-align:left;
    font-weight:normal;
    letter-spacing:-1px;
  }
  main #contents{
    width:calc(100% - 100px);
    border-left:1px solid #fe5c5c;
    border-top:0;
    margin-top:0;
    padding-left:25px;
  }
  main #contents ul.figure{
    margin-top:10px;
  }
}