@charset "UTF-8";


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

  共通

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


/* 表示・非表示　**********************************/
.SpOnly{
  display: none;
}


/* パンくず部分調整　**********************************/

.BreadCrumb--Adjustment{
  padding: 0 0 8px 8px;
}


/* HeadArea(タイトル部分) **********************************/

.HeadArea{
  width: auto;
  padding: 0;
  text-align: center;
  line-height: 0;
  background-image: url("//jp.images-monotaro.com/topic/kokuyo/img/kokuyo-bg-slash-red.png");
}
.HeadArea--BgGray{
  background-image: url("//jp.images-monotaro.com/topic/kokuyo/img/kokuyo-bg-slash.png");
}

/* 画像 */
.PageTitle__Image{
  width: 100%;
  max-width: 1060px;
  height: auto;
}


/* MV(ある場合はGnavi）以降の部分 **********************************/

.ArticleContents{
  position: relative;
  margin:0 auto;
  font-size: 1.3rem;
}


/* 項目別くくり ****************************/

/* ContentsBox *****/

.ContentsBox{
  padding: 64px 16px;
  text-align: center;
}
.ContentsBox:last-child{
  padding-bottom: 0;
}
/* セールなどバナーのみ設定の場合*/
.ContentsBox--CampaignBanner{
  padding: 32px 16px;
  background-color: #fdffe5;
}
/* 背景色あり */
.ContentsBox--BgColor{
  background-color: #f1f1f1;
}

/* 三角（▼）つける */
.ContentsBox--Triangular{
  position: relative;
}
.ContentsBox--Triangular::after{
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  right: 50%;
  margin-left: -32px;
  border: 32px solid transparent;
  border-top: 32px solid #fff;
  z-index: 1;
}

/* Contents *****/

.Contents{
  display: inline-block;
  width: 100%;
  max-width: 1140px;
}

/* 項目タイトル */
.Contents__Title{
  position: relative;
  padding: 0 0 8px;
  margin: 0 0 48px;
  font-size: 3.2rem;
  text-align: center;
  line-height: 1;
}
.Contents__Title::before{
	content: attr(data-head);
	display: block;
  margin: 0 0 16px;
	color: #d5051b;
	font-size: 1.5rem;
}
.Contents__Title::after{
	content: '';
	position: absolute;
	bottom: -3px;
	left: 50%;
	width: 120px;
	height: 3px;
  margin-left: -60px;
	background-color: #999;
}
.Contents__Title--NoDisplay{
  display: none;
}

/* 項目タイトル下 説明文 */
.Contents__TitleUnder{
  margin: -16px 0 48px 0;
}
/* 項目タイトル下 リード文 */
.Contents__LeadSentence{
    margin: 0;
}
/* 公開日**********************************/

.ReleaseDate{
  margin: 24px 0 0;
  text-align: right;
}