@charset "UTF-8";

/*==============================================================

  トップページ

===============================================================*/

/* Reviewに追加　星とテキストを一列にする *****/
.Review__Count--Text{
  float: right;
}


/* コンテンツ毎くくり ****************************/
.Section3mBox{
  width: 100%;
  max-width: 1172px;
  padding: 72px 16px;
  margin: 0 auto;
}
.Section3m{
  display: inline-block;
  width: 100%;
  max-width: 1100px;
  padding: 0 16px;
  text-align: left;
}
.Section3m--Wide{
  padding: 0;
}
.Section3m--PaddingTopPlus{
  padding: 64px 0 0;
}
.Section3m--Choice{
  width: calc(100% + 24px);
  max-width: 1124px;
  padding: 0;
  margin: 0 -12px;
}


/* Header　**********************************/

/* タイトル */
.TopPageTitle{
  width: 1334px;
  margin: 0 auto;
  text-align: center;
}
.ToppageTitle__Image{
  width: 100%;
  max-width: 1180px;
}


/* Gnavi　**********************************/

.GlobalNaviListPosition{
  position: relative;
  height: 6.6rem;
}

.GlobalNaviListBox{
  position: absolute;
  width: 100%;
  height: 6.4rem;
  background-color: #fff;
  box-shadow: 0px 2px 2px #ccc;
}
/* GNavi固定用 */
.GlobalNaviListBox--Fixed{
  position: fixed;
  top: 0;
  left: 16px;
  right: 16px;
  width: calc(100% - 32px);
  z-index: 10;
}

.GlobalNaviList{
  width: 100%;
  max-width: 1060px;
  padding: 0;
  margin: 0 auto;
  list-style: none;
}

/* GNavi 各リンク部分 *****/
.GlobalNaviList__Item{
  display: block;
  float: left;
  width: 25%;
  max-width: 285px;
  padding: 20px 0;
  font-size: 1.5rem;
  text-align: center;
}
.GlobalNaviList__Item:last-child{
  position: relative;
}

.GlobalNaviList__Link{
  display: block;
  text-decoration: none;
  border-left: #ccc 1px solid;
}
.GlobalNaviList__Link--Last{
  border-right: #ccc 1px solid;
}
.GlobalNaviList__Link:link,
.GlobalNaviList__Link:hover,
.GlobalNaviList__Link:active,
.GlobalNaviList__Link:visited{
  color: #333;
}

/* 「PickUp」追加 */
.GlobalNaviList__PickUp{
  margin: 0 4px 0 0;
  color: #b1000d;
}

/* お役立ちコンテンツ **********/
.GlobalNaviUseful{
  display: none;
  width: 400%;
  position: absolute;
  right: 0;
  background-color: #fbe9ea;
  margin: 2.4rem 0 0;
  padding: 16px;
  text-align: left;
  z-index: 100;
}
/* 表示 */
.GlobalNaviUseful--Open{
  display: block;
}

/* 下向き矢印 */
.GlobalNaviUseful:before {
  content: "";
  position: absolute;
  top: -4px;
  left: 88%;
  margin-left: -12px;
  border: 12px solid transparent;
  border-top: 12px solid #fff;
  z-index: 200;
}


/* 各リンクコンテンツ *****/
.GlobalNaviUseful__Link{
  position: relative;
  float: left;
  width: calc((100% - 48px) / 3);
  height: 10.5rem;
  margin: 8px;
  text-decoration: none;
  background-color: #fff;
}
.GlobalNaviUseful__Link:hover{
  opacity: 0.6;
}

/* コンテンツタイトル */
.GlobalNaviUseful__Title{
  padding: 0 0 0 114px;
  margin: 8px 8px 8px 0;
  font-size: 1.5rem;
  text-decoration: underline;
}

/* コンテンツ説明 */
.GlobalNaviUseful__Explanation{
  padding: 0 0 0 114px;
  margin: 0 8px 0 0;
  font-size: 1.3rem;
  line-height: 1.2;
}

/* コンテンツイメージ */
.GlobalNaviUseful__Image{
  position: absolute;
  top: 0;
  width: 105px;
  height: 105px;
}

/* 閉じるボタン */
.GlobalNaviUseful__CloseButton{
  display: none;
}

/* Specialバナー(Saleなど) ****************************/
.BackGroundColor--Special{
  padding: 40px 0;
  background-color: #fef8e8;
}

/* バナーの上 */
.SpecialTitle{
  margin: 0 0 8px;
  font-size: 1.5rem;
  font-weight: bold;
}

/* バナー部分 *****/
.SpecialBanner{
  display: inline-block;
  line-height: 1;
}

.SpecialBanner__Link{
  display: inline-block;
}
.SpecialBanner__Link:hover,
.SpecialBanner__Link:active{
  opacity: 0.6;
}

/* 2列バナー・3列バナー */
.SpecialBanner__Link--2rows,
.SpecialBanner__Link--3rows{
  float: left;
  margin: 0 12px;
}
/* 2列バナー */
.SpecialBanner__Link--2rows{
  width: calc((100% - 48px) / 2);
}
/* 3列バナー */
.SpecialBanner__Link--3rows{
  width: calc((100% - 72px) / 3);
}

/* バナー部分 */
.SpecialBanner__Image{
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 100px;
}
.SpecialBanner__Image--Rows{
  max-height: 152px;
}


/* コンテンツタイトル **********************************/
.Contents__ToppageTitle{
  padding: 0 0 8px;
  margin: 0 16px 40px;
  font-size: 4.2rem;
  text-align: center;
}

/* 黄色のアンダーライン */
.Contents__ToppageTitleEmphasis{
  text-decoration: underline solid #f5df1d;
  text-decoration-thickness: 15px;
  text-underline-offset: -2px;
}

/* 小さい文字 */
.Contents__ToppageTitleSmall{
  font-size: 3.2rem;
}

/* キャンペーン情報 **********/
.CampaignBox{
  display: flex;
}
.CampaignBox--ThreeRows{
  display: flex;
  margin: 0 0 56px;
  justify-content: space-around;
}

.Campaign{
  width: calc(100% - 312px);
  margin: 0 24px 0 0;
  text-align: center;
  border: #b1000d 2px solid;
  background:url("//jp.images-monotaro.com/topic/3m/img/3m-top-campaignBack.svg") #fff no-repeat center bottom -32px;
}

/* タイトル（【～年 第～弾】） */
.Campaign__Title{
  position: relative;
  padding: 4px 0;
  margin: 0 0 16px;
  color: #fff;
  font-size: 2.4rem;
  font-weight: bold;
  text-align: center;
  background-color: #b1000d;
}
.Campaign__Title:before{
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -12px;
  border: 12px solid transparent;
  border-top: 12px solid #b1000d;
}

/* 説明画像（商品含む） */
.Campaign__Image{
  margin: 0 auto 24px;
}

/* キャンペーンコード */
.Campaign__Code{
  float: left;
  width: 320px;
  margin: 0 24px 0 48px;
}
.Campaign__CodeImage{
  width: 320px;
  height: auto;
}

/* 割引対象商品はこちら */
.Campaign__Product{
  float: left;
  width: 310px;
  height: auto;
}
.Campaign__Product:hover{
  opacity: 0.6;
}
.Campaign__ProductImage{
  width: 100%;
  height: auto;
}

/* キャンペーン情報の右横の情報 **********/
.CampaignOther{
  float: right;
  width: 280px;
}
.CampaignOther--ThreeRows{
  float: none;
  width: 880px;
  display: flex;
  justify-content: space-between;
}

/* 次回キャンペーン情報 *****/
.CampaignNextBox{
  margin: 0 0 32px;
  border: #b1000d 2px solid;
  background-color: #fff;
}
.CampaignNextBox--ThreeRows{
  margin: 0;
  width: 280px;
}

/* タイトル（第～弾キャンペーン予告） */
.CampaignNextBox__Title{
  padding: 12px 0 8px;
  color: #b1000d;
  font-size: 2.2rem;
  font-weight: bold;
  text-align: center;
  background-color: #e9c800;
}

/* 情報内容 */
.CampaignNext{
  position: relative;
}

/* テキスト情報 */
.CampaignNext__Text{
  margin: 8px 0 0 8px;
  width: 184px;
  height: auto;
}

/* 画像（人物） */
.CampaignNext__Image{
  position: absolute;
  right: -16px;
  bottom: -16px;
  width: 130px;
  height: auto;
  overflow: hidden;
}

/* 終了キャンペーン情報 *****/
.CampaignFinishBox{
  margin: 0;
  border: #b3b3b3 2px solid;
  background-color: #fff;
}

/* タイトル */
.CampaignFinishBox__Title{
  padding: 12px 0 8px;
  color: #fff;
  font-size: 2.2rem;
  font-weight: bold;
  text-align: center;
  background-color: #666;
}

/* 情報内容 */
.CampaignFinish{
  position: relative;
  width: 280px;
}

/* テキスト情報 */
.CampaignFinish__Text{
  margin: 12px 0 12px 16px;
  width: 250px;
  height: auto;
}

/* 画像（人物） */
.CampaignFinish__Image{
  position: absolute;
  right: 12px;
  bottom: 8px;
  width: 100px;
  height: auto;
  overflow: hidden;
}

/* ページ内リンク *****/
.TopInfomation{
  padding: 16px;
  background-color: #fff;
}
.TopInfomation--ThreeRows{
  padding: 0;
  width: 256px;
  background-color: unset;
}

/* タイトル(全業種共通のお役立ち情報もあわせてチェック！) */
.TopInfomation__Title{
  font-size: 1.5rem;
  font-weight: bold;
  text-align: center;
  background-image: url(//jp.images-monotaro.com/topic/3m/img/3m-topInfomationBubble.png);
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: contain;
}

/* リンク1つづつBOX */
.TextLink--TopInfomation:link{
  position: relative;
  display: block;
  width: 100%;
  padding: 8px 0 4px;
  margin: 16px 0 0;
  color: #fff;
  text-align: center;
  font-size: 2.1rem;
  font-weight: bold;
  text-decoration: none;
  background-image: url(//jp.images-monotaro.com/topic/3m/img/3m-background02.png);
}
.TextLink--NoMargin:link{
  margin: 0;
}

.TextLink--TopInfomation:visited{
  color: #fff;
}

.TextLink--TopInfomation::before{
  position: absolute;
  right: 0;
  bottom: 0;
  content: "";
  border: 15px;
  margin-left: -12px;
  border: 12px solid transparent;
  border-right: 12px solid #b1000d;
  border-bottom: 12px solid #b1000d;
}


/* リンクテキスト上部 */
.TopInfomation__Above{
  display: block;
  font-size: 1.5rem;
}

/* あしらいの英語 */
.TopInfomation__Decoration{
  display: block;
  color: #999;
  font-size: 1.5rem;
}


/* イチオシ商品 **********/
.SpecialBox{
  display: flex;
  width: 100%;
  max-width: 1108px;
  padding: 0;
  margin: 0 0 40px;
}
.SpecialBox:nth-child(n+3){
  margin: 0;
}

/* イチオシカテゴリ（4つのうちの一つ） *****/
.Special{
  width: calc(50% - 20px);
  max-width: 538px;
  margin: 0 16px;
  background-color: #fff;
}

/* タイトル */
.Special__Title{
  position: relative;
  padding: 8px 0;
  color: #fff;
  font-size: 2.1rem;
  font-weight: bold;
  text-align: center;
  background-color: #333;
}
.Special__Title:before{
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -12px;
  border: 12px solid transparent;
  border-top: 12px solid #333;
}

/* 数字の乗っている画像 */
.Special__Map{
  width: 100%;
  height: auto;
}

/* 1つの商品紹介全体 *****/
.SpecialItem{
  position: relative;
  display: flex;
  padding: 16px 0;
  margin: 0 16px;
  border-top: #999 dotted 1px;
}
/* １つ目の商品 */
.SpecialItem--First{
  padding: 3.2rem 0 16px;
  border: none;
}

/* 商品紹介強調 */
.SpecialItem__Special{
  position: absolute;
  left: 4.8rem;
  top: 1rem;
  margin: 0;
  color: #b1000d;
  font-weight: bold;
}

/* 番号1-3 */
.SpecialItem__Number{
  width: 2.8rem;
  height: 2.8rem;
  padding: 0.1rem;
  margin: 1.6rem 0;
  color: #fff;
  font-size: 2.1rem;
  font-weight: bold;
  text-align: center;
  background-color: #333;
  border-radius: 50%;
}

/* 商品画像 */
.SpecialItem__Image{
  width: 6rem;
  height: 6rem;
  margin: 0 16px;
}

/* テキスト部分 */
.SpecialItem__Text{
  max-width: calc(100% - 18rem);
  margin: 0 8px 0 0;
}

/* 商品名 */
.SpecialItem__Link{
  font-size: 1.7rem;
  font-weight: bold;
}

/* 商品価格 *****/
.SpecialItem__PriceBox{
  color: #666;
  font-size: 1.3rem;
}

/* 値引き前 */
.SpecialItem__BeforeDiscount{
  margin:  0 4px 0 0;
  text-decoration: line-through;
}

/* 値引き後 */
.SpecialItem__Price{
  color: #d51b28;
  font-size: 1.8rem;
  font-weight: bold;
}

/* 値引き率 */
.SpecialItem__PriceDown{
  position: absolute;
  right: 0;
  width: 5.6rem;
  height: 5.6rem;
  padding: 4px;
  margin: 4px 0 0;
  color: #fff;
  font-size: 1.5rem;
  font-weight: bold;
  text-align: center;
  background-color: #b1000d;
}
.SpecialItem__PriceDown--Per5{
  background-color: #ff6f00;
}
/* 値引き率数字部分 */
.SpecialItem__PriceValue{
  font-size: 2.1rem;
}


/* おすすめ商品 **********************************/
.RecommendBox{
  display: inline-block;
  width: 100%;
  max-width: 1180px;
  padding: 0;
  margin: -28px 0 0;
}
.Recommend{
  display: inline-block;
  float: left;
  width: 25%;
  max-width: 295px;
  height: 40rem;
  padding: 28px 16px 0;
}

/* リンク */
.Recommend__Link:link{
  color: #333;
}
.Recommend__Link:hover,
.Recommend__Link:active{
  opacity: 0.6;
}

/* 商品画像 */
.Recommend__Image{
  width: 100%;
  max-width: 255px;
  height: auto;
  padding: 24px;
  margin: 0 0 8px;
  background-color: #fff;
}

/* 商品名 */
.Recommend__Name{
  margin: 0 0 8px;
  font-size: 1.5rem;
  font-weight: bold;
}

/* 商品説明 */
.Recommend__Explanation{
  margin: 8px 0 0;
}


/* 選び方ガイド **********************************/

/* 業種・カテゴリで絞り込む **********/
.ChoiceBox{
  display: inline-block;
  width: 100%;
  max-width: 1100px;
  padding: 24px;
  margin: 0 auto 40px;
  background-color: #fff;
}

.Choice{
  display: flex;
}

/* 「業種・カテゴリで絞り込む」 */
.ChoiceBox__Title{
  margin: 0 0 24px;
  font-size: 2.1rem;
  font-weight: bold;
}

/* タイトル（～で絞り込む） */
.Choice__Title{
  position: relative;
  padding: 0 0 0 2rem;
  margin: 0 0 0 8px;
  font-size: 1.6rem;
  font-weight: bold;
  text-align: left;
}
.Choice__Title:before{
  position: absolute;
  bottom: 0.3rem;
  left: 0;
  content: "";
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
  border: 3px solid #b1000d;
  border-radius: 50%;
}

/* 業種・カテゴリそれぞれのグレーBOX */
.Choice__Kind{
  display: inline-block;
  width: 38%;
  margin: 0 2% 0 0;
  background-color: #f1f1f1;
  padding: 16px 8px;
}
.Choice__Kind:last-child{
  width: 60%;
  margin: 0;
}

/* 業種・カテゴリそれぞれのリスト */
.Choice__List{
  width: 100%;
}

/* 業種・カテゴリ　リンクボタン1つづつ *****/
.Choice__Link{
float: left;
  width: calc(50% - 16px);
  height: 108px;
  padding: 72px 0 0;
  margin: 16px 8px 0 8px;
  border: #999 1px solid;
  background-position: center 8px;
  background-repeat: no-repeat;
  background-color: #fff;
}

/* カテゴリ（3列） */
.Choice__Link--Part3{
  width: calc(33% - 16px);
}

.Choice__Link:link,
.Choice__Link:hover,
.Choice__Link:visited{
  color: #333;
  text-decoration: none;
  font-size: 1.5rem;
  font-weight: bold;
}
.Choice__Link:hover{
  opacity: 0.6;
}

/* 選択中 */
.Choice__Link--Choice01.is-Active,
.Choice__Link--Choice02.is-Active,
.Choice__Link--Choice03.is-Active,
.Choice__Link--Choice04.is-Active,
.Choice__Link--Choice05.is-Active,
.Choice__Link--Choice06.is-Active,
.Choice__Link--Choice07.is-Active,
.Choice__Link--Choice08.is-Active,
.Choice__Link--Choice09.is-Active,
.Choice__Link--Choice10.is-Active{
  color: #fff;
  font-weight: bold;
  background-color: #b1000d;
}

/* アイコン */
.Choice__Link--Choice01{
  background-image: url(//jp.images-monotaro.com/topic/3m/img/3m-top-choice01.png);
}
.Choice__Link--Choice01.is-Active{
  background-image: url(//jp.images-monotaro.com/topic/3m/img/3m-top-choice01-active.png);
}
.Choice__Link--Choice02{
  background-image: url(//jp.images-monotaro.com/topic/3m/img/3m-top-choice02.png);
}
.Choice__Link--Choice02.is-Active{
  background-image: url(//jp.images-monotaro.com/topic/3m/img/3m-top-choice02-active.png);
}
.Choice__Link--Choice03{
  background-image: url(//jp.images-monotaro.com/topic/3m/img/3m-top-choice03.png);
}
.Choice__Link--Choice03.is-Active{
  background-image: url(//jp.images-monotaro.com/topic/3m/img/3m-top-choice03-active.png);
}
.Choice__Link--Choice04{
  background-image: url(//jp.images-monotaro.com/topic/3m/img/3m-top-choice04.png);
}
.Choice__Link--Choice04.is-Active{
  background-image: url(//jp.images-monotaro.com/topic/3m/img/3m-top-choice04-active.png);
}
.Choice__Link--Choice05{
  background-image: url(//jp.images-monotaro.com/topic/3m/img/3m-top-choice05.png);
}
.Choice__Link--Choice05.is-Active{
  background-image: url(//jp.images-monotaro.com/topic/3m/img/3m-top-choice05-active.png);
}
.Choice__Link--Choice06{
  background-image: url(//jp.images-monotaro.com/topic/3m/img/3m-top-choice06.png);
}
.Choice__Link--Choice06.is-Active{
  background-image: url(//jp.images-monotaro.com/topic/3m/img/3m-top-choice06-active.png);
}
.Choice__Link--Choice07{
  background-image: url(//jp.images-monotaro.com/topic/3m/img/3m-top-choice07.png);
}
.Choice__Link--Choice07.is-Active{
  background-image: url(//jp.images-monotaro.com/topic/3m/img/3m-top-choice07-active.png);
}
.Choice__Link--Choice08{
  background-image: url(//jp.images-monotaro.com/topic/3m/img/3m-top-choice08.png);
}
.Choice__Link--Choice08.is-Active{
  background-image: url(//jp.images-monotaro.com/topic/3m/img/3m-top-choice08-active.png);
}
.Choice__Link--Choice09{
  background-image: url(//jp.images-monotaro.com/topic/3m/img/3m-top-choice09.png);
}
.Choice__Link--Choice09.is-Active{
  background-image: url(//jp.images-monotaro.com/topic/3m/img/3m-top-choice09-active.png);
}
.Choice__Link--Choice10{
  background-image: url(//jp.images-monotaro.com/topic/3m/img/3m-top-choice10.png);
}
.Choice__Link--Choice10.is-Active{
  background-image: url(//jp.images-monotaro.com/topic/3m/img/3m-top-choice10-active.png);
}


/* 絞り込み解除 */
.ChoiceCancel{
  width: 320px;
  padding: 8px;
  margin: 24px auto 0;
  color: #fff;
  font-size: 1.5rem;
  font-weight: bold;
  background-color: #333;
  border: #666 solid 2px;
}
.ChoiceCancel:hover{
  opacity: 0.6;
}

/* 絞り込みアイテム */
.ChoiceItem{
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
}

/* 「お役立ちコンテンツ」「人気カテゴリラインナップ」 */
.ChoiceItem__TitleBox{
  padding: 0 0 8px;
  margin: 40px 0 32px;
  font-size: 2.8rem;
  border-bottom: 2px solid #b1000d;
  text-align: left;
}
.ChoiceItem__Title{
  margin: 0;
  font-size: 2.4rem;
}

/* お役立ちコンテンツ **********/
.Useful{
  position: relative;
  float: left;
  width: calc((100% - 96px) / 4);
  height: 34rem;
  padding: 168px 0 0;
  margin: 0 12px 24px;
  text-decoration: none;
  background-color: #fff;
}

/* コンテンツタイトル */
.Useful__Title{
  margin: 16px;
  font-size: 1.9rem;
  text-decoration: underline;
}

/* コンテンツ説明 */
.Useful__Explanation{
  margin: 0 16px 16px;
  font-size: 1.5rem;
}

/* コンテンツイメージ */
.Useful__Image{
  position: absolute;
  top: 0;
  width: 100%;
  height: auto;
}

/* 人気カテゴリラインナップ **********/

.LineupBox:last-child{
  margin: 0;
}

/* カテゴリ名 */
.LineupBox__Title{
  height: 24px;
  padding: 4px 0 0 32px;
  margin: 0 0 16px;
  font-size: 1.5rem;
  font-weight: bold;
  background-size: 24px;
  background-repeat: no-repeat;
}
.LineupBox__Title--Protection{
  background-image: url("//jp.images-monotaro.com/topic/3m/img/3m-lineup-protection.png");
}
.LineupBox__Title--Polish{
  background-image: url("//jp.images-monotaro.com/topic/3m/img/3m-lineup-polish.png");
}
.LineupBox__Title--Car{
  background-image: url("//jp.images-monotaro.com/topic/3m/img/3m-lineup-car.png");
}
.LineupBox__Title--Tape{
  background-image: url("//jp.images-monotaro.com/topic/3m/img/3m-lineup-tape.png");
}
.LineupBox__Title--Cleaning{
  background-image: url("//jp.images-monotaro.com/topic/3m/img/3m-lineup-clean.png");
}
.LineupBox__Title--Stationery{
  background-image: url("//jp.images-monotaro.com/topic/3m/img/3m-lineup-stationery.png");
}

/* 各カテゴリくくり *****/
.Lineup{
  display: inline-block;
  width: calc(100% + 24px);
  margin: 0 -12px;
}

/* リンク */
.Lineup__Link:link{
  float: left;
  width: calc(100% / 6);
  max-width: 186px;
  height: 208px;
  padding: 0 12px 24px;
  color: #333;
}
.Lineup__Link:hover,
.Lineup__Link:active{
  opacity: 0.6;
}

/* カテゴリ画像 */
.Lineup__Image{
  display: block;
  width: 100%;
  height: auto;
  margin: 0 0 8px;
}

/* カテゴリ名 */
.Lineup__Name{
  margin: 0;
}