@charset "UTF-8";
/* BrandList
   ========================================================================== */

#sidebar ul {
	width: 100%;
	overflow: hidden;
	background: #f5f5f5;
	padding:10px;
	border-bottom:2px solid #D40012;
	z-index: 9999;
	display: flex;
}


#sidebar li {
	display:inline-block;
	text-align: center;
	border-right: 1px #808080 solid;
	padding: 0 1rem;
}

#sidebar li:first-child {
	font-weight: bold;
}

#sidebar li:last-child {
	border: none;
}

#fuatured_brand li:hover{
	opacity: 0.7;
}

.brand .brand_kana{
	font-size: 70%;
}

.brand .brand_each_left{
	display: flex;	
	align-items: center;
}
.brand .brand_each_left img{
    width: 100%;
    height: 58px;
}

/*  PC用*/
@media screen and (min-width: 767px) {
	
	#sidebar{
		width:100%;
	}
	.sidebar__inner a{
		text-decoration: underline;
	}
	.pc_list{
		margin-bottom: 15px;
	}
	.pc_list li{
		display: inline-block;
		width : calc(98% / 5);
		text-align:center;
		border: 1px #ccc solid;
		padding: 5px;
		margin-bottom: 5px;
	
	}
	.pc_list li img{
		margin: 5px 0;
	}
	.pc_list .mini{
		font-size: 60%;
	}
	.pc_list p{
		line-height: 1;
	}
	.brand_each{
		width : calc(98% / 5);
		border: 1px #ccc solid;
		padding: 5px;
		margin-bottom: 5px;
		display: inline-flex;
		gap: 0.5rem;
		flex-direction: column;
		align-items: center;
		text-align: center;
	}

	.brand_each:hover{
		opacity: 0.7;
		background-color:#f5f5f5;
	}
	/* 追随メニューの表示位置 */
.initial_table h3 span[id] {
  display: block;
  height: 3rem;
  margin-top: -3rem;
  content: "";
}
.initial_table h3 {
	line-height: 1.5em;
	padding: 0 0 0 5px;
	border-bottom: 4px solid #f5f5f5;
	font-size: 15px;
	margin:25px 0 15px 0;
	font-size: 120%;
	font-weight: bold;
}
.title {
	pointer-events: none;
}

}
	 /* スマホ用 */
@media screen and (max-width: 767px) {

.sidebar{
	display:none;
}
	#brand_list{
		border-top:double 5px #6d7fa3;
		padding-top: 15px;
		margin-top: 30px;
	}

	.sp_list li {
		width: 100%;
		border: 1px #ccc solid;
		margin-bottom: 5px;
	}
	.sp_list li img{
		display: inline-block;
		width: 40%;
		vertical-align: bottom;
	}
	.sp_list p{
		width: 55%;
		height: 50px;
		display: inline-block;
	}
	.sp_list .mini{
		font-size: 60%;
	}
	.sp_list p{
		line-height: 1.2;
		padding-top: 5px;
	}

	.sidebar_sp{
		background: none;
	}
	.sidebar_sp li{
		display: inline-block;
		border: 1px solid #ccc;
		width : calc(97% / 9);
		text-align: center;
		margin:0 1px 5px 0;
		padding: 5px 0;
	}
	.initial_table h3{
		border: 1px solid #ccc;
		padding: 10px 0;
		margin-bottom: 3px;
	}

	/* アコーディオンの矢印用 */

.title {
		display: block;
		position: relative;
		margin: 0;
		padding-left: 10px!important;
		font-size: 1.25em;
		font-weight: normal;
		cursor: pointer;
		background: #f5f5f5;
	}

	.title{
		position: relative;
	}
	
	.title:after {
		content: "";
		position: absolute;
		right: 25px;
		top: 38%;
		transition: all 0.2s ease-in-out;
		display: block;
		width: 8px;
		height: 8px;
		border-top: solid 2px #666;
		border-right: solid 2px #666;
		-webkit-transform: rotate(135deg);
		transform: rotate(135deg);
	}
	
	.title.open:after {
		-webkit-transform: rotate(-45deg);
		transform: rotate(-45deg);
		top: 45%;
	}
	.brand_list{
		margin-bottom: 5px;
	}
	.brand_list li{
		border-bottom: 1px solid #ccc;
		border-left:1px solid #ccc;
		border-right:1px solid #ccc;
		padding: 10px;
		font-weight: bold;
		display: flex;
		gap: 1rem;
	}

	
	/* アコーディオン用 */
.model_p 	.title {
	pointer-events: all;
}

.toggle {
	display: none;
}
	
	
}