/* CSS Document */

/*index*/
.peacelist_wrap {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.peacelist_wrap::after {
	content: "";
	width: 32%;
	height: 0;
	display: block;
}
.peacelist_wrap::before {
	content: "";
	width: 32%;
	height: 0;
	display: block;
	order: 1;
}
.peacelist {
	width:32%;
	padding: 10px 1% 15px;
	text-align: center;
	font-size:0.75rem;
	/*background: #f7f7f7;*/
	box-sizing: border-box;
	border-radius: 6px;
	margin: 0 0 30px;
	display: flex;
	flex-direction: column;
	position: relative;
	overflow: hidden;
	box-shadow: 0 0 3px 1px #ccc inset;
	}
_:-ms-lang(x)::-ms-backdrop, .peacelist {
	}	
.peacelist p {
	margin: 0 10px;
}
.peacelist p:last-of-type {
	margin-top: auto;
}
	
.peace_zaiko {/*欠品表記など*/
	position: absolute;
	top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
	width: 70%;
	font-weight: bold;
	font-size: 1.0em;
	color: rgba(255, 0, 0, 1);
	background: rgba(255, 255, 255, .8);
	box-shadow: 1px 1px 4px #ccc;
	padding: 10px 5px;
	z-index: 2;
}
/*---------カテゴリー--------*/

.peace_cate_navi {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin: 0 0 40px;
	
}
.peace_cate_navi li {
	flex: 0 1 32.5%;
	border: 1px solid #5a9020;
	margin: 0 0 6px;
	display: flex;
	word-break: break-all;
	font-size: .95em;
	
}
@media screen and (max-width: 640px) {
.peace_cate_navi li {
	flex: 0 1 48.8%;
	border: 1px solid #5a9020;
	margin: 0 0 8px;
	display: flex;
	word-break: break-all;
	font-size: .9em;
	
}
}
.peace_cate_navi li a {
	font-size: 1.0em;
	width: 100%;
	padding: 8px;
	display: block;
	background: #f0ecd3;
	color: #3a650b;
	font-weight: 700;
	transition: .3s ease-in-out;
	
}
.peace_cate_navi li a:hover {
	background: #5a9020;
	color: #f0ecd3 !important;
	
	
}
.peace_cate_navi li a::before {
	content: "";
	background-size: contain;
	width: 48px;
	height: 48px;
	display: inline-block;
	border-radius: 50%;
	vertical-align: middle;
	margin: 0 3% 0 0;
	box-shadow: rgba(0, 0, 0, 0.15) 0px 15px 25px, rgba(0, 0, 0, 0.05) 0px 5px 10px;
	
}
.peace_cate_navi li:nth-of-type(1) a::before {
	background-image: url(../peace/image/oregano.jpg);
	
}
.peace_cate_navi li:nth-of-type(2) a::before {
	background-image: url(../peace/image/ole_m.jpg);
	
}
.peace_cate_navi li:nth-of-type(3) a::before {
	background-image: url(../peace/image/homare.jpg);
	
}
.peace_cate_navi li:nth-of-type(4) a::before {
	background-image: url(../peace/image/t_boxsofa_bu.jpg);
	
}
.peace_cate_navi li:nth-of-type(5) a::before {
	background-image: url(../peace/image/t_kaku_stool.jpg);
	
}
.peace_cate_navi li:nth-of-type(6) a::before {
	background-image: url(../peace/image/sp_d_900.jpg);
	
}

/*------------------------*/

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

.peacelist_wrap {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.peacelist_wrap::after {
	content: "";
	width: 48.5%;
	height: 0;
	display: block;
}
.peacelist_wrap::before {
	content: "";
	width: 48.5%;
	height: 0;
	display: block;
	order: 1;
}	
.peacelist {
	width: 48.5%;
	height: auto;
	margin: 0 0 30px;
  }

}

.peace-noki {
	display: block;
	border-radius: 3px;
	padding: 3px;
	text-align: center;
	color: #fff;
	background:#393;
	font-size:0.7rem;
	margin: 0 10px 10px !important;
}

.h3_peace {
	font-size: 1.6em;
	border-bottom:dotted 2px #006600;
	padding: 0 0 4px;
	color:#006600;
	font-weight:bold;
	margin: 0 0 15px;
	}
.h3_peace::before {
	content: "";
	width: 16px;
	height: 16px;
	display: inline-block;
	vertical-align: middle;
	background: #ff7f10;
	margin: 0 4px 2px 0;
	}
	
.peacelist a img {
	border: 1px dotted #f7f7f7;
	transition: .3s ease-in-out;
	}
.peacelist a img:hover{
	border: 1px solid #39F;
	opacity: .7;
	}
.peacelist a span {
	font-weight: bold;
	line-height: 1.2;
	transition: .3s ease-in-out;
	}

.peacelist p {
	line-height: 1.6;
	}

.peacelist .peace_comment {
	position: absolute;
	top: -14px;
	left: -20px;
	width: 62px;
	height: 62px;
	padding: 24px 0 0 4px;
	background: red;
	border-radius: 50%;
	box-sizing: border-box;
	color: #f7f7f7;
	font-weight: bold;
	line-height: 1.2;
	font-size: .875em;
	z-index: 10;
 	box-shadow: 0 1px 1px rgba(0,0,0,0.11), 
              0 2px 2px rgba(0,0,0,0.11), 
              0 4px 4px rgba(0,0,0,0.11), 
              0 6px 8px rgba(0,0,0,0.11),
              0 8px 16px rgba(0,0,0,0.11);
}
/*page内*/
/*.pastelcolor-samp {
	border: 1px dotted #999999;
	margin: 20px 0;
	padding: 10px;
	font-size: 0.75rem;
}*/

.pastelcolor {
	background: #f1f1f1;
	border-radius: 6px;
	padding: 20px 20px 10px 20px;
	}
.pastelcolor li{
	float:left;
	margin:0 8px 10px 0;
	text-align: center;
	}

.pastelcolor li a :hover {
	cursor: pointer;
	}		
	
/*-------FLEX---------*/	
.peace_column {
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-around;
	align-items: flex-start; 
	margin: 5px 0 10px;
	font-size: .9em;
}
	
.peace_column p {
	margin: 0 5px;
	text-align: center;
}
	
.peace_column_c {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	align-items: flex-start; 
	margin: 5px 0 10px;
	font-size: .9em;
}
.peace_column_c::after {
	display: block;
	content: "";
	height: 0;
	width: 48%;
	margin: 0 0 10px;
}
	
.peace_column_c p {
	width: 48%;
	margin: 0 0 10px;
	text-align: center;
}	
/*-------TAP ICON---------*/	

.tapicon_wrap {
	position: relative;/*タップ画像用*/
}

.tapicon {
	position: absolute;
	bottom: 60px;
	right: 20px;
	width: 50px;
	height: 50px;
	border: none !important;
	transform: rotate( -25deg );
	transition: .3s ease-in-out;
}

@media screen and (max-width: 568px) {
.tapicon {
	bottom: 80px;
	right: 15px;
	width: 40px;
	height: 40px;
}
}
.blink {
	-webkit-animation: blink 2s ease-in-out infinite alternate;
	animation: blink 2s ease-in-out infinite alternate;
}
@-webkit-keyframes blink {
	0% {opacity: 0;}
	100% {opacity: 1;}
}
@keyframes blink {
	0% {opacity: 0;}
	100% {opacity: 1;}
}

/*----------------*/	
	
.sub_headtext {/*即納表記*/
	font-size: 1.1em;
	background: #fff00d;
	color: #a41e26 !important;
	border: 1px solid #386dae;
	padding: 6px;
	/*border-radius: 6px;*/
	text-align: center !important;
	margin: 0 auto 10px !important;
	width: 100%;
	max-width: 300px;
	box-sizing: border-box;
	font-weight: bold;
}	

.sub_headtext2 {/*欠品用*/
	font-size: 1.1em;
	background: #f00;
	color: #FFF !important;
	padding: 4px;
	border-radius: 4px;
	text-align: center !important;
	margin: 0 auto 5px !important;
	font-weight: bold;
}	

.sub_headtext3 {/*セール*/
	font-size: 1.1em;
	background: rgb(255,227,8);
	background: radial-gradient(circle, rgba(255,227,8,0.9897146358543417) 0%, rgba(255,149,0,1) 100%);
	color: #f00 !important;
	border: 1px solid rgba(255,149,0,1) ;
	font-weight: bold;
	padding: 6px;
	text-align: center !important;
	margin: 0 auto 5px !important;
	width: 100%;
	box-sizing: border-box;
	text-shadow:
	0 0 4px #fff,0 0 4px #fff,
	0 0 4px #fff,0 0 4px #fff,
	0 0 4px #fff,0 0 4px #fff,
	0 0 4px #fff,0 0 4px #fff,
	0 0 4px #fff,0 0 4px #fff,
	0 0 4px #fff,0 0 4px #fff,
	0 0 4px #fff,0 0 4px #fff,
	0 0 4px #fff,0 0 4px #fff;
}	
/*-------ハイドシュミレーション------*/

#hide_color_simu {
	width: 100%;
	height: auto;
	padding: 0;
	margin: 10px 0;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background: #f7f7f7;
	
}

#mix_image {
	position: relative;
	width: 100%;
	max-width: 260px;
	height: 100%;
	min-height: 380px;
}
#panel {
	position: absolute;
	top: 10px;
	left: 20px;
  	filter: drop-shadow(-7px -1px 45px rgba(80,70,70,0.3));
}
#seat {
	position: absolute;
	top: 10px;
	left: 20px;
  	filter: drop-shadow(5px 16px 45px rgba(80,70,70,0.3));
}

.color_area {
	width: 100%;
	padding: 10px 10px 0;
	background: #eee;
	border-radius: 6px;
	box-sizing: border-box;
}
.color_area p {
	font-weight: bold;
	font-size: 1.0em;
	color: #f1f1f1;
	margin: 0 0 10px;
	background: #888;
	padding: 5px 5px 5px 10px;
}

.panel_thumb,.seat_thumb {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
}

.panel_thumb_item,.seat_thumb_item {
	margin: 0 5px;
	width: 60px;
	text-align: center;
}
.panel_thumb_item img,.seat_thumb_item img {
	cursor: pointer;
	width: 100%;
	max-width: 60px;
	padding: 2px;
	border: 1px solid #ccc;
	display: inline-block;
}

.panel_thumb_item_empty,.seat_thumb_item_empty {
	width: 60px;
	height: 0;
	margin: 0 5px 10px;
	border: none;
}

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

.color_area {
	width: 100%;
	padding: 10px 2% 0;
	background: #eee;
	border-radius: 6px;
	box-sizing: border-box;
}
.color_area p {
	font-weight: bold;
	font-size: 1.0em;
	color: #f1f1f1;
	margin: 0 0 15px;
	background: #888;
	padding: 5px 5px 5px 10px;
}

.panel_thumb,.seat_thumb {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	margin: 0;
}	
.panel_thumb_item,.seat_thumb_item {
	margin: 0 5px 10px;
	width: 50px;
	text-align: center;
}
.panel_thumb_item img,.seat_thumb_item img {
	cursor: pointer;
	width: 100%;
	max-width: 50px;
	padding: 2px;
	border: 1px solid #ccc;
	display: inline-block;
}

.panel_thumb_item_empty,.seat_thumb_item_empty {
	width: 50px;
	height: 0;
	margin: 0 5px 10px;
	border: none;
}
}