/* CSS Document */
#nouhinrei{
	background:url(../product/img/nouhin-rei.jpg) left top no-repeat;
	padding-top:24px;
	padding-bottom:10px;
	border-bottom:dotted 1px #CCCCCC;
	}
#nouhinrei p a{
	margin-right:5px;
	}
#nouhinrei p img{
	width:100px;
	height:70px;
	}

.tpis1{
	width:280px;
	float:left;
	margin-top:10px;
	}

.tpis2{
	width:280px;
	float:right;
	margin-top:10px;
	}
.toku{
	border-left:solid 4px #CC0000;
	border-bottom:dotted 1px #CCCCCC;
	padding:1px 0 1px 10px;
	margin-bottom:4px;
	font-weight:bold;
	}
	
.sofakakaku{
	border-left:solid 4px #CC0000;
	border-bottom:dotted 1px #CCCCCC;
	padding:1px 0 1px 10px;
	margin-bottom:4px;
	font-weight:bold;
	}

.setu{
	width:280px;
	float:left;
	}
.sof_zaikaku{
	width:280px;
	height:149px;
	background:url(../product/img/zaiko_bg2.gif) no-repeat;
	margin:0;
	float:right;}
	
.sof_zaikaku p{
	text-align:center;
	padding:0;}
.z-text{margin:6px 0 1px 0;}
.z-text2{margin:4px 0 1px 0;}
	
.sofa-lineup {
	clear:both;
	margin: 0;
	padding: 0;

	}
/*------------------------*/	
.sofa-lineup h2{
	position: relative;
	margin: 10px !important;
	/*display: inline;*/
	font-size: 1.3em;
	text-align: left !important;
}

.sofa-lineup h2::before {
	position: absolute;
	width: 5px;
	height: 100%;
	top: 0;
	left: -10px;
	content: "";
	background: #009933;
}

.sofa-lineup h2 + a img {
	display: block;
	margin: 0 auto 10px;
}
/*------------------------*/

.sofa-lineup h4{/*飲食店ソファ*/
	/*border-bottom:solid 1px #CCCCCC;
	margin:20px 0;
	font-size:12pt;*/
	
	border-bottom:dotted 1px #CCCCCC;
	border-left:solid 4px #66CC00;
	padding:0 0 2px 8px;
	margin:20px 0 10px;
	font-weight:bold;
	color: #767676;
	text-align:left;
	font-size: 1em;
	}
	
.sofa-lineup .left{
	width:100%;
	text-align:center;
	padding: 0 0 20px;
	}

.sofa-lineup .left a img {
	transition: .3s ease-in-out;
}		
.sofa-lineup .left a img:hover {
	opacity: .7;
}		
	
.sofa-tb{
	width:300px;
	float:right;
	}
.sofa-tb table{
	width:300px;text-align:center;
	}
	
/*.design1{重複
	border-collapse:collapse;
	border:1px solid #CC6600;
	}
.design1 th{
	padding:2px;
	border:1px solid #CC6600;
	background-color:#FFFFCC;
	}
.design1 td{
	padding:2px;border:1px solid #CC6600;
	}*/
	
.omtit{
	border-left:solid 6px #339900;
	padding-left:12px;
	font-weight:bold;
	font-size:14pt;
	}	
.design2{
	border-collapse:collapse;
	width:680px;
	margin-bottom:20px;
	}
.design2 td{
	border-bottom:1px solid #ccc;
	text-align:center;padding:5px;
	}
.kesi{
	text-decoration:line-through;
	color:#666666;
	}
.abc{
	background:#FEFAE9;
	border-right:solid 1px #CCCCCC;
	}
.om-red{
	color:#FF0000;font-weight:bold;
	}

/***SANCOSMO***/
.right{
	float:right;
	}
.textcolor-y{
	color:#FF9900;
	}	
.tpis{
	color:#666666;
	padding: 10px;
	letter-spacing:0.1em;
	}

/*-----------張地が選べます---------------*/	

.select_fab {
	font-size: 1.1em;
	padding: 5px 2% 4px;
	border: 2px dotted #efc036;
	border-radius: 6px;
	background: #fdf8ef;
	color: #a84c2f;
	display: block;
	margin: 0 auto 20px !important;
	text-align: center;
	box-sizing: border-box;
	width: 100% !important;
	/*max-width: 350px;*/
}

.select_fab::before {
	content: "";
	background: url(../product/img/hirameki.jpg) no-repeat;
	width: 19px;
	height: 26px;
	margin: 0 10px 0 0;
	vertical-align: middle;
	display: inline-block;
	mix-blend-mode: multiply;
}

			
/*-------ソファバリエーションナビ-------*/	
#sofa_vali{
	background:#f1f1f1;
	padding: 15px 2% 5px;
	margin: 10px 0 30px;
	}
	#sofa_vali p:first-of-type {
		margin:0 0 5px;
		font-weight: 500;
		color: #5b5b5b;
		}
	#sofa_vali p{
		margin:0;
		color: #747474;
		}
	#sofa_vali ul{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;
		padding: 10px 0 0;
		}
	
	#sofa_vali li{
		width: 100px;
	font-size: .9em;
	text-align: center;
	margin: 0 0 10px;
	line-height: 1.4;
		}
		#sofa_vali li img{
			border:solid 1px #CCCCCC;
			display:block;
			width: 86px;
			height: 86px;
			object-fit: cover;
			margin: 0 auto 5px;
			transition: .3s ease-in-out;
		}
		#sofa_vali li img:hover{
			border:solid 1px #69c;
			opacity: .7;
		}
.sofa_vali_empty {
	display:block;
	width: 86px;
	height: 0;
	margin: 0 0 -20px !important;
}
/*-------------------------------------*/


.ctab-link{
	text-align:center;
	margin: 0 0 -20px;
}
	
.sofaprice{
	border-collapse:collapse;
	width:100%;
	}
.sofaprice a {
	text-decoration: underline;
	font-size: 1.0em;
	display: block;
	height: 100%;
	border: 1px solid #0099FF;
	font-weight: bold;
	padding: 0 15px;
	display: flex;/*-----重複-----*/
	justify-content: center;
	align-items: center;
	transition: .3s ease-in-out
	}	
.sofaprice a:hover {
	background: #c6c5fe;
	border: 1px solid #0033ff;
	color: #fff !important;
	}		
.sofaprice th{
	border:solid 1px #CCCCCC;
	padding:4px 6px;
	text-align:center;
	background:#f4f4f4;
	min-width: 72px;
	color: #5b5b5b;
	}	
.sofaprice td{
	border:solid 1px #CCCCCC;
	padding:4px 6px;
	text-align:center;
	min-width: 30px;
	height: 48px;
	font-size: 0.725rem;
	}

.sofaprice img {
	max-height: 115px;
	max-width: 80px;
}

/*-----TB2970一部使用-----*/	
.border_bottom_no {
	border-bottom: 1px solid white !important; 
}
/*------クラブソファーカラーシミュレーション----------------------*/

.color-main{
	width: 100%;
	margin: 0 0 70px 0;
}

.mb_huge {
	margin-bottom: 180px;
}
.sofa-lineup {
	position: relative;
}
.color-navi{
	position: absolute;
	left: 0px;
	top: 40px;
	width: 120px;
}
.color-navi ul{
	
}
.color-navi > img:first-of-type {
	filter: drop-shadow(3px 3px 3px rgba(0,0,0,.2));
}

.color-navi ul li{
	font-size: 10px;
	color: #333;
	width: 140px;
	letter-spacing: -1px;
	margin-bottom: 6px;
	text-align: left;
	transition: .3s ease-in-out;
	text-shadow:
	0 0 2px #fff,0 0 2px #fff,
	0 0 2px #fff,0 0 2px #fff,
	0 0 2px #fff,0 0 2px #fff,
	0 0 2px #fff,0 0 2px #fff,
	0 0 2px #fff,0 0 2px #fff,
	0 0 2px #fff,0 0 2px #fff,
	0 0 2px #fff,0 0 2px #fff,
	0 0 2px #fff,0 0 2px #fff;
}
.color-navi li a img {
	margin: 0 6px 10px 0;
	vertical-align: middle;
	box-shadow: 1px 1px 1px #999999;
	width: 36px;
	height: 36px;
	transition: .3s ease-in-out;	
}
.color-navi li a img:hover {
	box-shadow: 0 0 1px #999;	
}
.color-navi li:hover {
	color: #5b5b5b;
	font-weight: bold;
}

.color-price {
	background: url(../product/sofa/box/img/color_simu_bg.jpg) left top no-repeat;
	width: 300px;
	height: 300px;
	margin: 20px auto 30px;
	padding: 30px 20px 5px;
	box-sizing: border-box;
	/*box-shadow: rgb(85, 91, 255) 0px 0px 0px 1px, 
				rgb(31, 193, 27) 0px 0px 0px 2px,
				rgb(255, 217, 19) 0px 0px 0px 3px, 
				rgb(255, 156, 85) 0px 0px 0px 4px, 
				rgb(255, 85, 85) 0px 0px 0px 5px;*/
	/*box-shadow: rgba(85, 91, 255,.6) 0px 0px 0px 2px, 
				rgba(31, 193, 27,.5) 0px 0px 0px 4px,
				rgba(255, 217, 19,.8) 0px 0px 0px 6px, 
				rgba(255, 156, 85,.9) 0px 0px 0px 7px, 
				rgba(255, 85, 85,.6) 0px 0px 0px 9px;*/
	
}

.color-price p:first-of-type {
	text-align: center !important;
	background: #ffcccc;
	color: #a84c2f !important;
	/*background: rgb(132,156,148);
	background: linear-gradient(90deg, rgba(132,156,148,1) 0%, rgba(222,106,17,1) 100%);
	color: #fff !important;*/
	padding: 5px 10px;
	margin: 0 auto 10px !important;
	font-weight: bold;
	display: inline-block;
	width: 100%;
	box-sizing: border-box;
}
.color-price p {
	margin: 0 0 5px;
	text-align:justify;
  word-break:break-all; 
  text-justify:inter-ideograph;
  text-justify:inter-character;
  word-wrap:break-word;
  overflow-wrap:break-word;
}

/*********************** insyoku-tab *******************************/

#insyokuTab-wrap {
	margin: 0 0 30px;
}
#insyokuTab-wrap img {
	mix-blend-mode: multiply;
}

.insyokutab-group{
    display: flex;
    justify-content: center;
	flex-wrap: wrap;
	margin-left: 1px;
}
.insyokutab{
    flex-grow: 1;
    padding: 5px;
    list-style:none;
	
    border:solid 1px #cc6600;
	
	margin-left: -1px;
	margin-bottom: -1px;
	
    cursor:pointer;
    display: flex;
    justify-content: center;
	align-items: center;
}

.insyoku-panel-group{
    border:solid 1px #cc6600;
	padding: 10px 2%;
    
}
.insyoku-panel{
    display:none;
	padding-top: 10px;
	
}
.insyokutab.is-active{
     background:#360;
    color:#FFF;
    transition: all .3s ease-out;
}
.insyoku-panel.is-show{
    display:block;
}

/*------飲食店ソファ以外-------*/

/*バン飲食ソファ パネルオプション*/
/*T-13（2か所）メロ*/
/*コンフル（2か所）*/
/*MSセットテーブル*/


/*必要ならこれで囲む*/

.pricetab-wrap {
	margin: 0 0 30px;
	}

.pricetab-group1,
.pricetab-group2,
.pricetab-group3,
.pricetab-group4 {
    display: flex;
    justify-content: center;
	flex-wrap: wrap;
	box-sizing: border-box;
	margin-left: 1px;
}

.pricetab-group1 .pricetab1,
.pricetab-group2 .pricetab2,
.pricetab-group3 .pricetab3,
.pricetab-group4 .pricetab4 {
    flex-grow: 1;
    padding: 5px 2%;
	font-size: 90%;
    list-style: none;
	text-align: center;
    cursor: pointer;
    display: flex;
    justify-content: center;
	align-items: center;
	font-weight: bold;
	box-sizing: border-box;
	border: solid 1px #C60;
	
	margin-left: -1px;
	margin-bottom: -1px;
}


.pricetab1.is-active1,
.pricetab2.is-active2,
.pricetab3.is-active3,
.pricetab4.is-active4 {
    background:#360;
    color:#FFF;
	font-weight:bold;
    transition: .3s ease-in-out;
}

.pricetab1:hover,
.pricetab2:hover,
.pricetab3:hover,
.pricetab4:hover {
	background:#9C6;
	}
.price-panel1.is-show1,
.price-panel2.is-show2,
.price-panel3.is-show3,
.price-panel4.is-show4 {
    display:block;
}


/*価格表部分*/

.price-panel-group1,
.price-panel-group2,
.price-panel-group3,
.price-panel-group4 {
    
}
.price-panel1,
.price-panel2,
.price-panel3,
.price-panel4 {
    display:none;
	
}



/*----------ios----------*/

/*最新のsafari用*/

_::-webkit-full-page-media, _:future, :root .pricetab1.is-active1,
_::-webkit-full-page-media, _:future, :root .pricetab2.is-active2, 
_::-webkit-full-page-media, _:future, :root .pricetab3.is-active3, 
_::-webkit-full-page-media, _:future, :root .pricetab4.is-active4 {
    background:#360;
    color:#FFF;
	font-weight:bold;
    transition: .3s ease-in-out;	
}

/*古いsafari用*/
@media screen and (-webkit-min-device-pixel-ratio:0) {
	::i-block-chrome, .insyokutab-group2, 
	::i-block-chrome, .insyokutab-group3 {
	/*border-right: solid 1px #C60;*/
	}
}

/******************** insyoku-tab END*****************************/

/*********************** table_tab *******************************/

.table_tab_group {
    display: flex;
	flex-wrap: wrap;
    justify-content: center;
}
.table_tab {
    display: flex;
    justify-content: center;
	align-items: center;
    flex-grow: 1;
    padding:5px;
	font-size: .9em;
    list-style:none;
    border:solid 1px #ccc;
    text-align:center;
    cursor:pointer;
    transition: all .3s ease-in-out;
}
.table_panel {
    border: solid 1px #CCC;
	padding: 20px 0;
    display:none;
    
}
.table_panel img {
	display: block;
	margin: auto;
	width: calc( 100% - 2px);
	max-width: 300px;
	
}

.table_active {
    background: #999;
    color: #fff;
	pointer-events: none;
	box-sizing: border-box;
}
.table_tab:hover {
	background: #666;
    color: #fff;
	}
	
.table_show {
    display: block;
}


