@charset "UTF-8";
/*================================================
商品一覧ページの商品比較専用CSS
================================================*/

.item_compare_wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    border:1px solid #8C8C8C;
    position: relative;
    border-radius: 5px;
    margin-bottom: 12px;
	cursor: pointer;
}

.item_compare_check {
  content: '';
  width: 10px;
  height: 5px;
  border-left: 1px solid #8C8C8C;
  border-bottom: 1px solid #8C8C8C;
  transform: rotate(-45deg);
  margin-bottom: 4px;
}

.item_compare_text {
  margin-left:6px;
  color:#8C8C8C;
  padding: 6px 0;
}

.addItemCompare {
    cursor: pointer;
}

.compare_on {
    background-color:#8C8C8C;
}

.compare_on .item_compare_check {
  border-left: 1px solid #fff;
  border-bottom: 1px solid #fff;
}

.compare_on .item_compare_text {
    color:#fff;
}

/* 比較エリア
********************************************/
.compare_area {
	display:none;
	position: fixed;
	top: 0px;
	right: -304px;
	width: 304px;
	height: 100vh;
	background-color: #EDEDED;
	/*padding: 289px 15px 0;*/
	padding: calc((100vh - 500px)/2) 15px 0;    
	z-index: 20000;
	transition: right .5s ease;
}

.compare_area.open {
	right: 0!important;
    display: block;
}

.compare_area.active {
	right: -152px;
	display: block;
}

.compare_area.active * {
    pointer-events: none;
}

.compare_area.active:hover {
    right: 0!important;
}

.compare_area.active:hover * {
    pointer-events:auto;
}

.compare_area .compare-title {
    display:none;
}

.compare_item {
    width:274px;
    display: flex;
    margin-bottom:10px;
}

.compare_item_wrap {
    width: 255px;
    margin-right: 4px;
    background-color:#fff;
    display: flex;
    padding: 10px;
}

.compare_item_remove {
    width:15px;
    /*background-color:#fff;*/
	display: block;
    position: relative;
	cursor: pointer;
}

.compare_item_remove::before, .compare_item_remove::after{
    content: "";
    display: block;
    width: 100%;
    height: 1px;
    background: #707070;
    transform: rotate(45deg);
    transform-origin:0% 50%;
    position: absolute;
    top: calc(50% - 5px);
    left: 14%;
}

.compare_item_remove::after{
    transform: rotate(-45deg);
    transform-origin:100% 50%;
    left: auto;
    right: 14%;
}

.compare_item_photo {
    min-width: 80px;
    flex-basis: 80px;
}

.compare_item_image {
    width: 100%;
}

.compare_item_info {
    /* margin-left: 10px; */
    padding: 0 10px;
    min-width: 155px;
    flex-basis: 155px;
}

.compare_item_alert {
    display: none;
    border: 1px solid #FF0000;
    color: #FF0000;
    padding: 10px 0;
    text-align: center;
    margin-bottom: 20px;
}

.compare_item_list {
    height: 320px;
    min-height: 320px;    
    margin-bottom:20px;
}

.compare_item_do,
.compare_item_clear {
    background-color:#8C8C8C;
    color:#fff;
    border-radius:5px;
    padding:14px 0;
    text-align:center;
    cursor: pointer;
    margin-bottom: 10px;
}

.compare_item_name {
    display: block;
    font-size: 12px;
    line-height: 1.2;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    margin-bottom: 5px;
}

.compare_item_mkcode {
    
}

.page-mask-white {
	background-color: #fff;
	filter: progid:DXImageTransform.Microsoft.Alpha(opacity=60);
	-moz-opacity: 0;
	opacity: 0;
	display: none;
	position: fixed;
	left: 0px;
	top: 0px;
	overflow: hidden;
	width: 100%;
	height: 100%;
	z-index: 1301;
}