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

/*------------------------------------base*/
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  font-family: YuGothic, "Yu Gothic", sans-serif;
  font-size: 14px;
  -webkit-text-size-adjust: none;
  line-height: 1.2;
  background: linear-gradient(90deg, rgba(0,15,209,0.1) 20%, rgba(255,255,255,1) 45%, rgba(255,255,255,1) 55%, rgba(255,31,59,0.1) 80%);
}

#wrapper {
  max-width: 780px;
  width: 100%;
  margin: 0 auto;
}

a:hover {
  cursor:pointer;
  opacity: 0.8;
}

area{
  border:none;
  outline:none;
}
area:hover {
  cursor:pointer;
}

h2 {
  margin-bottom: 4%;
}

h2 img {
  width: 35%;
}

.w75 {
  width: 75%;
  margin: 0 auto;
}
.w80 {
  width: 82%;
  margin: 0 auto;
}
.w85 {
  width: 85%;
  margin: 0 auto;
}

.w100 {
  width: 100%;
}

/* .topBack {
  position: fixed;
  bottom: 8.5%;
  right: 2%;
  width: 8%;
  user-select: none;
  z-index: 100;
}

.topBack img {
  width:100%;
}

.topBack a:hover {
  opacity: 1;
} */

/* トップ
================================================== */
#headWrap {
  position: relative;
}

#header {
  height: 6%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

#logo {
  position: absolute;
  width: 10%;
  top: 40%;
  left: 9%;
}

.logo02 {
  position: absolute;
  width: 32%;
  top: 55%;
  left: 21%;
}

.twBtn {
  position: absolute;
  width: 10%;
  top: 36%;
  left: 55%;
}

.fbBtn {
  position: absolute;
  width: 10%;
  top: 35.5%;
  left: 55.2%;
}

.twBtn img, .fbBtn img {
  width: 40%;
}

.image_area {
  text-align: center;
}

.image_area img {
  width: 100%;
}

/* キャンペーンについて
================================================== */
#about {
  text-align: center;
  padding: 3.5% 0;
  background: linear-gradient(325deg, rgba(230,166,51,1) 10%, rgba(255,230,204,1) 50%, rgba(230,166,51,1) 90%);
}

.entry_btn_area1 {
  text-align: center;
  margin-bottom: 4%;
}

.release-about {
  text-align: center;
}

#about .about-txt {
  width: 75%;
  margin-bottom: 4%;
}

#about .entry_btn_area1 img, .entry_btn_area2 img, #about .release-about img {
  width: 60%;
}

/* 賞品
================================================== */
#bg-both {
  position: relative;
  background: linear-gradient(90deg, rgba(0,15,209,0.5) 20%, rgba(255,255,255,0.5) 45%, rgba(255,255,255,0.5) 55%, rgba(255,31,59,0.5) 80%);
}
#bg-both::before {
  content:"";
  position: absolute;
  top: 0;
  left: 0;
  background: url(../images/bg-left.png) repeat-y;
  background-size: 100%;
  width: 7vw;
  height: 100%;
}
#bg-both::after {
  content:"";
  position: absolute;
  top: 0;
  right: 0;
  background: url(../images/bg-right.png) repeat-y;
  background-size: 100%;
  width: 7vw;
  height: 100%;
}

@media screen and (min-width: 780px) {
  #bg-both::before, #bg-both::after {
    width: 7%;
  }
}

#prize, #entry, #club {
  position: relative;
  text-align: center;
  padding-top: 8%;
}

#prize::before {
  content:"";
  position: absolute;
  display: block;
  top: 0;
  right: 0;
  width: 100%;
  height: 477px;
  background: url(../images/bg01.png) no-repeat;
  background-size: contain;
  z-index: -1;
}

#prize img {
  max-width: 100%;
}

.prizeContents {
  background: rgba(255,255,255,0.5);
}

.prize-item {
  position: relative;
  text-align: left;
  padding: 5% 0 3%;
}
.prize-item img:first-child {
  width: 100%;
}
.prize-item img:nth-child(2) {
  width: 100%;
  margin-top: 1%;
}
.prize-a03 {
  position: absolute;
  width: 22%;
  top: -3%;
  right: -2.5%;
  z-index: 10;
}
.prize-b03 {
  position: absolute;
  width: 27%;
  top: 2%;
  right: 3%;
  z-index: 10;
}

.fadein {
  transition: 1s;
}

/* エントリー方法
================================================== */
#entry::before {
  content:"";
  position: absolute;
  display: block;
  top: -2%;
  right: 0;
  width: 100%;
  height: 437px;
  background: url(../images/bg02.png) no-repeat;
  background-size: contain;
  z-index: -1;
}

.entryContents {
  background: rgba(255,255,255,0.5);
}
.entryContents img {
  width: 100%;
}

/* Club JRA-net
================================================== */
#club::before {
  content:"";
  position: absolute;
  display: block;
  top: -16%;
  right: 0;
  width: 100%;
  height: 800px;
  background: url(../images/bg03.png) no-repeat;
  background-size: contain;
  z-index: -1;
}

.clubContents {
  background: rgba(255,255,255,0.5);
}
.clubContents img {
  width: 100%;
}

.bg04 {
  position: absolute;
  bottom: -30%;
  right: 0;
  width: 100%;
  z-index: -1;
}

/* Q&A
================================================== */
#qa {
  position: relative;
  padding-top: 8%;
}

#qa h2 {
  text-align: center;
}

#qa .questionContents {
  background: rgba(255,255,255,0.5);
  padding: 6% 4% 1%;
}
#qa dl {
  padding-bottom: 9%;
}

#qa dt {
  position: relative;
}

#qa .q_icon {
  position: absolute;
  bottom: 0;
  left: 0;
  background: #000;
  padding: 1rem;
}

#qa .q_icon img {
  width: 3.5rem;
}

#qa .q_text {
  width: 100%;
  font-family: '游明朝','Yu Mincho',YuMincho,'Hiragino Mincho Pro',serif;
  font-size: 2.5rem;
  font-weight: bold;
  line-height: 1.3;
  letter-spacing: -0.5px;
  padding: 0 0 0.6rem 13%;
  border-bottom: 3px solid #000;
}
#qa .q_text:hover {
  user-select: none;
  cursor: pointer;
}

#qa .a_text {
  width: 98%;
  font-family: '游明朝','Yu Mincho',YuMincho,'Hiragino Mincho Pro',serif;
  font-size: 2rem;
  padding: 0 0 0 13%;
  line-height: 1.7;
}

#qa dd {
  margin-top: 1.5rem;
}

#qa dd p {
  margin-bottom: 4%;
  font-weight: bolder;
}
#qa dd p.qa-prize_a, #qa dd p.qa-prize_b {
  position: relative;
  padding-left: 3em;
  text-indent: -3em;
  line-height: 1.6;
}
#qa dd p.qa-prize_a::after {
  content: '30名様';
  position: absolute;
  right: 7%;
  bottom: 0;
}
#qa dd p.qa-prize_b {
  padding-bottom: 1.6em;
}
#qa dd p.qa-prize_b::after {
  content: '11,470名様';
  position: absolute;
  right: 7%;
  bottom: 0;
}


#qa dd p:last-child {
  margin-bottom: 0;
}
#qa dd a {
  font-size: 2.1rem;
  color: rgba(255,31,59,1);
}

.mailFlow {
  /* width:101%; */
  width: 115%;
  margin-left: calc(((80vw - 100%) / 2) * -1);
}

/* footer
================================================== */
.entry_btn_area2 {
  text-align: center;
  margin: 6% 0;
}

#footerCopy {
  position:relative;
  font-family: Helvetica;
  text-align: center;
}

.footer-period {
  margin-bottom: 4%;
  background: linear-gradient(325deg, rgba(230,166,51,1) 10%, rgba(255,230,204,1) 50%, rgba(230,166,51,1) 90%);
  position: relative;
  z-index: 1;
}
.footer-period img {
  width: 76%;
  padding: 4% 0;
}

.footer-annot {
  width: 72%;
}

.topBack {
  margin: 5% auto 0;
}

.topBack img {
  width: 9%;
}

.topBack a:hover {
  opacity: 1;
}

.footerCopyright {
  display: flex;
  justify-content: space-between;
  width: 82%;
  margin: 0 auto;
  padding: 3% 0;
}

.footerCopyright div:nth-child(2) {
  padding-top: 1.5%;
  font-size: 1.8vw;
}

.footerLogo img {
  width: 100%;
  padding-right: 30%;
}

.bg05 {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 100%;
  z-index: -1;
}