@charset "utf-8";

.contents-area .blandType {
	padding: 0px 0px 5px;
	border-bottom: 1px solid #CCC;
	font-size: 106%!important;
	margin-bottom: 10px!important;
}
.contents-area  .blandList{
	letter-spacing: 0.1em;
	width: 100%;
	line-height: 1.5em;
	/* [disabled]margin-bottom: 100px; */
	letter-spacing: -0.5em; /* 文字間を詰めて隙間を削除する */
	text-align: left;
}
.contents-area #japanToys {
	margin-top: 10px;
	margin-bottom: 100px;
}
.contents-area .blandList .box{
	width: 16%;
	text-align: center;
	list-style-type: none;
	padding: 0px;
	display: inline-block;
	vertical-align: top;
	letter-spacing: normal;
	margin: 40px 2% 0px;
}
.contents-area .blandList .box a {
	margin: 0px;
	padding: 0px;
	/* [disabled]text-align: center; */
}

.contents-area .blandList .box a img{
	border: 3px solid #CCC;
	max-width: 100%;
	padding: 0px;
	margin-top: 0px;
	margin-bottom: 0px;
	/* [disabled]text-align: center; */
	height: auto;
}
.contents-area .blandList .box .brandname{
	width: 100%;
	padding: 0px;
	font-size: 88%;
	letter-spacing: normal;
	text-align: center;
	line-height: normal;
	margin: 7px 0px 0px;
}
.contents-area .blandList .box .brandname .pixel11 {
	display: block;
	font-size: 82%;
}

.contents-area .blandList .box .brandgroup{
	font-size: 75%;
	letter-spacing: normal;
	color: #EF8A45;
	text-align: center;
	margin: 0px;
	padding: 5px 0px 0px;
	width: 100%;
	line-height: normal;
}

/*-----------------------------------------------------*/
/*  for -480px                  */
/*-----------------------------------------------------*/
@media screen and (max-width: 480px) {
.contents-area .blandType {
	text-align: center !important;
}
.contents-area .blandList .box{
	width: 48%;
	margin: 20px 1% 0px;
}
.contents-area  .blandList{
	margin-bottom: 0px;
}
}

/* ===============================
  ブランド一覧：flexで整列（PC）
=============================== */
.contents-area .blandList{
  width: 100%;
  line-height: 1.5em;
  text-align: left;

  /* inline-block用のハックをやめる */
  letter-spacing: normal;

  display: flex;
  flex-wrap: wrap;
  gap: 40px 2%;
}

/* 1行あたり「5列」想定（今の16%運用に近い） */
.contents-area .blandList .box{
  margin: 0;               /* gapに任せる */
  padding: 0;
  list-style: none;
  text-align: center;
  vertical-align: top;

  flex: 0 0 16%;
}

/* 画像など既存はそのまま */
.contents-area .blandList .box a img{
  border: 3px solid #CCC;
  max-width: 100%;
  height: auto;
}

/* ===============================
  768px以下：3列（スマホもここで）
=============================== */
@media screen and (max-width: 768px) {

  .contents-area .blandList{
    gap: 20px 2%;
  }

  /* 3列：16% → 32% にする */
  .contents-area .blandList .box{
    flex: 0 0 32%;
  }

  .contents-area .blandType{
    text-align: center !important;
  }
.contents-area .header_text p{
  width: 100%;
  box-sizing: border-box;
  padding-right: 3%;
  padding-left: 3%;
  margin-right: 0;
}
}