@charset "UTF-8";
/* CSS Document */
body {
  font-family: 'Noto Sans JP', YuGothicM, "ヒラギノ角ゴ ProN W3", "Lucida Grande", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, Verdana, "ＭＳ Ｐゴシック", sans-serif;
}
:root {
  --color01 :#ff4b36;
  --color02 :#5186EC;
  --color03 :#35ae92;
  --color04 :#f6d019;
  --color05 :#847ac6;
  --color06 :#f47abe;
  --color07 :#fa9831;
  --color08 :#29486d;
  --color09 :#111111;
  --color10 :#6B5744;
  --color11 :#17B4CC;
}
.bg_dot05 {
  background-image: url(/lib/images/lp/subscription/ticket/dot05.png);
  background-repeat: repeat;
  background-size: 0.3%;
}
img {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
}
.marker {
  background: linear-gradient(transparent 75%, #f6d019 75%);
}
.center, .image_center {
  text-align: center;
}
.sans {
  font-family: "Source Sans Pro";
}
.red {
  color:var(--color01);
}
.blue {
  color:var(--color02);
}
.green {
  color:var(--color03);
}
.font_en {
  font-family: 'Source Sans Pro', sans-serif;
}

  .fs-midashi1 {
    font-size: 3.8rem;
    line-height: 1.4;
    font-weight: 900;
  }
  .fs-midashi2 {
    font-size: 3.6rem;
    line-height: 1.4;
    font-weight: 900;
  }
  .fs-midashi3 {
    font-size: 3.2rem;
    line-height: 1.4;
    font-weight: 700;
  }
  .fs-midashi4 {
    font-size: 2.8rem;
    line-height: 1.4;
    font-weight: 700;
  }
/*--------------------------------------------
common
--------------------------------------------*/
.flex-content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

/*--------------------------------------------
header
--------------------------------------------*/
#visual {
  width: 100%;
  min-width: 1120px;
  overflow: hidden;
}
#visual-image {
  /*
  position: relative;
  left: 50%;
  margin-left: -720px;
  */
}
header h1.catch{
  width: 88%;
  margin: 4.0rem auto 8.8rem;
  text-align: center;
  line-height: 1.6;
}
header h1.catch span{
  line-height: 1.6;
}
/*--------------------------------------------
content
--------------------------------------------*/
.maincontent {
  width: 960px;
  margin: 0px auto
}
.fullcontent {
  width: 100%;
  margin: 0px auto;
}
.maincontent p,.fullcontent p{
  line-height: 1.8;
  font-size: 1.8rem;
}
.point .content-one{
  align-items: center;
  margin-bottom: 4.0rem;
}
.point .content-one:last-child{
  margin-bottom: 8.0rem;
}
  .point div:nth-child(even) .txt {
    order: 2;
  }
  .point div:nth-child(even) .img {
    order: 1;
    padding-left:0px;
    padding-right: 24px;
  }
  .point .content-one .txt{
    width: 466px;
  }
  .point .content-one .img{
    width: 466px;
  }
    .point .content-one .txt h2{
      color: var(--color08);
    }
      .point .fukidashi {
        background-color: var(--color08);
        width: 124px;
        height: 38px;
        margin-bottom: 1.0rem;
        border-radius: 19px;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.8rem;
        font-weight: 700;
        color: #FFF;
      }
  .ticketinapp {
    background: linear-gradient( to right,#fccb98, #9ad6c8);
    padding-top: 7.4rem;
    padding-bottom: 6.0rem;
    background-size: 140% 140%;
    animation: bggradient 6s ease infinite;
  }
  @keyframes bggradient{
    0% {
      background-position: 0% 50%;
    }
    50% {
      background-position: 100% 50%;
    }
    100% {
      background-position: 0% 50%;
    }
  }
  .ticketinapp h2 {
    text-align: center;
    color: #FFF;
    text-shadow: 1px 1px 2px var(--color08);
  }
    .ticketinapp .box {
      width: 600px;
      margin: 0px auto;
    }
      .ticketinapp .box p {
        color: #FFF;
        font-size: 1.8rem;
        line-height: 1.4;
        font-weight: 500;
        text-align: center;
      }
      
  .interlude{
    width: 1024px;
    margin: 6.0rem auto;
    margin-bottom: calc(6.0rem - 88px);
    overflow: hidden;
  }
    .interlude-inner {
      width: 1024px;
      position: relative;
    }
      .interlude-left {
        width: 512px;
      }
      .interlude-right {
        width: 512px;
      }
      .interlude .icon{ 
        width: 88px;
        position: relative;
        left: 50%;
        top: -180px;
        transform: translateX(-50%);
      }
   
  .ticket_merit{
    overflow: hidden;
    margin-bottom: -70%
  }
  .ticket_merit .header {
    background: linear-gradient( to right,#f9bcde, #c1bce2);
    padding-top: 2.0rem;
    padding-bottom: 2.4rem;
    margin-bottom: 6.0rem;
  }
  .ticket_merit .header  h2{
    width: 1024px;
    margin: 0px auto;
    text-align: center;
    color: #29486d;
    font-size: 3.8rem;
    line-height: 1.4;
    font-weight: 900;
    }
  .ticket_merit .header  h2  span{
      font-size: 5.2rem;
      font-family: "Zen Kaku Gothic New", sans-serif;
      font-weight: 900;
      color: rgba(0,0,0,0);
      display: inline-block;
      -webkit-text-stroke: 2px #29486d; 
      text-stroke: 2px #29486d;
      text-shadow: #fff 2px 2px 0px;
      line-height: 1.0;
    }
    .ticket_merit .header p{
      font-size: 1.8rem;
      text-align: center;
      font-weight: 700;
    }
    .ticket_merit .maincontent {
      position: relative;
    }
    .ticket_merit .maincontent .box {
      margin-bottom: 12.0rem;
    }
     .ticket_merit .maincontent .box:nth-child(3) .img {
      width: 480px;
     }
      .ticket_merit .maincontent .box h3{
        text-align: center;
        margin-bottom: 2.0rem;
        display: block;
      }
        .ticket_merit .maincontent .box .fukidashi {
          width: 400px;
          height: 72px;
          border: 4px solid var(--color08);
          border-radius: 9999px;
          text-align: center;
          color: var(--color08);
          margin:0px auto;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 2.2rem;
          font-weight: 700;
          position: relative;
          background-color: #FFF;
          margin-bottom: 3.2rem;
        }
          .ticket_merit .maincontent .box .fukidashi:before {
            content: "";
            z-index: -1;
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            background: linear-gradient(-45deg, #c1bce2 0%, #f9bcde 100% );
            transform: translate3d(10px, 10px, 0) scale(1);
            border-radius: inherit;
         }
        .ticket_merit .maincontent .box .img {
          width: 720px;
          margin: 4.8rem auto 7.2rem;
          }
          .ticket_merit .maincontent .box p{
            text-align: center;
          }
      .dots-circle01{
        position: relative;
        z-index: -9999;
        top: -1600px;
        left: 5%;
        width: 40%;
        -ms-filter: blur(1px);
        filter: blur(1px);
      }
      .dots-circle02{
        position: relative;
        z-index: -9998;
        top: -1200px;
        left: 60%;
        width: 30%;
        -ms-filter: blur(3px);
        filter: blur(3px);
      }
.businesstype{
  padding-top: 4.8rem;
  padding-bottom: 6.0rem;
}
  .businesstype h2 {
    text-align: center;
    color: var(--color08);
    margin-bottom: 2.0rem;
  }
  .businesstype ul {
    justify-content: space-between;
  }
  .businesstype ul li {
    width: 18%;
  }
.demerittomerit{
  background-color: #f8f8f8;
  width: 100%;
  padding-top: 8.0rem;
  padding-bottom: 4.0rem;
  margin-bottom: 4.0rem;
}
  .demerittomerit .maincontet {
    align-items: center;
  }
  .demerittomerit .head {
    width: 250px;
    padding-left: 20px;
  }
    .demerittomerit .head h2{
      writing-mode: vertical-rl;
      font-size: 6.4rem;
      line-height: 1.4;
      font-weight: 900;
      color: var(--color02);
    }
    .demerittomerit .head h2 span.fs-demerit{
      font-family: "Zen Kaku Gothic New", sans-serif;
      font-weight: 900;
      color: rgba(0,0,0,0);
      display: inline-block;
      -webkit-text-stroke: 3px var(--color08);
      text-stroke: 3px var(--color08)
    }
  .demerittomerit .box-content {
    width: 690px;
  }
  .demerittomerit .box-content .box{
    margin-top: 2.0rem;
    margin-bottom: 2.0rem;
  }
  .demerittomerit .box-content .box:first-child{
    margin-bottom: 6.0rem;
  }
  .demerittomerit .box-content .box .img{
    width: 276px;
    margin-top: 6.0rem;
  }
  .demerittomerit .box-content .box .txt{
    width: 382px;
    padding-right: 32px;
  }
    .demerittomerit .box-content .box .txt .fukidashi{
      width: 100px;
      height: 24px;
      border-radius: 9999px;
      background-color: #FFF;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--color08);
      border:2px solid var(--color08);
      font-size: 1.4rem;
      box-shadow: 4px 4px #ccc;
      margin-bottom: 1.2rem;
      font-weight: 500;
    }
    .demerittomerit .box-content .box .txt .demerit {
      font-size: 2.4rem;
      font-weight: 700;
      line-height: 1.4;
      color: var(--color08);
    }
    .demerittomerit .box-content .box .txt .demerit::after {
      content: "";
      background-image: url(/lib/images/lp/subscription/ticket/demrittomerit-arr.svg);
      background-repeat: no-repeat;
      background-size: contain;
      background-position: 0px 14px;
      width: 38px;
      height: 70px;
      display: block;
    }
        .demerittomerit .box-content .box .txt h3 {
          font-size: 3.2rem;
          font-weight: 700;
          line-height: 1.4;
          margin-bottom: 1.0rem;
          color: var(--color08);
        }
.ticket-contact{
  width: 960px;
  margin: 4.0rem auto 4.0rem;
  text-align: center;
}
  .ticket-contact p{
    font-size: 2.0rem;
    line-height: 1.4;
    margin-bottom: 4.0rem;
  }
  .ticket-contact a {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color01);
    color: #FFF;
    font-weight: 700;
    height: 72px;
    width: 720px;
    border-radius: 36px;
    margin: 2.0rem auto;
    font-size: 3.2rem;
    box-shadow: 2px 2px 4px #ccc;
  }
/* annimation  */
/* header */
.anmin .bg-wrap,
.anmin .bg-wrap .inn {
  display: block;
}
  .anmin .bg-wrap {
    overflow: hidden;
    opacity: 0;
  }
  .anmin .bg-wrap .inn {
    opacity: 0;
    transform: matrix(1, 0, 0, 1, 0, 100);
    transition: 1.2s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .anmin.is-animated .bg-wrap {
    opacity: 1;
  }
  .anmin.is-animated .bg-wrap .inn {
    opacity: 1;
    transform: matrix(1, 0, 0, 1, 0, 0);
  }
/* point */
.mask-bg {
  color: transparent;
  display: inline-block;
  overflow: hidden;
  position: relative;
  transition: color 0ms 450ms;
}
.mask-bg::after {
  background: linear-gradient(to right, #f9bcde 0%,#c1bce2 100%);
  bottom: 0;
  content: '';
  display: block;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  transform: translate(0, 110%);
}
.mask-bg.is-animated {
  color: var(--color08);
}
.mask-bg.is-animated::after {
  animation: mask-bg 1.2s cubic-bezier(0.8, 0, 0.170, 1);
}
@keyframes mask-bg {
  0% {
    transform: translate(0, 101%)
  }
  40%, 60% {
    transform: translate(0, 0%)
  }
  100% {
    transform: translate(0, -100%)
  }
}
/* point fukidashi */
.poyopoyo {
  animation: poyopoyo 2s ease-out infinite;
}
@keyframes poyopoyo {
  0%, 40%, 60%, 80% {
    transform: scale(1.0);
  }
  50%, 70% {
    transform: scale(0.90);
  }
}
/* ticketinapp */
.ticketinapp.is-animated .fs-midashi1{
  opacity:1;
  animation: 0.6s linear 0s fadeUpAnime;
  }
  .ticketinapp.is-animated .box{
    animation: 0.6s linear 0s fadeUpAnime;
    opacity:1;
    }
  
  @keyframes fadeUpAnime{
    from {
    opacity: 0;
    transform: translateY(100px);
    }
    to {
    opacity: 1;
    transform: translateY(0);
    }
  }
/* inter lude */
.interlude .interlude-left{
  opacity: 0;
  transition: all 0.8s ease-out;
  transform: translateX(-100%);
}
.interlude .interlude-left.is-animated{
  opacity: 1;
  transform: translateX(0);
}
.interlude .interlude-right{
  opacity: 0;
  transition: all 0.8s ease-out;
  transform: translateX(100%);
}
.interlude .interlude-right.is-animated{
  opacity: 1;
  transform: translateX(0);
}
.interlude .icon {
  opacity: 0;
  transition: all 0.8s ease-out;
}
.interlude .icon.is-animated {
  opacity: 1;
}
/* ticket_merit */
.ticket_merit p{
  opacity: 0;
  transition: all 0.6s ease-out;
  transform: translateY(90px);
}
.ticket_merit p.is-animated{
  opacity: 1;
  transform: translateY(0);
}
.ticket_merit h2 {
  opacity: 0;
  transition: all 0.6s ease-out;
  transform: translateY(90px);
}
.ticket_merit h2.is-animated {
  opacity: 1;
  transform: translateY(0);
}
.ticket_merit .box .fukidashi-wrap{
  opacity: 0;
}
.ticket_merit .box .fukidashi-wrap.is-animated {
  animation-name: fadeUpAnime;
  animation-duration:0.6s;
  animation-fill-mode:ease-out;
  opacity:1;
  }
  @keyframes fadeUpAnime{
    0% {
    opacity: 0;
    transform: scale(0.6);
    }
    90% {
    transform: scale(1.2);
    }
    100% {
    opacity: 1;
    transform: scale(1);
    }
  }

/* point */
.mask-bg2 {
  color: transparent;
  display: inline-block;
  overflow: hidden;
  position: relative;
  transition: color 0ms 450ms;
}
.mask-bg2::after {
  background: linear-gradient(to right, #f9bcde 0%,#c1bce2 100%);
  bottom: 0;
  content: '';
  display: block;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  transform: translate(0, 110%);
}
.mask-bg2.is-animated {
  color: var(--color08);
}
.mask-bg2.is-animated::after {
  animation: mask-bg2 1.0s cubic-bezier(0.8, 0, 0.170, 1);
}
@keyframes mask-bg2 {
  0% {
    transform: translate(0, 100%)
  }
  40%, 60% {
    transform: translate(0, 0)
  }
  100% {
    transform: translate(0, -100%)
  }
}
/* bg circle */
.fuwafuwa {
  animation: 6s fuwafuwa infinite;
}
@keyframes fuwafuwa {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-100px);
  }
}

/* bussinestype */
.businesstype ul li{
  opacity:0;
}
.businesstype ul li.is-animated{
  animation-name:fadeUpAnime3;
  animation-duration:0.8s;
  animation-fill-mode:forwards;
  opacity:0;
  }
    @keyframes fadeUpAnime3{
      from {
      opacity: 0;
      transform: translateY(100px);
      }
      to {
      opacity: 1;
      transform: translateY(0);
      }
  }
.delay1{
  animation-delay: 0.1s;
}
.delay2{
  animation-delay: 0.3s;
}
.delay3{
  animation-delay: 0.2s;
}
.delay4{
  animation-delay: 0.4s;
}

/* demerittomerit */
.anmin .bg-wrap,
.anmin .bg-wrap .inn2,
.anmin .bg-wrap .inn3 {
  display: block;
}
  .anmin .bg-wrap {
    overflow: hidden;
    opacity: 1;
  }
  .anmin .bg-wrap .inn2 {
    opacity: 1;
    transform: matrix(1, 0, 0, 1, 100, 0);
    transition: 1.2s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .anmin .bg-wrap .inn3 {
    opacity: 1;
    transform: matrix(1, 0, 0, 1, 100, 0);
    transition: 1.2s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .anmin.is-animated .bg-wrap {
    opacity: 1;
  }
  .anmin.is-animated .bg-wrap .inn2 {
    opacity: 1;
    transform: matrix(1, 0, 0, 1, 0, 0);
    transition-delay: 0.4s;
  }
  .anmin.is-animated .bg-wrap .inn3 {
    opacity: 1;
    transform: matrix(1, 0, 0, 1, 0, 0);
  }
  .btn-fuwafuwa {
    animation: 6s btn-fuwafuwa infinite;
  }
    @keyframes btn-fuwafuwa {
      0%, 100% {
        transform: translateY(0);
      }
      50% {
        transform: translateY(-40px);
      }
    }
.tickettype_wrapper {
  width: 100%;
  padding-top: 44px;
  padding-bottom: 120px;
}
.tickettype_wrapper.kaisu {
  background-color: #fef5ea;
}
.tickettype_wrapper.getsugaku {
  background-color: #ebf7f4;
}
  .ticket_tickettype{
    margin-bottom: 0rem;
    text-align: center;
  }
    .ticket_tickettype .box .ticket_about h3 {
      border: 4px solid var(--color08);
      color: var(--color08);
      height: 80px;
      width: 240px;
      border-radius: 9999px;
      margin: 0px auto;
      text-align: center;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 2.8rem;
    }
      .ticket_tickettype.kaisu .box .ticket_about h3 {
          background-color: #FBB264;
      }
      .ticket_tickettype.getsugaku .box .ticket_about h3 {
          background-color: #67c2ad;
      }
    .ticket_tickettype .ticket_about .box_img {
      width: 540px;
      margin: 0px auto;
    }
  .ticket_tickettype .use_ticket_merit .fukidashi {
    position: relative;
    display: block;
    padding: 1.4rem 1.0rem;
    width: 420px;
    font-size: 2.8rem;
    border: 4px solid var(--color08);
    color: var(--color08);
    margin: 40px auto 20px;
    text-align:center;
  }
  .ticket_tickettype.kaisu .box .use_ticket_merit .fukidashi {
    background-color: #FBB264;
  }
  .ticket_tickettype.getsugaku .box .use_ticket_merit .fukidashi {
          background-color: #67c2ad;
  }
    .ticket_tickettype .use_ticket_merit .fukidashi:before {
      content: "";
      position: absolute;
      top: 100%;
      left: 50%;
      margin-left: -15px;
      border: 15px solid transparent;
      border-top: 15px solid var(--color08);
    }
    .ticket_tickettype .use_ticket_merit .flex-content {
      align-items: center;
    }
    .ticket_tickettype .use_ticket_merit .flex-content  img{
      width: 150px;
      }
      .ticket_tickettype .use_ticket_merit  .ticket_merit_box {
        width: 620px;
        margin: 0px auto  2.0rem;
      }
      .ticket_tickettype .use_ticket_merit  .ticket_merit_box_txt  {
        width: 370px;
      }
      .ticket_tickettype .use_ticket_merit  .ticket_merit_box_txt p{
        font-size: 2.2rem;
        font-weight: 600;
        line-height: 1.8;
        margin-bottom: 10px;
        padding-left: 2.8rem;
        text-indent: -2.8rem;
        text-align: left;
      }
      .ticket_tickettype .use_ticket_merit  .ticket_merit_box_txt  p::before{
          content: "";
          position: relative;
          width: 28px;
          height: 24px;
          background-position: top center;
          background-repeat: no-repeat;
          display: inline-block;
          margin: 0px auto;
          background-size: 17px;
          vertical-align: middle;
      }
      .ticket_tickettype .use_ticket_merit .bookofticket_customer .ticket_merit_box_txt  p::before{
          background-image: url(/lib/images/lp/subscription/ticket/icon_meritlist01.svg);
      }
      .ticket_tickettype .use_ticket_merit .bookofticket_salon .ticket_merit_box_txt  p::before{
          background-image: url(/lib/images/lp/subscription/ticket/icon_meritlist02.svg);
      }
      .ticket_tickettype .use_ticket_merit .monthlyticket_customer .ticket_merit_box_txt  p::before{
          background-image: url(/lib/images/lp/subscription/ticket/icon_meritlist03.svg);
      }
      .ticket_tickettype .use_ticket_merit .monthlyticket_salon .ticket_merit_box_txt  p::before{
          background-image: url(/lib/images/lp/subscription/ticket/icon_meritlist04.svg);
      }
.ticket_example{
  margin-top: -180px;
}
.ticket_example h2 {
  width: 420px;
  margin: 0px auto 2.4rem;
  position: relative;
  top: 5.4rem;
}
.ticket_example .bookofticket { 
  background:repeating-linear-gradient(
    -45deg,
    #fbb264,
    #fbb264 1px,
    #fff 0,
    #fff 10px
    );
    padding-top: 6.0rem;
    padding-bottom: 6.0rem;
}
.ticket_example .monthlyticket { 
  background:repeating-linear-gradient(
    -45deg,
    #67c2ad,
    #67c2ad 1px,
    #fff 0,
    #fff 10px
    );
    padding-top: 6.0rem;
    padding-bottom: 6.0rem;
}
  .ticket_example .maincontent {
    background-color: #fff;
    border-radius: 24px;
    box-sizing: border-box;
    padding: 5.2rem 9.2rem;
    border: 4px solid var(--color08);
  }
    .ticket_example  .header{
      margin-bottom: 4.0rem;
    }
    .ticket_example .header h3{
      border: 4px solid #111;
      height: 80px;
      width: 640px;
      border-radius: 40px;
      margin: 0px auto;
      text-align: center;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 3.2rem;
      }
      .ticket_example .bookofticket .header h3 {
        background: linear-gradient( to right,#f79bce, #fccb98);      
      }
      .ticket_example .monthlyticket .header h3 {
        background: linear-gradient( to right,#c1bce2, #9ad6c8); 
      }
     .ticket_example .example_visual {
        width: 600px;
        margin: 0px auto 6.0rem;
     }
     .ticket_example .step {
        margin-bottom: 6.4rem;
     }
     .ticket_example .step:last-child{
        margin-bottom: 0px;
     }
     .ticket_example .step h4{
       font-size: 3.2rem;
       position: relative;
       vertical-align: middle;
       margin-bottom: 32px;
       color: var(--color08);
       }
     .ticket_example .step h4:before{
       content: "";
       width: 120px;
       height: 52px;
       background-repeat: no-repeat;
       background-size: 108px 42px;
       background-position: top left;
       padding-left: 12.0rem;
       position: relative;
       vertical-align: middle;
      }
      .ticket_example .bookofticket .maincontent .ticket_example_inner .step:nth-child(1) h4::before{
        background-image: url("/lib/images/lp/subscription/ticket/bookofticket_icon_step1.svg");
      }
      .ticket_example .bookofticket .maincontent .ticket_example_inner .step:nth-child(2) h4::before{
        background-image: url("/lib/images/lp/subscription/ticket/bookofticket_icon_step2.svg");
      }
      .ticket_example .bookofticket .maincontent .ticket_example_inner .step:nth-child(3) h4::before{
        background-image: url("/lib/images/lp/subscription/ticket/bookofticket_icon_step3.svg");
      }
      .ticket_example .monthlyticket .maincontent .ticket_example_inner .step:nth-child(1) h4::before{
        background-image: url("/lib/images/lp/subscription/ticket/monthlyticket_icon_step1.svg");
      }
      .ticket_example .monthlyticket .maincontent .ticket_example_inner .step:nth-child(2) h4::before{
        background-image: url("/lib/images/lp/subscription/ticket/monthlyticket_icon_step2.svg");
      }
      .ticket_example .monthlyticket .maincontent .ticket_example_inner .step:nth-child(3) h4::before{
        background-image: url("/lib/images/lp/subscription/ticket/monthlyticket_icon_step3.svg");
      }
      .ticket_example .step .step_img{
          width: 420px;
          margin: 0px auto 2.0rem;
        }
        .ticket_example_inner p{
          text-align:center;
        }
  .recomend_reason{
    background: linear-gradient( to right,#f9bcde, #c1bce2);
    padding-top: 6.0rem;
    padding-bottom: 2.4rem;
  }
    .recomend_reason h4 {
      font-size: 4.2rem;
      color: #29486d;
      font-weight: 900;
      text-align:center;
      margin-bottom: 24px;;
    }
      .recomend_reason h4 span {
        color: rgba(0,0,0,0);
        -webkit-text-stroke: 2px #29486d;
        text-stroke: 2px #29486d;
      }
      .recomend_reason p {  
        color: #fff;
        margin-bottom: 24px;
      }
      .recomend_reason ul{
          margin-left: 10%;
      }
      .recomend_reason ul li{
        font-size: 3.2rem;
        line-height: 1.8;
        position: relative;
        font-weight: 700;
        color: #29486d;
      }
      .recomend_reason ul li:before{
          position: relative;
          content: "";
          background-image:url("/lib/images/lp/subscription/ticket/recomend_icon_arr.svg");
          background-repeat: no-repeat;
          background-position: center left;
          vertical-align: middle;
          background-size: 32px 16px;
          width:32px;
          height: 16px;
          padding-left: 42px;
      }
    .message{
      background-color: #29486d;
      padding-top: 32px;
      padding-bottom: 24px;
    }
      .message p {
          color: #FFF;
          font-size: 2.8rem;
          font-weight: 700;
          text-align: center;
      }
      p.attention {
      font-size: 1.4rem;
      line-height: 1.4;
      }

/*--------------------------------------------
function
--------------------------------------------*/
.flex-content.function_column {
  margin: 60px auto;
  width: 980px;
}
.function_column .flex-content {
  align-self: center;
  width: 33%;
  margin-bottom: 30px;
}
.function_column .flex-content dt {
  width: 30%;
}
.function_column .flex-content dt img {
  max-width: 100px;
}
.function_column .flex-content dd {
  font-size: 1.25em;
  font-weight: bold;
  width: 65%;
  line-height: 1.6;
  padding-top: 15px;
}
  
/*--------------------------------------------
bmappeal
--------------------------------------------*/
.bmappeal {
  width: 100%;
  margin: 20px auto 0px;
}
.bmappeal h3{
  margin-bottom: 20px;
  text-align: center;
  font-size: 3.2rem;
  line-height: 1.4;
  background-color: #5186ec;
  color: #FFF;
  padding-top: 10px;
  padding-bottom: 10px;
}
.bmappeal_inner {
  width: 1024px;
  margin: 0px auto;
}
.bmappeal_one{
  width: 32%;
  border: 3px solid #5186ec;
  border-radius: 20px;
  box-sizing: border-box;
  padding: 14px 10px;
}
  .bmappeal_one_img {
    width: 100%;
    margin: 0px auto;
  }
  .bmappeal_one_title {
    font-size: 2.0rem;
    font-weight: bold;
    text-align: center; 
    line-height: 1.4;
    height: 64px;
    
  }
  .bmappeal_one p {
    margin-top: 20px;
    line-height: 1.4;
    font-size: 1.4rem;
    text-align: center;
    margin-top: 10px;
    }