@charset "UTF-8";

.c-alertBlock-01 { line-height: 1.5; }

#jbk-frame-main { margin: 0; padding: 15px 0; }

#jbk-frame-main .frame-content { padding: 0; }

img { width: 100%; height: auto; }

a { position: relative; z-index: 2; }

@media all and (min-width: 768px) { a :hover { opacity: .8; } }

.pc-view { display: none; }

@media all and (min-width: 768px) { .pc-view { display: block; } }

.sp-view { display: block; }

@media all and (min-width: 768px) { .sp-view { display: none; } }

.c-noteList-03 li { padding-left: 20px; }

.c-noteList-03 li::before { background-size: contain; }

/* layout
================================*/
.content-all { width: 100%; }

/* header
================================*/
.l-head { min-width: 0; background: #fff; }

.l-head .l-inner { padding: 2.5vw 2.34%; width: 100%; text-align: left; box-sizing: border-box; }

.l-head .l-inner .header-title { display: inline-block; }

.l-head img { width: 28vw; height: auto; }

.l-head a { display: block; margin: 0; }

@media all and (min-width: 768px) { .l-head { line-height: 1; min-width: 1200px; margin: 0 auto; }
  .l-head .l-inner { padding: 20px 30px; width: 1200px; margin: 0 auto; }
  .l-head img { width: 100%; height: auto; }
  .l-head a { display: inline-block; margin-right: 20px; } }

/* main
================================*/
.l-main { width: 100%; background: #fff; overflow: hidden; padding-bottom: 14.5vw; }

@media all and (min-width: 768px) { .l-main { min-width: 1200px; max-width: 1920px; margin: 0 auto; padding-bottom: 75px; } }

.wrap-inner { position: relative; }

@media all and (min-width: 768px) { .wrap-inner { width: 1200px; margin: 0 auto; } }

.hdg-lvl-1 { position: relative; padding: 2.5% 10.25% 1%; z-index: 2; }

@media all and (min-width: 768px) { .hdg-lvl-1 { width: 573px; padding: 20px 0 35px; margin: 0 auto; z-index: 3; } }

.wrap-sec-1 { overflow: hidden; position: relative; background: url("../image/bg_top_sp.jpg"); background-repeat: no-repeat; background-size: 300vw auto; background-position: -100vw 0px; }

.wrap-sec-1 .wrap-inner { z-index: 2; }

@media all and (min-width: 768px) { .wrap-sec-1 { overflow: visible; background: url("../image/bg_top_pc.jpg"); background-repeat: no-repeat; background-size: 1920px auto; background-position: center; } }

.wrap-time { background: #aacd06; position: relative; z-index: 1; }

.wrap-time .wrap-inner { padding: 3.1vw 3.75%; }

@media all and (min-width: 768px) { .wrap-time .wrap-inner { padding: 24px 0 28px; }
  .wrap-time .wrap-inner .txt-time { width: 826px; margin: 0 auto; } }

.wrap-intro { position: relative; overflow: hidden; background: url("../image/bg_intro.png"), linear-gradient(to right, #0082E3 0%, #00005A 100%); background-repeat: no-repeat; background-size: 80vw auto, 100%; background-position: -37vw -40.5vw,center; }

.wrap-intro .wrap-inner { padding: 7vw 0 0; margin-bottom: 44.54vw; }

@media all and (min-width: 768px) { .wrap-intro { background-size: 1344px auto, 100%; background-position: calc(32px + ((100% - 1200px)/2)) -672px, center; }
  .wrap-intro .wrap-inner { padding: 75px 0 300px; margin-bottom: 0; text-align: right; } }

.wrap-about { position: relative; overflow: visible; margin-top: -37.5vw; }

.wrap-about::before { content: ''; position: absolute; top: 0; left: 0; width: 132%; height: 100%; margin: 11% -16% 0; background: url("../image/bg_about.png"), linear-gradient(to right, #416ADE 0%, #31A6EB 100%); background-repeat: no-repeat; background-size: 218vw auto,100%; background-position: -47vw -40vw,center; -webkit-transform: rotate(10.6deg); transform: rotate(10.6deg); }

.wrap-about .wrap-inner { padding: 22.625vw 26.8% 25.625vw 4%; }

@media all and (min-width: 768px) { .wrap-about { margin-top: -405px; }
  .wrap-about::before { background: url("../image/bg_about.png"), linear-gradient(to right, #416ADE 0%, #28C0EF 100%); background-repeat: no-repeat; background-size: 2086px auto,100%; background-position: calc(448px + ((100% - 1200px)/2)) -459px, center; margin: 230px -10% 0; }
  .wrap-about .wrap-inner { padding: 235px 0 250px; } }

.wrap-entry { position: relative; overflow: hidden; margin-top: -21vw; }

.wrap-entry::before { content: ''; position: absolute; top: 0; left: 0; width: 120%; height: 100%; margin: 11% -8% 0; background: url("../image/bg_entry.png"), #C4C7CF; background-repeat: no-repeat; background-size: cover,100%; background-position: bottom; -webkit-transform: rotate(-11deg); transform: rotate(-11deg); }

.wrap-entry .wrap-inner { padding: 28.5vw 19.5% 32vw; }

@media all and (min-width: 768px) { .wrap-entry { margin-top: -430px; }
  .wrap-entry::before { margin: 225px -10% 0; }
  .wrap-entry .wrap-inner { padding: 355px 0 380px; } }

.wrap-entry.wrap-entry-2 { margin-top: -21.5vw; }

.wrap-entry.wrap-entry-2::before { background: url("../image/bg_entry_2.png"), url("../image/bg_entry.png"), #C4C7CF; background-repeat: no-repeat; background-size: 300vw auto,cover,100%; background-position: center,bottom,center; width: 125%; margin: 11% -8% 0; }

.wrap-entry.wrap-entry-2 .wrap-inner { padding: 30vw 19.5% 32vw; }

@media all and (min-width: 768px) { .wrap-entry.wrap-entry-2 { margin-top: -425px; }
  .wrap-entry.wrap-entry-2::before { background-size: 3030px auto,cover,100%; width: 120%; margin: 225px -10% 0; }
  .wrap-entry.wrap-entry-2 .wrap-inner { padding: 325px 0 385px; } }

.wrap-sec-overview { position: relative; overflow: visible; margin-top: -20.5vw; }

.wrap-sec-overview::before { content: ''; position: absolute; top: 0; left: 0; width: 148%; height: 100%; margin: 12% -26% 0; background: url("../image/bg_overview.png"), linear-gradient(to right, #343395 0%, #00005A 100%); background-repeat: no-repeat; background-size: 137vw auto, 100%; background-position: -227px -133px, center; -webkit-transform: rotate(10.6deg); transform: rotate(10.6deg); }

.wrap-sec-overview .wrap-inner { padding: 27.5vw 5.5%; }

.wrap-sec-overview .wrap-inner .txt-head { padding: 0 23%; position: relative; z-index: 1; }

@media all and (min-width: 768px) { .wrap-sec-overview { margin-top: -395px; }
  .wrap-sec-overview:before { background-size: 1364px auto, 100%; background-position: calc(-100px + ((100% - 1200px)/2)) -433px, center; width: 120%; margin: 205px -12% 0; }
  .wrap-sec-overview .wrap-inner { padding: 305px 0 310px; }
  .wrap-sec-overview .wrap-inner .txt-head { width: 306px; padding: 0; margin: 0 auto; } }

.wrap-sec-enter { position: relative; overflow: visible; margin-top: -23vw; }

.wrap-sec-enter .wrap-inner { padding: 27.5vw 0 30vw; }

.wrap-sec-enter .wrap-inner .txt-head { padding: 0 25.625%; }

.wrap-sec-enter::before { content: ''; position: absolute; top: 0; left: 0; width: 160%; margin: 10% -20% 0; height: 100%; background: url("../image/bg_enter.png"), linear-gradient(to right, #28C0EF 0%, #416ADE 100%); background-repeat: no-repeat; background-size: 420vw auto, 100%; background-position: -96vw -139vw, center; -webkit-transform: rotate(-11deg); transform: rotate(-11deg); }

@media all and (min-width: 768px) { .wrap-sec-enter { margin-top: -405px; }
  .wrap-sec-enter::before { background-size: 3642px auto, 100%; background-position: calc(1080px + ((100% - 1200px)/2)) -1050px, center; margin: 205px -6% 0; width: 120%; }
  .wrap-sec-enter .wrap-inner { padding: 317px 0 330px; }
  .wrap-sec-enter .wrap-inner .txt-head { width: 306px; padding: 0; margin: 0 auto; } }

.wrap-sec-how-entry { position: relative; overflow: visible; margin-top: -19.5vw; }

.wrap-sec-how-entry .wrap-inner { padding: 28vw 0 26.5vw; }

.wrap-sec-how-entry .wrap-inner .txt-head { padding: 0 26.5625%; position: relative; z-index: 1; }

.wrap-sec-how-entry::before { content: ''; position: absolute; top: 0; left: 0; width: 140%; margin: 10% -25% 0; height: 100%; background: url("../image/bg_howto.png"), linear-gradient(to right, #0082e3 0%, #00005a 100%); background-repeat: no-repeat; background-size: 220vw, 100%; background-position: -87vw -48vw, center; -webkit-transform: rotate(10.6deg); transform: rotate(10.6deg); }

@media all and (min-width: 768px) { .wrap-sec-how-entry { margin-top: -390px; }
  .wrap-sec-how-entry::before { background-size: 1925px, 100%; background-position: calc(110px + ((100% - 1200px)/2)) -463px, center; width: 120%; margin: 205px -12% 0; }
  .wrap-sec-how-entry .wrap-inner { padding: 300px 0 350px; }
  .wrap-sec-how-entry .wrap-inner .txt-head { width: 306px; padding: 0; margin: 0 auto; } }

.wrap-open-acc { position: relative; overflow: hidden; margin-top: -20vw; }

.wrap-open-acc .wrap-inner { padding: 33vw 4.5% 0; }

.wrap-open-acc::before { content: ''; position: absolute; top: 0; left: 0; width: 120%; height: 100%; margin: 10% -12% 0; background: #fff; -webkit-transform: rotate(10.6deg); transform: rotate(10.6deg); }

@media all and (min-width: 768px) { .wrap-open-acc { margin-top: -405px; }
  .wrap-open-acc::before { margin: 205px -10% 0; }
  .wrap-open-acc .wrap-inner { padding: 305px 0 5px; } }

.wrap-sec-last .wrap-inner { padding: 8vw 6% 0; }

@media all and (min-width: 768px) { .wrap-sec-last .wrap-inner { width: 525px; padding: 18px 0 0; margin: 0 auto; } }

.slick-entry { margin-top: 23px; }

.slick-entry .entry-slide { padding: 5.375vw 18.75% 0; box-sizing: border-box; }

.slick-entry .entry-slide .step-number { padding: 0 36.25% 4.675vw; }

@media all and (min-width: 768px) { .slick-entry .entry-slide { padding: 0; }
  .slick-entry .entry-slide .step-number { padding: 0; }
  .slick-entry .slide-1 { padding: 23px 150px 0 180px; }
  .slick-entry .slide-2 { padding: 23px 150px 0 180px; }
  .slick-entry .slick-prev { left: 88px; }
  .slick-entry .slick-next { right: 88px; } }

.js-slick-slider-bg-1 { background: url("../image/bg_entry_step_1_sp.png") no-repeat; background-size: 54.21vw auto; background-position: 40.625vw top; }

.js-slick-slider-bg-2 { background: url("../image/bg_entry_step_2_sp.png") no-repeat; background-size: 54.21vw auto; background-position: 40.625vw top; }

.js-slick-slider-bg-3 { background: url("../image/bg_entry_step_3_sp.png") no-repeat; background-size: 19.18vw auto; background-position: 40.625vw top; }

.img-aqua-1 { position: absolute; background: url("../image/img_aqua_1.png") no-repeat; background-size: contain; z-index: 2; height: 200.43vw; width: 171.875vw; top: -60.5vw; left: -82.25vw; }

@media all and (min-width: 768px) { .img-aqua-1 { height: 1200px; width: 1227px; top: -337px; left: -161px; } }

.img-aqua-2 { position: absolute; background: url("../image/img_aqua_2.png") no-repeat; background-size: contain; z-index: 2; height: 350vw; width: 164vw; top: -57.56vw; right: -97.875vw; }

@media all and (min-width: 768px) { .img-aqua-2 { height: 1333px; width: 1289px; top: -374px; right: -331px; } }

.img-aqua-3 { position: absolute; background: url("../image/img_aqua_3.png") no-repeat; background-size: contain; z-index: 3; height: 151.4vw; width: 133.75vw; top: -64vw; left: -109vw; }

@media all and (min-width: 768px) { .img-aqua-3 { height: 1229px; width: 1196px; top: -350px; left: -730px; } }

.img-aqua-4 { position: absolute; background: url("../image/img_aqua_4_sp.png") no-repeat; background-size: contain; z-index: 0; width: 169vw; height: 188.125vw; top: 0vw; right: -111vw; }

@media all and (min-width: 768px) { .img-aqua-4 { background: url("../image/img_aqua_4_pc.png") no-repeat; background-size: contain; z-index: 0; width: 1265px; height: 1249px; top: -370px; right: -720px; } }

.img-aqua-5 { display: none; }

@media all and (min-width: 768px) { .img-aqua-5 { display: block; position: absolute; background: url("../image/img_aqua_5.png") no-repeat; background-size: contain; z-index: 0; width: 1259px; height: 1287px; top: -450px; left: -650px; } }

.img-aqua-6 { position: absolute; background: url("../image/img_aqua_6.png") no-repeat; background-size: contain; z-index: 0; width: 83.75vw; height: 92.5vw; top: -20vw; right: -55vw; }

@media all and (min-width: 768px) { .img-aqua-6 { width: 489px; height: 476px; top: 280px; right: -320px; } }

.img-aqua-7 { position: absolute; background: url("../image/img_aqua_7.png") no-repeat; background-size: contain; z-index: 0; width: 78.75vw; height: 82.8125vw; top: -56vw; left: -51vw; }

@media all and (min-width: 768px) { .img-aqua-7 { width: 524px; height: 549px; top: -270px; left: -410px; } }

.img-aqua-8 { position: absolute; background: url("../image/img_aqua_8.png") no-repeat; background-size: contain; z-index: 0; width: 133.125vw; height: 101.25vw; top: -7vw; left: 50vw; }

@media all and (min-width: 768px) { .img-aqua-8 { width: 886px; height: 554px; top: 70px; right: -553px; } }

.img-aqua-9 { position: absolute; background: url("../image/img_aqua_9.png") no-repeat; background-size: contain; z-index: 0; width: 173.9vw; height: 154.34vw; top: 25vw; left: -46vw; }

@media all and (min-width: 768px) { .img-aqua-9 { width: 489px; height: 1135px; top: 190px; left: -220px; } }

.img-aqua-10 { position: absolute; background: url("../image/img_aqua_10.png") no-repeat; background-size: contain; z-index: 0; width: 131vw; height: 132vw; top: -125vw; right: -116vw; }

@media all and (min-width: 768px) { .img-aqua-10 { width: 489px; height: 1135px; top: -350px; right: -290px; } }

.img-aqua-11 { position: absolute; background: url("../image/img_aqua_11_sp.png") no-repeat; background-size: contain; z-index: 0; width: 110vw; height: 98.59vw; top: -50vw; right: -76vw; }

.txt-enjoy-race { padding: 8px 3.75% 0; position: relative; z-index: 1; }

.txt-intro { padding: 0 4.5% 0 31.25%; font-weight: bold; color: #fff; }

@media all and (min-width: 768px) { .txt-intro { width: 471px; padding: 0; margin-left: 547px; } }

.txt-lottery { padding: 0 4.68%; margin: 7.25vw 0 0; }

@media all and (min-width: 768px) { .txt-lottery { width: 504px; padding: 0; margin: 24px 0 0 532px; } }

.txt-enter-note { padding: 0 7.34%; margin-top: 3.125vw; }

@media all and (min-width: 768px) { .txt-enter-note { width: 538px; padding: 0; margin: 20px auto 0; } }

.option-box { margin-top: 10.625vw; }

.option-box .ttl-option { padding: 0 21.25%; }

@media all and (min-width: 768px) { .option-box { margin-top: 38px; }
  .option-box .ttl-option { width: 187px; padding: 0; margin-left: 471px; } }

.lst-about { position: relative; z-index: 1; }

.lst-about .item { vertical-align: top; }

.lst-about .item:not(:first-child)::before { content: ''; background: url("../image/hr_about.png") center no-repeat; background-size: contain; display: block; width: 100%; height: 8px; margin-bottom: 38px; }

.lst-about .item + .item { margin: 8.625vw 0 0; }

@media all and (min-width: 768px) { .lst-about { width: 320px; margin-left: 197px; }
  .lst-about .item + .item { margin: 48px 0 0; } }

.lst-entry { position: relative; z-index: 1; }

.lst-entry + .lst-entry { margin: 7.25vw 0 0; }

.lst-entry .item .txt-entry { word-break: keep-all; font-weight: bold; font-size: 3.75vw; text-align: center; }

.lst-entry .item .txt-login { color: #00b39f; }

.lst-entry .item .txt-registration { color: #0af; }

.lst-entry .item .txt-vote { color: #eb6da5; }

.lst-entry .item + .item { margin: 7.25vw 0 0; }

@media all and (min-width: 768px) { .lst-entry { font-size: 0; text-align: center; }
  .lst-entry + .lst-entry { margin: 50px 0 0; }
  .lst-entry .item { display: inline-block; vertical-align: top; }
  .lst-entry .item .txt-entry { font-size: 24px; }
  .lst-entry .item + .item { margin: 0 0 0 40px; } }

.lst-ico { display: table; margin-top: 5px; }

.lst-ico .item { display: table-row; font-size: 11px; text-align: left; }

.lst-ico .item span { display: table-cell; }

.lst-ico .item::before { content: attr(data-ico); display: table-cell; padding-right: 2px; }

.lst-enter-step { margin: 7vw 0 0; }

.lst-enter-step .step { margin-bottom: 4.6875vw; }

.lst-enter-step .step:last-child { margin-bottom: 0; }

.lst-enter-step .step .step-number { padding: 0 42%; }

.lst-enter-step .step .step-txt { margin-top: 2.24vw; }

.lst-enter-step .step .step-btn { margin-top: 3.125vw; display: block; padding: 0 18.75% 0 20.3125%; }

.lst-enter-step .step:nth-child(1) .step-txt { padding: 0 16%; }

.lst-enter-step .step:nth-child(2) .step-txt { padding: 0 11.875%; }

.lst-enter-step .step:nth-child(3) .step-txt { padding: 0 6.35%; }

@media all and (min-width: 768px) { .lst-enter-step { margin: 30px 0 0; }
  .lst-enter-step .step { margin-bottom: 10px; }
  .lst-enter-step .step:last-child { margin-bottom: 0; }
  .lst-enter-step .step .step-number { padding: 0; }
  .lst-enter-step .step .step-txt { margin: 21px auto; }
  .lst-enter-step .step .step-btn { width: 388px; margin: 20px auto 0; padding: 0; }
  .lst-enter-step .step:nth-child(1) .step-number { width: 101px; margin: 0 auto; }
  .lst-enter-step .step:nth-child(1) .step-txt { padding: 0; width: 527px; }
  .lst-enter-step .step:nth-child(2) .step-number { width: 105px; margin: 0 auto; }
  .lst-enter-step .step:nth-child(2) .step-txt { padding: 0; width: 352px; }
  .lst-enter-step .step:nth-child(3) .step-number { width: 105px; margin: 0 auto; }
  .lst-enter-step .step:nth-child(3) .step-txt { padding: 0; width: 404px; } }

.lst-point { margin-top: 3vw; font-size: 22px; font-size: 3.4375vw; line-height: 1.4; }

.lst-point > li { position: relative; padding-left: 1em; }

.lst-point > li:before { border-radius: 50%; background: #f08300; width: .9em; height: .9em; content: ''; position: absolute; top: .1em; left: 0; }

.lst-point > li + li { margin-top: 5px; }

@media all and (min-width: 768px) { .lst-point { margin-top: 15px; font-size: 16px; font-size: 1.6rem; line-height: 1.375; }
  .lst-point > li:before { top: .2em; }
  .lst-point > li + li { margin-top: 5px; } }

.lst-disc > li { position: relative; padding-left: 1em; }

.lst-disc > li:before { content: '\0030fb'; position: absolute; left: 0; }

.lst-options { margin: 4vw 0 0; }

.lst-options li { padding: 0 4.68%; vertical-align: top; }

.lst-options li + li { margin: 10vw 0; }

@media all and (min-width: 768px) { .lst-options { margin: 12px 100px 0 0; font-size: 0; text-align: right; }
  .lst-options li { padding: 0; width: 190px; display: inline-block; }
  .lst-options li + li { margin: 0 0 0 28px; } }

.btn-entry { display: block; margin-top: 8px; }

.btn-qa { margin: 9vw 1.5vw 0; position: relative; z-index: 1; }

@media all and (min-width: 768px) { .btn-qa { width: 525px; margin: 70px auto 0; } }

.hdg-attention { text-align: center; border-top: 1px solid #000; border-bottom: 1px solid #000; }

.hdg-attention { font-size: 32px; font-size: 5vw; padding: 2.7vw 0; }

@media all and (min-width: 768px) { .hdg-attention { font-size: 22px; line-height: 1; padding: 8px; } }

.dl-overview { font-size: 0; text-align: center; margin-top: 8.1vw; position: relative; z-index: 1; }

.dl-overview dt { display: inline-block; font-size: 4.0635vw; color: #fff; width: 30vw; padding: 2px 0; border-left: 1px solid #fff; border-right: 1px solid #fff; line-height: 1.7; font-weight: normal; }

.dl-overview dd { margin-top: 2.2vw; font-size: 3.75vw; color: #fff; text-align: center; }

.dl-overview dd + dt { margin-top: 8.1vw; }

.dl-overview dd .lst-ico { text-align: left; }

.dl-overview dd .lst-ico .item { font-size: 3.75vw; }

.dl-overview dd.prize-type .lst-ico .item span { width: 15vw; }

@media all and (min-width: 768px) { .dl-overview { display: flex; flex-wrap: wrap; margin-top: 20px; width: 690px; margin: 0 auto; }
  .dl-overview dt { display: flex; margin-top: 30px; vertical-align: top; font-size: 22px; width: 158px; justify-content: center; align-items: center; line-height: 1.4; }
  .dl-overview dd { width: 502px; display: flex; flex-direction: column; vertical-align: top; font-size: 20px; margin-left: 28px; margin-top: 30px; text-align: left; }
  .dl-overview dd + dt { margin-top: 40px; }
  .dl-overview dd .lst-ico { text-align: left; }
  .dl-overview dd .lst-ico .item { font-size: 18px; }
  .dl-overview dd.prize-type .lst-ico .item span { width: 100%; display: block; } }

.box-info { padding: 6.5vw 7vw 5.5vw; border-radius: 15px; border: 1px solid #f08300; background: #fff; position: relative; z-index: 1; }

.box-info .open-btn { padding: 0 11.5vw; margin-top: 4vw; }

@media all and (min-width: 768px) { .box-info { width: 525px; padding: 40px 35px 35px; margin: 0 auto; }
  .box-info .open-txt { width: 453px; margin: 0 auto; }
  .box-info .open-btn { width: 324px; padding: 0; margin: 30px auto 0; } }

/* footer
================================*/
.l-foot { min-width: 0; }

.l-foot .l-inner { padding-top: 2vw; padding-bottom: 7vw; background: #f2f2f2; }

.l-foot .copyright { text-align: center; display: block; color: #a6a6a6; }

.l-foot .copyright small { font-size: 2.8vw; }

@media all and (min-width: 768px) { .l-foot { min-width: 1200px; }
  .l-foot .l-inner { padding-top: 15px; padding-bottom: 45px; }
  .l-foot .copyright small { font-size: 12px; } }