@charset "utf-8";

.simu_title {
	margin: 0 0 20px 0;
}
.simu_title h2 {
	width: auto;
	height: auto;
	margin: 0;
	padding: 0;
	background: none;
	border: none;
}
.sns_area{
	margin: 0 0 30px 0;
	text-align: left;
	width: 1000px;
}
.simu_wrap {
	width: 1000px;
	overflow: hidden;
}
.simu_select {
	width: 500px;
	float: right;
}
.simu_step {
	width: 498px;
	border: #663300 1px solid;
	background: #FFF;
	margin: 10px 0 20px 0;
}
.simu_step_head {
	padding: 15px;
	border-bottom: #9D7B55 1px dotted;
	margin: 0 0 10px 0;
}
.simu_step_head h3 {
	width: auto;
	height: auto;
	margin: 0;
	padding: 0 0 0 100px;
	background: none;
	border: none;
	color: #663300;
	line-height: 1.4;
	font-size: 19px;
	font-weight: normal;
	text-align: left;
}
.simu_step_head h3.step01 {
	background: url(https://www.merci-fabric.co.jp/wordpress/wp-content/themes/merci/img/simulator/step01.gif) no-repeat 0 50%;
}
.simu_step_head h3.step02 {
	background: url(https://www.merci-fabric.co.jp/wordpress/wp-content/themes/merci/img/simulator/step02.gif) no-repeat 0 50%;
}
.simu_step_body {
	padding: 10px;
	overflow: hidden;
}
.select_pattern li {
	width: 87px;
	float: left;
	margin: 0 0 15px 3px;
	padding: 1px;
	border: #FFF 2px solid;
	cursor: pointer;
}
.select_pattern li:first-child {
	margin: 0 0 15px 0;
}
.select_pattern li:hover {
	opacity: 0.8;
}
.cal_fabric {
	width: 400px;
	padding: 10px;
	position: relative;
	border: #DDD6BF 1px solid;
	background: #FFF;
	margin: 0 auto -70px auto;
	z-index: 10;
}
.select_fabric {
	padding-right: -10px;
}
.select_fabric li {
	float: left;
	margin: 0 2px;
	padding: 1px;
	border: #FFF 2px solid;
}
.select_fabric li:hover {
	opacity: 0.8;
	cursor: pointer;
}
.select_pattern li.step_selected,
.select_fabric li.step_selected {
	border: #D5CCAE 2px solid;
}



.simu_step .btn_prev_fab {
	position: relative;
	float: left;
	top: -30px;
	cursor: pointer;
}
.simu_step .btn_next_fab {
	position: relative;
	float: right;
	top: -30px;
	cursor: pointer;
}
.simu_pict_wrap {
	width: 420px;
	height: 380px;
	margin: 0 0 20px 0;
	padding: 30px;
	background: url(https://www.merci-fabric.co.jp/wordpress/wp-content/themes/merci/img/simulator/frame.png) no-repeat 0 0;
}
.simu_pict {
	width: 420px;
	height: 380px;
}
.pict_fabric {
	width: 420px;
	height: 380px;
	background: black;
}
.pict_pattern {
	width: 420px;
	height: 380px;
}
#pict_pattern_pattern01 {
	background: url(https://www.merci-fabric.co.jp/wordpress/wp-content/themes/merci/img/simulator/pattern_onepiece.png) no-repeat 0 0;
	transition: background 0.3s linear;
}
#pict_pattern_pattern02 {
	background: url(https://www.merci-fabric.co.jp/wordpress/wp-content/themes/merci/img/simulator/pattern_shirt.png) no-repeat 0 0;
	transition: background 0.3s linear;
}
#pict_pattern_pattern03 {
	background: url(https://www.merci-fabric.co.jp/wordpress/wp-content/themes/merci/img/simulator/pattern_kids.png) no-repeat 0 0;
	transition: background 0.3s linear;
}
#pict_pattern_pattern04 {
	background: url(https://www.merci-fabric.co.jp/wordpress/wp-content/themes/merci/img/simulator/pattern_porch.png) no-repeat 0 0;
	transition: background 0.3s linear;
}
#pict_pattern_pattern05 {
	background: url(https://www.merci-fabric.co.jp/wordpress/wp-content/themes/merci/img/simulator/pattern_cushion.png) no-repeat 0 0;
	transition: background 0.3s linear;
}

#zoom_pattern01 .pict_fabric {
	background-size: 42.2922465%;
	transition: background-size 0 linear;
}
#zoom_pattern02 .pict_fabric {
	background-size: 74.6813844%;
	transition: background-size 0 linear;
}
#zoom_pattern03 .pict_fabric {
	background-size: 44.8063245%;
	transition: background-size 0 linear;
}
#zoom_pattern04 .pict_fabric {
	background-size: 200.0265%;
	transition: background-size 0 linear;
}
#zoom_pattern05 .pict_fabric {
	background-size: 71.125047%;
	transition: background-size 0 linear;
}

.simu_content {
	width: 480px;
	overflow: hidden;
}
.simu_content li {
	display: none;
}
.simu_content li:first-child {
	display: block;
}
.simu_content_head {
	width: 130px;
	float: left;
	text-align: center;
}
.simu_content_body {
	width: 340px;
	float: right;
	text-align: left;
	color: #663300;
}