/*=============================================================
	waterjet
=============================================================*/
.wj_box01 { position: relative; background: #edf1f8; }

.wj_box01:before { content: ''; position: absolute; bottom: 0; right: 0; width: 0; height: 0; border-style: solid; border-width: 0 0 111px 79px; border-color: transparent transparent #d6e4f3 transparent; }

@media screen and (min-width: 600px) { .wj_box01:before { border-width: 0 0 222px 158px; } }

/* mainImg
------------------------------------- */
#mainImg { background-image: url(../img/waterjet/img_main01_sp.png); /*.pageTit{ padding-top: 75px; line-height: 1.318; }*/ }

@media screen and (min-width: 600px) { #mainImg { background-image: url(../img/waterjet/img_main01_pc.png); }
  #mainImg .pageTit { padding-top: 0; } }

/* intro
------------------------------------- */
#intro .set .txtBox { padding: 44px 30px 33px 40px; }

@media screen and (min-width: 600px) { #intro .set .txtBox { padding: 122px 117px 131px 94px; } }

/*  #comparison
---------------------------------------- */
#comparison .inner { padding-bottom: 20px; }

#comparison .before { position: relative; padding: 20px 20px 30px; border: 1px solid #c3c3c3; }

#comparison .before:before { content: ''; position: absolute; bottom: -28px; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); width: 0; height: 0; border-style: solid; border-width: 44px 95px 0 95px; border-color: #b5d5ee transparent transparent transparent; }

#comparison .before .beforeTit { text-align: center; font-size: 2.2rem; font-weight: 700; }

#comparison .before .item { margin-top: 10px; }

#comparison .before .item + .item { margin-top: 20px; }

#comparison .before .item .itemTit { padding: 5px 10px; background: #0f85d3; color: #fff; text-align: center; font-size: 2rem; line-height: 1.2; font-weight: 700; }

#comparison .before .item .img { width: 196px; margin: 20px auto 0; }

#comparison .before .item .txt { margin-top: 5px; line-height: 2; }

#comparison .after { margin-top: 45px; padding: 0 20px; }

#comparison .after .afterTit { text-align: center; font-size: 2.2rem; line-height: 1.32; color: #1847a7; font-weight: 700; }

#comparison .after .item { margin-top: 20px; }

#comparison .after .item + .item { margin-top: 30px; }

#comparison .after .itemTit { padding: 5px 10px; background: #1847a7; color: #fff; text-align: center; font-size: 2rem; line-height: 1.2; font-weight: 700; }

#comparison .after .img { width: 196px; margin: 20px auto 0; }

#comparison .after .txt { margin-top: 5px; }

#comparison .box { margin-top: 25px; padding: 20px; }

#comparison .box .boxtit { padding: 5px 10px; background: #1847a7; color: #fff; font-size: 2rem; font-weight: 700; text-align: center; line-height: 1.5; }

#comparison .box .list { position: relative; z-index: 1; margin-top: 20px; }

#comparison .box .item { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }

#comparison .box .item + .item { margin-top: 10px; }

#comparison .box .item .img { -ms-flex-negative: 0; flex-shrink: 0; width: 100px; padding-right: 20px; }

@media screen and (min-width: 600px) { #comparison .inner { padding-bottom: 30px; }
  #comparison .before { padding: 30px 40px 40px; }
  #comparison .before:before { bottom: -23px; border-width: 44px 95px 0 95px; }
  #comparison .before .beforeTit { font-size: 3.2rem; }
  #comparison .before .list { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -ms-flex-wrap: wrap; flex-wrap: wrap; width: 800px; margin: 20px auto 0; }
  #comparison .before .item { width: 370px; margin-top: 0; }
  #comparison .before .item + .item { margin-top: 0; }
  #comparison .before .item .itemTit { padding: 10px; font-size: 2.6rem; }
  #comparison .before .item .img { width: 260px; margin: 30px auto 0; }
  #comparison .before .item .txt { margin-top: 15px; line-height: 2; }
  #comparison .after { margin-top: 60px; padding: 0; }
  #comparison .after .afterTit { font-size: 3.2rem; }
  #comparison .after .list { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -ms-flex-wrap: wrap; flex-wrap: wrap; margin: 20px auto 0; }
  #comparison .after .item { width: 370px; margin: 0; }
  #comparison .after .item + .item { margin-top: 0; }
  #comparison .after .itemTit { padding: 7px 10px; font-size: 2.6rem; }
  #comparison .after .img { width: 280px; margin: 60px auto 0; }
  #comparison .box { margin-top: 40px; padding: 40px; }
  #comparison .box .boxtit { width: 680px; margin: 0 auto; font-size: 2.6rem; }
  #comparison .box .list { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -ms-flex-wrap: wrap; flex-wrap: wrap; width: 590px; margin: 30px auto 0; }
  #comparison .box .item { display: block; width: 180px; text-align: center; }
  #comparison .box .item + .item { margin-top: 0; }
  #comparison .box .item .img { width: 160px; margin: 0 auto; padding-right: 0; }
  #comparison .box .item .txt { margin-top: 5px; text-align: center; font-size: 1.4rem; } }

/*  #step
---------------------------------------- */
#step .inner { margin-top: 15px; margin-bottom: 15px; }

#step .stepList { margin-top: 15px; padding: 0 20px; }

#step .stepItem + .stepItem { margin-top: 15px; }

#step .stepTit { padding: 2px 10px; background: #1847a7; color: #fff; font-size: 2rem; font-weight: 700; text-align: center; }

#step .img { margin: 0 -30px; }

#step .txt { margin-top: 10px; }

#step .result { position: relative; margin: 20px -10px 0; padding: 20px; background: #edf1f8; color: #1847a7; font-size: 1.8rem; font-weight: 700; }

#step .result:before { content: ''; position: absolute; top: -16px; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); width: 0; height: 0; border-style: solid; border-width: 0 32.5px 16px 32.5px; border-color: transparent transparent #edf1f8 transparent; }

@media screen and (min-width: 600px) { #step .inner { margin-top: 30px; margin-bottom: 30px; }
  #step .stepList { padding: 0; }
  #step .stepTitWrap { margin-top: 40px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -ms-flex-wrap: wrap; flex-wrap: wrap; }
  #step .stepTitWrap .stepTit { width: 370px; font-size: 2.6rem; }
  #step .stepTxtList { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-top: 20px; }
  #step .stepTxtList .stepTxtItem { width: 370px; }
  #step .img { margin: 25px 0 0; }
  #step .result { margin: 50px 0px 0; padding: 25px; font-size: 2.6rem; text-align: center; }
  #step .result:before { top: -22px; border-width: 0 50px 22px 50px; } }

/*  #example
---------------------------------------- */
#example .inner { padding-top: 15px; padding-bottom: 50px; }

#example .item + .item { margin-top: 15px; }

#example .item a { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; text-align: center; height: 225px; text-decoration: none; }

#example .item a:before { content: ''; position: absolute; bottom: 15px; right: 20px; width: 35px; height: 11px; background: url(../img/common/ico_arrow05.png) no-repeat center/contain; }

#example .item a .txt { color: #fff; font-size: 2.7rem; font-weight: 700; }

#example .is_item01 a { background: url(../img/wj1/bg_example01.png) no-repeat center/cover; }

#example .is_item02 a { background: url(../img/wj1/bg_example02.png) no-repeat center/cover; }

#example .is_item03 a { background: url(../img/wj1/bg_example03.png) no-repeat center/cover; }

@media screen and (min-width: 600px) { #example .inner { padding-top: 50px; padding-bottom: 100px; }
  #example .list { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-top: 10px; }
  #example .item { width: 370px; }
  #example .item + .item { margin-top: 0; }
  #example .item a { height: 240px; }
  #example .item a:before { bottom: 20px; right: 20px; width: 36px; height: 13px; }
  #example .item a .txt { font-size: 2.8rem; } }

/*  bnr
---------------------------------------- */
#bnrWrap { background: #edf1f8; }

#bnrWrap .inner { padding-top: 40px; padding-bottom: 40px; }

#bnrWrap .bnrBox a { display: block; }

#bnrWrap .bnrBox + .bnrBox { margin-top: 10px; }

@media screen and (min-width: 600px) { #bnrWrap .inner { padding-top: 100px; padding-bottom: 100px; }
  #bnrWrap .bnrWrap { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -ms-flex-wrap: wrap; flex-wrap: wrap; }
  #bnrWrap .bnrBox { width: 590px; }
  #bnrWrap .bnrBox + .bnrBox { margin-top: 0; } }