/* global
------------------------------------- */
#mainImg { background-image: url(../img/concept/mainimg01_sp.png); }

#mainImg .tit:before { background-image: url(../img/concept/txt_mainimg01.png); }

@media all and (min-width: 600px) { #mainImg { background-image: url(../img/concept/mainimg01_pc.png); }
  #mainImg .tit:before { top: -26px; left: -38px; } }

/* #point
------------------------------------- */
#point { margin-top: -20px; background: url(../img/concept/bg_anchor01_sp.png) no-repeat center top 0/100% 556px; }

#point .inner { position: relative; padding-top: 48px; }

@media all and (min-width: 600px) { #point { margin-top: -30px; background: url(../img/concept/bg_anchor01_pc.png) no-repeat center top 0/100% 428px; }
  #point .inner { margin-bottom: 130px; padding-top: 96px; } }

/* .areaPoint
------------------------------------- */
.areaPoint { position: relative; background: #edf3e0; }

.areaPoint:last-of-type .inner { margin-bottom: 46px; }

.areaPoint:before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 90px; background: #fff; }

.areaPoint .inner { position: relative; padding-top: 46px; padding-bottom: 32px; }

.areaPoint .img { position: relative; z-index: 1; }

.areaPoint .detail { padding-top: 14px; }

.areaPoint .detail .headTit { position: relative; font-size: 1.8rem; font-weight: 500; z-index: 1; letter-spacing: .06em; }

.areaPoint .detail .headTit .num { line-height: 1.2; margin-right: 10px; color: #7cbc00; font-size: 3rem; }

.areaPoint .detail .headTit:before { content: ''; position: absolute; top: 12px; right: 22px; width: 61px; height: 56px; background: url(../img/common/bg_bubble01.png) no-repeat center center; background-size: contain; z-index: -1; }

.areaPoint .detail .lead, .areaPoint .detail .txt { position: relative; padding-top: 6px; font-size: 1.5rem; letter-spacing: .07em; z-index: 1; }

.areaPoint .detail .txt { font-size: 1.4rem; }

.areaPoint .detail .btn { margin-top: 10px; }

@media all and (min-width: 600px) { .areaPoint { margin-top: 80px; background: #fff; }
  .areaPoint:before { background: #edf3e0; left: auto; right: 0; height: 100%; width: 100%; border-radius: 15px; -webkit-transform: translateX(456px); -ms-transform: translateX(456px); transform: translateX(456px); }
  .areaPoint .inner { position: relative; padding-top: 82px; padding-bottom: 113px; }
  .areaPoint .img { position: absolute; top: -30px; left: -350px; width: 890px; }
  .areaPoint .detail { padding-left: calc(50% + 27px); box-sizing: border-box; }
  .areaPoint .detail .headTit { font-size: 2.6rem; }
  .areaPoint .detail .headTit .num { font-size: 4rem; }
  .areaPoint .detail .headTit:before { top: -10px; right: 12px; width: 106px; height: 79px; }
  .areaPoint .detail .lead { padding-top: 12px; font-weight: 500; font-size: 1.8rem; }
  .areaPoint .detail .txt { padding-top: 40px; font-size: 1.5rem; }
  .areaPoint .detail .btn { margin-top: 15px; }
  .areaPoint:last-of-type .inner { margin-bottom: 106px; }
  .areaPoint:nth-of-type(odd):before { left: 0; right: auto; -webkit-transform: translateX(-456px); -ms-transform: translateX(-456px); transform: translateX(-456px); }
  .areaPoint:nth-of-type(odd) .img { left: auto; right: -350px; }
  .areaPoint:nth-of-type(odd) .detail { padding-left: 0; padding-right: calc(50% + 27px); } }

/* #certification
------------------------------------- */
#certification .wrap { position: relative; padding: 50px 20px 40px; margin: 70px 0 50px; background: #fff; box-shadow: 0px 4px 15px 0px rgba(4, 0, 0, 0.1), inset 0px 0px 0px 14px rgba(241, 241, 241, 0.004); }

#certification .wrap:before { content: ""; position: absolute; top: 6px; left: 6px; width: calc(100% - 14px); height: calc(100% - 14px); border: 1px solid #f1f1f1; }

#certification .wrap:after { content: ""; position: absolute; display: block; background: url(../img/concept/txt_certification01.png) no-repeat center; background-size: contain; width: 70px; height: 70px; top: -35px; left: 0; right: 0; margin: 0 auto; }

#certification .wrap dt { color: #8fc722; font-size: 1.8rem; font-weight: 500; text-align: center; margin-bottom: 10px; }

@media all and (min-width: 600px) { #certification .wrap { padding: 53px 50px 50px 80px; margin: 70px 0 70px; }
  #certification .wrap:after { width: 100px; height: 100px; top: -20px; left: -20px; right: 0; margin: 0; }
  #certification .wrap dt { font-size: 2.6rem; text-align: left; margin-bottom: 15px; } }