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

  防じん＆防毒マスク特集 

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


/* 1.金属加工・溶接作業 ****************************/

/* おすすめ商品 ****************************/

.MaskProductBox{
  display: inline-block;
  width: calc(100% + 40px);
  margin: 0 -20px;
}
.MaskProductBox::after{
  content: "";
  display: block;
  width: 50%;
  height: 0;
}

.MaskProduct{
  position: relative;
  float: left;
  width: calc((100% - 160px) / 4);
  min-height: 283px;
  margin: 0 20px 40px;
  text-align: left;
}
.MaskProduct--BottomAdjustment{
    margin: 0 20px;
}

/* 画像 */
.MaskProduct__ImageBox{
  width: auto;
  padding: 32px auto 16px;
  text-align: center;
  line-height: 0;
  border: #ccc 1px solid;
}
.MaskProduct__Image{
  padding: 16px;
  width: 124px;
  height: 124px;
  margin: 16px 0 0 0;
  text-align: center;
  line-height: 0;
}
.MaskProduct__Image--Wide{
  width: 100%;
  height: auto;
  padding: 8px;
}
.MaskProduct__Image--NoPadding{
  padding: 0;
}

/* 画像上（指定防護係数・適用ガス） */
.MaskProduct__Icon{
  position: absolute;
  top: 0;
  left: 0;
  padding: 2px 4px 0;
  color: #fff;
  background: #333;
  line-height: 1.5;
  font-size: 1.3rem;
  font-weight: bold;
  display: inline;
  min-height: 2rem;
  overflow: hidden;
}

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

/* 説明 */
.MaskProduct__Point{
  font-size: 1.3rem;
  line-height: 1.3;
  margin: 8px 0 0;
}

/* 価格 */
.MaskProduct__PriceBox{
  display: inline-block;
  margin: 16px 0 0;
}
.MaskProduct__Price{
  float: left;
  width: auto;
  margin: 0 16px 0 0;
  color: #df0011;
  font-size: 1.9rem;
  font-weight: bold;
}
.MaskProduct__PriceEn{
  font-size: 1.3rem;
}
.MaskProduct__TaxIncludedPrice{
  float: left;
  padding: 4px 0 0 0;
  margin: 0;
}
.MaskProduct__TaxIncludedPrice:after{
  content: "税込";
}
.MaskProduct__TaxIncludedPriceEn{
  font-size: 1.1rem;
}

/* TOPICフィットテストについて **********/

.FitTestSentence{
  min-height: 3.2rem;
  margin: 8px 0 16px;
}

/* アプリ */
.AppInfo{
  margin: 0 auto;
  text-align: center;
}


/* 2.アスベスト（石綿）作業について ********************/

/* 区分 */
.LevelTitle{
  font-size: 1.9rem;
  display: inline-block;
  font-weight: bold;
  color: #333;
  margin: 24px 16px;
  padding: 0;
  line-height: 1.5;  
}
.LevelTitle__Mark{
  display: block;
  float: left;
  width: 7.6rem;
  padding: 8px;
  color: #fff;
  font-size: 1.5rem;
  font-weight: bold;
  line-height: 1;
  clip-path: polygon(0 0, 75% 0, 84% 50%, 75% 100%, 0 100%);
  background-color: #000;
}
.LevelTitle__Mark--Three{
  background-color: #666;
}
.LevelTitle__Mark--Four{
  background-color: #eee;
  color: #333;
}

/* その他 ********************/
/* Problem（調整） */
.Problem__Image--Topblank24{
  margin-top:-25px;
}


/* アコーディオン開閉 商品情報一覧部分 ********************/

.GradationHiddenBox{
  position: relative;
  padding: 0 0 24px;
  border: #333 8px solid;
  border-radius: 8px;
}
.GradationHiddenBox--BottomPlus{
  margin: 0 0 48px;
}

/* 本文を隠す高さを指定 */
.GradationHidden{
  position: relative;
  height: 180px;
  overflow: hidden;
}
/* 「もっと見る」をクリックした後に高さを調整 */
.GradationHidden--Active{
  height: auto;
  margin: 0 0 64px;
}

/* タイトル（その他おすすめの～） */
.GradationHidden__Title{
  padding: 20px 16px 16px;
  margin: 0 0 32px;
  font-size: 1.5rem;
  font-weight: bold;
  text-align: center;
  background-color: #fdfadd;
  border-bottom: #b1000d dotted 2px;
}
.GradationHidden__Title::before{
  content: "＼ ";
}
.GradationHidden__Title::after{
  content: " ／";
}
.GradationHidden__TitleEmphasis{
  font-size: 1.9rem;
}

/* タイトル下の商品一覧 *****/
.GradationHidden__Product{
  padding: 0 32px;
}

/* 商品を隠すグラデーション *****/
.GradationHover{
  width: 100%;
  height: 100px;
  display: block;
  background: linear-gradient(rgba(255, 255, 255, 0) 0, #fff 90%);
  position: absolute;
  top: 80px;
  left: 0;
  z-index: 50;
}
/* 「もっと見る」をクリックした後外す */
.GradationHover--Active{
  display: none;
}

/* 「もっと見る」・「閉じる」ボタンくくり *****/
.MoreDetail{
  margin: -24px 0 0;
  position: absolute;
  z-index: 1000;
  justify-content: center;
  left: 50%;
  transform: translate(-50%, -50%);
}
.MoreDetail__Text:before{
  content: "もっと見る";
}
.MoreDetail__Text--Close:before{
  content: "閉じる";
}

/* 「もっと見る」ボタン */
.MoreDetail__Button{
  border: #b1000d solid 4px;
  width: 240px;
  background-color: #fff;
}
.MoreDetail__Button:hover{
  border: #d0666e solid 4px;
}

/* 「閉じる」ボタン */
.MoreDetail__Button--Close{
  border: #333 solid 4px;
  background-color: #f1f1f1;
}
.MoreDetail__Button--Close:hover{
  border: #999 solid 4px;
}

/* 「もっと見る」アイコン */
.MoreDetail__Icon{
  color: #b1000d;
}
/* 「閉じる」アイコン */
.MoreDetail__Icon--Close{
  color: #333;
}