@import url(https://fonts.googleapis.com/earlyaccess/notosansjp.css);

/*=============================
汎用設定
=============================*/
.pc_disp {
  display: none;
}
.sp_disp {
  display: block;
}

@media screen and (min-width: 768px) {
  .pc_disp {
    display: block;
  }
  .sp_disp {
    display: none;
  }
}
img{
  max-width: 100%;
  height: auto;
}
a:hover{
  opacity: 0.6;
}

/*=============================
当該LP専用設定
=============================*/

@media screen and (min-width: 768px) {
  nav.ContentNavi01 {
    position: relative;
    z-index: 2;
  }
}
/*  ▼背景固定時SPヘッダー対応▼ */
header.Header_Area.SP:after{
  display: block;
  content:'';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 46px;
  background: #3251BC;
  z-index: 1;
}
header.Header_Area.SP .Header_Inner{
  z-index: 2;
}
/*  ▲背景固定時SPヘッダー対応▲ */

body {
  font-family: 'Noto Sans JP', sans-serif;
  line-height: 1;
  overflow-x: clip;
  text-align: left;
}
body .Wrap {
  overflow: clip !important;
}

footer {
  position: relative;
  z-index: 1;
}

#PageTop {
  background: #fff;
}

/*=============================
コンテンツ本体
=============================*/
.MainColumn{
  position: relative;
  /* background-color: #000000; */
}
.kv_bg{
  position: fixed;
  display: block;
  width: 100%;
  height: 100vh;
  top:0;
  background-image: url(../img/bg_sp.jpg);
  background-size: cover;
   background-repeat: no-repeat;
  z-index: 0;
}
.kv{
  position: relative;
  z-index: 1;
}
.mainhead h2{
  width: 81.333vw; /* 305px */
  margin: 4.8vw auto 8vw; /* 18px, 30px */
}
.main{
  position: relative;
  z-index: 1;
}
/*--G1クライマックスとは--*/
.about{
  position: relative;
  padding:11.467vw 0 0.8vw; /* 43px, 3px */
  margin:0 2.667vw 3.2vw; /* 10px, 12px */
  background: linear-gradient(90deg, #8f1209 0%, #d90f16 50.74%, #f29301 100%);
}
.about h3{
  position: absolute;
  width: 47.2vw; /* 177px */
  left: 50%;
  top: -3.2vw; /* -12px */
  transform: translateX(-50%);
}
.about ul li{
  position: relative;
  padding: 1.867vw 5.333vw 2.933vw 11.2vw; /* 7px, 20px, 11px, 42px */
  margin: 0 2.667vw 2.667vw; /* 10px, 10px */
  color: #000000;
  font-size: 4.533vw; /* 18px */
  line-height: 1.25;
  font-weight: bold;
  text-align: center;
  background-color: #fff;
}
.about ul li span{
  color: #DE1716;
}
.about ul li:after{
  position: absolute;
  display: block;
  content:'';
  top: 0;
  left: 0;
  width: 16vw; /* 60px */
  height: 8vw; /* 30px */
  background-size: cover;
  z-index: 1;
}
.about ul li:nth-child(1):after{
  background-image: url(../img/no_01.png);
}
.about ul li:nth-child(2):after{
  background-image: url(../img/no_02.png);
}
.about ul li:nth-child(3):after{
  background-image: url(../img/no_03.png);
}
.about + p {
  font-size: 3.4666vw; /* 13px */
  color: #fff;
  font-weight: bold;
  text-align: left;
  line-height: 1.5;
  margin: 0 5.333vw 4.53vw;
}
.about + p a{
  color: #FF7272;
  text-decoration: underline !important;
}
.about + p + p.note {
  color: #fff;
  text-align: center;
  font-size: 4vw;
  line-height: 1.5;
  margin-bottom: 20.266vw;
}
.about + p + p.note span{
  color: #F28F02;
}

/*--チケット情報--*/
.ticket{
  position: relative;
  padding: 14.933vw 2.667vw 6.667vw; /* 56px, 10px, 25px */
  background-color: #fff;
}
.ticket:before{
  position: absolute;
  display: block;
  content: '';
  width: 0.727vw;
  height: 23.466vw;
  left: 50%;
  top: -12.533vw;
  transform: translateX(-50%);
  background: linear-gradient(#f29301 0%, #d90f16 100%);
}
.ticket h3{
  width: 88vw; /* 330px */
  margin:0 auto 3.467vw; /* 13px */
}
.ticket h3 + p{
  margin:0 2.66vw 2.933vw; /* 10px, 11px */
  font-size: 3.733vw; /* 14px */
  font-weight: bold;
  line-height: 1.4285714285714286;
}
.ticket h3 + p + p{
  margin:0 2.66vw 5.333vw; /* 10px, 20px */
  font-size: 3.2vw; /* 12px */
  font-weight: normal;
  line-height: 1.4285714285714286;
}
.ticket table{
  width: 100%;
  border-collapse: collapse;
}
.ticket thead tr th{
  color: #fff;
  font-size: 2.933vw; /* 11px */
  font-weight: bold;
  text-align: center;
  height: 6.4vw; /* 24px */
  vertical-align: middle;
  background-color: #000000;
}
.ticket tbody tr:nth-child(odd) {
    background-color: #F2F2F2;
}
.ticket tbody tr:nth-child(even) {
    background-color: #F0DECA;
}
.ticket tbody tr td{
  color: #000;
  font-size: 3.733vw; /* 14px */
  font-weight: bold;
  line-height: 1.428;
  padding:1.6vw 0; /* 6px */
}
.ticket tbody tr td:nth-child(1) {
    padding-left: 4.8vw; /* 18px */
}
.ticket tbody tr td:nth-child(2) {
    text-align: center;
    width: 17.067vw; /* 64px */
}
.ticket tbody tr td:nth-child(3) {
    padding-inline: 2.133vw; /* 8px */
}

/*--応募期間--*/
.apply{
  padding-top: 5.6vw; /* 21px */
  background-color: #000;
}
.apply h3{
  color: #fff;
  font-size: 4vw; /* 15px */
  font-weight: bold;
  text-align: center;
  margin-bottom: 1.6vw; /* 6px */
}
.apply h3 + p {
  color: #fff;
  font-weight: bold;
  font-size: 4.267vw; /* 16px */
  text-align: center;
  margin-bottom: 5.333vw; /* 20px */
}
.apply h3 + p span{
  font-size: 6.667vw; /* 25px */
}
.apply-button{
  display: block;
  width: 82.133vw; /* 308px */
  margin: 0 auto 10.133vw; /* 38px */
}
.not_sp{
  position: relative;
  font-size: 3.2vw;
  font-weight: bold;
  color: #fff;
  background-color: #DE1716;
  height: 4.533333333333333vw;
  width: 72.53333333333333vw;
  line-height: 3.533333vw;
  border-radius: 4.533333333333333vw;
  text-align: center;
  margin:0 auto 2.1333333333333333vw;
}
.not_sp:after{
  position: absolute;
  display: block;
  content:'';
  width: 0;
  height: 0;
  left: 50%;
  transform: translateX(-50%);
  border-style: solid;
  border-right: 2.4vw solid transparent;
  border-left: 2.4vw solid transparent;
  border-top: 2.933333333333333vw solid #de1716;
  border-bottom: 0;
}

/*--注意事項--*/
.campaign-notice{
  margin: 0 5.333vw; /* 20px */
  padding-bottom: 16vw; /* 60px */
  color: #fff;
  font-size: 3.2vw; /* 12px */
  line-height: 1.5;
}
.campaign-notice h3{
  font-weight: bold;
  font-size: 4vw; /* 15px */
  margin-bottom: 1.333vw; /* 5px */
  text-align: center;
}


/*----------------------------
PC対応
----------------------------*/
@media screen and (min-width: 768px) {
  body{
    background: url(../img/bg_pc.jpg) no-repeat center top;
    background-attachment: fixed;
    background-size: cover;
    background-position: center;
  }
  .MainColumn{
    width: 375px;
    /* background-color: #000; */
    margin-left: 10.834553440702782vw;
  }
  .kv_bg {
    position: fixed;
    top: 15.00732064421669vw;
    right: 3.733528550512445vw;
    width: 59.004vw;
    height: 36.969vw;
    background-image: url(../img/main_pc.png);
    background-size: contain;
    z-index: 0;
  }
  .mainhead h2{
    width: 305px;
    margin: 18px auto 30px;
  }
  /*--G1クライマックスとは--*/
  .about{
    padding:43px 0 3px;
    margin:0 10px 14px;
  }
  .about h3{
    width: 177px;
    top: -12px;
  }
  .about ul li{
    padding: 7px 20px 11px 42px;
    margin: 0 10px 10px;
    font-size: 17px;
    line-height: 1.25;
  }
  .about ul li:after{
    width: 60px;
    height: 30px;
  }
  .about + p {
    font-size: 13px;
    color: #fff;
    font-weight: bold;
    text-align: left;
    line-height: 1.5;
    margin: 0 20px 17px;
  }
  .about + p + p.note {
    font-size: 15px;
    margin-bottom: 76px;
  }

  /*--チケット情報--*/
  .ticket{
    padding: 56px 10px 25px;
  }
  .ticket:before{
    width: 2.727px; /* 0.727vw * 3.75 */
    height: 88px; /* 23.466vw * 3.75 */
    top: -47px; /* -12.533vw * 3.75 */
  }
  .ticket h3{
    width: 330px;
    margin:0 auto 13px;
  }
  .ticket h3 + p{
    margin:0 10px 15px;
    font-size: 14px;
  }
  .ticket h3 + p + p{
    margin:0 10px 20px; /* 10px, 20px */
    font-size: 12px; /* 12px */
    font-weight: normal;
    line-height: 1.4285714285714286;
  }
  .ticket table{
    width: 100%;
  }
  .ticket thead tr th{
    font-size: 11px;
    height: 24px;
  }

  .ticket tbody tr td{
    font-size: 14px;
    padding:6px 0;
  }
  .ticket tbody tr td:nth-child(1) {
      padding-left: 18px;
  }
  .ticket tbody tr td:nth-child(2) {
      text-align: center;
      width: 64px;
  }
  .ticket tbody tr td:nth-child(3) {
      padding-inline: 8px;
  }

  /*--応募期間--*/
  .apply{
    padding-top: 21px;
  }
  .apply h3{
    font-size: 15px;
    margin-bottom: 6px;
  }
  .apply h3 + p {
    font-size: 16px;
    margin-bottom: 20px;
  }
  .apply h3 + p span{
    font-size: 25px;
  }
  .apply-button{
    width: 308px;
    margin: 0 auto 38px;
  }
  .not_sp{
    font-size:12px;
    height: 17px;
    width: 272px;
    line-height: 14px;
    border-radius: 17px;
    margin:0 auto 12px;
  }
  .not_sp:after{
    border-right: 9px solid transparent;
    border-left: 9px solid transparent;
    border-top: 11px solid #de1716;
  }

  /*--注意事項--*/
  .campaign-notice{
    margin: 0 20px;
    padding-bottom: 60px;
    font-size: 12px;
  }
  .campaign-notice h3{
    font-size: 15px;
    margin-bottom: 5px;
  }

}