@charset "shift_jis";
/* CSS Document */

/*230905追加分*/
#monitor_mtx .btn{
  font-size: 12px;
  font-weight: 100;
  color: #fff;
  background-color: #222;
  border-radius: 5px;
  position: relative;
  margin: 5px auto;
  padding: 2px 0;
}
#monitor_mtx .btn::after{
  content: "";
  position: absolute;
  top: 50%;
  right: 2%;
  transform: translateY(-50%);
  border: transparent 5px solid;
  border-left: solid 8px #fff;
}

/*タイトル*/
#monitor_mtx_title h3{
  background: #222;
  color: #fff;
  text-align: center;
  padding: 2px 0 6px 0;
  margin: 0 auto 0px auto;
  max-width: 750px;
  font-weight: normal;
}
#monitor_mtx .pc_none{display:none;}

/*注釈*/
#monitor_mtx h4{
  font-size: 15px;
  color: #222;
  text-align: right;
  font-weight: 500;
}

/* 
#monitor_mtx *{

    font-family:"Century Gothic","ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	} */

#monitor_mtx {
    width:750px;
    margin:0 auto 30px;
	}


	
#monitor_mtx a{
	color:#000;
	text-decoration:none;
}


#monitor_mtx .list{
     width: 850px;
 }
 

#monitor_mtx table {
  border-collapse: collapse;
  margin: 0;
  padding: 0;
  width: 750px;
  table-layout: fixed;
  color: #000;
  border-bottom: 1px solid #f2f3f3;
}

#monitor_mtx table tr {

  padding:0;
  /*border-bottom: 2px solid #fff;*/
}

#monitor_mtx thead tr th{
  background-color: #fff;
  padding: 8px;
  position: relative;
}
#monitor_mtx img.nothing{
  position: absolute;
  width: 50px;
  height: auto;
  right: 5px;
  top: -5px;
}


#monitor_mtx table tr:nth-child(even),
#monitor_mtx table tbody > th:nth-child(even) {/*偶数 白*/
  background-color: #fff;
}

#monitor_mtx table tr:nth-child(odd),
#monitor_mtx table tbody > th:nth-child(odd) {/*奇数 グレー*/
  background-color: #f2f3f3;
}

#monitor_mtx table tbody > tr th{
  width: 110px;
}


#monitor_mtx table th,
#monitor_mtx table td {
  padding: 10px;
  border-right: 1px solid #eee;
}
#monitor_mtx table th {
  font-size:13px;
  text-align: center;
}

#monitor_mtx .txt{
   text-align: center;
   font-size: 13px;
}
#monitor_mtx .txt_left{
  text-align: left;
}
#monitor_mtx .huzoku{
   vertical-align: top;
   text-align: left;
   font-size: 13px;
}

#monitor_mtx .non{
  background:#fff;
  width: 110px;
}

#monitor_mtx .txt a{
   background:#ef5b4c;
   display:block;
   padding: 7px 0;
   color:#fff;
}

#monitor_mtx .txt a::after{
    content: ' >';
}

#monitor_mtx .txt a:hover{
   background:#f37b34;
}


/*リンク先*/
#monitor_mtx td.price a{
  display: block;
  /* font-size: 13px; */
  font-weight: bold;
  background-color: #ef5b4c;
  color: #fff;
  border-radius: 40px;
  padding: 5px 0;
  position: relative;
  border: 1px solid #ef5b4c;
}
#monitor_mtx td.price a p{
  /* padding-left: 15px; */
  text-align: center;
  font-weight: normal;
  position: relative;
}
#monitor_mtx td.price a p::after{
  font-family: 'Material Icons';
  content: "chevron_right";
  position: absolute;
  top: 52%;
  font-size: 18px;
  right: 7%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
}

#monitor_mtx .spesicalprice{
  display: none;
}
#monitor_mtx .price{
  color: #dd4535;
  font-size: 20px;
}

#monitor_mtx .intax{
  color: #dd4535;
  font-size: 12px;
  /* display: none; */
}


/******PC******/
@media screen and (min-width:600px){

#monitor_mtx table tr td br.smp{
  display: none;
}
#monitor_mtx td.price a:hover{
  background-color: #fff;
}
#monitor_mtx a:hover img{
  opacity: 0.8;
}


/**アコーディオン**/
#monitor_mtx .accordion {
    margin-top: 10px;
    position: relative;
    width: 750px;
}
#monitor_mtx .accordion-title {
  color: #fff;
  cursor: pointer;
  font-size: 16px;
  padding: 10px 0;
}
#monitor_mtx .accordion-content {
  display: none;
  padding: 10px 0;
}
#monitor_mtx .accordion-content p {
  font-size: 13px;
  line-height: 1.5;
}
/***タイトルの背景色***/
#monitor_mtx .accordion-item:nth-of-type(1) .accordion-title {
  /* background-color: #455158; */
  color: #222;
  text-align: center;
  font-weight: normal;
  box-sizing: border-box;
  border: 1px solid;
}
/***矢印***/
#monitor_mtx .accordion-title {
  position: relative;
}
#monitor_mtx .accordion-title::after {
  border-right: solid 2px #222;
  border-top: solid 2px #222;
  content: "";
  display: block;
  height: 8px;
  position: absolute;
  right: 25px;
  top: 38%;
  transform: rotate(135deg);
  transition: transform .3s ease-in-out, top .3s ease-in-out;
  width: 8px;
}
#monitor_mtx .accordion-title.open::after {
  top: 45%;
  transform: rotate(-45deg);
}

}

/******SMP******/
@media screen and (max-width: 600px) {

  /**アコーディオン**/
	#monitor_mtx .accordion {
		margin: 2vw 0 1vw;
		position: relative;
		width: 100%;
	}
	#monitor_mtx .accordion-title {
		color: #fff;
		cursor: pointer;
		font-size: 16px;
		padding: 10px 0;
	}
	#monitor_mtx .accordion-content {
		display: none;
		padding: 3vw 0 2vw;
	}
	#monitor_mtx .accordion-content p {
		font-size: 13px;
		line-height: 1.5;
	}
	/***タイトルの背景色***/
	#monitor_mtx .accordion-item:nth-of-type(1) .accordion-title {
    background-color: #fff;
    color: #222;
    font-size: 3.5vw;
    box-sizing: border-box;
    font-weight: normal;
    border: 1px solid;
    width: 100%;
    text-align: center;
    /* padding-left: 10vw; */
	}
	/***コンテンツボックスの枠線***/
	#monitor_mtx .accordion-item:nth-of-type(1) .accordion-content {
		overflow: auto;
	}
	/***矢印***/
	#monitor_mtx .accordion-title {
		position: relative;
	}
	#monitor_mtx .accordion-title::after {
    border-right: solid 2px #222;
    border-top: solid 2px #222;
    content: "";
    display: block;
    height: 1.5vw;
    position: absolute;
    right: 15vw;
    top: 4vw;
    transform: rotate(135deg);
    transition: transform .3s ease-in-out, top .3s ease-in-out;
    width: 1.5vw;
	}
	#monitor_mtx .accordion-title.open::after {
		top: 45%;
		transform: rotate(-45deg);
	}
  #monitor_mtx .accordion-title::before {
    border-right: solid 2px #222;
    border-top: solid 2px #222;
    content: "";
    display: block;
    height: 1.5vw;
    position: absolute;
    left: 15vw;
    top: 4vw;
    transform: rotate(135deg);
    transition: transform .3s ease-in-out, top .3s ease-in-out;
    width: 1.5vw;
	}
	#monitor_mtx .accordion-title.open::before {
		top: 45%;
		transform: rotate(-45deg);
	}

  #monitor_mtx .circle{
    width: 15px;
    /* これを%指定などで可変にする。またはJavaScriptで値を変化させる。 */
  }
  #monitor_mtx a:active img{
    opacity: 0.8;
  }

  #monitor_mtx td.price a{
    padding: 0.5vw 0;
  }
  #monitor_mtx td.price a p{
    margin-bottom: 0;
    position: relative;
    /* padding-left: 10px; */
  }
  #monitor_mtx td.price a p::after{
    font-family: 'Material Icons';
    content: "chevron_right";
    position: absolute;
    top: 50%;
    font-size: 14px;
    right: 1vw;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
  }

  #monitor_mtx td.price a::after{
    top: 52%;
  }
  #monitor_mtx img.nothing{
    position: absolute;
    width: 10vw;
    height: auto;
    right: 0px;
    top: 0;
    z-index: 999;
  }

  #monitor_mtx .smp_none{
    display: none !important;
  }

  #monitor_mtx thead tr th {
    padding: 10px;
  }
  #monitor_mtx table th,
#monitor_mtx table td {
  padding: 2px;
  border-right: 1px solid #eee;
  vertical-align: middle;
}

/*タイトル*/
#monitor_mtx_title h3{
    font-size:4vw;
    background: #222;
    color: #fff;
    text-align: center;
    padding: 2% 0;
    margin: 0 0 2% 0;
	}


#monitor_mtx {
    width: 100%;
    margin: 0 0 3vw;
    padding-bottom: 2vw;
    overflow-x: auto;
}


	
#monitor_mtx .list{
     width: 100%;
 }
 
#monitor_mtx table {
  width: 100%;
  position: relative;

}
/*6商品表示の場合 追加：220512*/
#monitor_mtx table.col_6 {
  width: 850px;
  position: relative;

}
 
/*矢印*/
#monitor_mtx table::before,
#monitor_mtx table::after {
    display: none;
    position: absolute;
    content: "";
    /* display: inline-block; */
    width: 5px;
    height: 5px;
    border-top: 1px solid #3a3936;
    border-right: 1px solid #3a3936;
    top: 35vw;
    z-index: 5;
}

#monitor_mtx table::before {
    transform: rotate(-135deg);
    left: 1.6vw;
}

#monitor_mtx table::after {
    transform: rotate(45deg);
    right: 1.6vw;
}

#monitor_mtx table tr .smp_l{
  text-align: left !important;
}


#monitor_mtx table tr td br.pc{
  display: none;
}

#monitor_mtx .non {
  width: 79px;
}
#monitor_mtx table tbody > tr th{
  width: 79px;
}


#monitor_mtx table th , #monitor_mtx .txt{
   font-size: 10px;
}

}