@charset "UTF-8";
/* #mainImg 下層ページ
================================================ */
/* mainimg */
body:before { position: fixed; top: 0; left: 0; z-index: -1; width: 100%; height: 100%; background: #262626 url(../img/service/mainimg01_sp.png) no-repeat; background-size: 100% auto; content: ''; }

@media screen and (min-width: 600px) { body:before { z-index: -1; background-image: url(../img/service/mainimg01_pc.png); background-size: 1920px; background-position: top center; min-width: 1520px; } }

/* mask sp */
@media screen and (max-width: 599px) { #bg, #gFooter { position: relative; z-index: 2; }
  #contents { position: relative; z-index: 0; }
  #contents:before { position: absolute; content: ''; top: -109px; left: 0; width: 100%; height: 100%; background: url(../img/common/bg_contents01_sp.png) no-repeat top right; background-size: 100% auto; z-index: 0; }
  #contents:after { position: absolute; content: ''; top: 400px; left: 0; width: 100%; height: 100%; background: #262626; background-size: contain; z-index: 0; } }

/* mask pc */
@media screen and (min-width: 600px) { #bg { position: relative; background: #262626; }
  #bg:before { content: ""; position: absolute; top: -253px; height: 675px; width: 1920px; display: block; left: 50%; padding: 0; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); background: url(../img/common/bg_contents01_pc.png) no-repeat top center; background-size: cover; z-index: 0; } }

/*  #parallax01
================================================ */
#parallax01 { position: absolute; bottom: -278px; width: 100%; height: 552px; overflow: hidden; z-index: 0; }

#parallax01 .inner { width: 100%; height: 100%; background: url(../img/service/bg_parallax01.png) center; background-size: cover; background-attachment: fixed; position: relative; }

#parallax01 .inner:before { content: ''; background: #262626; -webkit-transform: skewY(30deg); -webkit-transform-origin: left top; -ms-transform: skewY(30deg); transform: skewY(30deg); -ms-transform-origin: left top; transform-origin: left top; width: 100%; height: 216px; position: absolute; top: -216px; right: 0; }

#parallax01 .inner:after { content: ''; background: #262626; -webkit-transform: skewY(30deg); -webkit-transform-origin: right bottom; -ms-transform: skewY(30deg); transform: skewY(30deg); -ms-transform-origin: right bottom; transform-origin: right bottom; width: 100%; height: 216px; position: absolute; bottom: -216px; left: 0; }

@media screen and (min-width: 600px) { #parallax01 { top: 159px; bottom: auto; height: 1949px; }
  #parallax01 .inner { max-width: 1920px; margin: 0 auto; }
  #parallax01 .inner:before { height: 1109px; top: -1109px; }
  #parallax01 .inner:after { height: 1109px; bottom: -1109px; } }

/*  #service
================================================ */
#service .lead { color: #fff; }

#service .lead .titWrap .en { position: relative; padding-bottom: 5px; font-size: 2rem; font-weight: 600; color: #9ecb3a; }

#service .lead .titWrap .en:before { content: ''; position: absolute; bottom: 0; left: 0; width: 25px; height: 1px; background: #9ecb3a; }

#service .lead .titWrap .ja { padding-top: 10px; font-size: 2.5rem; font-weight: 700; line-height: 1.5; }

#service .lead .imgWrap { margin: 30px -20px 0; }

#service .lead .txtWrap { margin-top: 40px; }

#service .lead .txtWrap .txt a { text-decoration: underline; color: #9ecb3a; }

#service .lead .txtWrap .txt + .txt { padding-top: 20px; }

#service .linkWrap { margin-top: 45px; padding-bottom: 50px; }

#service .secLink { position: relative; z-index: 1; }

#service .secLink .txtWrap { position: relative; box-sizing: border-box; padding: 45px 40px 40px; background: #fff; }

#service .secLink .num { position: absolute; top: -25px; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); font-size: 5rem; line-height: 1; font-weight: 700; color: #9ecb3a; }

#service .secLink .en { position: relative; padding-bottom: 5px; text-align: center; font-size: 3rem; font-weight: 700; color: #262626; line-height: 1.2; }

#service .secLink .en:before { content: ''; position: absolute; bottom: 0; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); width: 25px; height: 1px; background: #262626; }

#service .secLink .ja { text-align: center; font-size: 1.4rem; color: #262626; }

#service .secLink .btn { margin-top: 15px; }

#service .secLink .btn + .btn { margin-top: 10px; }

#service .secLink + .secLink { margin-top: 15px; }

@media screen and (min-width: 600px) { #service .lead { position: relative; }
  #service .lead .inner { position: relative; z-index: 1; }
  #service .lead .titWrap .en { text-transform: uppercase; padding-bottom: 10px; }
  #service .lead .titWrap .en:before { width: 30px; }
  #service .lead .titWrap .ja { padding-top: 25px; font-size: 3.4rem; }
  #service .lead .imgWrap { margin: 55px 0 0; }
  #service .lead .txtWrap { margin-top: 50px; }
  #service .lead .txtWrap .txt { line-height: 1.8; }
  #service .lead .txtWrap .txt a { -webkit-transition: all 0.3s ease; transition: all 0.3s ease; }
  #service .lead .txtWrap .txt a:hover { text-decoration: none; }
  #service .lead .txtWrap .txt + .txt { padding-top: 30px; }
  #service .linkWrap { margin-top: 110px; padding-bottom: 120px; }
  #service .secLink { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: nowrap; flex-wrap: nowrap; }
  #service .secLink .img { width: 50%; }
  #service .secLink .txtWrap { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 50%; padding: 20px; }
  #service .secLink .num { top: 0; text-align: center; position: relative; font-size: 7rem; }
  #service .secLink .en { padding-top: 15px; padding-bottom: 15px; font-size: 4.2rem; }
  #service .secLink .en:before { width: 30px; height: 1px; }
  #service .secLink .ja { padding-top: 10px; font-size: 1.6rem; }
  #service .secLink .btn { margin-top: 15px; }
  #service .secLink .is_wide .btn a{ width: 450px; }
  #service .secLink .is_flex { width: 450px; margin-top: 15px; display: flex; justify-content: space-between; }
  #service .secLink .is_flex .btn {margin-top: 0 !important;}
  #service .secLink .is_flex .btn a{ width: 220px;padding-right: 26px;height: 100%;display: flex;justify-content: center;align-items: center; }
  #service .secLink:nth-child(even) { -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; }
  #service .secLink + .secLink { margin-top: 40px; } }