@charset "UTF-8";
#brio {
  background: #2b2b2b;
  color: #fff; }
#brio a {
  color: #fff; }
#brio .brio_inner {
  width: 75%;
  margin: 0 auto;
  padding: 3% 0; }
@media only screen and (max-width: 1024px) {
  #brio .brio_inner {
    width: 94%; } }
#brio .brioback {
  text-align: center;
  width: 75%;
  margin: 0 auto;
  padding: 5% 1em 4%; }
#brio .brioback .catch {
  font-size: 1.75rem;
  /*正しく設定しなおしてください。*/
  font-weight: bold;
  line-height: 1.4em;
  padding: 0 0 1%; }
@media only screen and (max-width: 1024px) {
  #brio .brioback .catch {
    font-size: 1.375rem;
    /*正しく設定しなおしてください。*/ } }

#brio #media {
  padding: 0 0 3%;
  margin: 0 auto;
  width: 85%; }
@media screen and (max-width: 1024px) {
  #brio #media {
		padding: 14px 0 0;
		width: 90%; } }
#brio #media .media_list ul {
	display: -webkit-flex;
    display: flex;
	-webkit-flex-wrap: wrap;
    flex-wrap: wrap;
	padding: 10px 0 10px 10px; }
#brio #media .media_list ul li {
	width: 20%;
	padding: 10px; }
@media only screen and (max-width: 959px) {
  #brio #media .media_list ul li {
    width: 25%; } }
@media only screen and (max-width: 560px) {
  #brio #media .media_list ul li {
    width: 40%; } }