body {
    font-family: メイリオ, Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", Osaka, arial, verdana, sans-serif;
	margin: inherit;
}

ul{
	padding-inline-start: initial;
}
/* リスト項目のスタイル調整 */
li {
    list-style: none; /* デフォルトのリストマーカーを削除 */
    position: relative; /* 子要素の位置調整の基準となる */
    padding:0 30px; /* 右の余白を確保（アイコンのスペース） */
}

li {
    flex: 1 1 calc(50% - 10px); /* 2つの列を等しく分け、10pxの間隔を考慮します。 */
    box-sizing: border-box;     /* paddingとborderをwidthに含めるための設定 */
    padding: 10px 5px;  /* Adjusted padding for uniform height */
	height: 50px;
    border-bottom: 1px solid lightgray;  /* Border instead of dashed line */
    padding-left: 3%;  /* No padding on the left */
    display: flex;       /* Flexboxコンテナにする */
    justify-content: space-between;  /* アイテム間のスペースを最大にして、アイテムを両端に配置する */
    align-items: center; /* アイテムを垂直方向に中央揃えにする */
}

/* リンクのスタイルをFlexboxコンテナとして設定 */
li a {
    display: flex; /* Flexboxを使用 */
    justify-content: space-between; /* 子要素をコンテナの両端に配置 */
    align-items: center; /* 子要素を垂直方向の中央に配置 */
    text-decoration: none; /* リンクの下線を削除 */
    color: black; /* リンクのテキスト色を黒に設定 */
	font-size: 14px;
    width: 100%; /* リンクの幅をリスト項目いっぱいに設定 */
    padding: 5px; /* 内側のスペースを追加（お好みで調整） */
}

/* テキストのスタイリング */
li a .menu-title {
    margin-right: auto; /* 必要に応じて右側にスペースを追加 */
}

/* アイコンのスタイリング */
li a .arrow i {
    /* 必要に応じてスタイルを調整 */
    font-size: 12px; /* アイコンのサイズを12pxに設定 */
}

.container{
 max-width: 1000px;
 margin: auto;
}

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

.category-header__heading{
	position: relative;
	padding-bottom: 10px;
	font-size: 18px;
    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;
}

.button-header{
	background: #f7f7f7; 
}

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

.button-container{
	margin: 15px; 
}

.brand-list{
	margin-bottom: 5em;
}

.filter-button{
	padding: 0.1em 0.4em;
	margin: 0.4em;
	font-size: 1rem;
}

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

.filter-title{
	background: #f7f7f7; 
}

.filter-title h2{
	font-size: 1rem;
	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 {
    font-size: 11px;
	color: #00aaff;
    margin-right: 5%;    /* 右側の余白を追加 */
}