@charset "utf-8";
/* CSS Document */
.brand-list-container {
    font-family: "-apple-system, BlinkMacSystemFont", "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "游ゴシック Medium", YuGothic, YuGothicM, "メイリオ", Meiryo, sans-serif;
}

.brand-list-container li {
    list-style: none;
}

.brand-list-container a {
    text-decoration: none;
    color: #000; /* リンクの色 */
}

/* 表示位置 */
.brand-list-container{
	position: absolute;
    top: 140px;
    z-index: 18;
    display: none;
    width: 100%;
    padding: 20px 0;
    font-size: 14px;
    background: #fbfbfb;
}

/* 親要素の中央揃えのための基本スタイル */
.container{
 max-width: 1000px;
 margin: auto;
}

.category-header{
	padding: 30px 15px 35px;
    text-align: center;
}

.category-header__heading{
	position: relative;
	text-align: center;
	padding-bottom: 10px;
	font-size: 1rem;
    line-height: 1.5;
    color: #333;
}

.category-header__heading::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;  /* 中央から開始 */
    transform: translateX(-50%);  /* 中央に配置 */
    width: 50%;  /* 線の幅を50%に設定。必要に応じて調整可能 */
    border-bottom: 1px solid lightgray;
}

.brand-list-container__wrap {
    position: relative;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    justify-content: space-between;
    width: 1200px;
    margin: 0 auto;
}

.button-header{
	background: #fbfbfb; 
}

.button-header__heading{
	font-size: 1rem;
	padding: 0.5em 1em;
	text-align: center;
}

.button-container{
	margin: 15px; 
	text-align: center;
}

.brand-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start; /* アイテムを左端から開始 */
}

.brand-item {
  width: 33%; /* コンテナの幅の3分の1 */
  box-sizing: border-box; /* パディングとボーダーを幅に含める */
  font-size: 13px;
  text-align: center;
  margin: 1% 0;
}

/* ブランドアイテム内のリンクスタイル */
.brand-item a {
  color: rgb(35, 171, 221); /* リンクの色 */
  text-decoration: none; /* 下線を消す */
}

.brand-item a:hover {
  text-decoration: underline; /* ホバー時に下線を表示 */
}

.filter-button{
	padding: 0.1em 0.4em;
	margin: 0.4em;
	font-size: 13px;
}

.filter-button-active {
    background-color: #fbfbfb;
}

.filter-title{
	background: #fbfbfb; 
	text-align: center;
}

.filter-title h2{
	font-size: 1.3rem;
	padding: 0.5em 1em;
}

.menu-container {
    width: 100%;
	margin-bottom: 80px;
}

.menu-block {
}

.menu-item {
    position: relative;
    padding: 15px;
    display: flex;
    align-items: center;
	border-top: 1px solid lightgray;
	background: white;
}

.menu-container .menu-block:nth-child(8) .menu-item {
    border-bottom: 1px solid lightgray;
}

.menu-title {
	font-size: 14px;
    flex: 1;
    margin-left: 10px;
	font-weight: 800;
}

.menu-toggle {
	font-size: 14px;
	color: #898989;
    cursor: pointer;
	margin-right: 10px;
}

.category-image {
    width: 30px;
    height: 30px;
    background-color: grey;
    border-radius: 50%;  /* Circle shape */
    margin-left: 10px;
}

.submenu {
    display: flex;         /* Flexboxを使用してコンテンツを整列します。 */
    flex-wrap: wrap;      /* 複数の行にコンテンツを折り返します。 */
	font-size: 14px;
    max-height: 0;
    overflow: hidden;
    list-style-type: none;
    margin: 0;
    transition: max-height 0.3s ease-out;
    background-color: #f7f7f7;  /* Slightly darker gray background */
	margin-bottom: -1px;
}



/* 偶数番目のliの右側の境界線を非表示にします */
.submenu li:nth-child(2n) {
    border-right: none;
}

.arrow {
    display: none;
    font-size: 11px;
	color: #00aaff;
    margin-right: 5%;    /* 右側の余白を追加 */
}