@charset "UTF-8";

/*.mainVisual*/
.l-content .mainVisual {
	width: 950px;
	height: 200px;
  margin-bottom: 20px;
	padding: 0;
	background: url("/maker/smc/mech/products/variation/saving_energy/img/main.png") no-repeat;
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
}

/*.anchor*/
.l-content .anchor {
  margin-bottom: 70px;
}
.l-content .anchor ul li {
	width: 200px;
	margin-left: 25px;
}

/*.section*/
.l-content .section > h3 {
  padding-left: 15px;
}

/*.worry*/
.l-content .worry {
  position: relative;
  width: 900px;
  margin: 0 auto 80px;
  padding: 38px 0 36px 65px;
  box-sizing: border-box;
  background: #f6f6f6 url("/maker/smc/mech/products/variation/saving_energy/img/bg_worry.png") no-repeat right 115px bottom 12px;
}
.l-content .worry::after {
  position: absolute;
  bottom: -45px;
  left: 50%;
  display: block;
  width: 0;
  height: 0;
  margin-left: -63px;
  border-right: 63px solid transparent;
  border-left: 63px solid transparent;
  border-top: 33px solid #0074be;
  content: "";
}
.l-content .worry > li {
  font-size: 19px;
}
.l-content .worry > li + li {
  margin-top: 5px;
}

/*.step*/
.l-content .step {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 900px;
  height: 107px;
  padding-right: 10px;
  box-sizing: border-box;
  background: url("/maker/smc/mech/products/variation/saving_energy/img/bg_step.png") no-repeat right top;
}
.l-content .step > li {
  width: 212px;
}
.l-content .step > li > span {
  font-size: 27px;
}
.l-content .section .section__head {
  display: flex;
  align-items: center;
  margin-bottom: 30px;
  padding-bottom: 5px;
  border-bottom: 1px solid #ccc;
}
.l-content .section .section__head .section__head__caption {
  position: relative;
  margin-right: 32px;
  padding: 8px 20px 7px;
  background-color: #cce3f2;
  font-size: 19px;
}
.l-content .section.section__step__01 .section__head .section__head__caption {
  background-color: #e5f1f8;
}
.l-content .section.section__step__03 .section__head .section__head__caption {
  background-color: #b2d5eb;
}
.l-content .section.section__step__04 .section__head .section__head__caption {
  background-color: #99c7e5;
}
.l-content .section .section__head .section__head__caption::after {
  position: absolute;
  top: 50%;
  right: -16px;
  width: 0;
  height: 0;
  margin-top: -25px;
  border-top: 25px solid transparent;
  border-bottom: 25px solid transparent;
  border-left: 16px solid #cce3f2;
  content: "";
}
.l-content .section.section__step__01 .section__head .section__head__caption::after {
  border-left-color: #e5f1f8;
}
.l-content .section.section__step__03 .section__head .section__head__caption::after {
  border-left-color: #b2d5eb;
}
.l-content .section.section__step__04 .section__head .section__head__caption::after {
  border-left-color: #99c7e5;
}
.l-content .section .section__head h2 {
  padding-top: 5px;
  font-weight: normal;
}

/*.point*/
.l-content .point {
  position: relative;
  width: 860px;
  margin: 0 auto;
  padding: 25px 0 24px 200px;
  border: 2px solid #0074be;
  border-radius: 5px;
  box-sizing: border-box;
}
.l-content .point.point_s {
  width: 700px;
  padding-top: 37px;
  padding-bottom: 35px;
}
.l-content .point.point_l {
  width: 900px;
  padding-left: 180px;
}
.l-content .section__step__03 .point {
  padding-top: 32px;
  padding-bottom: 30px;
}
.l-content .point::before {
  position: absolute;
  top: 50%;
  left: 45px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 120px;
  height: 120px;
  margin-top: -60px;
  border-radius: 50%;
  background-color: #0074be;
  color: #fff;
  font-size: 19px;
  font-weight: bold;
  content: "POINT";
}
.l-content .point > li {
  position: relative;
  padding-left: 35px;
  font-size: 19px;
}
.l-content .point > li + li {
  margin-top: 10px;
}
.l-content .point > li::before {
  position: absolute;
  top: 0;
  left: 8px;
  display: block;
  width: 8px;
  height: 16px;
  border-right: 5px solid #fc0;
  border-bottom: 5px solid #fc0;
  transform: rotate(45deg);
  content: "";
}

/*.example*/
.l-content .example__outer {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  width: 900px;
  margin: 0 auto;
  padding: 25px 50px;
  box-sizing: border-box;
  background-color: #e5f1f8;
}
.l-content .example {
  width: 350px;
}
.l-content .example:nth-child(2n) {
  width: 450px;
}
.l-content .example:nth-child(n+3) {
  margin-top: 50px;
}
.l-content .example p {
  font-size: 14px;
}

/*.replace*/
.l-content .replace {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  width: 880px;
  margin: 30px auto 0;
  padding: 15px 40px 20px;
  box-sizing: border-box;
  background-color: #e5f1f8;
}
.l-content .replace h3 {
  width: 100%;
  margin-bottom: 10px;
  font-size: 19px;
}
.l-content .replace .replace__item {
  width: 350px;
  padding: 20px 0 15px;
  background-color: #fff;
}
.l-content .replace .replace__item .name {
  color: #004098;
}
.l-content .replace .replace__item .name.box_hover {
  cursor: pointer;
  text-decoration: underline;
}
.l-content .replace .replace__item .pic {
  text-align: center;
}
.l-content .replace .replace__item .pic.box_hover {
  cursor: pointer;
  opacity: .75;
}
.l-content .replace .replace__item .btn {
  width: 180px;
  margin: 0 auto;
}