/*---------------------------------------------------------------------------------------------------------
 TITLE:
 PAGE: systemduction.html
---------------------------------------------------------------------------------------------------------*/
/* MAIN CONTENT -----------------------------------------------------------------------------------------*/
.system {
  position: relative;
  z-index: 1;
  width: 100%;
  margin: 0 auto;
  padding: 0 0 150px;
}

/* SYSTEM -----------------------------------------------------------------------------------------*/
/* title
========================================== */
.pageHeader {
  width: 100%;
  height: 250px;
  margin: 40px 0 0;
  text-align: center;
  background: url(../img/bg_page_header.png) center center no-repeat;
}

.header_ttl {
  padding-top: 20px;
}

/* page navi
========================================== */
.pageNav {
  width: 100%;
  height: 80px;
  margin: 90px 0 0;
  background: url(../img/system/nav_bg.png);
}

.pageNav_list {
  display: -ms-flexbox;
  display: flex;
  height: 80px;

  align-items: center;
  -ms-flex-align: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.pageNav_list li {
  position: relative;
  background: url(../img/system/nav_line.png) center right no-repeat;
}

.pageNav_list li:last-child {
  background: none;
}

.pageNav_list li a,.pageNav_list li span {
  display: block;
  text-indent: -9999px;
}

.pageNav_list li a {
  transition: transform .2s;
}

.pageNav_list li a:hover {
  transform: scale(.97);
}

.pageNav_sys00 a,.pageNav_sys00 span {
  width: 77px;
  height: 52px;
  padding: 0 10px;
}

.pageNav_sys00 span,.pageNav_sys00 a:hover {
  background: url(../img/system/nav_system00_on.png) center center no-repeat;
}

.pageNav_sys00 a {
  background: url(../img/system/nav_system00_off.png) center center no-repeat;
}

.pageNav_sys01 a,.pageNav_sys01 span {
  width: 110px;
  height: 52px;
  padding: 0 10px;
}

.pageNav_sys01 span,.pageNav_sys01 a:hover {
  margin: 0;
  background: url(../img/system/nav_system01_on.png) center center no-repeat;
}

.pageNav_sys01 a {
  background: url(../img/system/nav_system01_off.png) center center no-repeat;
}

.pageNav_sys02 a,.pageNav_sys02 span {
  width: 97px;
  height: 51px;
  padding: 0 10px;
}

.pageNav_sys02 span,.pageNav_sys02 a:hover {
  margin: 0 0 0 0;
  background: url(../img/system/nav_system02_on.png) center center no-repeat;
}

.pageNav_sys02 a {
  background: url(../img/system/nav_system02_off.png) center center no-repeat;
}

.pageNav_sys03 a,.pageNav_sys03 span {
  width: 75px;
  height: 51px;
  padding: 0 10px;
}

.pageNav_sys03 span,.pageNav_sys03 a:hover {
  margin: 0 0 0 0;
  background: url(../img/system/nav_system03_on.png) center center no-repeat;
}

.pageNav_sys03 a {
  background: url(../img/system/nav_system03_off.png) center center no-repeat;
}

.pageNav_new:before {
  position: absolute;
  z-index: 2;
  top: -10px;
  left: 50%;
  display: block;
  width: 50px;
  height: 17px;
  margin-left: -25px;
  content: "";
  background: url(../img/icon_new.png) no-repeat 0 0;
  background-size: 100% auto;
}

/* system text
========================================== */
.systemTxtWrap {
  display: -ms-flexbox;
  display: flex;
  width: 843px;
  margin: 0 auto;

  align-items: center;
  -ms-flex-align: center;
}

.systemTxt01 {
  font-size: 16px;
  font-weight: 600;
  line-height: 2;
  width: 600px;
  margin: 25px auto 0;
  text-align: center;
  text-align: left; 
  color: #000;
  text-shadow: white 1px 1px 1px,  white 1px -1px 1px,  white -1px 1px 1px, white -1px -1px 1px;
}

.systemTxt02 {
  font-size: 16px;
  font-weight: 600;
  line-height: 2;
  margin: 30px 0 0;
  text-align: center;
  color: #000;
  text-shadow: white 1px 1px 1px,  white 1px -1px 1px,  white -1px 1px 1px, white -1px -1px 1px;
}

/* system button
========================================== */
.systemBtn a {
  transition: opacity .3s ease-out;
}

.systemBtn a:hover {
  opacity: .8;

  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
}

/* system image
========================================== */
.systemImg {
  position: relative;
  width: 840px;
  height: 472px;
  margin: 62px auto 0;
}

.systemImg_noframe {
  position: relative;
  width: 840px;
  height: 472px;
  margin: 30px auto 0;
}

.systemImg:after {
  position: absolute;
  top: -22px;
  left: -22px;
  display: block;
  width: 884px;
  height: 516px;
  content: "";
  background: url(../img/index/intro/intro_img_frame.png) no-repeat 0 0;

  pointer-systems: none;
}

/* system01
========================================== */
.systemWrapp01 {
  position: relative;
  width: 100%;
  margin: 0 0 100px;
  padding: 80px 0 110px;
  background: url(../img/bg_patern01.png) center top;
}

.system01-01 {
  position: relative;
  z-index: 2;
}

.systemWrapp01 h2 {
  text-align: center;
}

.system01-02 {
  position: relative;
  z-index: 2;
  margin: 210px 0 0;
  text-align: center;
}

.system01-02 .systemTxt01 {
  margin: 10px auto 30px;
  text-align: center;
}

/* system02
========================================== */
.systemWrapp02 {
  position: relative;
  width: 100%;
  margin: 0 0 130px;
  padding: 50px 0;
  background: url(../img/bg_patern01.png) center top;
}

.systemWrapp02.is-det00 {
  margin: 0 0 190px;
  padding: 60px 0 0;
}

.systemWrapp02.is-det03 {
  margin: 0 0 50px;
}

.system02-01 {
  position: relative;
  z-index: 2;
}

.systemWrapp02 h2 {
  text-align: center;
}

.systemBgWrapper {
  width: 100%;
  height: 432px;
  margin: 150px 0 0;
  background: #019dbf url(../img/bg_patern01.png) center center;
}

.systemBg {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  height: 432px;
  margin: 0 auto;
  border-top: 15px solid #019dbf;
  border-bottom: 15px solid #019dbf;
  background: rgba(1, 157, 191, .5);
}

.systemBg:before {
  position: absolute;
  top: 0;
  display: block;
  width: 100%;
  content: "";
  border-top: 2px solid #ffa400;
}

.systemBg:before {
  position: absolute;
  bottom: 0;
  display: block;
  width: 100%;
  content: "";
  border-bottom: 2px solid #ffa400;
}

.system02Img {
  position: relative;
  z-index: 1;
  margin: -80px auto 0;
  text-align: center;
}

/* system03
========================================== */
.systemWrapp03 {
  position: relative;
  width: 100%;
  margin: 0;
  padding: 80px 0 190px;
  background: url(../img/bg_patern01.png) center top;
}

.systemWrapp03.is-det01 {
  padding-bottom: 130px;
}

.systemWrapp03.is-det02 {
  padding-bottom: 170px;
}

.systemWrapp03.is-det03 {
  padding-bottom: 190px;
}

.system03-01 {
  position: relative;
  z-index: 2;
}

.systemWrapp03 h2 {
  text-align: center;
}

.system03-02 {
  position: relative;
  z-index: 2;
  margin: 170px 0 0;
  text-align: center;
}

.system03-02 h2 {
  text-align: center;
}

/* system04
========================================== */
.systemWrapp04 {
  position: relative;
  width: 100%;
  margin: 0;
  padding: 80px 0 250px;
  background: url(../img/bg_patern01.png) center top;
}

.system04-01 {
  position: relative;
  z-index: 2;
}

.systemWrapp04 h2 {
  text-align: center;
}

.system04-02 {
  position: relative;
  z-index: 2;
  margin: 170px 0 0;
  text-align: center;
}

.system04-02 h2 {
  text-align: center;
}

/* slick
========================================== */
button:focus {
  outline: none;
}

.slick-prev {
  position: absolute;
  top: 50%;
  left: -80px;
  width: 66px;
  height: 48px;
  cursor: pointer;
  transition: all .25s linear;
  text-indent: -9999px;
  border: none;
  background: url(../img/index/intro/intro_slick_prev.png) no-repeat 0 0;
}

.slick-prev:hover {
  transform: translate(-10%, 0);
}

.slick-next {
  position: absolute;
  top: 50%;
  right: -80px;
  width: 66px;
  height: 48px;
  cursor: pointer;
  transition: all .25s linear;
  text-indent: -9999px;
  border: none;
  background: url(../img/index/intro/intro_slick_next.png) no-repeat 0 0;
}

.slick-next:hover {
  transform: translate(10%, 0);
}

.slick-dots {
  position: absolute;
  z-index: 1;
  bottom: -110px;
  left: 0;
  width: 100%;
  height: 16px;
  text-align: center;
  letter-spacing: -.4em;
}

.slick-dots li {
  display: inline-block;
  width: 16px;
  height: 16px;
  margin: 0 4px;
  cursor: pointer;
  text-indent: -9999px;
  letter-spacing: normal;
  border: none;
}

.slick-dots li {
  background: url(../img/index/intro/dots_off.png) no-repeat 0 0;
  background-size: 100% 100%;
}

.slick-dots li.slick-active {
  background: url(../img/index/intro/dots_on.png) no-repeat 0 0;
  background-size: 100% 100%;
}

.systemImg_noframe .slick-dots {
  bottom: -30px;
}

.systemImg.is-noTxt .slick-dots {
  bottom: -50px;
}

/*-------------------------------------------------------------------------------------------------------*/
@media screen and (max-width: 374px) {
  .sps-none {
    display: none;
  }
  .sps-none {
    display: none;
  }
}

@media screen and (max-width: 639px) {
  .sp-none {
    display: none;
  }
  .system01-02 {
    margin: 30vw 0 0;
  }
  .system01-02 h3 {
    margin: 0 4vw;
  }
  .systemBgWrapper {
    height: 80.1875vw;
    margin: calc(11vw + 32vw) 0 80vw;
  }
  .systemBg {
    height: 80.1875vw;
    border-top: 10px solid #019dbf;
    border-bottom: 10px solid #019dbf;
  }
  .system02Img {
    position: absolute;
    top: -29vw;
    height: 201.25vw;
    margin: 0;
  }
  .system02Img img {
    width: 100%;
    height: 201.25vw;
  }
  .sp-none {
    display: none;
  }
  .system {
    padding: 0;
  }
  .pageHeader {
    width: 100%;
    height: 38.28125vw;
    margin: 0 0 6.25vw;
    padding: 0;
    text-align: center;
    background: url(../img/sp/bg_page_header.png) center top repeat;
    background-size: cover;
  }
  .header_ttl {
    width: 31.46875vw;
    margin: 0 auto;
    padding-top: 5.625vw;
  }
  .systemTxtWrap {
    display: block;
    width: 100%;
  }
  .systemTxtWrap .systemTxt01 {
    margin-bottom: 20px;
  }
  .systemTxt01 {
    font-size: 12px;
    font-size: 1.2rem;
    width: 90.6vw;
    margin: 3vw auto 0;
  }
  .systemTxt02 {
    font-size: 12px;
    font-size: 1.2rem;
    width: 90.6vw;
    margin: 3vw auto 0;
  }
  .systemBtn {
    width: 60vw;
    margin: 0 auto;
    text-align: center;
  }
  .systemImg {
    position: relative;
    width: 95%;
    /*95vw;*/
    height: auto;
    /*53.4vw;*/
    margin: 12.5vw auto 0;
    padding: 0;
  }
  .systemImg:after {
    top: -2.5vw;
    left: -2.5vw;
    width: 105%;
    /*100vw;*/
    height: 109%;
    /*58.4vw;*/
    margin: 0;
    background-size: 100% auto;
  }
  .systemImg_noframe {
    width: 100%;
    height: auto;
    margin: 5vw auto 0;
  }
  .systemImg_noframe img {
    min-width: 100%;
  }
  /* system01
  ========================================== */
  .systemWrapp01 {
    width: 100%;
    height: auto;
    padding: 0;
  }
  .systemWrapp01 h2 {
    position: relative;
    overflow: hidden;
    width: 100%;
  }
  .systemWrapp01 h2 img {
    position: relative;
    left: 50%;
    width: 130%;
    transform: translate(-50%, 0);
  }
  /* system02
  ========================================== */
  .systemWrapp02 {
    width: 100%;
    height: auto;
    padding: 0;
  }
  .systemWrapp02.is-det00 {
    margin: 0;
    padding: 0 0 26vw;
  }
  .systemWrapp02.is-det03 {
    margin: 0;
    padding: 0 0 28vw;
  }
  .systemWrapp02 h2 {
    position: relative;
    overflow: hidden;
    width: 100%;
  }
  .systemWrapp02 h2 img {
    position: relative;
    left: 50%;
    width: 130%;
    transform: translate(-50%, 0);
  }
  /* system03
  ========================================== */
  .systemWrapp03 {
    width: 100%;
    height: auto;
    padding: 0 0 50vw;
  }
  .systemWrapp03 h2 {
    position: relative;
    overflow: hidden;
    width: 100%;
  }
  .systemWrapp03 h2 img {
    position: relative;
    left: 50%;
    width: 130%;
    transform: translate(-50%, 0);
  }
  .systemWrapp03 h3 img {
    position: relative;
    left: 50%;
    width: 130%;
    transform: translate(-50%, 0);
  }
  .systemWrapp03.is-det00 {
    padding: 0 0 26vw;
  }
  .systemWrapp03.is-det01 {
    padding: 0 0 38vw;
  }
  .systemWrapp03.is-det02 {
    padding: 0 0 52vw;
  }
  .system03-02 {
    position: relative;
    z-index: 2;
    margin: 80px 10px 0;
    text-align: center;
  }
  .system03-02 h2 img {
    position: relative;
    left: 50%;
    width: 136%;
    transform: translate(-50%, 0);
  }
  .system03-02 h3 img {
    position: relative;
    left: 50%;
    width: 136%;
    transform: translate(-50%, 0);
  }
  /* system04
  ========================================== */
  .systemWrapp04 {
    width: 100%;
    height: auto;
    padding: 0 0 50vw;
  }
  .systemWrapp04 h2 {
    position: relative;
    overflow: hidden;
    width: 100%;
  }
  .systemWrapp04 h2 img {
    position: relative;
    left: 50%;
    width: 130%;
    transform: translate(-50%, 0);
  }
  .systemWrapp04.is-det01 {
    padding: 0 0 38vw;
  }
  .systemWrapp04.is-det02 {
    padding: 0 0 52vw;
  }
  .system04-02 {
    position: relative;
    z-index: 2;
    margin: 80px 10px 0;
    text-align: center;
  }
  .system04-02 h2 {
    width: 100%;
  }
  /* slick
  ========================================== */
  .slick-prev {
    z-index: 2;
    top: 134%;
    left: 3vw;
    width: 10.3vw;
    height: 7.5vw;
    background-size: 100% 100%;
  }
  .slick-next {
    z-index: 2;
    top: 134%;
    right: 3vw;
    width: 10.3vw;
    height: 7.5vw;
    background-size: 100% 100%;
  }
  .systemImg .slick-dots {
    bottom: -10vw;
  }
  .systemImg .slick-prev,.systemImg .slick-next {
    top: 106%;
  }
  .systemImg_noframe .slick-prev {
    top: 110%;
  }
  .systemImg_noframe .slick-next {
    top: 110%;
  }
  .systemImg_noframe .slick-dots {
    bottom: -10vw;
  }
  .systemImg.is-noTxt .slick-dots {
    bottom: -10vw;
  }
}

@media screen and (min-width: 640px) {
  .pc-none {
    display: none;
  }
  .pc-none {
    display: none;
  }
  .systemTxtWrap .systemTxt01 {
    margin-right: 40px;
    text-align: left;
  }
}