@charset "UTF-8";

/*---------------------------------
スタイルガイド流用
---------------------------------*/
/* アイコン */

@font-face {
  font-family: "monotaroIcon";
  src: url("/fonts/monotaroIcon.eot?v=c7502c853a958c880505ff312d10b137");
  src: url("/fonts/monotaroIcon.eot?v=c7502c853a958c880505ff312d10b137") format("embedded-oPentype"), url("/fonts/monotaroIcon.ttf?v=c7502c853a958c880505ff312d10b137") format("truetype"), url("/fonts/monotaroIcon.woff?v=c7502c853a958c880505ff312d10b137") format("woff"), url("/fonts/monotaroIcon.svg?v=c7502c853a958c880505ff312d10b137") format("svg");
  font-weight: normal;
  font-style: normal; }

[class*="Icon--"],
[class*="Icon--"]:after,
[class*="Icon--"]:before {
  font-family: "monotaroIcon" !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }

  .Icon--InfoCircle:before {
    content: "\e92f"; }
    
/* ツールチップ */
.ToolTip {
  display: none; }

.ToolTip__Message {
  position: absolute;
  z-index: 9999;
  display: block;
  color: #fff;
  font-size: 13px;
  line-height: 1.5; }

.ToolTip__Body {
  position: relative;
  padding: 16px;
  background: #003b65;
  border-radius: 4px;
  display: block;
  max-width: 360px; }

.ToolTip__Body--Top:after,
.ToolTip__Body--Bottom:after,
.ToolTip__Body--Left:after,
.ToolTip__Body--Right:after {
  content: "";
  position: absolute;
  display: block;
  width: 0;
  height: 0; }

.ToolTip__Body--Top {
  top: -12px; }
  .ToolTip__Body--Top:after {
    left: 50%;
    bottom: -8px;
    margin-left: -8px;
    border-top: 8px solid #003b65;
    border-right: 8px solid transparent;
    border-bottom: 0 solid transparent;
    border-left: 8px solid transparent; }

.ToolTip__Body--Bottom {
  bottom: -12px; }
  .ToolTip__Body--Bottom:after {
    left: 50%;
    top: -8px;
    margin-left: -8px;
    border-top: 0 solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 8px solid #003b65;
    border-left: 8px solid transparent; }

.ToolTip__Body--Left {
  left: -12px; }
  .ToolTip__Body--Left:after {
    top: 50%;
    right: -8px;
    margin-top: -8px;
    border-top: 8px solid transparent;
    border-right: 0 solid transparent;
    border-bottom: 8px solid transparent;
    border-left: 8px solid #003b65; }

.ToolTip__Body--Right {
  right: -12px; }
  .ToolTip__Body--Right:after {
    top: 50%;
    left: -8px;
    margin-top: -8px;
    border-top: 8px solid transparent;
    border-right: 8px solid #003b65;
    border-bottom: 8px solid transparent;
    border-left: 0 solid transparent; }


/*---------------------------------
Ppage.cssから流用するクラス
---------------------------------*/
.ProductInfoArea {
  margin-left: 384px;
}

/*---------------------------------
既存のCSSを上書きする
---------------------------------*/
/*画像モーダル表示*/
#lightbox-container-image-data-box {
  box-sizing: content-box;
}

/*カスタマイズ商品項目*/
.optionBuy__infonavi--item {
  padding: 0;
  list-style: none;
  font-size: 1.3rem;
}

/*カスタマイズ商品エリア*/
.optionBuy__visual {
  margin-right: 18rem;
}

/*インフォメーションナビ*/
.optionBuy__infonavi {
  background:URL(//jp.images-monotaro.com/img/optionBuy/infonavi_bg.gif) #fff repeat-x top;
  box-sizing: content-box;
  width: 16.5rem;
}

.optionBuy__mainnavi--price {
  font-size: 1.3rem;
}

.optionBuy__input input {
  font-size: 1.3rem;
  margin-bottom: 4px;
}

.optionBuy__form--count {
  font-size: 1.3rem;
}

.optionBuy__mainnavi__right .optionBuy__infonavi--item li {
  font-size: 1.5rem;
}

.optionBuy__mainnavi__right .optionBuy__infonavi--No {
  font-size: 1.5rem;
}

.optionBuy__infonavi--ships,
.optionBuy__mainnavi--ships {
  display: inline-block;
  text-align: center;
  font-size: 1.1rem;
  margin-bottom: 8px;
  min-width: 48px;
  height: 24px;
  line-height: 24px;
  padding: 0 8px;
  background: #0063aa;
  color: #fff;
  border-color: #0063aa;
  font-weight: normal;
  border-radius: 0;
}

.optionBuy__infonavi--No {
  font-size: 1.3rem;
  line-height: 1.5;
}

.optionBuy__infonavi--basket .add_basket.disabled,.optionBuy__mainnavi--basket .add_basket.disabled {
	opacity: 1;
  background: transparent url(//jp.images-monotaro.com/img/ProductPrint/basketbutton_disabled.png) no-repeat;
}

input.add_basket {
  cursor: pointer;
  display: inline-block;
  vertical-align: top;
  width: 142px;
  height: 32px;
  border: none;
  background: transparent url(//jp.images-monotaro.com/img/ProductPrint/basketbutton.png) no-repeat;
  margin: 0;
  padding: 0;
}

/*出荷目安説明リンク*/
a.optionBuy__infonavi--shipsinfo,
a.optionBuy__mainnavi--shipsinfo {
  margin-top: 0;
} 

.optionBuy h5 {
  font-size: 15px;
  padding: 0px 8px;
}

.optionBuy__formWraps input[type=radio] {
  margin: 12px 8px 0 8px;
}

.optionBuy__form label,
.optionBuy__input--name {
  font-size: 15px;
}

.optionBuy__input--name {
  margin-top: 8px;
  font-weight: bold;
}

.optionBuy__form--caption {
  font-size: 11px;
}

.clear {
  width: 1%;
  clear: both;
  font-size: 0;
  margin: 0;
  padding: 0;
}

/*-------------------------------------
オプションフォーム全体
------------------------------------*/
/*floatによるレイアウト崩れ対策　clearfix指定*/
.optionBuy__form:after {
  content: ' ';
  display: block;
  visibility: hidden;
  clear: both;
  height: 0;
  font-size: 0;
}
  
/*---------------------------------
独自CSS
---------------------------------*/
.SubInfoArea--BorderNone {
  border: none;
}

.OptionBuyLineup {
  margin-bottom: 16px;
}

.OptionBuyLineup__Headline {
  color: #333;
  margin-bottom: 4px;
  font-size: 13px;
}

.OptionBuyLineup__ImageBox {
  display: inline-block;
  position: relative;
  border: none;
  margin-right: 4px;
  text-align: center;
  font-size: 0;
  padding: 1px;
}

.OptionBuyLineup__Image {
  height: 80px;
  width: 80px;
}

.OptionBuyLineup__Caption {
  position: absolute;
  bottom: 1px;
  left: 1px;
  background: #666666;
  opacity: 0.8;
  color: #fff;
  padding: 0 4px;
  text-decoration: none;
  font-size: 11px;
  width: 80px;
}

/* お気に入りラベル分割ボタン  カスタマイズ商品のh4指定を上書きするため*/
.Dropdown__Title {
  background:#fff !important;
  border-top: none !important;
  font-size: 13px !important;
  padding: 8px 16px 12px !important;
  margin: 0 -16px 0px !important;
  border-bottom: 1px solid #ccc !important;
}

/*---------------------------------
styleguideに追加したいクラス
---------------------------------*/
.u-Display--Flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.u-JustifyContent--SpaceBetween {
  justify-content: space-between;
}

.u-AlignItems--Center {
  align-items: center;
}

.u-MarginRight--8 {
  margin-right: 8px;
}


/*-------------------------------------
 販売期限
------------------------------------*/
.SalesPeriodArea{
  text-align: right;
  margin-top: 4px;
}
.SalesPeriodArea--SubColumn{
  text-align: left;
  margin: 4px 5px 0;
}
.SalesPeriod{
  display: inline-block;
  vertical-align: middle;
  font-size: 13px;
  line-height: 1.3;
}