@charset "UTF-8";
/* CSS Document */
/*--------------------------------------------
header
--------------------------------------------*/
#visual {
    width: 100%;
    min-width: 1120px;
    overflow: hidden;
	}
#visual-image {
    position: relative;
    left: 50%;
    margin-left: -720px;
	}  
  .mainvisual img{
    width: 100%;
  }
header p.catch {
    width: 88%;
    margin: 12px auto;
    text-align: justify;
    font-size: 1.4rem;
}
/*--------------------------------------------
content
--------------------------------------------*/
.subscription-ticket.content p {
    font-size: 1.4rem;
    text-align: justify;
}
.maincontent {
  width: 88%;
}

.fs-midashi1 {
  font-size: 2.6rem;
}
.fs-midashi2 {
  font-size: 2.2rem;
}
.fs-midashi3 {
  font-size: 2.0rem;
}
.fs-midashi4 {
  font-size: 1.8rem;
}
header h1.catch{
  line-height: 1.4;
  margin-bottom: 4.4rem;
}
header h1.catch span{
  display: inline;
}
.point .content-one{
  margin-bottom: 3.2rem;
}
.point .content-one:last-child{
}
  .point div:nth-child(even) .txt {
    order: 1;
  }
  .point div:nth-child(even) .img {
    order: 2;
    padding-left:0px;
    padding-right: 0px;
  }
  .point .content-one .txt{
    width: 100%;
  }
  .point .content-one .img{
    width: 100%;
    padding-left:0px;
  }
    .point .content-one .txt h2{
      font-size: 2.6rem;
    }
      .point .fukidashi {
      }
  .ticketinapp {
    padding-top: 3.6rem;
    padding-bottom: 2.0rem;
  }
  @keyframes bggradient{
    0% {
      background-position: 0% 50%;
    }
    50% {
      background-position: 100% 50%;
    }
    100% {
      background-position: 0% 50%;
    }
  }
  .ticketinapp h2 {
    width: 88%;
    margin: 0px auto;
  }
    .ticketinapp .box {
      width: 88%;
    }
      .ticketinapp .box p {
        font-size: 1.8rem;
      }
      
  .interlude{
    width: 88%;
    margin: 4.0rem auto;
    margin-bottom: calc(6.0rem - 88px);
  }
    .interlude-inner {
      width: 100%;
      position: relative;
    }
      .interlude-left {
        width: 100%;
      }
      .interlude-right {
        width: 100%;
      }
      .interlude .icon{ 
        width: 88px;
        position: relative;
        left: 50%;
        top: -460px;
        transform: translateX(-50%);
      }
   
  .ticket_merit{
    margin-bottom:-70%;
  }
  .ticket_merit .header {
    margin-bottom: 2.0rem;
  }
  .ticket_merit .header h2{
    width: 88%;
    font-size: 2.6rem;
    }
  .ticket_merit .header  h2  span{
      font-size: 3.0rem;
      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{
      text-align: center;
      font-weight: 700;
      width: 88%;
      margin: 0px auto;
      font-size: 1.6rem;
    }
    .ticket_merit .header h2 span{
      font-size: 3.8rem;
      }
    .ticket_merit .maincontent {
      position: relative;
    }
    .ticket_merit .maincontent .box {
      margin-bottom: 60px;
    }
      .ticket_merit .maincontent .box h3{
        text-align: center;
        margin-bottom: 2.0rem;
        font-size: 2.4rem;
      }
        .ticket_merit .maincontent .box .fukidashi {
          width: 100%;
          height: 54px;
          font-size: 1.8rem;
          margin-bottom: 2.2rem;
          border: 3px solid var(--color08);
        }
          .ticket_merit .maincontent .box .fukidashi:before {
         }
        .ticket_merit .maincontent .box .img {
          width: 100%;
          margin: 0px auto 0rem;
          }
          .ticket_merit .maincontent .box p{
            text-align: left;
          }
          .ticket_merit .maincontent .box:nth-child(3) .img{
            width: 100%;
            margin-bottom: 1.0rem;
          }

      .dots-circle01{
        top: -1000px;
      }
      .dots-circle02{
        top: -800px;
      }

.businesstype{
  padding-top: 2.0rem;
  padding-bottom: 2.0rem;
  background-size: 2%;
}
  .businesstype h2 {
    text-align: center;
    color: var(--color08);
    margin-bottom: 2.0rem;
    font-size: 2.8rem;
  }
  .businesstype ul {
    justify-content: space-around;
  }
  .businesstype ul li {
    width: 48%;
    margin-bottom: 1.0rem;
  }

  .demerittomerit{
    padding-top: 4.0rem;
    padding-bottom: 4.0rem;
    margin-bottom: 4.0rem;
  }
    .demerittomerit .maincontet {
      align-items: center;
    }
    .demerittomerit .head {
      width: 100%;
      padding-left: 0px;
    }
      .demerittomerit .head h2{
        writing-mode: horizontal-tb;
        font-size: 3.2rem;
        line-height: 1.4;
        font-weight: 900;
        color: var(--color02);
      }
      .demerittomerit .head h2 span.fs-demerit{
        color: rgba(0,0,0,0);
        display: inline-block;
        -webkit-text-stroke: 1px var(--color08);
        text-stroke: 1px var(--color08)
      }
    .demerittomerit .box-content {
      width: 100%;
    }
    .demerittomerit .box-content .box{
    }
    .demerittomerit .box-content .box:first-child{
    }
    .demerittomerit .box-content .box .img{
      width: 78%;
      margin: 1.0rem auto 0px;
    }
    .demerittomerit .box-content .box .txt{
      width: 100%;
      padding-right: 0px;
    }
      .demerittomerit .box-content .box .txt .fukidashi{
        margin: 1.0rem auto;
      }
      .demerittomerit .box-content .box .txt .demerit {
        font-size: 2.4rem;
        font-weight: 700;
        color: var(--color08);
        text-align: center;
      }
      .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: center center;
        width: 38px;
        height: 70px;
        display: block;
        margin: 0px auto;
      }
          .demerittomerit .box-content .box .txt h3 {
            font-size: 2.6rem;
            font-weight: 700;
            line-height: 1.4;
            margin-bottom: 1.0rem;
            color: var(--color08);
          } 
          .ticket-contact{
            width: 88%;
            margin: 3.0rem auto 4.0rem;
            text-align: center;
          }
            .ticket-contact p{
              font-size: 1.8rem;
              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: 100%;
              border-radius: 36px;
              margin: 2.0rem auto;
              font-size: 2.2rem;
              box-shadow: 2px 2px 4px #ccc;
            }
                   

  
  .ticket_app {
  background: linear-gradient( to right,#fccb98, #9ad6c8);
  padding-top: 40px;
  padding-bottom: 40px;
  margin-bottom: 60px;
  }
  .ticket_app h2 {
    font-size: 2.8rem;
    width: 88%;
    margin: 0px auto 12px;
  }
    .ticket_app .box {
      width: 88%;
    }
      .ticket_app .box p {
        font-size: 1.8rem;
        line-height: 1.4;
      }
  .ticket_tickettype{
    margin-bottom: 0rem;
  }
  .ticket_tickettype .box:first-child{
    margin-bottom: 80px;
  }
    .ticket_tickettype .box .ticket_about h3 {
      border: 3px solid var(--color08);
      height: 48px;
      width: 100%;
      font-size: 2.0rem
    }
      .ticket_tickettype .box:nth-child(1) .ticket_about  h3 {
      }
      .ticket_tickettype .box:nth-child(2) .ticket_about  h3 {
      }
    .ticket_tickettype .ticket_about .box_img {
      width: 88%;
      margin: 0px auto;
    }
  .ticket_tickettype .ticket_merit .fukidashi {
    position: relative;
    display: block;
    padding: 10px 10px;
    width: 100%;
    font-size: 1.8rem;
    border: 3px solid #111;
  }
  .ticket_tickettype .box:nth-child(1) .use_ticket_merit .fukidashi {
    width: 100%;
    font-size: 2.0rem;
    box-sizing: border-box;
  }
  .ticket_tickettype .box:nth-child(2) .use_ticket_merit .fukidashi {
    width: 100%;
    font-size: 2.0rem;
  }
    .ticket_tickettype .ticket_merit .fukidashi:before {
      content: "";
      position: absolute;
      top: 100%;
      left: 50%;
      margin-left: -12px;
      border: 12px solid transparent;
      border-top: 12px solid #111;
    }
    .ticket_tickettype .use_ticket_merit .flex-content {
      align-items: center;
      flex-direction: column;
    }
    .ticket_tickettype .use_ticket_merit .flex-content  img{
      width: 38%;
      margin-bottom: 1.2rem;
      }
      .ticket_tickettype .use_ticket_merit  .ticket_merit_box {
        width: 100%;
        margin: 0px auto  20px;
      }
      .ticket_tickettype .use_ticket_merit  .ticket_merit_box_txt  {
        width: 100%;
      }
      .ticket_tickettype .use_ticket_merit  .ticket_merit_box_txt p{
        font-size: 1.8rem;
        font-weight: 600;
        line-height: 1.4;
        margin-bottom: 10px;
        padding-left: 2.8rem;
        text-indent: -2.8rem;
      }
.ticket_example{
}  

.ticket_example h2 {
  width: 60%;
  margin: 0px auto 2.4rem;
  position: relative;
  top: 3.8rem;
}
.ticket_example .bookofticket { 
  background:repeating-linear-gradient(
    -45deg,
    #fbb264,
    #fbb264 1px,
    #fff 0,
    #fff 10px
    );
    padding-top: 30px;
    padding-bottom: 30px;
}
.ticket_example .monthlyticket { 
  background:repeating-linear-gradient(
    -45deg,
    #67c2ad,
    #67c2ad 1px,
    #fff 0,
    #fff 10px
    );
    padding-top: 30px;
    padding-bottom: 30px;
}
  .ticket_example .maincontent {
    background-color: #fff;
    border-radius: 24px;
    box-sizing: border-box;
    padding: 2.0rem 2.0rem;
  }
    .ticket_example  .header{
      margin-bottom: 30px;
    }
    .ticket_example .header h3{
      border: 3px solid #111;
      height: 48px;
      width: 88%;
      border-radius: 24px;
      font-size: 2.0rem
      }
      .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: 100%;
       margin-bottom: 60px;
     }
     .ticket_example .step {
        margin-bottom: 64px;
     }
     .ticket_example .step:last-child{
        margin-bottom: 0px;
     }
     .ticket_example .step h4{
       font-size: 2.0rem;
       position: relative;
       vertical-align: middle;
       margin-bottom: 32px;
       text-align: center;
       }
     .ticket_example .step h4:before{
       content: "";
       width: 108px;
       height: 42px;
       background-repeat: no-repeat;
       background-size: 108px 32px;
       background-position: top left;
       padding-left: 0px;
       position: relative;
       vertical-align: middle;
       display: block;
       margin: 0px auto;
      }
      .ticket_example .bookofticket .maincontent .ticket_example_inner .step:nth-child(1) h4::before{
      }
      .ticket_example .bookofticket .maincontent .ticket_example_inner .step:nth-child(2) h4::before{
      }
      .ticket_example .bookofticket .maincontent .ticket_example_inner .step:nth-child(3) h4::before{
      }
      .ticket_example .monthlyticket .maincontent .ticket_example_inner .step:nth-child(1) h4::before{
      }
      .ticket_example .monthlyticket .maincontent .ticket_example_inner .step:nth-child(2) h4::before{
      }
      .ticket_example .monthlyticket .maincontent .ticket_example_inner .step:nth-child(3) h4::before{
      }
      .ticket_example .step .step_img{
            width: 100%;
            margin: 0px auto 20px;
        }
  .recomend_reason{
    background: linear-gradient( to right,#f9bcde, #c1bce2);
    padding-top: 3.0rem;
    padding-bottom: 2.4rem;
  }
    .recomend_reason h4 {
      font-size: 2.8rem;
      margin-bottom: 24px;
      line-height: 1.2;
    }
      .recomend_reason h4 span {
        color: rgba(0,0,0,0);
        -webkit-text-stroke: 1px #29486d;
        text-stroke: 1px #29486d;
      }
      .recomend_reason p {  
      }
      .recomend_reason ul{
          margin-left: 0%;
      }
      .recomend_reason ul li{
        font-size: 2.0rem;
        line-height: 1.4;
        color: #29486d;
        margin-bottom: 1.0rem;        
        padding-left: 2.0rem;
        text-indent: -2.0rem;
        text-align: justify;
      }
      .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: 1.6rem 1.2rem;
          width:1.6rem;
          height: 16px;
          padding-left: 2.0rem;
      }
    .message{
      padding-top: 2.0rem;
    }
      .message p {
          color: #FFF;
          font-size: 1.8rem;
          font-weight: 700;
          line-height: 1.4;
          text-align: center;
      }
      p.attention {
      font-size: 1.2rem;
      line-height: 1.4;
      }
        
/*--------------------------------------------
function
--------------------------------------------*/
.flex-content.function_column {
  margin: 30px auto 40px;
  width: 95%;
}
.function_column .flex-content {
  align-self: center;
  width: 48%;
  margin-bottom: 10px;
}
.function_column .flex-content dt {
  width: 30%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center; 
}
.function_column .flex-content dt img {
  max-width: 100%;
}
.function_column .flex-content dd {
  font-size: 76%;
  font-weight: bold;
  width: 66%;
  line-height: 1.6;
  padding-top: 5px;
}
.function_column .flex-content.triple dd{
}
.function_column .flex-content dd.single {
  padding-top: 0;
}
  
/*--------------------------------------------
bmappeal
--------------------------------------------*/
.bmappeal {
  width: 100%;
  margin: 60px auto 0px;
  display: block;
}
.bmappeal_inner {
  width: 88%;
  margin: 0px auto;
}
.bmappeal h3{
  font-size: 2.0rem;
  margin-bottom: 40px;
  padding-left: 5%;
  padding-right: 5%;
}
.bmappeal_one{
  width: 100%;
  margin-bottom: 20px;
}
  .bmappeal_one_img {
  }
  .bmappeal_one_title {
    
  }
  .bmappeal_one p {
    }



/*--------------------------------------------
overview
--------------------------------------------*/
.overview {
  width: 100%;
  margin: 60px auto 0px;
}


/* annimation  */
/* demerittomerit */
.anmin .bg-wrap,
.anmin .bg-wrap .inn2,
.anmin .bg-wrap .inn3 {
}
  .anmin .bg-wrap {
  }
  .anmin .bg-wrap .inn2 {
    opacity: 1;
    transform: matrix(1, 0, 0, 1, 1000, 0);
    transition: 1.2s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .anmin .bg-wrap .inn3 {
    opacity: 1;
    transform: matrix(1, 0, 0, 1, 1000, 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);
  }