@charset "UTF-8";

/* ======================
reset css
========================*/
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html {
  font-size: 62.5%;
  line-height: 1.7;
}
body{
  margin: 0 auto;
  padding: 0;
  font-family: "Noto Sans JP", "ヒラギノ角ゴ ProN W3", "Lucida Grande", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, Verdana, "ＭＳ Ｐゴシック", sans-serif;
  font-weight: 600;
  background-color: #29062c;
  overflow-x: hidden;
}
@media screen and (min-width:960px) {
  body{
    background-color: #29062c;
  }
}
/* h1, h2, h3, h4, h5, h6 {
  font-family: 'Baloo 2', cursive;
} */
img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
}
li {
  list-style: none;
}
a {
  display: block;
  color: #333;
  text-decoration: none;
  transition: .3s;
}
a:hover{
  opacity: .8;
  transition: .3s;
}
p {
  font-size: 1.4rem;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
td,
th {
  padding: 0;
  margin: 0;
}
.sp_only {
  display: block;
}
.pc_only {
  display: none;
}
@media screen and (min-width: 600px) {
  .sp_only {
    display: none;
  }
  .pc_only {
    display: block;
  }
}

/* ==========================
Reset and base styles
========================== */
.global-header {
  display: none;
}
.global-contents__inner {
  width: 100% !important;
  padding: 0 !important
}
#tblLayout {
  width: 100% !important;
}
table {
  border-collapse: collapse;
  margin: 0;
  padding: 0;
}
td, th {
  padding: 0;
  margin: 0;
}
main + div {
  display: none;
}

/* ==========================
halloween
========================== */
.halloween {
  width: 100%;
  box-sizing: border-box;
  background: linear-gradient(176deg, #29062c 10%, #eb321a 90%);
}
.halloween .container {
  max-width: 600px;
  margin: 0 auto;
  padding: 0 0 44px;
}

/* ==========================
topbox
========================== */
.topbox {
  background-color: #7117a5;
  position: fixed;
  z-index: 9999;
  padding: 10px;
  width: 100%;
  left: 0;
}
.topbox a {
  color: #fff;
  font-weight: 500;
  text-align: center;
  display: inline-block;
  font-size: 1.2rem;
  transition: .2s;
  text-decoration: underline;
}
.topbox p {
  color: #fff;
  font-weight: 500;
  text-align: center;
  display: block;
  font-size: 1.2rem;
  transition: .2s;
  margin: 0;
}
@media screen and (min-width: 960px) {
  .topbox a {
    color: #fff;
    font-weight: 500;
    text-align: center;
    display: inline-block;
    font-size: 1.6rem;
    transition: .2s;
  }
  .topbox p {
    color: #fff;
    font-weight: 500;
    text-align: center;
    display: block;
    font-size: 1.6rem;
    transition: .2s;
    margin: 0;
  }
}

/* ==========================
section
========================== */
.section1 {
  padding: 20px 0 0;
}

/* ==========================
copy
========================== */
.copy_box {
  position: relative;
}
.copy_alert {
  display: none; 
  position: absolute;
  top: -20px;
  right: 91px;
  color: #fff;
  transform: rotate(19deg);
}
.cbtn {
  text-align: center;
  display: block;
  margin: 0 auto;
  background-color: #ff4e00;
  color: #fff;
  border: none;
  padding: 15px 31px;
  border-radius: 100px;
  font-weight: 500;
  position: relative;
  font-weight: 600;
}
@media screen and (min-width:960px) {
  .copy_alert {
    right: 186px;
  }
}

/* ==========================
js-copytext
========================== */
#js-copytext_1,#js-copytext_2,#js-copytext_3 {
  display: none;
}
#js-copytext{
  display: none;
}

/* ==========================
button
========================== */
.button {
  display: block;
  text-align: center;
  margin: 60px auto 0;
  width: 80%;
  background-color: #000;
  text-decoration: none;
  color: #fff;
  font-weight: 600;
  padding: 19px 25px;
  border-radius: 100px;
  font-size: 1.4rem;
}
@media screen and (min-width:960px) {
  .button {
    font-size: 1.6rem;
    margin: 10% auto 0;
  }
  .button {
    width: 60%;
  }
}

/* ==========================
attnlist
========================== */
.attnlist {
  margin-top: 60px;
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 0 28px;
  word-wrap: break-word;
  color: #ffffff;
}
.attnlist span {
  text-align: center;
  display: block;
  margin-bottom: 10px;
  font-size: 1.4rem;
}
.attnlist li {
  font-size: 1.2rem;
}
@media screen and (min-width:960px) {
  .attnlist span {
    font-size: 1.6rem;
  }
  .attnlist li {
    font-size: 1.2rem;
  }
}
