@charset "utf-8";

/* -----------------------------------------------------------
    カテゴリ導線
-------------------------------------------------------------- */
.category-list-area {
	background: var(--cmnbg2);
	padding: 20px;
}
.category-list {
	gap: 15px;
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
}
.category-list li {
	width: calc((100% - 45px) / 4);
}
.category-list li a {
	display: flex;
	align-items: center;
	color: #333;
	background: url(../img/beige-bg.png) no-repeat center / cover;
	padding: 14px 10px;
	/*gap: 0 10px;*/
}
.category-list .img {
	text-align: center;
}
.category-list .img img {
	width: 80px;
	height: 60px;
	object-fit: contain;
}
.category-list .img::before {
	display: none;
}
.category-list .txt-area{
	position: unset;
	left: auto;
	bottom: auto;
}
.category-list .name{
	font-size: 2rem;
	line-height: 1.2;
	font-weight: 600;
}
.category-list .catch{
	font-size: 1.2rem;
	font-weight: 600;
	border-bottom: none;
	padding: 0;
	margin: 0 0 4px;
}

@media screen and (max-width: 768px){
	
	.category-list-area {
		padding: 0 3px;
		background: none;
	}
	.category-list {
		gap: 3px;
		margin: 0 auto;
	}
	.category-list li {
		width: calc((100% - 9px) / 4);
		text-align: center;
	}
	.category-list li a {
		padding: 5px 10px 10px 10px;
		display: block;
	}
	.category-list li a::after {
		display: none;
	}
	.category-list .img {
		height: 90px;
		display: flex;
		align-items: flex-end;
	}
	
	.category-list .img img {
		width: 100%;
		height: 75px;
	}
	.category-list li:nth-of-type(2) .img img {
		height: 85px;
	}
	.category-list li:nth-of-type(3) .img img {
		height: 90px;
	}
	.category-list li:nth-of-type(4) .img img {
		height: 70px;
	}
	
	.category-list .txt-area{
		position: unset;
		left: auto;
		bottom: auto;
		margin: 10px 0 0;
	}
	.category-list .name{
		font-size: 1.2rem;
		font-weight: 600;
	}
	.category-list .name span{
		font-size: 1.6rem;
		display: block;
	}
	.category-list .catch{
		display: none;
	}

}


/* -----------------------------------------------------------
    検索結果・タグ：page-title-area
-------------------------------------------------------------- */
/* h1 */
.list-page .h1-area {
	top: 410px;
	right: calc( ( 100% - 650px ) / 2 );
}
/* page-title-area */
.page-title-area.list-page{
	padding: 50px 0 20px;
}
.page-title-area.list-page::after {
	content: "";
	background: url("../img/ill01.png") no-repeat center / contain;
	aspect-ratio: 806 / 748;
	display: inline-block;
	position: absolute;
	width: 300px;
	top: 20px;
	right: calc((100% - 1300px) / 2);
}
/*.page-title-area.list-page::after {
	content: "";
	background: url("../img/ill05.svg") no-repeat center / contain;
	aspect-ratio: 234 / 156;
	display: inline-block;
	position: absolute;
	width: 340px;
	top: 20px;
	right: calc((100% - 1200px) / 2);
}*/
.page-title-area.list-page .page-title {
	position: static;
	top: auto;
}
.page-title-area.list-page .bread-h1-wrap .breadcrumbs {
	padding: 50px 0 0;
}


@media screen and (max-width: 768px) {
	
	/* h1 */
	.list-page .h1-area{
		top: 66px;
		right: auto;
		left: 20px;
	}
	/* page-title-area */
	.page-title-area.list-page {
		padding: 40px 20px 35px 20px;
		border-bottom: 1px #777 dashed;
	}
	.page-title-area.list-page .inner {
		position: static;
		top: auto;
		left: auto;
		margin: 0;
	}
	.page-title-area.list-page::after {
		width: 160px;
		top: 30px;
		right: -30px;
	}
	
}



/* -----------------------------------------------------------
    商品一覧掲載部
-------------------------------------------------------------- */
/*共通*/
.cmn-item-area{
	background: var(--cmnbg2);
	color: var(--txtcolor);
}
.cmn-item-area .title-area{
	margin: 0 0 20px;
}

/*オンライントップ*/
.index .select-area .cmn-item-area{
	padding: 80px 0;
}
.index .select-area .cmn-item-area:nth-child(even) {
	background: var(--cmnbg1);
}
.index .select-area .cmn-item-area .cmn-item-wrap {
	margin: 0;
}
.index .select-area .cmn-item-area .btn-more{
	margin: 60px auto 0;
}

/*検索結果・カテゴリなど各一覧用*/
.list-page .cmn-item-area {
	padding: 70px 0 120px;
}
.list-page .cmn-item-area .cmn-item-wrap {
	margin: 0;
	padding: 20px 0 0;
}
.list-page .niwork-result{
	padding: 0 0 30px;
	line-height: 1.8;
}


@media screen and (max-width: 768px){
	
	/*共通*/
	.cmn-item-area{
		padding: 40px 20px;
	}
	.cmn-item-category-area .cmn-item-area{
		padding: 0;
	}
	.cmn-item-area .title-area{
		margin: 0 0 20px;
	}

	/*オンライントップ*/
	.index .select-area .cmn-item-area{
		padding: 40px 0;
	}
	.index .select-area .cmn-item-area .title-area{
		padding: 0 20px;
	}
	.index .select-area .cmn-item-area .cmn-item-wrap {
		margin: 0;
	}
	.index .select-area .cmn-item-area .btn-more{
		margin: 30px auto 15px;
	}
	
	
	/*検索結果・カテゴリなど各一覧用*/
	.list-page .cmn-item-area {
		padding: 40px 20px 50px;
	}
	.list-page .cmn-item-area .cmn-item-wrap {
		margin: 0;
		padding: 20px 0 0;
	}
	.list-page .niwork-result{
		padding: 0 0 10px;
	}
	.list-page .cmn-item-area .cmn-item-wrap .item-block {
		flex-wrap: wrap;
		gap: 30px 15px;
	}
	.list-page .cmn-item-wrap .item-block .item-box {
		width: calc( ( 100% - 15px ) / 2 );
	}
	
}


/* -----------------------------------------------------------
    オンライントップ
-------------------------------------------------------------- */
/*MV*/
.index .page-title-area .img-area {
}
.index .page-title-area .shop-splide {
	width: 100%;
}
.index .page-title-area .splide__slide img {
	width: 460px;
	height: 440px;
	object-fit: cover;
}

/*イントロ*/
.index .intro-area {
	background: var(--cmnbg5);
	padding: 80px 0 120px;
}
.index .intro-area .inner {
	display: flex;
	justify-content: space-between;
	position: relative;
}
.index .intro-area .inner::after {
	content: "";
	/*background: url("../img/ill02.svg") no-repeat center / contain;*/
	background: url("../img/ill02_2.svg") no-repeat center / contain;
	aspect-ratio: 431 / 207;
	display: inline-block;
	position: absolute;
	width: 300px;
	bottom: -100px;
	left: 360px;
}

.index .intro-area .catch{
	margin: 0;
	font-size: 4rem;
	line-height: 1.5;
}
.index .intro-area .catch.sub{
	font-size: 2rem;
	font-weight: bold;
	color: var(--main);
	margin: 0 0 10px;
}

.index .intro-area .basic-txt{
	width: 550px;
}

/*特集*/
.index .special-area {
	background: #fff;
}

@media screen and (max-width: 768px){
	
	/*MV*/
	.index .page-title-area{
		padding: 30px 0 18px 0;
	}
	.index .page-title-area .inner {
		left: 20px;
	}
	.index .page-title-area .img-area {
	}
	.index .page-title-area .shop-splide {
	}
	.index .page-title-area .splide__slide img {
		width: 200px;
		height: 240px;
	}
	
	/*イントロ*/
	.index .intro-area {
		margin: 40px 0 0;
		padding: 40px 20px 140px;
	}
	.index .intro-area .inner {
		display: block;
	}
	.index .intro-area .inner::after {
		width: 260px;
		bottom: -130px;
		left: auto;
		right: -10px;
	}
	.index .intro-area .catch{
		margin: 0 0 20px;
		font-size: 2.4rem;
	}
	.index .intro-area .catch.sub{
		font-size: 1.7rem;
		margin: 0 0 10px;
	}
	.index .intro-area .basic-txt{
		width: 100%;
	}
	
}