@charset "UTF-8";

#catalog{
margin-left:10px;
}

/*----- for PC (default) -----*/

/*-----------------2017新デザイン---------------------*/

/*共通スタイル*/
#catalog a{
  color: #0227b9;
  text-decoration: none;
}

#catalog a:hover{
  color: red;
  text-decoration: underline;
}

/*ヘッダ*/
#catalog .catalogHeader{
  _border: none;
  margin: 0 10px 10px 0;
  _width: 100%;
  position: relative;
  padding: 12px 8px 0 130px;
  background-image: linear-gradient(to bottom, #f11d17, #c50303);
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#f11d17', endColorstr='#c50303', GradientType=0)";/*IE8対応*/
}

#catalog .catalogHeaderSp {
  display: none;
}

#catalog .spring{
}

#catalog .catalogHeader__icon{
  width: 150px;
  height: 121px;
  position: absolute;
  top:12px;
  left: -18px;
  background: url(//jp.images-monotaro.com/main/tws/tws_ctlg/img/ctlgHeaderBg.png) no-repeat;
  background-position: 0 0;
}

#catalog .fall{
  background: url(//jp.images-monotaro.com/main/tws/tws_ctlg/img/headerFall.gif) no-repeat top -9px left #f5e654;
  background: url(//jp.images-monotaro.com/main/tws/tws_ctlg/img/headerFall.gif) no-repeat 0 100% #f5e654\9;
}

#catalog .catalogHeader__headline{
  margin: 0;
  padding: 0 0 8px 10px;
  font-size: 1.8em;
  text-align: left;
  font-weight: bold;
  color: #FFF;
}

#catalog .catalogHeader__samurai{
  position: absolute;
  right: 10px;
  top: 12px;
  display: none;
}

#catalog .catalogMain {
  margin: 0 0 0 20px;
}

/* カタログ請求 17秋 */
#catalog .catalogHeader__icon--fall {
  background: url(//jp.images-monotaro.com/main/tws/tws_ctlg/img/ctlgHeaderBg_fall.png) no-repeat;
}

/*お知り合い紹介キャンペーン*/

.campaign__friendintroduction{
  display: block;
  width: 206px;
  height: 100px;
  top:1px;
  right: 10px;
  background: url(//jp.images-monotaro.com/main/tws/tws_ctlg/img/syoukaibanner.png) no-repeat;
  background-position: 0 0;
}

.campaign__friendintroduction:hover{
  background-position: 0 -110px;
}

#catalog .campaign__title{
  font-weight: bold;
}

#catalog .campaign__eyecache {
  position: absolute;
  padding: 3px 6px;
  color: #FFF;
  font-size: 0.9em;
  margin: 5px;
  top: -16px;
  left: 0px;
}

/*ナビ*/
#catalog .catalogNavi {
padding: 0 10px 16px 0;
}


#catalog .catalogNavi a{
color: #333;
text-decoration: none;
display: block;
_zoom: 1;
padding-left: 16px;
background: url(//jp.images-monotaro.com/main/tws/tws_ctlg/img/MRbillet.gif) no-repeat 1px 0px;
font-weight: bold;
font-size: 1em;
_width:300px ;
_margin: 5px 0 0 0 ;
_padding-top: 3px;
}

#catalog .catalogNavi a:hover{
color: #f70000;
text-decoration: underline;
background: url(//jp.images-monotaro.com/main/tws/tws_ctlg/img/MRbillet.gif) no-repeat 1px 0px;
}

#catalog .catalogNavi img{
display: inline-block;
margin: 7px 26px;
float: left;
}

#catalog .catalogNavi ul{
margin: 0;
padding: 0;
}

#catalog .catalogNavi__list--headline{
  padding: 6px 22px 6px 14px;
  font-size: 1.2em;
  font-weight: bold;
  background: #f03d00;
  color: #FFF;
  background:url(//jp.images-monotaro.com/main/tws/tws_ctlg/img/arrowBg.png) no-repeat right #f03d00;
}

#catalog .catalogNavi li{
float: left;
list-style-type: none;
margin: 4px 6px 4px 2px;
_margin: 0;
}

#catalog .catalogNavi .catalogNavi__title,
#catalog .catalogNavi .catalogNavi__aikyachi{
  display: none;
}

#catalog .keihisetuken{
  display: block;
  background: url(//jp.images-monotaro.com/main/tws/tws_ctlg/img/keihiBanner.png) no-repeat center #E60010;
  width: auto;
  height: 40px;
  margin: 8px 0;
}

#catalog .keihisetuken:hover{
  background: url(//jp.images-monotaro.com/main/tws/tws_ctlg/img/keihiBanner.png) no-repeat center #ff0012;
}


/*共通スタイル*/
#catalog .catalogHeader__headline--large{
  font-size: 1.4em;
  color: #fffdb0;
  padding: 0 2px;
}

#catalog .text {
  margin: 0;
  text-align: left;
  color: #FFF;
  border-top: 1px solid #ff9d9d;
  padding: 10px 0 8px 10px;
  line-height: 1.5;
}

#catalog .textnote{
  margin: 0;
  padding: 2px 10px ;
  text-align: left;
  color: #630;
}

#catalog .textred{
  color: #FFF;
}

#catalog .hr__border{
  display:block;
  border: 1px dashed #a2a2a2;
  margin-bottom:10px;
}

/*ブロック要素*/
#catalog .catalogBox{
  width: 290px;
  _float: left;
  margin: 4px 6px 15px 0;
  min-height: 382px;

  background: #F6F6F6;
  border-radius: 4px;
  border: 1px solid #e6e6e6;
  position: relative;
  _text-align: center;
  display: inline-block;
  vertical-align: top;
  _height: 400px;
}

#catalog .new{
  background: #fff7dd;
}

/*ブロックP要素*/
#catalog .catalogBox__text{
  padding: 0;
  margin: 4px 0 ;
  font-size: 0.9em;
  _text-align: left;
}

/*ブロック注意文言*/
.catalogBox .catalogBox__notice{
  line-height: 1.3em;
  font-size: 0.85em;
  color: #a70000;
}

/*ブロックタイトル*/
#catalog .catalogBox__Name{
  height: 38px;
  _height: 48px;
  font-size: 1.25em;
  font-weight: bold;
  padding: 4px 8px 2px 8px;
  background: #e6e6e6;
  _text-align: left;
}

#catalog .catalogBox__Name a{
  color: #2b2b2b;
}

#catalog .catalogBox__Name a:hover{
  color: #f70000;
}

#catalog .new .catalogBox__Name{
  padding: 4px 8px 2px 58px;
  border: none;
  background: #ffe9a8;
}

#catalog .newIcon{
  display: none;
}

#catalog .new .newIcon{
  display: block;
}

#catalog .newIcon{
  position: absolute;
  top: -6px;
  left: -6px;
}

#catalog .catalogName__textSmall{
  font-size: 90%;
}

/*ブロック2カラム*/
#catalog .catalogBox__2column{
  display: table;
  width: 92%;
  margin-top: 8px;
  margin-bottom: 0px;
  margin-left: auto;
  margin-right: auto;
  _display: block;
}

/*ブロック左カラム*/
#catalog .catalogBox__2column--left{
  display: table-cell;
  vertical-align: top;
  padding-right: 10px;
  _float: left;
  width: 147px;
  box-sizing: border-box;
}

/*カタログ表紙画像*/
#catalog .catalogBox__2column--left .ctlgImage{
  border: 1px solid #d4d3d3;
  width: 137px;
  height: 192px;
  box-sizing: border-box;
}

#catalog .catalogBox__2column--left a:hover .ctlgImage{
  border: 1px solid #a6a6a6;
}

/*デジタルカタログ*/
#catalog .catalogBox__2column--left .digicatalog{
  margin: 4px 0;
  display: block;
  padding: 0 0 0 24px;
  _padding: 0 0 0 28px;
  font-weight: bold;
  font-size: 0.95em;
  background: url(//jp.images-monotaro.com/main/tws/tws_ctlg/img/digicatalog.png)  0px -1px no-repeat;
  _background: url(//jp.images-monotaro.com/main/tws/tws_ctlg/img/digicatalog.png)  6px -1px no-repeat;
  _text-align: left;
}

#catalog .catalogBox__2column--left .digicatalog:hover{
  background: url(//jp.images-monotaro.com/main/tws/tws_ctlg/img/digicatalog.png)  0px -19px no-repeat;
  _background: url(//jp.images-monotaro.com/main/tws/tws_ctlg/img/digicatalog.png)  6px -19px no-repeat;
}

#catalog .catalogBox__2column--right{
  display: table-cell;
  vertical-align: top;
}

#catalog .catalogBox__2column--right dl{
  font-size: 0.8em;
  text-align: left;
  width: 95%;
  margin: 0 0 8px 0;
}

#catalog .catalogBox__2column--right dt{
  text-align: left;
  font-weight: bold;
  border-bottom: 1px solid #b3b3b3;
  margin: 0;
}

#catalog .catalogBox__2column--right dd{
  padding-top: 2px;
  line-height: 1.45em;
  margin: 0;
}

#catalog .catalogBox__2column--right .seigo {
  display: inline-block;
  width: 58px;
  height: 20px;
  margin: 8px 0;
  background: url(//jp.images-monotaro.com/main/tws/tws_ctlg/img/seigobtn.png) 2px no-repeat;
  border: 1px solid #F6F6F6;
  _float: left;
}

#catalog .catalogBox__2column--right .seigo:hover {
  background: url(//jp.images-monotaro.com/main/tws/tws_ctlg/img/seigobtn.png) 2px #FFF no-repeat;
  border: 1px solid #d0d0d0;
}

#catalog .catalogBox__btnPresent,
#catalog .catalogBox__btnPresents,
#catalog .catalogBox__btnOrder {
  text-align: center;
  border-radius: 4px;
  font-weight: bold;
  display: block;
  width: 88%;
  margin: 8px auto 12px;
}

#catalog .catalogBox__btnPresent{
  border-color:#900000;
  -webkit-box-shadow: #e26c6c 0px 1px 0px inset;
  border-width: 0px 0px 2px 0px;
  border-style: solid;
  background-color: #FF5C57; background-image: -webkit-gradient(linear, left top, left bottom, from(#FF5C57), to(#fb3030));
  background-image: -webkit-linear-gradient(top, #FF5C57, #fb3030);
  background-image: -moz-linear-gradient(top, #FF5C57, #fb3030);
  background-image: -ms-linear-gradient(top, #FF5C57, #fb3030);
  background-image: -o-linear-gradient(top, #FF5C57, #fb3030);
  background-image: linear-gradient(to bottom, #FF5C57, #fb3030);
  filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#FF5C57, endColorstr=#fb3030);
  text-decoration: none;
  font-size: 1.2em;
  padding: 8px 0;
  color: #FFF;
  text-shadow: -1px 0px 0 rgba(0, 0, 0, 0.81);
}

#catalog .catalogBox__btnPresent:hover{
  border-color:#a70202;
  border-width: 0px 0px 2px 0px;
  border-style: solid;
  background-color: #ff2b24;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#ff251e), to(#ef0909));
  background-image: -webkit-linear-gradient(top, #ff251e, #ef0909);
  background-image: -moz-linear-gradient(top, #ff251e, #ef0909);
  background-image: -ms-linear-gradient(top, #ff251e, #ef0909);
  background-image: -o-linear-gradient(top, #ff251e, #ef0909);
  background-image: linear-gradient(to bottom, #ff251e, #ef0909);
  filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#ff251e, endColorstr=#ef0909);
  color: #FFF;
  text-decoration: none;
}

#catalog .catalogBox__btnOrder{
  font-size: 1em;
  padding: 4px 0;
}

/*注意事項の行間揃え*/
.catalogTextNotice{
  line-height:1.5;
  padding-left: 24px;
}
.catalogTextNotice li{
  list-style-type: disc;
}

/* 在庫切れ表示 */
.OutOfStock{
  width: auto;
    text-align: center;
    font-size: 15px;
    background: #e6e6e6;
    box-sizing: border-box;
    padding: 8px;
    border-radius: 4px;
    color: #a70000;
    margin: 8px 16px 12px;
}



/* 総額表示対応(個人) スタイルガイドから「is-Disabled」を流用 */
#catalog .catalogBox__btnPresent.is-Disabled {
  -webkit-box-shadow: none;
  box-shadow: none;
  pointer-events: none;
  margin: auto;
  padding: 8px;
  font-size: 13px;
  line-height: 1.3;
  /* (カタログ一覧専用)*/
  color: #866714;
  cursor: default;
  background-color: #fdfadd;
  border: 1px solid #e6cf1b;
  border-radius: 0;
  text-shadow: none;
  background-image: none;
  filter: none;
}

/*IE9対策*/
#catalog .catalogBox__btnPresent.is-Disabled:hover {
  text-shadow: none;
  background-image: none;
  filter: none;
}

/* 総額表示対応(個人) カタログ一覧専用 */
#catalog .catalogBox__btnOrder.is-Disabled {
  display: none;
}

/*----- end of PC (default) -----*/



/*----- for SP (max-width:767px) -----*/
@media screen and (max-width: 767px) {

.itd_parents{
  margin: 0 10px;
}

#sns_button{
  display: none;
}

#catalog{
  padding: 10px;
  margin: 0;
}

#catalog .catalogHeader {
  padding: 0;
  margin: 0;
  display: none;
}

#catalog .catalogHeaderSp {
  display: block;
  background-image: linear-gradient(to bottom, #f11d17, #c50303);
  padding: 8px 8px 6px 8px;
  border: 1px solid #c5c5c5;
  border-radius: 4px;
  margin-bottom: 3px;
}

#catalog .catalogHeader__samurai{
  display: none;
}

#catalog .catalogHeader__headline {
  font-size: 1.25em;
  margin: 2px 0;
  padding: 0px;
}

#catalog .catalogNavi{
  background: none;
  padding: 4px;
  margin: 2px 0 0 0;
  border-radius: 4px;
  position:relative;
}

#catalog .catalogNavi .catalogNavi__title{
  display: block;
  padding: 4px 4px 4px 50px;
  color: #333;
  font-weight: bold;
  font-size: 1.1em;
  border-bottom: 1px solid #999;
  background: #ffdcd8;
  margin-bottom: 4px;
}

#catalog .catalogNavi .catalogNavi__aikyachi{
  display: block;
  position: absolute;
  top: -9px;
  left: -18px;
}

#catalog .catalogNavi__list--headline{
  display: none;
}

#catalog .text {
  font-size: 0.9em;
  padding: 6px 0 0 0;
  margin: 4px 0;
  line-height: 1.5;
}

#catalog .hr__border{
  display: block;
  border: none;
  margin: 0;
}

#catalog .footer .hr__border{
  display: block;
  border: 1px dashed #a2a2a2;
  margin: 10px 0;
}

#catalog p.textnote{
  /*display: none;*/
}

#catalog .footer p.textnote{
  font-size: 0.9em;
  display: block;
}

#catalog .catalogBox{
  width: 99%;
  margin: 8px 0 16px 1px;
  min-height: auto;
  padding-bottom: 8px;
}

#catalog .catalogBox__text{
  margin: 4px 0 ;
  font-size: 1em;
}

/*ブロック注意文言*/
.catalogBox .catalogBox__notice{
  font-size: 1em;
}

/*ブロック左カラム*/
#catalog .catalogBox__2column--left{
  width: 150px;
}

#catalog .catalogBox__2column--right{
}

#catalog .catalogBox__2column--right dl{
  font-size: 12px;
  margin-bottom: 8px;
}

#catalog .catalogBox__2column--right dt{
}

#catalog .catalogBox__btnPresent,
#catalog .catalogBox__btnOrder{
  width: auto;
  margin-top: 10px;
  margin-bottom: 10px;
  margin-left: 16px;
  margin-right: 16px;
}

#catalog .footer h4,
#catalog .footer img{
  display: none;
}

/* 総額表示対応(個人) */
#catalog .catalogBox__btnPresent.is-Disabled {
  margin: 10px 16px;
}

}

/*----- end of SP (max-width:767px) -----*/






/*------------------jQuery------------------*/


/*-------trailer-------*/
.catalogBox #jQueryPushs{
font-size:0.9em;
font-weight:bold;
margin:0;
padding:2px 0;
text-decoration:underline;
}


.catalogBox #jQueryBoxs{
font-size:1em;
_font-size:1em;/*IE*/
line-height:1.4em;
}

/*-------trailer/-------*/


.catalogBox #jQueryPush{
font-size:0.9em;
font-weight:bold;
margin:0;
padding:2px 0;
text-decoration:underline;
}


.catalogBox #jQueryBox{
font-size:1em;
_font-size:1em;/*IE*/
line-height:1.4em;
}


/*------------------earthquake------------------*/
.chuui03{
margin:10px 0;
color:#663300;
width:95%;
margin-left:15px;
padding:5px 0;
border-top:#CCCCCC solid 1px;
border-bottom:#CCCCCC solid 1px;
line-height:1.1em;
text-align:left;
}

/*------------------経費節減バナー------------------*/
a.keihiBanner{
  text-align: center;
  background: #e70000;
  margin-bottom: 8px;
  display: block;
}

a.keihiBanner:hover{
  background: #FF0000;
}

/*-----------------吹き出し---------------------*/

#tws_ctlg12s .catalogBox .IconInfo_tip {
  position: absolute;
  border-left: 12px solid orange;
  border-bottom: 9px solid transparent;
  border-bottom-color: transparent;
  *border-bottom-color: transparent;
  _border-bottom-color: white; /* for IE6 */
  font-weight:normal;
}

#tws_ctlg12s .catalogBox .IconInfo_tipbody {
  position:relative;
  font-size:90%;
  width: 18em;
  _width: 15em;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border: 2px solid orange;
  background: white;
  padding: 5px;
  radius: 4px;
  margin-left:-7em;
  _margin:0 0 0 -5em;
  color:#000000;
  font-weight:normal;
}

#tws_ctlg12s .catalogBox  .note img{
  vertical-align: middle;
  margin-right: 3px;
}

/*------------------clearfix------------------*/
.clearfix:after {
  content: "";
  display: block;
  clear: both;
}

.clearfix {
  overflow: hidden;
  zoom: 1;
}