@charset "utf-8";
/* CSS Document */

/*-----------------------------------------------
 index
-----------------------------------------------*/
.nonwoven .contentHead .h2Box{
	padding: 30px 15px;
}

.nonwoven .headText:after{
	background-image: url(../../../../_images/category/bag/nonwoven/main-img.webp);
	width: 480px;
	height: 480px;
}

/*特徴*/
.nonwoven .featureCont .notice{
	max-width: 810px;
	background-color: #f0f0f0;
	background-image: url(../../../../_images/category/bag/nonwoven/feature-color.webp);
	background-repeat: no-repeat;
	background-position: right 50%;
	margin: auto;
	padding: 30px 40px;
}
.nonwoven .featureCont .notice dl {
	width: 50%;
	background-color: rgba(240, 240, 240, 0.7);
	padding: 8px;
}
.nonwoven .featureCont .notice dl dt{
	margin-bottom: 10px;
	padding-bottom: 5px;
	font-size: 23px;
	font-weight: 700;
	line-height: 1.4em;
	letter-spacing: 0.08em;
	border-bottom: 1px solid #111;
}
.nonwoven .featureCont .notice dl dd p{
	font-size: 15px;
	line-height: 1.6em;
	letter-spacing: 0.03em;
}


@media screen and ( max-width: 736px ){
	.nonwoven .contentHead .h2Box{
		padding: 20px 15px;
	}
	.nonwoven .headText:after{
		width: 240px;
		height: 240px;
	}

	/*特徴*/
	.nonwoven .featureCont .notice{
		width: 95%;
		background-size: auto 120%;
		background-position: calc(100% + 50px) 50%;
		margin: auto;
		padding: 3% 4%;
	}
	.nonwoven .featureCont .notice dl dt{
		font-size: 21px;
	}

	.nonwoven .featureCont .notice dl dd p{
		font-size: 15px;
	}
}

@media screen and ( max-width: 480px ){
	/*特徴*/
	.nonwoven .featureCont .notice{
		background-position: calc(100% + 80px) 50%;
		padding: 10px;
		padding-right: 25%;
	}
	.nonwoven .featureCont .notice dl {
		width: 100%;
	}
	.nonwoven .featureCont .notice dl dt{
		font-size: 18px;
	}

	.nonwoven .featureCont .notice dl dd p{
		font-size: 14px;
	}
}

/*---------------------------------------------------------------------------------
	孫カテ
--*/

/*メインイメージ*/
.nonwoven_a4 .mainBox > dl:before{ background-image: url(../../../../_images/category/bag/nonwoven/a4size/main-img.webp);}
.nonwoven_big .mainBox > dl:before{ background-image: url(../../../../_images/category/bag/nonwoven/bigsize/main-img.webp);}
.nonwoven_2tone .mainBox > dl:before{ background-image: url(../../../../_images/category/bag/nonwoven/twotone/main-img.webp);}
.nonwoven_fastener .mainBox > dl:before{ background-image: url(../../../../_images/category/bag/nonwoven/fastener/main-img.webp);}
.nonwoven_gusset .mainBox > dl:before{ background-image: url(../../../../_images/category/bag/nonwoven/gusset/main-img.webp);}
.nonwoven_flat .mainBox > dl:before{ background-image: url(../../../../_images/category/bag/nonwoven/flat/main-img.webp);}
.nonwoven_lunch .mainBox > dl:before{ background-image: url(../../../../_images/category/bag/nonwoven/lunch/main-img.webp);}
.nonwoven_horizontal .mainBox > dl:before{ background-image: url(../../../../_images/category/bag/nonwoven/horizontal/main-img.webp);}
.nonwoven_vertical .mainBox > dl:before{ background-image: url(../../../../_images/category/bag/nonwoven/vertical/main-img.webp);}
.nonwoven_purse .mainBox > dl:before{ background-image: url(../../../../_images/category/bag/nonwoven/purse/main-img.webp);}
.nonwoven_oval .mainBox > dl:before{ background-image: url(../../../../_images/category/bag/nonwoven/oval/main-img.webp);}
.nonwoven_folding .mainBox > dl:before{ background-image: url(../../../../_images/category/bag/nonwoven/folding/main-img.webp);}
.nonwoven_cooler .mainBox > dl:before{ background-image: url(../../../../_images/category/bag/nonwoven/cooler/main-img.webp);}

/*グルーピング*/
.nonwoven_a4 .groupLink ul > li.a4size,
.nonwoven_big .groupLink ul > li.bigsize,
.nonwoven_2tone .groupLink ul > li.twotone,
.nonwoven_fastener .groupLink ul > li.fastener,
.nonwoven_gusset .groupLink ul > li.gusset,
.nonwoven_flat .groupLink ul > li.flat,
.nonwoven_lunch .groupLink ul > li.lunch,
.nonwoven_horizontal .groupLink ul > li.horizontal,
.nonwoven_vertical .groupLink ul > li.vertical,
.nonwoven_purse .groupLink ul > li.purse,
.nonwoven_oval .groupLink ul > li.oval,
.nonwoven_folding .groupLink ul > li.folding,
.nonwoven_cooler .groupLink ul > li.cooler{
	display: none;
}

/*----- a4size -----*/
@media screen and ( max-width: 736px ){
	.nonwoven_a4 .pointBox .inner > img{
		max-width: 550px;
	}
}

/*----- bigsize -----*/
@media screen and ( max-width: 736px ){
	.nonwoven_big .pointBox .inner > img{
		max-width: 400px;
	}
}

/*----- lunch -----*/
@media screen and ( max-width: 736px ){
	.nonwoven_lunch .pointBox .inner > img{
		max-width: 380px;
	}
}

/*----- oval -----*/
.nonwoven_oval .pointBox .typeBox > dl dd img{
	border: 1px solid #b8b8b8;
}

/*----- cooler -----*/
.nonwoven_cooler .shapeBox{
	width: 95%;
	margin: 50px auto;
}
.nonwoven_cooler .shapeBox h3.hBalloon{
	display: block;
	width: fit-content;
	margin: 0 auto 10px;
	padding: 0 30px;
	font-size: 22px;
	font-weight: 700;
	line-height: 1.5em;
	letter-spacing: 0.08em;
	text-align: center;
	position: relative;
}
.nonwoven_cooler .shapeBox h3.hBalloon:before,
.nonwoven_cooler .shapeBox h3.hBalloon:after{
	content: "";
	display: block;
	width: 5px;
	height: 100%;
	border-right: 1px solid #111;
	border-left: 1px solid #111;
	position: absolute;
	bottom: 0;
}
.nonwoven_cooler .shapeBox h3.hBalloon:before{
	transform: skewX(20deg);
	left: 5px;
}
.nonwoven_cooler .shapeBox h3.hBalloon:after{
	transform: skewX(-20deg);
	right: 5px;
}

.nonwoven_cooler .shapeBox > div{
	background-color: #fff7e5;
	padding: 4% 5%;
}
.nonwoven_cooler .shapeBox > div > .scroll{
	margin: 0 auto 15px;
	text-align: center;
}
.nonwoven_cooler .shapeBox > div > p{
	font-size: 15px;
	line-height: 1.8em;
}

@media screen and ( max-width: 736px ){
	.nonwoven_cooler .shapeBox{
		width: 90%;
	}
	.nonwoven_cooler .shapeBox h3.hBalloon{
		max-width: 95%;
		font-size: 21px;
	}
	
	.nonwoven_cooler .shapeBox > div{
		padding: 3% 4% 4%;
	}
	.nonwoven_cooler .shapeBox > div .scroll img{
		max-width: 690px;
	}
	.nonwoven_cooler .shapeBox > div p{
		font-size: 14px;
	}
}
@media screen and ( max-width: 480px ){
	.nonwoven_cooler .shapeBox h3.hBalloon{
		font-size: 20px;
	}
	
	.nonwoven_cooler .shapeBox > div .scroll{
		overflow-x: auto;
		padding-bottom: 5px;
	}
	.nonwoven_cooler .shapeBox > div .scroll img{
		min-width: 550px;
	}
}