@charset "UTF-8";


/* 共通 **********************************/


/* 表示・非表示 *****/
.SpOnly,
.SpOnlyUnder320{
  display: none;
}
  
/* テキスト *****/
.TextRed{
  color: #B1000D;
}

/* パンくず部分調整 *****/
.BreadCrumb--Adjustment{
  padding: 0 0 8px 8px;
}


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

/* 全体 */
.HeaderLeverHoistRepair{
  margin: 0 auto;
  height: 200px;
  text-align: center;
  background-color: #F8B500;
}

/* 画像 */
.HeaderLeverHoistRepair__Image{
  width: auto;
  max-width: 1068px;
  height: 100%;
  margin: 0 auto;
  background: url(//jp.images-monotaro.com/topic/LeverHoistRepair/img/LeverHoistRepair-topimage.png) -24px -128px / 1160px auto no-repeat;
}

/* タイトル */
.PageTitle{
    display: inline-block;
    height: 80px;
    padding: 24px;
    margin: 64px 0 0 0;
    font-size: 40px;
    font-weight: bold;
    line-height: 1;
    background-color: rgba(255,255,255,0.8);
}



/* グローバルナビ（PC）・目次（SP） ****************************/

/* 目次（SPのみ） */
.TableContents{
  display: none;
}

.GlobalNaviLp{
  width: 100%;
  background-color: #CCC;
}
.GlobalNaviList{
  width: 100%;
  max-width: 1068px;
  padding: 8px 4px;
  margin: 0 auto;
  list-style: none;
}
.GlobalNaviList__Item{
  float: left;
  max-width: 257px;
  width: 25%;
  padding: 0;
  margin: 0 4px;
  font-size: 13px;
  text-align: center;
  background-color: #FFF;
  border-radius: 8px;
}
.GlobalNaviList__Link{
  display: block;
  padding: 8px;
  color: #333;
  text-decoration: none;
}
.GlobalNaviList__Link:hover, .GlobalNaviList__Link:active{
  color: #999;
}
.GlobalNaviList__Link:visited{
  color: #333;
}
.GlobalNavi--Fixed{
  position: sticky;
  top: 0;
  z-index: 10;
}

/* アイコン */
.Icon--GlobalNavi{
  display: block;
}


/* ArticleContents より後の部分 **********************************/

.ArticleContents{
  margin: 0 auto;
  color: #333;
  font-size: 13px;
  text-align: center;
  line-height: 1.3;
}


/* 背景色の切り替え **********************************/
.BackGroundColor--Gray{
  background-color: #F1F1F1;
}


/* Contentsくくり **********************************/

.Contents{
  display: inline-block;
  width: 100%;
  max-width: 1068px;
  padding: 64px 16px;
  margin: 0 auto;
}

/* コンテンツタイトル */
.Contents__Title{
  margin: 0 0 48px;
  font-size: 32px;
  font-weight: bold;
}

/* コンテンツイントロダクション */
.Contents__Introduction{
  margin: 0 0 64px;
}



/* レバーブロック修理・点検サービスとは **********************************/

.FeatureBox{
  margin: 16px -32px 0;
  display: inline-block;
}

/* 特徴1-4 **********/
.Feature{
  float: left;
  width: 235px;
  margin: -8px 20px 0;
}

/* タイトル */
.Feature__Title{
  position: relative;
  padding: 24px 0 16px;
  margin: 0 0 16px;
  font-size: 19px;
  font-weight: bold;
  text-align: center;
  line-height: 1;
  background-color: #FDFADD;
  border: #F8B500 4px solid;
}
/* 特徴の番号(1-4) */
.Feature__Number{
  position: absolute;
  top: -16px;
  left: 50px;
  margin: 0 auto;
  width: 128px;
  padding: 4px;
  color: #FFF;
  font-size: 15px;
  line-height: 1;
  background-color: #333;
}

/* タイトル下のセールスポイント */
.Feature__Point{
  margin: 0 0 16px;
  font-size: 15px;
  font-weight: bold;
}

/* 画像 */
.Feature__Image{
  width: 180px;
  height: auto;
  margin: 0 0 16px;
}

/* 画像下のテキスト */
.Feature__List{
  margin: 0 0 0 -24px;
  text-align: left;
}
.Feature__Item{
  margin: 0 0 8px;
}
.Feature__Item:last-child{
  margin: 0;
}
.Feature__Notice{
  margin: 8px 0 0;
  text-align: left;
}



/* 対象商品と確認事項 **********************************/

.ContentsHerfColumn{
  float: left;
  width: 50%;
  padding: 0 32px 0 0;
  text-align: left;
}
.ContentsHerfColumn:last-child{
  padding: 0 0 0 32px;
}

/* タイトル */
.ContentsHerfColumn__Title{
  padding: 8px 0 8px 40px;
  margin: 0 0 32px;
  font-size: 19px;
  font-weight: bold;
  background: url(//jp.images-monotaro.com/topic/LeverHoistRepair/img/LeverHoistRepair-confirm-point.png) top left / 32px 32px no-repeat;
  border-bottom: #F8B500 2px dotted;
}

/* 説明テキスト */
.ContentsHerfColumn__Explanation{
  margin: 0 0 16px;
}
/* 対応モデル */
.ContentsHerfColumn__CompatibleModels{
  font-size: 15px;
  font-weight: bold;
}

/* 説明画像 */
.ContentsHerfColumn__Image{
  width: 100%;
  height: auto;
  padding: 16px;
  background-color: #FFF;
  border: #CCC 1px solid;
}

/* 修復・点検が可能・不可能なケース **********/
.Case{
  padding: 0 16px 16px;
  margin: 0 0 16px;
  background-color: #FFF;
}

/* タイトル */
.Case__Title{
  position: relative;
  padding: 8px;
  margin: 0 -16px 16px;
  font-weight: bold;
  background-color: #F8B500;
}
.Case__Title--Ng{
  color: #FFF;
  background-color: #333;
}
.Case__Title:after {
  content: "OK!";
  position: absolute;
  bottom: -14px;
  right: 0;
  color: #fff;
  font-size: 34px;
  opacity: 0.6;
}
.Case__Title--Ng:after {
  content: "NG!";
}

/* リスト */
.Case__List{
  margin: 0 0 16px -40px;
  list-style: none;
}
.Case__Item{
  margin: 8px 0 8px 1em;
  text-align: left;
  text-indent: -1em;
}

/* 注意事項（※） */
.Case__Notice{
  margin: 0 0 8px 2.5em;
  text-indent: -2.5em;
}
.Case__Notice:last-child{
  margin: 0 0 0 2.5em;
}

/* 画像 */
.Case__Image{
  width: 100%;
  height: auto;
}

/* Caseの下のコメント */
.ContentsHerfColumn__LastNotice{
  margin: 0;
}



/* お申し込みからお届けまで **********************************/

/* 各STEP **********/
.Step{
  display: inline-block;
  width: 100%;
  padding: 0 0 32px;
  margin: 0 0 32px;
  text-align: left;
  border-bottom: #CCC 1px solid;
}
.Step:last-child {
  padding: 0;
  margin: 0;
  border: none;
}

/* 各STEP 左カラム */
.Step__Left{
  float: left;
  width: 50%;
  padding: 0 32px 0 0;
}
/* 各STEP 右カラム */
.Step__Right{
  float: left;
  width: 50%;
  padding: 0 0 0 32px;
  line-height: 1;
}

/* タイトル */
.Step__Title{
  position: relative;
  padding: 4px 0 0 76px;
  margin: 0 0 24px;
  font-size: 22px;
  font-weight: bold;
}
/* STEP番号 */
.Step__Number{
  position: absolute;
  top: 0;
  left: 0;
  display: inline-block;
  width: 68px;
  padding: 4px 0 0 44px;
  margin: 0 8px 0 0;
  font-size: 24px;
  font-weight: bold;
  background-color: #F8B500;
}
.Step__Number:before{
  position: absolute;
  top: 10px;
  left: 8px;
  content: "STEP";
  font-size: 13px;
}

/* リスト */
.Step__List{
  margin: 0 0 0 -40px;
  list-style: none;
}
.Step__Item{
  margin: 0 0 16px 1em;
  text-indent: -1em;
}
.Step__Item:last-child{
  margin: 0 0 0 1em;
}

/* リスト内※リスト */
.StepNotice__List{
  list-style: none;
  margin: 8px 0 0 -27px;
}
.StepNotice__Item {
  margin: 0 0 4px 0;
}

/* ※リスト */
.Step__Notice{
  margin: 16px 0 0 1em;
  text-indent: -1em;
}

/* グレー背景の注意点（梱包方法） **********/
.StepPoint{
  padding: 16px;
  margin: 16px 0 0;
  background-color: #FFF;
}
/* タイトル */
.StepPoint__Title{
  margin: 0 0 8px;
  font-weight: bold;
}
/* 説明分 */
.StepPoint__Explanation{
  margin: 8px 0 0;
}

/* 右の画像 */
.Step__Image{
  width: 100%;
  height: auto;
  padding: 16px;
  background-color: #FFF;
  border: #CCC 1px solid;
}



/* 注意事項 **********************************/

.Attention{
  margin: 0 0 32px;
  text-align: left;
}
.Attention:last-child{
  margin: 0;
}

/* タイトル */
.Attention__Title{
  font-size: 15px;
  font-weight: bold;
}

/* リスト */
.Attention__List{
  margin: 0 0 0 -24px;
}
.Attention__Item{
  margin: 0 0 16px;
}
.Attention__Item:last-child{
  margin: 0;
}

/* リスト内※リスト */
.Attention__SelectList {
  margin: 8px 0 8px -32px;
}
.Attention__SelectItem{
  list-style: none;
}

/* ※リスト */
.Attention__NoticeList{
  margin: 16px 0;
  padding: 0 0 0 16px;
  list-style: none;
}
.Attention__NoticeItem{
  margin: 0 0 4px 1em;
  text-indent: -1em;
}


/* 注文カンタン！WEBサイト・お電話で！ **********************************/

.MoreProduct{
  width: 100%;
  max-width: 440px;
  margin: 0 auto;
  text-align: center;
}

/* タイトル */
.MoreProduct__Title{
  margin: 0 0 16px;
  color: #d51b28;
  font-size: 19px;
  font-weight: bold;
}

/* バナー */
.MoreProduct__Button{
  width: 440px;
  height: 44px;
  padding: 4px 0;
  font-weight: bold;
  vertical-align: middle;
}

/* バナー上テキスト */
.MoreProduct__Caption{
  margin: 0 0 8px;
  font-size: 15px;
  font-weight: bold;
}

/* バナー下テキスト */
.MoreProduct__Append{
  margin: 16px 0 0;
}


/* 公開日 **********************************/
.ReleaseDate{
  margin: 40px 0 0 0;
  text-align: right;
}





/*スタイガイド仕様　修正 **********************************/

.Section--BorderNone{
    border: none;
}

/*ユーティリティクラス*/
.u-MarginBottom--8{
    margin-bottom: 8px;
}

.u-Width--100per{
    width: 100%;
}

.u-PaddingBottom--8{
    padding-bottom: 8px;
}

.u-WhitespaceNowrap{
    white-space: nowrap;
}