@charset "UTF-8";
/* CSS Document */


/* =========================
   Base Button
========================= */

.btn,
.btn_large,
.btn_ticket,
a.btn,
a.btn_large,
a.btn_ticket {
  font-weight: 700;
  line-height: 1.5;
  position: relative;
  display: inline-block;
  margin-top: 0.4rem;
  cursor: pointer;

  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;

  -webkit-transition: all 0.3s;
  transition: all 0.3s;

  text-align: center;
  vertical-align: middle;
  text-decoration: none;

  border-radius: 0.5rem;
}


/* =========================
   Normal Button
========================= */

.btn,
a.btn {
  font-size: 1.6rem;
  padding: 0.8rem 2.6rem 0.8rem 3.5rem;
  letter-spacing: 0.05em;
}

@media screen and (max-width:960px){
  .btn,
  a.btn{
    font-size:1.5rem;
  }
}


/* =========================
   Large Button
========================= */

.btn_large,
a.btn_large {
  font-size: 1.8rem;
  padding: 1.4rem 4rem;
  letter-spacing: 0.02em;
}

@media screen and (max-width:960px){
  .btn_large,
  a.btn_large{
    font-size:1.6rem;
    padding:1.4rem 2rem;
    letter-spacing:0;
  }
}


/* =========================
   Ticket Button
========================= */

.btn_ticket,
a.btn_ticket {
  font-size: 1.8rem;
  width: 300px;
  padding: 1.5rem 3rem;
  letter-spacing: 0.1em;
}

@media screen and (max-width:700px){
  .btn_ticket,
  a.btn_ticket{
    font-size:1.6rem;
    width:83%;
    padding:1.2rem 2rem;
    margin-bottom:1rem;
  }
}


/* =========================
   Slide Button Effect
========================= */

a.btn_slide{
  overflow:hidden;
  background:rgba(172,0,41,0.70);

  box-shadow:
    0 2px 6px rgba(0,0,0,0.45),
    inset 0 1px 0 rgba(255,255,255,0.15);
}

a.btn_slide span{
  position:relative;
  color:#FFFFFF;
}

a.btn_slide:hover span{
  color:#FFFCDE;
  text-shadow:
    1px 1px 2px #000,
    0 0 6px rgba(255,230,120,0.8),
    0 0 12px rgba(255,180,0,0.6);
}

a.btn_slide:before{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  content:"";

  -webkit-transition:all .3s ease-in-out;
  transition:all .3s ease-in-out;

  -webkit-transform:translateX(-96%);
  transform:translateX(-96%);

  /* ★3色グラデーション */
  background:linear-gradient(
    to right,
    rgba(255,235,99,0.90),
    rgba(255,165,0,0.85),
    rgba(255,80,0,0.75)
  );
}

a.btn_slide:hover:before{
  -webkit-transform:translateX(0%);
  transform:translateX(0%);
}