@charset "euc-jp";
/**============================================================================================**/
/* 画面左 #area01 23.01.19追記 */

#area01 .parts_list li {position: relative; margin: 0 0 10px;}
#area01 .dis-tbl_tab {box-sizing: border-box; width: 100%; padding: 0 0 5px;}

#area01.dis-tblcl01 {
    overflow-y: scroll;
    overflow-x: hidden;
	box-sizing: border-box; margin: -1px 0 0; padding: 0 5px 5px 0; height: 600px;
    opacity: 1;

	padding-right:0;
}

#area01.dis-tblcl01.scrollOff {
    overflow-y: hidden;
	padding: 0 17px 0 0;
}
#area01.dis-tblcl01 > ul {height: 400px;}

@media screen and (max-width:699px){
	#area01.dis-tblcl01 > ul {height: 600px;}
	#area01.dis-tblcl01 {padding: 0; font-size: 13px;}
	
	#area01.dis-tblcl01.scrollOff {	padding: 0;}
}


/* リスト 右側 */
#area01 .dis-tblcl03 {
	display: table-cell; width: 100px; vertical-align: top;}
#area01 .dis-tblcl03 img {box-sizing: border-box; max-width: 100px; border: solid 1px #ddd; vertical-align: bottom;}
#area01 .dis-tblcl03 img:hover {opacity: 0.8;}
#area01 .dis-tblcl04 {box-sizing: border-box; width: 100%; padding: 0 0 0 10px; text-align: left; vertical-align: top;}

@media screen and (max-width:699px){
	#area01 .smp-data {height: 72px;}
}



/* リスト 項目 */
#area01 .lr:first-of-type {display: flex; justify-content: space-between;}

#area01 .name {overflow: hidden; height: 18px; line-height: 1.3em;}
#area01 .item-id {
	margin: 0 5px 0 0; padding: 0 10px;
	background: #333; color: #fff;}

#area01 .price {margin: 0 5px 5px 0; color: #e00; font-size: 1.1em; font-weight: 600;}

#area01 .zaiko {
	display: inline-block; box-sizing: border-box; margin: 0 0 5px; padding: 5px 8px; border: solid #000 1px;
	font-size: 14px; font-weight: bold; text-align: center; line-height: 1em;}

#area01 .dis-tblcl04 a.detail {
	display: block; box-sizing: border-box; min-width: 60px; height: 25px; margin: 0 10px 5px 0; padding: 2px 0;
	border-radius: 5px; background: #000; color: #fff; font-size: 0.9em; text-align: center; text-decoration: none; opacity: 0.5;}
#area01 .dis-tblcl04 a.detail:hover {background: #00e;}

@media screen and (max-width:699px){
	#area01 .lr:first-of-type {margin: 0 0 5px;}
	
	#area01 .name {height: 34px; line-height: 1.5em;}
	#area01 .price {margin: 0 5px 0 0; font-size: 1.3em;}	
	#area01 .price > span {display: none;}
	#area01 .zaiko {margin: 0; padding: 4px; font-size: 12px; vertical-align: text-bottom;}
	#area01 .dis-tblcl04 a.detail {
		width: auto; min-width: 40px; margin: 0; padding: 4px 0 0;
		background: none; color: #000; font-size: 14px; text-decoration: underline;}
	#area01 .dis-tblcl04 a.detail:hover {background: none; color: #f80;}
}



/* リスト ユーザー操作分 */
#area01 .bg {display: flex; justify-content: space-between; box-sizing: border-box; padding: 5px 10px; background: #eee;}
#area01 .bg a {
    display: inline-block;
    box-sizing: border-box; width: 32px; height: 28px; margin: 0 0 0 10px; padding: 5px 0 0;
    border: #666 solid 1px; border-radius: 4px; background: #fff;
    text-align: center; font-size: 16px; text-decoration: none;
	line-height: 1.0em; vertical-align: middle;}

#area01 input[type="text"] {
     box-sizing: border-box; width: 58px; height: 28px; padding: 4px;
     border: #666 solid 1px;
     font-size: 16px; text-align: right; }

/*選択する*/
#area01 a.check {width: 130px; background: #ffa845;}
#area01 a.check:hover {background: #f50;}

/*商品ページから購入する*/
#area01 a.item-link {width: 200px; background: #77ad38;}
#area01 a.item-link:hover {background: #23810b;}

/*選択する・商品ページから購入する　共通*/
#area01 a.check,
#area01 a.item-link {
	padding: 7px 0 0;
	border: none;
	color: #fff; text-decoration: none;
}
#area01 a.check span:nth-child(2),
#area01 a.item-link span:nth-child(2) {display: none;}

@media screen and (max-width:699px){
	#area01 .bg {height: 28px; padding: 0; background: none;}
	#area01 .bg a {height: 28px; margin: 0 0 0 7px; padding: 4px 0;}
	
	#area01 span.vam {display: none;}
	
	#area01 input[type="text"] {width: 40px; height: 28px;}
	
	/*選択する*/
	#area01 a.check {width: 60px;}
	
	/*商品ページから購入する*/
	#area01 a.item-link {width: 170px;}
	
	/*選択する・商品ページから購入する　共通*/
	#area01 a.check,
	#area01 a.item-link {padding: 8px 0; font-size: 14px;}
	
	#area01 a.check span:first-child,
	#area01 a.item-link span:first-child {display: none;}
	
	#area01 a.check span:nth-child(2),
	#area01 a.item-link span:nth-child(2) {display: inline;}
	
}
@media screen and (max-width:349px){
	#area01 .bg a {margin: 0 0 0 2px;}
	#area01 a.check {width: 50px;}
}


/**============================================================================================**/
/* 画面左 #area01 23.04.12追記 */

/* 選択部品 打ち消し用 */
#area02-1 .dis-tbl_tab {margin: 0;}

#partslist li {margin: 0 0 20px;}
#area02-1 .dis-tblcl01 span {
	display: inline;
	position: static;
	width: auto; height: 28px; margin: 0; padding: 0;
	background: none;
	color: #333; font-size: 1em;}
#area02-1 .dis-tblcl01 span.item-id {
	display: inline-block;
	height: 18px; margin: 0; padding: 0 10px;
	background: #333;
	color: #fff; font-size: 1em; line-height: 1.3em;}

@media screen and (max-width:999px){
	/* 選択部品 打ち消し用 */
	#area02-1 .dis-tbl_tab {padding: 0; border: none;}
	#partslist li {padding: 0 0 10px; border-bottom: solid #999 1px;}
	
	#area02-1 .dis-tblcl02 {position: static; width: 160px; text-align: right;}
	
	#area02-1 input[type="text"] {width: 40px;}
	#area02-1 a {margin: 0 0 0 7px;}
}

@media screen and (max-width:399px){
	#area02-1 .dis-tblcl01 span,
	#area02-1 .dis-tblcl01 span.item-id {font-size: 12px; line-height: 1.5em;}
}

#area02-1 li {display:none;}
#area02-1 li.active {display:table;}
#area02-1 li.active .dis-tbl_tab{display:table;}

#area02-1 #listitem1 .dis-tblcl01 {
    cursor: auto;
}
#area02-1 #partslist .dis-tblcl01 {
    cursor: auto;
}
/**============================================================================================**/

/**========================================**/
/* モーダル修正用*/
#popup-window.posi-abs {
	display:none; 
	box-sizing: border-box; margin: 0; padding: 0;
	line-height: 1.3em;
    position: absolute;
	 background:rgba(0,0,0,0.1);
    top:0;
    bottom:0;
	width:100%;
	height:700px;
	max-height:700px;
}

#popup-window.posi-abs #popup-inner-area{
	box-sizing: border-box; margin: 0; padding: 0;
	line-height: 1.3em;

    position: sticky;
    margin-left: 100px;

    top: 238px;
    bottom: 200px;
}
@media  (max-width:699px){
	#popup-window.posi-abs #popup-inner-area {		top: 100px;
		margin-left: 0	}
}
@media  (max-width:999px){
	#popup-window.posi-abs #popup-inner-area {		
		top: 100px;
		bottom: 200px;
	}	
}


/*230427追記 バツ印追加*//**========================================**/

#popup-inner-area ul {position: relative;}
#popup-inner-area li.batsu {position: absolute; top: 30px; right: 30px; width: 0;}
.batsu span {position: relative;}
.batsu span::before,
.batsu span::after {
	content: "";
    position: absolute; top: 50%; left: 50%;
    width: 5px; height: 30px;
    border-radius: 2.5px; background: #fff;
}
.batsu span::before {transform: translate(-50%,-50%) rotate(45deg);}
.batsu span::after {transform: translate(-50%,-50%) rotate(-45deg);}

.batsu:hover span::before,
.batsu:hover span::after {background: #f80; cursor: pointer; transition: 0.3s;}
@media screen and (max-width:699px){
	#popup-inner-area li.batsu {top: 20px; right: 25px;}
}

/**===============================================================**/


#popup-window.posi-abs li {margin: 0 0 15px;}
#popup-window.posi-abs li:last-of-type {margin: 0;}

#popup-window.posi-abs li span.hincode {display: inline-block; min-width: 95px;width:auto; height: 15px; padding: 5px 0; background: #737373; text-align: center; line-height: 1em;}

#popup-window.posi-abs li a {color: #fff;}
#popup-window.posi-abs li a:hover {color: #f80;}

#area01 .posi-abs ul li:nth-child(1) span.hincode {display: inline-block; min-width: 95px;width:auto;}

#area01 input:checked ~ .posi-abs { max-height: none;}
#area01 label { cursor: auto;}


/* 打ち消し用 */
#area01 .posi-abs ul li:nth-child(1) {margin: 0 0 15px;}
#area01 .posi-abs ul li:nth-child(4) {padding: 0; border: none;}
@media screen and (max-width:699px){
	#area01 .posi-abs ul {width: auto; max-width: none; padding: 10px; margin-left:0;}
	#popup-window.posi-abs { margin-left:0;}
}



/**============================================================================================**/

/**========================================**/
/* 表示確認用（本番環境では消す）*/

#parts-list > .dis-tbl_tab > .dis-tblcl01 {
    border: none;
    cursor: auto;
}
/* 
#area02-1 .dis-tbl_tab {
    display: none;
}


#area02-1 .dis-tbl_tab {
    display: table;
} */


/**============================================================================================**/
/**============================================================================================**/
