@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{
  position: relative;
  display: block;
  width: auto;
  height: 312px;
  margin: 0;
  padding: 0;
  background-image: url(/web/src/s/line/img/main_bg.png);
  background-position: top center;
  background-size: auto auto;
  background-repeat: no-repeat;
  background-color: #2cbf13;
}
#jp-cmp-line-header h1{
  display: block;
  margin: 0 auto;
  padding: 70px 0 0 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 210px 0 0;
}
#jp-cmp-line-header .header-balloon-2{
  position: absolute;
  top: 0;
  left: 50%;
  margin: 90px 0 0 240px;
}


#jp-cmp-line-outline{
  display: block;
  width: auto;
  margin: 0 0 60px 0;
  padding: 60px 0 0 0;
  text-align: center;
  background-image: url(/web/src/s/line/img/outline_bg.png);
  background-position: bottom top;
  background-size: auto auto;
  background-repeat: no-repeat;
}
#jp-cmp-line-outline p{
  margin: 0 22px;
  font-size: 24px;
  font-weight: bold;
  text-shadow: 1px 1px 0px #fff, -1px -1px 0px #fff;
}
#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: 30px 0 0 0;
  padding-bottom: 60px;
}
#jp-cmp-line-outline .jp-cmp-line-add ul{
  margin: 0;
  padding: 0;
}
#jp-cmp-line-outline .jp-cmp-line-add ul > li{
  width: 484px;
  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;
  width: 22%;
}
#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: 50%;
    right: -16%;
    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;
}


/* スマホ・タブレット表示
-----------------------------------------------------------------------*/
@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 {
    height: auto;
    background-image: url(/web/src/s/line/img/main_bg.png), url(/web/src/s/line/img/main_bg.png);
    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: 28%;
    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 top;
    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;
    padding-bottom:60px;
  }
  #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%;
  }

}