@charset "UTF-8";
html {
  font-size: 0.2380952381vw;
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", YuGothic, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, "メイリオ", Meiryo, sans-serif;
  word-wrap: break-word;
}
@media only screen and (min-width: 768px) {
  html {
    font-size: 0.0735294118vw;
  }
}

body {
  background-color: #fff;
  margin: 0;
  padding: 0;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

h1, h2, h3, div, p, ul, li {
  margin: 0;
  padding: 0;
}

li {
  list-style: none;
}

img {
  width: 100%;
  height: auto;
  line-height: 0;
  vertical-align: bottom;
}

a:hover img {
  filter: brightness(1.2);
  opacity: 0.9;
}

/******* PC表示フレーム *******/
.pc--frame {
  display: none;
}
@media only screen and (min-width: 768px) {
  .pc--frame {
    display: block;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-image: url(../img/bk_pc.jpg);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    width: 100%;
    height: 100vh;
  }
}

.pc--frame--logo {
  display: none;
}
@media only screen and (min-width: 768px) {
  .pc--frame--logo {
    display: block;
    position: fixed;
    width: 11.7647058824vw;
    top: 1.8382352941vw;
    left: 2.5735294118vw;
  }
}

.pc--frame--nav {
  display: none;
}
@media only screen and (min-width: 768px) {
  .pc--frame--nav {
    display: block;
    position: fixed;
    width: 20.5882352941vw;
    top: 10.8823529412vw;
    left: 6.1029411765vw;
  }
}

.pc--frame--qr {
  display: none;
}
@media only screen and (min-width: 768px) {
  .pc--frame--qr {
    display: block;
    position: fixed;
    width: 18.6029411765vw;
    top: 16.5441176471vw;
    right: 6.1029411765vw;
  }
}

/******* コンテンツ *******/
@media only screen and (min-width: 768px) {
  .contents {
    position: relative;
    z-index: 100;
    width: 420rem;
    margin-left: 470rem;
    margin-top: -56rem;
  }
}

#prize, #prod, #method, #challenge, #terms {
  position: absolute;
  top: -56rem;
  height: 1px;
}
@media only screen and (min-width: 768px) {
  #prize, #prod, #method, #challenge, #terms {
    top: -10rem;
  }
}

/******* SPヘッダー *******/
.spheader {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  width: 420rem;
  height: 56rem;
  background-color: #820000;
}
@media only screen and (min-width: 768px) {
  .spheader {
    display: none;
  }
}

.spheader--logo {
  position: absolute;
  width: 100rem;
  top: 13rem;
  left: 17rem;
}

.spheader--hgbtn {
  position: absolute;
  top: 15rem;
  right: 15rem;
  width: 30rem;
  height: 25rem;
  background-image: url(../img/hg_btn_off.svg);
  background-size: cover;
}
.spheader--hgbtn.on {
  background-image: url(../img/hg_btn_on.svg);
  height: 30rem;
}

/******* SPナビゲーション *******/
.spnav {
  display: none;
  position: fixed;
  z-index: 100;
  top: 56rem;
  left: 0;
  background-image: url(../img/sp_nav_bk.jpg);
  background-size: 100% auto;
  width: 420rem;
  height: 100vh;
}
.spnav.on {
  display: block;
}

.spnav--btn {
  width: 243rem;
  margin: 156rem auto 0;
}
.spnav--btn li a {
  display: block;
}

/******* キービジュアル *******/
.kv {
  position: relative;
  height: 785rem;
  background-image: url(../img/kv_bk.jpg);
  background-position: top center;
  background-size: 100% auto;
  background-repeat: no-repeat;
}

.kv--lead {
  position: absolute;
  width: 412rem;
  top: 60rem;
  left: 1rem;
}

.kv--title {
  position: absolute;
  width: 348rem;
  top: 200rem;
  left: 35.3rem;
}

.kv--course {
  position: absolute;
  width: 400rem;
  top: 510rem;
  left: 15rem;
}

.kv--priod {
  position: absolute;
  width: 387rem;
  top: 675rem;
  left: 16rem;
}

/******* イントロ *******/
.intro-prize-wrap {
  position: relative;
  background-image: url(../img/intro-prize_bk.jpg);
  background-position: top center;
  background-size: 100% auto;
}

.intro {
  padding-top: 90rem;
}

.intro--lead {
  width: 257rem;
  margin: 0 auto;
}

.intro--catch {
  width: 330rem;
  margin: 0 auto;
}

.intro--panel {
  width: 350rem;
  margin: -50rem auto 0;
  transform: translateX(-7rem);
}

/******* 賞品 *******/
.prize {
  position: relative;
  padding-top: 25rem;
  padding-bottom: 64rem;
}

.prize--title {
  width: 285rem;
  margin: 0 auto;
}

.prize--1p {
  width: 368rem;
  margin: 28rem auto 0;
  padding: 28rem 0;
  border-radius: 12rem;
  background-color: rgba(255, 255, 255, 0.5333333333);
}

.prize--1p--title {
  width: 285rem;
  margin: 0 auto;
}

.prize--1p--subtitle {
  width: 280rem;
  margin: 0 auto;
}

.prize--1p--fig {
  width: 335rem;
  margin: 0 auto;
}

.prize--1p--outline {
  width: 326rem;
  margin: 18rem auto 0 25rem;
}

.prize--1p--note {
  width: 326rem;
  margin: 12rem auto 0 25rem;
}
.prize--1p--note p {
  font-size: 12rem;
}
.prize--1p--note ul li {
  font-size: 11rem;
  list-style: disc;
  margin-left: 1.5em;
}

.prize--6p {
  width: 368rem;
  margin: 28rem auto 0;
  padding: 28rem 0;
  border-radius: 12rem;
  background-color: rgba(255, 255, 255, 0.5333333333);
}

.prize--6p--title {
  width: 285rem;
  margin: 0 auto;
}

.prize--6p--subtitle {
  width: 270rem;
  margin: 0 auto;
}

.prize--6p--fig {
  width: 327rem;
  margin: 0 auto 0 26rem;
}

.prize--6p--note {
  width: 326rem;
  margin: -10rem auto 0 25rem;
}
.prize--6p--note p {
  font-size: 12rem;
}
.prize--6p--note ul li {
  font-size: 11rem;
  list-style: disc;
  margin-left: 1.5em;
}

.prize--12p {
  width: 368rem;
  margin: 28rem auto 0;
  padding: 28rem 0;
  border-radius: 12rem;
  background-color: rgba(255, 255, 255, 0.5333333333);
}

.prize--12p--title {
  width: 285rem;
  margin: 0 auto;
}

.prize--12p--subtitle {
  width: 240rem;
  margin: 0 auto;
}

.prize--12p--fig {
  width: 292rem;
  margin: -7rem auto 0 60rem;
}

.prize--12p--note {
  width: 326rem;
  margin: -5rem auto 0 25rem;
}
.prize--12p--note p {
  font-size: 12rem;
}
.prize--12p--note ul li {
  font-size: 11rem;
  list-style: disc;
  margin-left: 1.5em;
}

/******* 製品 *******/
.prod-method-wrap {
  position: relative;
  background-image: url(../img/prod-method_bk.png);
  background-position: top center;
  background-size: 100% auto;
  background-repeat: repeat-y;
  padding: 53rem 0;
}

.prod--title {
  width: 327rem;
  margin: 0 auto;
}

.prod--wrap {
  width: 368rem;
  padding: 32rem 0 25rem;
  margin: 33rem auto 0;
  background-color: #fff;
  border-radius: 12rem;
}

.prod--seal {
  width: 270rem;
  margin: 0 auto;
}

.prod--bar {
  width: 332rem;
  margin: 27rem auto 0;
  border-bottom: 1px #000 solid;
}

.prod--ph {
  width: 324rem;
  margin: 35rem auto 0;
}

.prod--btn {
  width: 327rem;
  margin: 30rem auto 0;
}

/******* 参加方法 *******/
.method {
  position: relative;
  padding: 32rem 0 0;
}

.method--title {
  width: 120rem;
  margin: 0 auto;
}

.method--step1 {
  position: relative;
  width: 372rem;
  margin: 30rem auto 0;
}

.method--step1--btn {
  position: absolute;
  width: 308rem;
  top: 103rem;
  left: 33rem;
}

.method--step2, .method--step3 {
  width: 372rem;
  margin: 10rem auto 0;
}

.method--subtitle {
  width: 368rem;
  margin: 50rem auto 0;
}

.method--note {
  width: 337rem;
  margin: 20rem auto 0;
}
.method--note li {
  font-size: 14rem;
  padding-left: 1em;
  text-indent: -1em;
}

/******* ウコンのチカラーチャレンジ *******/
.challenge {
  position: relative;
  padding: 85rem 0 130rem;
  background-image: url(../img/challenge_bk.jpg), url(../img/prod-method_bk.png);
  background-size: 100% auto, 100% auto;
  background-position: top center, top center;
  background-repeat: no-repeat, repeat-y;
}

.challenge--shoulder {
  width: 168rem;
  margin: 0 auto;
}

.challenge--title {
  width: 367rem;
  margin: 17rem auto 0;
}

.challenge--lead {
  width: 270rem;
  margin: -15rem auto 0;
}

.challenge--graph {
  width: 354rem;
  margin: 35rem auto 0;
}

.challenge--note {
  width: 354rem;
  margin: 30rem auto 0;
  font-size: 15rem;
  line-height: 1.4;
}

.challenge--more {
  margin: 12rem auto 0;
}

.challenge--more--mrk {
  width: 150rem;
  margin: 0 auto;
}

.challenge--more--lead {
  width: 297rem;
  margin: 5rem auto 0;
}

.challenge--more--title {
  width: 340rem;
  margin: 10rem auto 0;
}

.challenge--more--ph {
  width: 420rem;
  margin: 10rem auto 0;
}

.challenge--more--text {
  width: 288rem;
  margin: 15rem auto 0;
}

.challenge--more--subtitle {
  width: 296rem;
  margin: 15rem auto 0;
}

.challenge--more--period {
  width: 200rem;
  margin: 12rem auto 0;
}

.challenge--more--winner {
  width: 82rem;
  margin: 12rem auto 0;
}

.challenge--more--info {
  width: 335rem;
  margin: 12rem auto 0;
}

.challenge--terms {
  position: relative;
  width: 368rem;
  padding: 23rem 0 20rem;
  border-radius: 12rem;
  background-color: #fff;
  margin: 130rem auto 0;
}

.challenge--terms--title {
  width: 112rem;
  margin: 0 auto;
}

.challenge--terms--cont {
  width: 336rem;
  height: 300rem;
  overflow-y: auto;
  margin: 15rem auto 0;
}
.challenge--terms--cont h4 {
  font-size: 13rem;
  margin: 0.5em 0 0.25em 0;
}
.challenge--terms--cont p, .challenge--terms--cont li {
  font-size: 11rem;
}
.challenge--terms--cont p.mt5, .challenge--terms--cont li.mt5 {
  margin-top: 0.5em;
}
.challenge--terms--cont li {
  list-style: disc;
  margin-left: 1em;
  padding-left: 1em;
  text-indent: -1em;
}
.challenge--terms--cont li.note {
  list-style: none;
  padding-left: 0;
}
.challenge--terms--cont p.note {
  padding-left: 1em;
  text-indent: -1em;
}

/******* お問い合わせ *******/
.contact {
  background-image: url(../img/prod-method_bk.png);
  background-position: top center;
  background-size: 100% auto;
  background-repeat: repeat-y;
  padding: 25rem 0 55rem;
}

.contact--wrap {
  width: 368rem;
  margin: 0 auto;
  padding: 25rem 0;
  background-color: #ffa000;
  border-radius: 12rem;
}

.contact--title {
  width: 174rem;
  margin: 0 auto;
}

.contact--lead {
  width: 230rem;
  margin: 25rem auto 0;
}

.contact--telno {
  width: 260rem;
  margin: 25rem auto 0;
}

.contact--period {
  width: 334rem;
  margin: 25rem auto 0;
}

.contact--note {
  width: 334rem;
  margin: 30rem auto 0;
}
.contact--note li {
  font-size: 12rem;
  padding-left: 1em;
  text-indent: -1em;
  color: #fff;
}

.footer {
  position: relative;
  background-color: #820000;
  padding: 40rem 0 58rem;
}

.footer-sns {
  width: 100rem;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.footer-sns .sns-x {
  width: 32rem;
}
.footer-sns .sns-facebook {
  width: 34rem;
}

.footer--logo {
  width: 297rem;
  margin: 35rem auto 0;
}

.footer--link {
  width: 400rem;
  margin: 35rem auto 0;
  display: flex;
  justify-content: center;
}
.footer--link li {
  font-size: 11rem;
  padding: 0 2.5rem;
  display: flex;
}
.footer--link li a {
  color: #fff;
  text-decoration: none;
}
.footer--link li::after {
  color: #fff;
  content: "｜";
  margin-left: 2.5rem;
}
.footer--link li:last-child::after {
  content: "";
}

.footer--copy {
  width: 400rem;
  margin: 13rem auto 0;
  font-size: 10rem;
  text-align: center;
  color: #fff;
}

.tologin {
  position: fixed;
  right: 5rem;
  bottom: -95rem;
  width: 90rem;
  transition: all 0.5s ease;
}
@media only screen and (min-width: 768px) {
  .tologin {
    right: 50%;
    transform: translateX(215rem);
  }
}
.tologin.active {
  bottom: 5rem;
}
.tologin.ft {
  bottom: 220rem;
}

/******* プレページ *******/
.pre {
  position: absolute;
  top: 56rem;
  width: 420rem;
  min-height: calc(100vh - 56rem);
  background-image: url(../img/kv_bk.jpg);
  background-position: top -56rem center;
  background-size: 100% auto;
  background-repeat: no-repeat;
  padding-bottom: 50rem;
}
@media only screen and (min-width: 768px) {
  .pre {
    min-height: 100vh;
  }
}

.pre--contents {
  width: 400rem;
  margin: 0 auto 0 15rem;
}/*# sourceMappingURL=style.css.map */