@charset "UTF-8";
/* CSS Document */
body {
padding: 0;
margin: 0;
font-size: 16px;
font-family: 'Noto Sans JP', sans-serif;
font-weight: 500;
}
#wrapper {
background: rgb(255,201,48);
width: 100%;
max-width: 750px;
margin: 0 auto;
padding: 0 0 100px;
color: #59493f;
box-shadow: 0px 0px 16px 0px rgba(0,0,0,.6);
}
#wrapper h1 {
  margin: 0 auto;
  line-height: 0;
}
#wrapper h1 img {
  width: 100%;
}
.period {
  box-shadow: 0px 2px 2px 0px rgba(0,0,0,.2);
  text-align: center;
  color: #fff;
  font-weight:700;
  font-size: 150%;
  padding: 8px 0 12px;
  background: rgb(255,62,109);
}
section {
  width: 92%;
  border: 8px solid rgb(255,62,109);
  margin: 40px auto;
  padding: 36px 0 40px;
  background: #fff;
  border-radius: 16px;
  text-align: center;
  color: #61565A;
  line-height: 150%;
}

.attention {
	border: 8px solid rgb(38,164,255);
}

.attention ul {
	text-align: left;
    font-size: 90%;
	width: 86%;
	margin: 0 auto;
	padding-inline-start: 2em;
	list-style: disc;
}

.attention li {
	margin-top: 1em;
}

.bonusTable th{
font-weight: 500;
color: #fff;
background: #63575A;
text-align: center;
}

.bonusTable th,
.bonusTable td {
padding: 8px 1px;
font-size: 90%;
border-right: 1px solid #7c7c7c;
border-top: 1px solid #7c7c7c;
}

.bonusTable{
border-bottom: 1px solid #7c7c7c;
margin-bottom: 40px;
}

.bonusTable .bonusTable-th2 {
font-weight: 500;
background: #dbdbdb;
}

h2 {
  margin: 0 auto 24px;
  font-weight: 900;
  font-size: 150%;
}
h2::after {
  content: '';
  width: 96px;
  height: 2px;
  border-radius: 1px;
  display: block;
  margin: 12px auto 0;
  background: rgb(255,62,109);
}
h3 {
	background: #8DBD0D;
	color: #F7FF00;
	font-size: 110%;
	font-weight: 500;
	margin: 1em 0 0;
	padding:0.5em 0;
}

.red {
  color: rgb(255,125,144);
}
.pure-red {
 color: red;
}
.blue {
color: rgb(35,163,255);
}
.bold {
  font-weight: 900;
}
.number {
  font-weight: 900;
  font-size: 125%;
  color: rgb(255,94,94);
}
.big {
font-size: 140%;
}



footer {
  box-shadow: 0px -2px 2px 0px rgba(0,0,0,.2);
  text-align: center;
  padding: 10px 0 ;
  position: fixed;
  z-index: 100;
  bottom: 0;
  width: 100%;
  max-width: 750px;
  margin: 0 auto;
  background: rgba(255,233,42,.85);
}
footer a {
  display: block;
  width: 96%;
  margin: 0 auto;
  line-height: 1.1;
  text-decoration: none;
}

.anim-box {
    background:#00C04F;
    border-radius: 40px;
    width: 96%;
    padding: 10px;
    box-shadow: 0 2px 6px 0 #76611A;
    display: flex;
    align-items: center;
    justify-content: center;
	margin: 0 auto;
	animation: poyopoyo 2s ease-out infinite;
	opacity: 1;
}

@keyframes poyopoyo {
  0%, 40%, 60%, 80% {
    transform: scale(1.0);
  }
  50%, 70% {
    transform: scale(0.9);
  }
}


.anim-box p {
	font-size:126%;
	color: #fff;
	font-weight: 500;
	margin:0 0 0 10px;
	text-align: left;
}

.anim-box p span {
display: inline-block;
}



@media screen and (max-width: 750px) {
#wrapper {
max-width: inherit;
}

}

@media screen and (max-width: 500px) {
footer {
padding: 10px 0;
}

}


/* JS */
/* 下からふわっと現れる */

/* jQueryで追加、削除 */
.fadeUp {
  -webkit-animation-name: fadeUpAnime;
          animation-name: fadeUpAnime; /*アニメーションの名前*/
  -webkit-animation-duration: 1s;
          animation-duration: 1s; /*アニメーションの実行時間*/
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards; /*アニメーション後、要素が表示されたままにする*/
}
@-webkit-keyframes fadeUpAnime {
  0% {
    opacity: 0; /*非表示*/
    -webkit-transform: translateY(100px);
            transform: translateY(100px); /*縦方向に100pxずらす*/
  }
  100% {
    opacity: 1; /*表示*/
    -webkit-transform: translateY(0);
            transform: translateY(0); /*元の位置*/
  }
}
@keyframes fadeUpAnime {
  0% {
    opacity: 0; /*非表示*/
    -webkit-transform: translateY(100px);
            transform: translateY(100px); /*縦方向に100pxずらす*/
  }
  100% {
    opacity: 1; /*表示*/
    -webkit-transform: translateY(0);
            transform: translateY(0); /*元の位置*/
  }
}
.fadeUpTrigger {
  opacity: 0; /*非表示*/
}