@charset "utf-8";

/* -----------------------------------------------------------
	商品カテゴリー解説
-------------------------------------------------------------- */

.category .product-link {
	text-align: right;
	margin: -40px 0 30px;
	line-height: 1.4;
}
.category .product-link a {
	display: inline-block;
	padding: 5px;
}
.category .product-link a:hover {
	color: #003892;
}
.category .product-link a::before {
	display: inline-block;
	margin: 0 8px 0 0;
	content: "\f105";
	font-family: FontAwesome;
	font-size: 1.6rem;
	color: #003892;
}


@media screen and (max-width: 768px){
	
	.category .product-link {
		text-align: right;
		margin: -20px 0 20px;
		line-height: 1.4;
		font-size: 1.5rem;
	}
	
}



/* -----------------------------------------------------------
	area1
-------------------------------------------------------------- */
.category .pro-category {
	background:#f8f7f6;
	padding: 60px 0 70px;
	margin: 0 0 70px;
}

.category .pro-category .max-img {
	width: 100%;
	margin: 0 auto;
}

.category .pro-category .area1 {
	display: flex;
	justify-content: space-between;
	padding: 0 0 20px;
}

.category .pro-category .area1 .in.txt-area {
	width: calc(100% - 520px);
}

.category .pro-category .area1 .in.img {
	display: flex;
	width: 450px;
	height: auto;
	justify-content: center;
}
.category .pro-category .area1 .in.img img {
    max-width: inherit;
    max-height: 400px;
}

.category .category-title {
	font-size: 3.5rem !important;
	font-weight: 600;
	text-align: left !important;
	line-height: 1.5;
}

.category .pro-cate-title2 {
	font-size: 2.0rem;
	font-weight: 600;
	margin: 30px 0 20px;
	color: #344b7c;
}

.category .pro-category .pro-cate-list1 li {
	margin: 0 0 12px;
	padding: 0 0 0 30px;
	font-size: 1.8rem;
	position: relative;
	line-height: 1.6;
	font-weight: 500;
}
.category .pro-category .pro-cate-list1 li i {
	position: absolute;
	left: 0;
	top: 8px;
	color: #344b7c;
}

@media screen and (max-width: 768px){

	.category .pro-category {
		margin: -20px 0 20px;
		padding: 30px 0 40px;
	}

	.category .pro-category .area1 {
		display: block;
		padding: 0 0 0;
	}

	.category .pro-category .area1 .in {
		width:100%;
	}
	.category .pro-category .area1 .in.txt-area {
		width:100%;
	}
	
	.category .pro-category .area1 .in.img {
		width: 100%;
		height: auto;
		justify-content: center;
	}
	.category .pro-category .area1 .in.img img {
		max-width: 320px;
		max-height: 250px;
	}

	.category .category-title {
		font-size: 2.5rem !important;
		margin: 20px 0 0;
	}

	.category .pro-cate-title2 {
		font-size: 1.8rem;
		margin: 20px 0 15px;
	}

	.category .pro-category .pro-cate-list1 li {
		font-size: 1.7rem;
		line-height: 1.7;
	}

}

/* -----------------------------------------------------------
	area2
-------------------------------------------------------------- */

.category .area2 .pro-cate-boxlist {
	display: flex;
	justify-content: space-between;
	max-width: 1400px;
	min-width: 1300px;
	margin: 70px auto 0;
}

.category .area2 .pro-cate-boxlist>li {
	width: 47%;
	padding: 40px;
	background: #fff;
	position: relative;
}

.category .area2 .pro-cate-boxlist>li::before {
	content:"";
	background:url("../img/pro-cate-icon.png") center top / 65px 57px;
	width: 65px;
	height: 57px;
	display: block;
	position: absolute;
	top: -30px;
	left: 50%;
	margin: 0 0 0 -32px;
}

.category .area2 .pro-cate-boxlist li .title {
	font-size: 2.5rem;
	font-weight: 600;
	text-align: center;
	margin: 20px 0 30px;
	line-height: 1.5;
}

.category .area2 .graylist li {
	margin:15px 0 0;
	background: #f5f5f5;
	padding: 30px 30px;
	border-radius: 20px;
	display: flex;
}

.category .area2 .graylist li.style2 {
	background: #fff;
	padding: 0;
	text-align: center;
}

.category .area2 .graylist li.style2 i {
	margin: auto;
	font-size: 2.5rem;
}

.category .area2 .graylist li img {
	width: 240px;
	margin: 0 0 0 20px;
}

.category .end-catch {
	margin: 60px 0 20px;
	font-size: 2.4rem;
}

@media screen and (max-width: 768px){
	.category .area2 .pro-cate-boxlist {
		display: block;
		max-width: 100%;
		min-width: 100%;
		margin: 50px 0 0;
	}

	.category .area2 .pro-cate-boxlist>li {
		width: 100%;
		padding: 30px 20px;
		margin: 40px 0 0;
	}

	.category .area2 .pro-cate-boxlist>li::before {
		content:"";
		background:url("../img/pro-cate-icon.png") center top / 35px auto no-repeat;
		width: 35px;
		height: 57px;
		display: block;
		position: absolute;
		top: -15px;
		left: 50%;
		margin: 0 0 0 -17px;
	}

	.category .area2 .pro-cate-boxlist li .title {
		font-size: 2.0rem;
		margin: 10px 0 20px;
	}

	.category .area2 .graylist li {
		margin:20px 0 0;
		padding: 20px 15px;
		display: block;
	}

	.category .area2 .graylist li img {
		width: 100%;
		max-width: 300px;
		margin: 15px auto 0;
		display: block;
	}
	
	.category .end-catch {
		margin: 30px 0 15px;
		font-size: 2.1rem;
		font-weight: 600;
	}

	
}