@charset "utf-8";


/* -----------------------------------------------------------
    CATALOG
-------------------------------------------------------------- */
#catalog .catalog-area{
	padding: 80px 0 0;
}
@media screen and (max-width: 768px){
	#catalog .catalog-area{
		padding: 40px 0px;
	}
}

@media screen and (min-width: 769px) {
	/* サイドバー追従の為 */
	#wrapper {
		overflow: clip;
	}
}
/*    top-area
-------------------------------------------------------------- */
.top-area .fs-wrap{
	gap: 40px;
	margin: 100px auto 0;
}
.caution-box{
	width: calc((100% - 40px) / 2);
	padding: 35px 20px 30px;
	border: solid 1px var(--main);
	position: relative;
}
.caution-box .box-ttl{
	font-weight: bold;
    font-size: 1.6rem;
    border-bottom: 1px solid var(--cmnblack);
    padding: 0 0 8px;
	margin: 0 0 15px;
}
.caution-box .box-ttl span{
	display: inline-block;
	background: var(--main);
	color: #fff;
	font-weight: bold;
	padding: 8px 15px;
	border-radius: 16px;
	position: absolute;
	top: -16px;
}
.num-list .num-item + .num-item{
	margin: 15px 0 0;
}
.caution-box .num-list .num-item{
	padding: 0 0 0 35px;
}
@media screen and (max-width: 768px){
	#catalog .catalog-area .top-area{
		padding: 0 20px;
	}
	.fs-wrap{
		margin: 30px auto 0;
	}
	.caution-box{
		width: 100%;
	}
}
/*    カタログ一覧
-------------------------------------------------------------- */
.webcatalog-area{
	padding: 80px 0 0;
}

.webcatalog-area .inner{
	display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin: 0 auto;
}

.webcatalog-area .main-contents{
	width: 880px;
}

.webcatalog-area .main-contents .fs-wrap{
	gap: 30px 20px;
	margin: 0 0 60px;
	justify-content: flex-start;
}

.webcatalog-area .main-contents .fs-wrap .brand-box{
	/* width: calc((100% - 30px) / 2); */
	max-width: 475px;
	max-width: 430px;
	min-width: 205px;
	/* width: 100%;
	width: 205px; */
}

/* .webcatalog-area .main-contents .fs-wrap .brand-box.sowa{
	width: 425px;
} */
.webcatalog-area .catalog-box .box-ttl{
	padding: 13px 20px;
    margin: 0 0 20px;
    font-size: 2.8rem;
	line-height: 1;
    font-weight: bold;
    /* background-color: #F1F1F1; */
	background: url(../img/bg-black.jpg) no-repeat center / cover;
    color: #fff;
}

.webcatalog-area .brand-box .brand-ttl{
    font-weight: 500;
    padding: 0 0 10px;
    margin: 0 0 15px;
    border-bottom: solid 1px #707070;
    font-family: 'Noto Sans JP', serif;
    letter-spacing: 0.05em;
}

.webcatalog-area .catalog-list{
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	gap: 30px 15px;
}

.webcatalog-area .catalog-list .catalog-item{
	width: calc((100% - 45px) / 4);
	width: calc((100% - 15px) / 2);
	/* width: 205px;; */
	width: 207.5px;
	/* background-color: #ddd; */

	/* あとで消す */
	/* display: flex;
	align-items: center;
	justify-content: center; */
}

.webcatalog-area .catalog-list .catalog-item .catalog-label{
	padding: 5px 0;
	font-weight: bold;
	text-align: center;
	line-height: 1;
	background-color: #F1F1F1;
	margin: 0 0 8px;
}

.webcatalog-area .catalog-list .catalog-item a{
	display: block;
}

.webcatalog-area .catalog-list .catalog-item img{
	width: 100%;
	height: 305px;
	object-fit: contain;
	object-position: center;
	border: solid 1px #ddd;
	position: relative;
	top: 0;
	transition: .3s;
}

.webcatalog-area .catalog-list .catalog-item a .txt{
	color: var(--cmnblack);
	line-height: 1.3;
	margin: 8px 0 0;
	position: relative;
}

.webcatalog-area .catalog-list .catalog-item a .txt::before{
	display: inline-block;
    content: "\f518";
    font-family: 'FontAwesome';
    padding: 0 8px 0 0;
    color: var(--main);
}
/* pdf */
.webcatalog-area .catalog-list .catalog-item.pdf a .txt::before{
	display: inline-block;
    content: "\f1c1";
    font-family: 'FontAwesome';
    padding: 0 8px 0 0;
    color: var(--main);
}


/* hoverアニメーション */
.webcatalog-area .catalog-list .catalog-item a:hover img{
	top: -5px;
	transition: .3s;
}

.webcatalog-area .catalog-list .catalog-item a:hover .txt{
	color: var(--main);
	transition: .3s;
}

.webcatalog-area .catalog-list .catalog-item .note{
	color: var(--main);
}
@media screen and (max-width: 768px){
	.webcatalog-area{
		padding: 40px 20px 0;
	}
	
	.webcatalog-area .inner{
		flex-wrap: wrap;
	}

	.webcatalog-area .main-contents{
		width: 100%;
		order: 1;
	}

	.webcatalog-area .main-contents .fs-wrap{
		flex-wrap: wrap;
		margin: 0 0 30px;
	}

	.webcatalog-area .main-contents .fs-wrap .brand-box{
		width: 100%;
	}

	.webcatalog-area .catalog-list{
		gap: 15px;
	}

	.webcatalog-area .catalog-list .catalog-item{
		width: calc((100% - 15px) / 2);
	}

	.webcatalog-area .catalog-list .catalog-item img{
		aspect-ratio: 216/305;
		height: 200px;
	}
}

/*    バナーエリア
-------------------------------------------------------------- */
.bnr-area{
	margin: 80px auto 0;
}

.bnr-area .inner{
	height: 280px;
	background-color: var(--main);
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.bnr-area .inner .txt-box{
	padding: 60px;
	color: #fff;
}

.bnr-area .inner .txt-box .bnr-ttl{
	font-size: 2.2rem;
	margin: 0 0 15px;
}

.bnr-area .inner .txt-box .cmn-btn{
	margin: 15px 0 0;
}
.bnr-area .inner .txt-box .cmn-btn a{
	color: #fff;
	border: solid 1px #fff;
}

.bnr-area .inner .img{
	width: 45%;
	height: 100%;
	background-color: var(--main)
}

.bnr-area .inner .img img{
	height: 100%;
	width: 100%;
}

@media screen and (max-width: 768px){
	.bnr-area{
		margin: 10px auto 0;
		padding: 0 20px;
	}

	.bnr-area .inner{
		height: auto;
		flex-wrap: wrap;
	}

	.bnr-area .inner .img{
		order: 0;
		width: 100%;
		height: 150px;
	}

	.bnr-area .inner .txt-box{
		order: 1;
		padding: 30px 20px;
	}

	.bnr-area .inner .txt-box .bnr-ttl{
		font-size: 2.0rem;
	}
}

/*    商品一覧
-------------------------------------------------------------- */
/* .products-list{
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
}
.products-list .products-item{
	width: calc((100% - 90px) / 4);
	border: 1px solid #efefef;
}
.products-list .products-item a{
	display: block;
	padding: 0 25px 25px;
}
.products-list .products-item a .img img{
	width: 100%;
}
.products-list .products-item .color-wrap{
	display: none;
}
@media screen and (max-width: 768px){

} */
.nav-box .side-nav{
	margin: 0;
}

.nav-box .side-nav li p{
	padding: 15px 25px 15px;
}