@charset "utf-8";

/*-------------------------------------------------------------------
	IDENTIFICATION DIVISION.

	PROGRAM-ID.									ABOUT
	DATE-WRITTEN.								2018-02-16
-------------------------------------------------------------------*/

/*****************************************************
	DATA DIVISION.
	WORKING-STRAGE SECTION.
*****************************************************/

.m-unset {
	margin: unset;
}

#embroidery3 .wrap{
	border: none;
    background: none;
    padding-top: 0;
    text-align: center;
}

/* .image
-------------------- */

.wrap > .image{
	position:relative;
	z-index:1;
	margin-top:-142px;
}

.wrap > .image:before{
	position:absolute;
	top:-64px;
	right:-37px;
	content:url(../../../images/cp/embroidery3/accent-decoration2.png);
}

.wrap > .image .pic{
	margin:0 0 0 -67px;
}
.wrap > .image ul.cloth li{
	position:absolute;
	transition: all 300ms 0s ease;
	width: 197px;
	height: 197px;
}
.wrap > .image ul.cloth li img{
	width: 100%;
}

.wrap > .image ul.cloth li:hover{
	-webkit-transform: scale(1.2);
	-moz-transform: scale(1.2);
	-o-transform: scale(1.2);
	-ms-transform: scale(1.2);
	transform: scale(1.2);
}
.wrap > .image ul.cloth li.cloth1{
	top: 322px;
	left: 298px;
}
.wrap > .image ul.cloth li.cloth2{
	top: 484px;
	left: 448px;
}

.wrap > .image .text{
	position:absolute;
	z-index:1;
	top:684px;
	left:134px;
	width:284px;
	color:#1b2469;
}


/* .recommend
-------------------- */

.wrap > .recommend{
	position:relative;
	z-index:1;
	margin-top:-136px;
	margin-left:39px;
	margin-bottom:122px;
	text-align:left;
}

.wrap > .recommend dt{
	margin-bottom:16px;
}

.wrap > .recommend dd ul{
	display:table;
	width:100%;
}
.wrap > .recommend dd ul > li{
	display:table-cell;
	text-align:center;
	vertical-align:middle;
	width:25%;
}


/* #example
-------------------- */

#example{
	position:relative;
	background:#eab645;
	padding:0 0 70px 65px;
}
#example:before{
	position:absolute;
	top:-70px;
	left:-20px;
	content:url(../../../images/cp/embroidery3/example-decoration.png);
}
#example h2 img{
	position:relative;
	margin-top:-52px;
	margin-bottom:46px;
}
#example p.catch{
	margin-bottom:55px;
	text-align:center;
}
#example ul.list{
	overflow:hidden;
	margin-bottom:25px;
	margin-left:-8px;
}
#example ul.list:last-child{
	margin-bottom:0;
}
#example ul.list > li{
	float:left;
	margin-left:17px;
}
#example ul.list > li span{
	display:block;
	text-align:center;
	padding-top:5px;
	color:#1b2469;
	font-weight:600;
}


/* #factory
-------------------- */

#factory{
	position:relative;
	background:#f5f5f5;
	margin-bottom:100px;
	padding:120px 0 80px 0;
}

#factory:before{
	position:absolute;
	bottom:-31px;
	left:50%;
	margin-left:-57px;
	content:url(../../../images/cp/embroidery3/factory-fukidashi.png);
}

#factory .division{
	position:relative;
	background:#f5f5f5;
	box-sizing:border-box;
	background:url(../../../images/cp/embroidery3/factory-background.png) 0 0 no-repeat;
	width:825px;
	height:391px;
	margin:0 auto auto;
	padding:0 65px;
}
#factory .division:before{
	position:absolute;
	right:58px;
	top:-74px;
	content:url(../../../images/cp/embroidery3/factory-decoration.png);
}

#factory .division:after{
	display:block;
	content:"";
	clear:both;
}

#factory h3{
	margin-bottom:44px;
}

#factory h3 img{
	position:relative;
	margin-top:-55px;
}

#factory ul.list{
	float:left;
	width:390px;
}

#factory ul.list li{
	text-align:left;
	color:#1b2469;
	margin-bottom:19px;
	padding-left:37px;
	background:url(../../../images/cp/embroidery3/check.png) 0 0 no-repeat;
}
#factory ul.list li:last-child{
	margin-bottom:0;
}

#factory ul.list li dl dt{
	margin-bottom:8px;
}


#factory .division > p.image{
	float:right;
	margin:0;
}

/* .conversion
-------------------- */

.wrap > ul.conversion{
	display:table;
	width:100%;
	margin-bottom:124px;
}

.wrap > ul.conversion > li{
	display:table-cell;
	text-align:center;
	vertical-align:middle;
	width:50%;
}


/* #about
-------------------- */

#about{
	position:relative;
	background:#eab645;
	margin-bottom:100px;
	padding:37px 0 72px 0;
}

#about .division{
	position:relative;
	box-sizing:border-box;
	background:url(../../../images/cp/embroidery3/about-background.png) 0 0 no-repeat;
	width:825px;
	height:365px;
	margin:0 auto auto;
	padding:84px 80px 0 80px;
}

#about .division h3{
	margin-bottom:24px;
}
#about .division p{
	color:#1b2469;
	font-size:114%;
	line-height:1.8;
	font-weight:700;
	margin-bottom:1.8em;
}
#about .division p:last-child{
	margin-bottom:0;
}

@media screen and (min-width: 640px){
	#factory img.pc {
		display: unset;
	}
}

@media screen and (max-width: 640px){
	.contents--modifier{
		overflow: hidden;
	}
	.wrap > .image ul.cloth li img{
		display: none;
	}
	.wrap > .image{
		margin-top: -73px;
		margin-bottom: 80px;
	}
	.wrap > .image .pic {
		margin: 0 0 3em;
	}
	.wrap > .image .text{
		position: relative;
		top: inherit;
		left: auto;
		font-size: 20px;
		width: 100%;
		padding: 0 3%;
	}
	.wrap .sp{
		display: inline-block;
	}
	.wrap > .image .text img{
		margin-bottom: 24px;
	}
	.wrap > .recommend{
		margin: 0;
		text-align: center;
		margin-bottom: 180px;
	}

	.wrap > .recommend dd ul{
		display: block;
	}
	.wrap > .recommend dd ul > li{
		display: block;
		width: 100%;
		margin-bottom: 20px;
	}
	#example{
		padding: 0 0 70px 0;
	}
	#example:before{
		content: url(../../../images/cp/embroidery3/example-decoration_sp.png);
		top: -159px;
		left: -25px;
		z-index: 2;
	}
	#example h2{
		margin-bottom: 30px;
	}
	#example h2 img{
		width: 367px;
		margin-top: -73px;
	}
	#example ul.list{
		margin-left: 20px;
		margin-bottom: 0;
	}
	#example ul.list > li{
		float: left;
		width: 256px;
		margin-left: 28px;
		margin-bottom: 25px;
	}
	#example ul.list > li img{
		width: 100%;
		height: auto;
	}
	#example ul.list > li span{
		font-size: 20px;
		text-align: left;
	}
	#example ul.list > li span br{
		display: none;
	}
	#factory .division{
		width: 600px;
		height: 872px;
		padding: 0 48px;
		background: url(../../../images/cp/embroidery3/factory-background_sp.png) 0 100% no-repeat;
		margin: 0 auto auto;
	}
	#factory h3 {
		text-align: center;
		margin-bottom: 49px;
		padding-left: 12px;
	}
	#factory .division:before{
		display: none;
	}
	#factory {
		padding: 31px 0 80px 0;
	}
	#factory h3 img{
		margin-top: 0;
		width: 100%;
		height: auto;
	}
	#factory .division > p.image{
		float: none;
		text-align: center;
		margin-bottom: 37px;
	}
	#factory ul.list{
		font-size: 20px;
		width: auto;
	}
	.wrap > ul.conversion > li{
		width: 100%;
		display: block;
		margin-bottom: 83px;
	}
	.wrap > ul.conversion > li img{
		width: 430px;
	}
	.wrap > ul.conversion{
		margin-bottom: 10px;
	}
	#about .division p{
		font-size: 20px;
	}
	#about .division{
		position: relative;
		box-sizing: border-box;
		background: url(../../../images/cp/embroidery3/about-background_sp.png) 0 0 no-repeat;
		width: 600px;
		height: 570px;
		margin: 0 auto auto;
		padding: 96px 40px 0 40px;
	}
}