@charset "UTF-8";

/* common
-----------------------------------------------------------------------*/
#jp-cmp-line{
  margin: 20px 0;
  padding: 0;
}
#jp-cmp-line .jp-cmp-line-inner{
  -ms-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  background: #fff;
  box-shadow: 1px 1px 1px rgba(0,0,0,0.2);
}



#jp-cmp-line-header h1{
  display: block;
  margin: 0 auto;
  padding: 0;
  line-height: 1;
  text-align: center;
}
#jp-cmp-line-header .header-txt{
  text-align: center;
  margin: 0 auto;
  padding: 33px 0 20px 0;
  line-height: 1;
}
#jp-cmp-line-header .header-balloon-1{
  position: absolute;
  top: 0;
  right: 50%;
  margin: 37px 159px 0 0;
}
#jp-cmp-line-header .header-balloon-2{
  position: absolute;
  top: 0;
  left: 50%;
  margin: 90px 0 0 178px;
}


#jp-cmp-line-outline{
  display: block;
  width: auto;
  margin: 0 0 60px 0;
  padding: 40px 0px 5px 0px;
  background-image: url(/web/src/s/line/img/chatbot/outline_bg.jpg);
  background-position: bottom center;
  background-size: auto auto;
  background-repeat: no-repeat;
  list-style: none;
}


#jp-cmp-line-outline .balloon5 {
  margin-bottom: 30px;
  display: flex;
  justify-content: center;

}

#jp-cmp-line-outline p{
  margin: 0 22px;
  font-size: 24px;
  color: white;
}


/*吹き出し*/
.balloon5 {

}

.balloon5 .faceicon {

}

.balloon5 .faceicon img{
  border: solid 3px #2cbf13;
  border-radius: 50%;
}

.balloon5 .chatting {
  text-align: center;
}

.says {
  display: inline-block;
  position: relative; 
  margin: 5px 0 0 50px;
  padding: 10px 13px;
  border-radius: 12px;
  background: #2cbf13;
}

.says:after {
  content: "";
  display: inline-block;
  position: absolute;
  top: 18px; 
  left: -24px;
  border: 12px solid transparent;
  border-right: 12px solid #2cbf13;
}

.says p {
  margin: 10px;
  padding: 0;
  font-weight: bold;
}
/*吹き出し終わり*/

#jp-cmp-line-outline p em{
    position: relative;
    z-index: 1;
    font-weight: inherit;
    color: inherit;
    text-align: center;
    padding: 0 0.3em;
}
#jp-cmp-line-outline p em:after{
    content: "";
    position: absolute;
    left: 0;
    bottom: 0.2em;
    width: 100%;
    height: 0.5em;
    background: repeating-linear-gradient(-45deg, rgba(255, 162, 108,0.7), rgba(255, 162, 108,0.7) 2px, transparent 2px, transparent 4px);
    z-index: -1;
}
#jp-cmp-line-outline .btn{
  display: inline-block;
  padding: 10px 20px;
  background-color: #61c4d7;
  color: #274db8;
  font-size: 1em;
  font-weight: bold;
  text-shadow: 1px 1px 1px rgba(255,255,255,0.2);
  box-shadow: 1px 1px 3px rgba(0,0,0,0.2), 1px 1px 1px rgba(255,255,255,0.2) inset;
}

#jp-cmp-line-outline-now{
    width: 80%;
    min-width: 300px;
    margin: 40px auto;
    padding: 0 0 20px 0;
    text-align: center;
    border-radius: 5px;
    background-color: rgba(250, 224, 3,0.2);
    box-sizing: border-box;
    overflow: hidden;
}
#jp-cmp-line-outline-now h3{
    display: block;
    margin: 0 0 20px 0;
    padding: 7px 0;
    font-size: 24px;
    font-weight: bold;
    background-color: rgba(250, 224, 3,0.7);
    color: #4f2a11;
}
#jp-cmp-line-outline-now a{
    display: inline-block;
    margin: 10px;
}
#jp-cmp-line-outline-now a img{
  width: 100%;
  height: auto;
  max-width: 640px;
  max-height: 100px;
}


#jp-cmp-line-outline .jp-cmp-line-add{
  margin: 60px 0 0 0;
}
#jp-cmp-line-outline .jp-cmp-line-add ul{
  margin: 50px;
  padding: 0;
}
#jp-cmp-line-outline .jp-cmp-line-add ul > li{
  width: 500px;
  margin: 0 auto;
  padding: 0;
  background-color: #fff;
  text-align: center;
  border: 4px solid #2cbf13;
  border-radius: 5px;
  -ms-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  box-shadow: 3px 3px 5px rgba(0,0,0,0.2);
}
#jp-cmp-line-outline .jp-cmp-line-add ul > li h3{
  margin: 20px;
  font-size: 22px;
  font-weight: bold;
  color: #2cbf13;
}
#jp-cmp-line-outline .jp-cmp-line-add ul > li > div{
  margin: 20px;
}
#jp-cmp-line-outline .jp-cmp-line-add ul > li > div > a > img{
  width: 60%;
  max-width: 232px;
  height: auto;
}

.jp-cmp-line-howto{
  display: block;
  width: auto;
  margin: 0;
  padding: 22px;
}
.jp-cmp-line-howto header{
  display:-webkit-flex;/* safari用 */
  display: flex;
  -webkit-justify-content: space-between;/*safari用*/
  justify-content: space-between;
  -webkit-align-items: stretch;/*safari用*/
  align-items: stretch;
}
.jp-cmp-line-howto header:before,
.jp-cmp-line-howto header:after{
  display: block;
  content: "";
  width: 100%;
  background-image: url(/web/src/s/line/img/howto-ttl-line.png);
  background-repeat: no-repeat;
}
.jp-cmp-line-howto header:before{ background-position: center left; }
.jp-cmp-line-howto header:after{ background-position: center right; }
.jp-cmp-line-howto h2{
  display: block;
  text-align: center;
  font-size: 36px;
  font-weight: bold;
  color: #2cbf13;
  background-color: #fff;
  white-space: nowrap;
}
.jp-cmp-line-howto h3{
  font-size: 30px;
  font-weight: bold;
  margin: 0 0 20px 0;
}
.jp-cmp-line-howto h3 .fa{
  color: #cc0d17;
  margin-right: 0.5em;
}
.jp-cmp-line-howto ul{
  margin: 40px 22px;
  padding: 0;
}
.jp-cmp-line-howto ul > li{
  margin: 0 0 40px 0;
  padding: 0;
}
.jp-cmp-line-howto ul > li .numc-1,
.jp-cmp-line-howto ul > li .numc-2,
.jp-cmp-line-howto ul > li .numc-3,
.jp-cmp-line-howto ul > li .numc-4{
  display: inline-block;
  margin: 0 0.2em;
  width: 18px;
  height: 18px;
  overflow: hidden;
  background-color: #fe9900;
  border-radius: 9px;
  font-size: 10px;
  color: #fff;
  text-align: center;
  line-height: 18px;
  vertical-align: middle;
}
.jp-cmp-line-howto ul > li .numc-1:before{ content: "1"; }
.jp-cmp-line-howto ul > li .numc-2:before{ content: "2"; }
.jp-cmp-line-howto ul > li .numc-3:before{ content: "3"; }
.jp-cmp-line-howto ul > li .numc-4:before{ content: "4"; }
.jp-cmp-line-howto ul > li .lineid{
  display: inline-block;
  padding: 0;
  font-weight: bold;
  color: #d70e18;
  border: 1px solid #ccc;
  -ms-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 7em;
  font-size: 1em;
  text-align: center;
  border-radius: 0;
}

.jp-cmp-line-howto .qr-line{
  display: block;
  width: 137px;
  height: 137px;
  float: left;
  margin: 0 20px 20px 0;
  border: 1px solid #ccc;
  box-sizing: border-box;
}
.jp-cmp-line-howto .howto-txt{
  font-size: 18px;
}
.jp-cmp-line-howto .howto-txt .qr-line img{
  width: 100%;
  height: auto;
}
.jp-cmp-line-howto ul > li ol{
  clear: both;
  margin: 20px auto;
  width: 100%;
  display:-webkit-flex;/* safari用 */
  display: flex;
  -webkit-justify-content: space-between;/* safari用 */
  justify-content: space-between;
  -webkit-align-items: stretch;/* safari用 */
  align-items: stretch;
}
.jp-cmp-line-howto ul > li ol li{
  position: relative;
}
.jp-cmp-line-howto ul > li ol li:nth-of-type(4){ margin-right: 0; }
.jp-cmp-line-howto ul > li ol li:after{
    position: absolute;
    content: "";
    display: block;
    top: 45%;
    right: -15%;
    width: 14%;
    height: 14%;
    background-image: url(/web/src/s/line/img/arrow_right.png);
    background-position: center center;
    background-size: 90%;
    background-repeat: no-repeat;
}
.jp-cmp-line-howto ul > li ol li:nth-of-type(4):after{ content: none; }
.jp-cmp-line-howto ul > li ol li img{
  width: 100%;
  height: auto;
  border: 1px solid #ccc;
  -ms-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.jp-cmp-list-social-001{
  display: block;
  margin: 0;
  padding: 22px;
  text-align: right;
}

.jp-cmp-line-links{
  text-align: right;
}



/* キャンペーン
-----------------------------------------------------------------------*/

.jp-cmp-line-cmp{
  display: block;
  width: auto;
  margin: 0;
  padding: 22px;
}
.jp-cmp-line-cmp header{
  display:-webkit-flex;/* safari用 */
  display: flex;
  -webkit-justify-content: space-between;/*safari用*/
  justify-content: space-between;
  -webkit-align-items: stretch;/*safari用*/
  align-items: stretch;
}
.jp-cmp-line-cmp header:before,
.jp-cmp-line-cmp header:after{
  display: block;
  content: "";
  width: 25%;
  background-image: url(/web/src/s/line/img/howto-ttl-line.png);
  background-repeat: no-repeat;
}
.jp-cmp-line-cmp header:before{ background-position: center left; }
.jp-cmp-line-cmp header:after{ background-position: center right; }

.jp-cmp-line-cmp h2{
  display: block;
  text-align: center;
  font-size: 30px;
  font-weight: bold;
  color: #2cbf13;
  background-color: #fff;
  
}



/* スマホ・タブレット表示
-----------------------------------------------------------------------*/
@media screen and (max-width:1070px){
}


/* タブレット表示
-----------------------------------------------------------------------*/
@media screen and (min-width:768px) and (max-width:1070px){
}

/* スマホ表示
-----------------------------------------------------------------------*/
@media screen and (max-width: 767px){

  #jp-cmp-line-header {
  /*  background-image: url(/web/src/s/line/img/main_bg.png), url(/web/src/s/line/img/main_bg.png);
    height: auto;
    background-position: 15% center, 85% center;
    background-size: auto 100%, auto 100%;*/
  }
  #jp-cmp-line-header h1 {
  /*  padding: 30px 0 0 0;*/
  }
  #jp-cmp-line-header h1 img{
  /*  width: 50%;
    max-width: 267px;*/
  }
  #jp-cmp-line-header .header-txt{
    padding: 15px 0 15px 0;
  }
  #jp-cmp-line-header .header-txt img{
    width: 80%;
    max-width: 422px;
  }
  #jp-cmp-line-header .header-balloon-1 {
    top: -5%;
    left: 50%;
    margin: 0 0 0 -48%;
    width: 23%;
    max-width: 162px;
    height: auto;
  }
  #jp-cmp-line-header .header-balloon-2 {
    top: 40%;
    left: 50%;
    margin: 0 0 0 30%;
    width: 20%;
    max-width: 139px;
  }


  #jp-cmp-line-outline {
    margin-bottom: 30px;
    padding-top:30px;
    background-position: center 90%;
    background-size: 100%;
  }
  #jp-cmp-line-outline h3{
    font-size: 14px;
  }
  #jp-cmp-line-outline p{
    font-size: 14px;
    margin: 0 10px;
  }
  #jp-cmp-line-outline p em:after{
    bottom: 0;
  }
  #jp-cmp-line-outline .jp-cmp-line-add {
    margin-top: 30px;
  }
  #jp-cmp-line-outline .jp-cmp-line-add ul > li {
    width: 70%;
    max-width: 484px;
    /*display: inline-block;*/
  }
  #jp-cmp-line-outline .jp-cmp-line-add ul > li h3 {
    margin-bottom: 10px;
    font-size: 16px;
  }
  #jp-cmp-line-outline .jp-cmp-line-add ul > li > div > a{
    max-width: 130px;
    height: auto;
  }
  #jp-cmp-line-outline .jp-cmp-line-add ul > li > div {
    margin-top: 10px;
  }

  .jp-cmp-line-howto{
    padding: 10px;
  }
  .jp-cmp-line-howto h2 {
    font-size: 22px;
  }
  .jp-cmp-line-howto header:before{ background-position: center right; }
  .jp-cmp-line-howto header:after{ background-position: center left; }
  .jp-cmp-line-howto ul {
    margin: 20px 10px;
  }
  .jp-cmp-line-howto ul > li {
    margin-bottom: 20px;
  }
  .jp-cmp-line-howto h3 {
    font-size: 20px;
  }
  .jp-cmp-line-howto .howto-txt {
    font-size: 14px;
  }
  .jp-cmp-line-howto .qr-line {
    float: none;
    margin: 10px auto;
  }
  .jp-cmp-line-howto ul > li ol {
    flex-wrap: wrap;
  }
  .jp-cmp-line-howto ul > li ol li {
    width: 46%;
    margin-right: 0;
    margin-bottom: 10%;
  }
  .jp-cmp-line-howto ul > li ol li:nth-of-type(2n) {
    margin-right: 0;
  }
  .jp-cmp-line-howto ul > li ol li:after {
    right: -16%;
  }
  .jp-cmp-line-howto ul > li ol li:nth-of-type(2n):after {
    transform: rotate(135deg);
    top: inherit;
    right: inherit;
    bottom: -13%;
    left: -15%;
  }

}






/*利用ステップ*/
.howto-step {
  display: flex;
  justify-content: center;

}

.howto-step li {
  list-style: none;
  margin: 20px;

}


.howto-step-text {
  margin-left: 200px;
  font-size: 25px;

}

.howto-step-text p {
  margin-top: 40px;
  font-weight: bold;

}

.howto-step-text .howto-step-line {
  border-bottom: 1px dashed gray;
  padding-bottom: 20px; /* 内容と線との間隔量 */
  width: 600px;
}

.howto-step-text p span {
  color: #2cbf13;
  font-weight: bold;
}

.howto-step-text img {
  position:relative;
  bottom: 5px;
  right: 10px;
}


.howto-step-text2{
  margin-top: 50px;
  text-align:center;
  font-size:25px;
  margin-bottom: 50px;  
}

.howto-step-text2 p {
  font-weight: bold;
}


.howto-step-text2 p span {
  background:linear-gradient(transparent 90%, #d70e18 0%);
  color: #d70e18;
  font-weight: bold;

}


/*おすすめ利用シーン*/

.jp-cmp-line-scene {
    display: flex;  
    margin: 30px;
    flex-direction: column;
}

.jp-cmp-line-scene-box {
    display: flex;
    align-items: center;
}

.jp-cmp-line-scene-box img {
    display: block;
    margin: 20px;    
}

.jp-cmp-line-scene-box .jp-cmp-line-scene-box2 p {
    font-size: 20px;
    margin-left: 20px;  
}

/*開発ストーリー*/


.jp-cmp-story-txt {
    display: flex;  
    margin: 30px;
    flex-direction: column;
}

.jp-cmp-story-txt{
  margin-top: 50px;
  text-align:center;
  font-size:25px;
  margin-bottom: 50px;  
}

.jp-cmp-story-txt p {
  font-weight: bold;
}

.jp-cmp-story-qa {
  display: flex;
  margin-left: 50px;
  align-items: flex-start;
}

.jp-cmp-story-qa2 {
  margin-left: 30px;
  font-size: 16px;
  font-weight: bold;
}

.jp-cmp-story-qa2 img{
  max-width: 100%;
  vertical-align: bottom;
  margin-bottom: 10px;
  margin-top: 10px;
}


.question {
  color: #2cbf13;
  font-weight: bold;
}

.anser {
  color: #d70e18;
  font-weight: bold;
}

.info {
  padding: 50px;
}

/* スマホ表示
-----------------------------------------------------------------------*/
@media screen and (max-width: 767px){

#jp-cmp-line-outline {
  padding-top: 0px;
}

#jp-cmp-line-outline .balloon5 {
  display: block;
}

#jp-cmp-line-outline .balloon5 .faceicon {
  text-align: center;
}

.says {
  margin: 5px 15px;
}

.says:after {
  content: "";
  display: inline-block;
  position: absolute;
  top: -23px;
  left: 155px;
  border: 12px solid transparent;
  border-bottom: 12px solid #2cbf13;
}


#jp-cmp-line-outline .jp-cmp-line-add ul{
  margin: 0;
  padding: 0;
}

.jp-cmp-line-scene {
    display: block;  
}

.jp-cmp-line-scene-box {
    display: block;
    align-items: center;
    text-align: center;
}


.jp-cmp-line-scene-box img {
  display: inline;
  margin: 10px 0px 0px 0px;

}

.jp-cmp-line-scene-box .jp-cmp-line-scene-box2 p {
 font-size: 14px;
 margin-right: 0px;
 margin-top: 10px;
}


.howto-step  {
  margin-left: 5px;
  margin-right: 5px;
}

.howto-step li {
  margin: 5px;
}


.howto-step-text {
  font-size: 20px;
  margin-left: 0; 
}

.howto-step-text .howto-step-line {
  width: auto;
}

.howto-step-text p {
  margin-right: 30px;
  margin-left: 30px;
}

.howto-step-text2 {
  font-size: 20px; 
  margin-left: 30px;
  margin-right: 30px;
}

.jp-cmp-story-txt {
  margin-top: 25px;
  font-size: 16px;
}

.jp-cmp-story-qa {
  display: block;
  text-align: center;
  margin-left: 0;
}

.jp-cmp-story-qa2 {
  margin: 0;
}

.jp-cmp-story-qa2 p{
  text-align: left;
  margin-left: 10px;
  margin-right: 10px;

}

.info {
  padding: 20px;
}

.jp-cmp-line-cmp h2 {
    font-size: 22px;
  }
  .jp-cmp-line-cmp header:before{ background-position: center right; }
  .jp-cmp-line-cmp header:after{ background-position: center left; }

}