/* for SP */

#Service header{
      background-image: url(../img/service/service_top_cut.jpg);
}


/*service index*/
#Service{}
#Service main{
}
#Service.kumapon main{
  padding-bottom: 0;
}
#Service .service_wrap{
  margin-top: 100px;
}
#Service .service_wrap dl{
  font-size: 1.4rem;
}
#Service .service_wrap dt{
  position: relative;
}

#Service .service_wrap dd{
  text-align: center;
  background-color: #FFF;
  padding-top: 12vw;
}
#Service .service_wrap dd strong{
  display: block;
  color: #5C5C5C;
    font-weight: normal;
  text-align: center;
}
#Service .service_wrap dd img{
  margin-top: 20px;
  width:100%;
      margin-bottom: 15px;
}
#Service .service_wrap dd p{
  text-align: left;
  margin-bottom: 25px;
}

#Service .kireipass dt{
  background-color: #6BC1C1;
  height: 40vw;
}
#Service .connect dt{
  background-color: #D6E9F2;
    height: 40vw;
}
#Service .kumapon dt{
  background-color: #DCAF6E;
    height: 40vw;
}
/*キレイパスコンテンツ*/
#Service .kireipass dt span{
  position: absolute;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  left: 50%;
  top: -30px;
}
#Service .kireipass dt img{
  width: 30vw;
  -webkit-transform: rotate(10deg);
  -moz-transform: rotate(10deg);
}
/*コネクトコンテンツ*/
#Service .connect dt img{
      position: absolute;
    width: 90vw;
    top: -4vw;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
}
#Service .connect{
  margin-top: 100px;
  padding-bottom: 0;
}
#Service .connect dd{
}
/*くまぽんコンテンツ*/
#Service .kumapon dt span{
  position: absolute;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  left: 50%;
  top: -30px;
}
#Service .kumapon dt img{
  width: 30vw;
  -webkit-transform: rotate(10deg);
  -moz-transform: rotate(10deg);
}


/*kireipass.html*/
#Service.kireipass .headBtn,
#Service.kumapon .headBtn{
  width: 60%;
  margin-top: 10px;
}
#Service.kireipass .headBtn::after,
#Service.kumapon .headBtn::after{
font-size: 3vw;
    top: 50%;
    right: 4%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
}

#Service.kireipass header,
#Service.kumapon header{
  background-image: none;
}
#Service.kireipass .mainvisual{
  display: none;
}
#Service.kireipass .topImg{
  display: flex;
  flex-direction: column-reverse;
  padding-top: 30px;
  padding-bottom: 60px;
}
#Service.kireipass .topImg .mainImg{
  text-align: center;
}
#Service.kireipass .topImg .mainImg img{
  width:40%;
}
#Service.kireipass .topImg dl{
  margin-top: 30px;
}

#Service.kireipass .topImg dd{
  width:100%;}
#Service.kireipass .topImg h2{
  color: #6BC1C1;
    font-weight: bold;
    font-size: 1.8rem;
    line-height: 1.5;
  text-align: center;
}
#Service.kireipass .topImg dd img{
      width: 100%;
    margin: 35px auto;
    max-width: 530px;
    display: block;
}
#Service.kireipass .topImg p{
font-size: 1.4rem;
line-height: 2rem;
}
#Service.kireipass .topImg ul{
  display: flex;
    width: 100%;
    justify-content: space-between;
}
#Service.kireipass .topImg li{
}
#Service.kireipass .topImg li img{
}
#Service.kireipass .bgc{
  background: #6BC1C1;
  color: #FFF;
}
#Service.kireipass .topImg ul.appDownload{}
#Service.kireipass .topImg ul.appDownload li.iphone{
      width: 44%;
}
#Service.kireipass .topImg ul.appDownload li.google{    width: 54%;}
#Service.kireipass section{}
#Service.kireipass section.serviceDetail dl{
  padding: 30px 10px;
}
#Service.kireipass section.serviceDetail.reverse dl{
  flex-direction: row-reverse;
}
#Service.kireipass section.serviceDetail dt img{
  width: 80%;
    margin: 0 auto;
    display: block;
}
#Service.kireipass section.serviceDetail dd{
  width: 100%;
}
#Service.kireipass .mainTxt{
  text-align: center;
  padding: 40px;
}
#Service.kireipass .triangle{
      width: 0;
    height: 0;
    border-left: 50vw solid transparent;
    border-right: 50vw solid transparent;
    border-top: 50px solid #6BC1C1;
    margin: 0 auto;
  
}
#Service.kireipass .triangle2{
      width: 0;
    height: 0;
    border-left: 50vw solid transparent;
    border-right: 50vw solid transparent;
    border-top: 50px solid #fff;
    margin: 0 auto;
}
#Service.kireipass section.mainTxt h3{
      font-size: 2.4rem;
    font-weight: bold;
    line-height: 4rem;
    margin-bottom: 20px;
}
#Service.kireipass section.mainTxt dl{
  display: block;
}
#Service.kireipass section.mainTxt dd p{
      font-size: 1.6rem;
    line-height: 3rem;
  text-align: left;
}
#Service.kireipass section.serviceDetail h3{
  font-size: 2rem;
  font-weight: bold;
  line-height: 1.8;
  margin-bottom: 30px;
  margin-top: 30px;
}
#Service.kireipass section.serviceDetail h3 span{
  color: #6BC1C1;
}
#Service.kireipass section.serviceDetail dd p{
      font-size: 1.4rem;
    line-height: 3rem;
}
.footerBtn{
  margin: 30px auto 0 auto;
  padding: 0 30px;
}
/*kumapon.html*/
#Service.kumapon .mainvisual{
  display: none;
}
#Service.kumapon .topImg{
  display: flex;
  flex-direction: column-reverse;
  padding-top: 30px;
  padding-bottom: 60px;
}
#Service.kumapon .topImg .mainImg{
  text-align: center;
}
#Service.kumapon .topImg .mainImg img{
  width:40%;
}
#Service.kumapon .topImg dl{
  margin-top: 30px;
}

#Service.kumapon .topImg dd{
  width:100%;}
#Service.kumapon .topImg h2{
  color: #DCAF6E;
    font-weight: bold;
    font-size: 1.8rem;
    line-height: 1.5;
  text-align: center;
}
#Service.kumapon .topImg dd img{
      width: 100%;
    margin: 35px auto;
    max-width: 530px;
    display: block;
}
#Service.kumapon .topImg p{
font-size: 1.4rem;
line-height: 2rem;
}
#Service.kumapon .topImg ul{
  display: flex;
    width: 100%;
    justify-content: space-between;
}
#Service.kumapon .topImg li{
}
#Service.kumapon .topImg li img{
}


#Service.kumapon .bgc{
  background: #DCAF6E;
  color: #FFF;
}
#Service.kumapon section{}
#Service.kumapon section.serviceDetail dl{
  padding: 30px 10px;
}
#Service.kumapon section.serviceDetail.reverse dl{
  flex-direction: row-reverse;
}
#Service.kumapon section.serviceDetail dt img{
  width: 50%;
    margin: 0 auto;
    display: block;
}

#Service.kumapon section.serviceDetail dd{
   width: 100%;
}
#Service.kumapon .mainTxt{
    text-align: center;
  padding: 40px;
}
#Service.kumapon .triangle{
        width: 0;
    height: 0;
    border-left: 50vw solid transparent;
    border-right: 50vw solid transparent;
    border-top: 50px solid #DCAF6E;
    margin: 0 auto;
}
#Service.kumapon .triangle2{
      width: 0;
    height: 0;
    border-left: 50vw solid transparent;
    border-right: 50vw solid transparent;
    border-top: 50px solid #fff;
    margin: 0 auto;
}
#Service.kumapon section.mainTxt h3{
      font-size: 2.4rem;
    font-weight: bold;
    line-height: 4rem;
    margin-bottom: 20px;
}
#Service.kumapon section.mainTxt dl{
  display: block;
}
#Service.kumapon section.mainTxt dd p{
      font-size: 1.6rem;
    line-height: 3rem;
  text-align: left;
}
#Service.kumapon section.serviceDetail h3{
  font-size: 2.4rem;
  font-weight: bold;
  line-height: 4rem;
  margin-bottom: 30px;
  margin-top: 30px;
}
#Service.kumapon section.serviceDetail h3 span{
  color: #DCAF6E;
}
#Service.kumapon section.serviceDetail dd p{
      font-size: 1.4rem;
    line-height: 2.6rem;
}
#Service.kumapon .footerBtn{
padding-bottom: 100px;
}

/* スライドする要素 */
.content {
  width: 150px;
  height: 150px;
}
.content img{
  width: 100%;
}
/*.content:nth-child(1) {
  background-color: tomato;
}
.content:nth-child(2) {
  background-color: orange;
}
.content:nth-child(3) {
  background-color: blue;
}
.content:nth-child(4) {
  background-color: green;
}*/
/* スライドレールの枠 */
.slidewrap {
overflow: hidden;
    display: flex;
    align-items: center;
    height: 150px;
}
/* content4つをまとめたスライドブロック */
.slideshow {
  display: flex;
  -webkit-animation: loop-slide 20s infinite linear 1s both;
  animation: loop-slide 20s infinite linear 1s both;
}
@-webkit-keyframes loop-slide {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}
@keyframes loop-slide {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}
/* ホバー時に動きを止める（パターン2・3）
.slide-paused:hover .slideshow {
  -webkit-animation-play-state: paused;
  animation-play-state: paused;
}*/
/* ホバー時の装飾（パターン3） 
.content-hover {
  transition: all 0.2s;
  margin-right: 20px;
}
.content-hover:hover {
  transform: translateY(-20px);
  border-radius: 0 10%;
  box-shadow: 0 3px 10px 0 #333;
  opacity: 0.8;
  cursor: pointer;
}*/