@charset "UTF-8";

.mainvisual,
.wrapper,
body,
img {
  width: 100%
}

.hide-text {
  position: fixed
}

body,
html {
  position: relative;
  overflow-x: hidden
}

.animation {
  transition-duration: .3s;
  transition-timing-function: ease-in-out;
  transition-property: opacity
}

html {
  font-size: 53%
}

body {
  font-size: 1.5rem;
  line-height: 1.4em;
  background-image: url(../img/bg_pattern.png), url(../img/bg_grad.png);
  background-position: 49.7% top, center top;
  background-repeat: repeat, repeat-y;
  background-size: auto, auto;
  background-color: #69d1f4;
  color: #000
}

.body_inner{
  background-image: url(../img/bg_wave.png);
  background-repeat: no-repeat;
  background-size: 160vw;
  background-position: center bottom;
}
img {
  height: auto;
  display: inherit;
  vertical-align: bottom
}

a:active,
a:hover,
a:link,
a:visited {
  color: #00f;
  text-decoration: underline
}

a:hover {
  text-decoration: none
}

a.att_a {
  display: block;
  margin: 1.5em 0
}

.red {
  color: #fe7201
}

.btn {
  padding: 2.9% 1.5%;
  margin: 0 3%;
  position: absolute;
  bottom: 0
}

.btnBottom,
.btnConfirm,
.mainvisual,
.wrapper {
  position: relative
}

.btnTop {
  margin-bottom: 6%
}

.btnConfirm {
  margin: 0 8%;
  padding-top: 0;
  padding-bottom: 0
}

.btnConfirm a img {
  margin-top: 0
}

.indent {
  text-indent: -1em
}

.hide-text {
  text-indent: 110%;
  white-space: nowrap;
  overflow: hidden;
  display: block
}

.hide-text br {
  display: none
}

.mainvisual .prize:before,
.mainvisual:before {
  content: "";
  display: block
}

.font15 {
  font-size: 2.4375vw
}

.font18 {
  font-size: 2.6vw
}

.font20 {
  font-size: 3.125vw
}

.font22 {
  font-size: 13px;
  font-size: 3.4375vw
}

.font24 {
  font-size: 3.75vw
}

.font26 {
  font-size: 3.97vw
}

.font28 {
  font-size: 4.4vw
}

.font30 {
  font-size: 4.7vw
}

.font45 {
  font-size: 7vw
}

.wrapper {
  max-width: 640px;
  margin: 0 auto
}

.mainvisual {
  background: url(../img/mainvisual.jpg) no-repeat;
  background-size: cover
}

.mainvisual:before {
  padding-top: 167.35%
}

.mainvisual .content,
.mainvisual .prize ul {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0
}

.mainvisual .content .btn {
  bottom: 0.5%
}

.mainvisual .prize {
  position: relative;
  width: 100%
}

.mainvisual .prize:before {
  padding-top: 100%
}

.cpnDetail h2 {
  background-color: #25344b;
  color: #fff;
  text-align: center;
  font-size: 2rem;
  line-height: 3rem;
  margin-bottom: 3%
}

.cpnDetail dl {
  padding: 1% 3%;
  margin: 0 3% -1px;
  box-sizing: border-box;
  border-style: solid;
  border-width: 1px;
  border-color: #222da7;
  background-color: #fff
}

.cpnDetail dl:last-child dd,
.cpnDetail dl:nth-of-type(1) dd {
  margin-bottom: 2%
}

.cpnDetail dt {
  font-weight: 700;
  border-radius: 3px;
  padding: 1.5% 0
}

.cpnDetail dd {
  line-height: 1.5
}

.cpnDetail dd h3 {
  color: #179883;
  font-weight: 700
}

.cpnDetail dd img {
  margin-top: 3%
}

.cpnDetail dd .btn a img {
  margin-bottom: 3%
}

.cpnDetail dd ul li {
  margin-bottom: .5em
}

.cpnDetail dd .small {
  font-size: 1.3rem;
  margin: .8em 0
}

.cpnDetail dd .howtouse {
  position: relative;
  margin: 0 8%;
  padding-top: 0;
  padding-bottom: 0
  margin-bottom: 3%
}
.cpnDetail dd .howtouse a img{
  margin-bottom:0;
}
.cpnbanner {
  margin: 0 3%;
  text-align: center
}

.pagetop {
  margin-left: 40%;
  margin-right: 40%;
  box-sizing: border-box;
  text-align: right;
  padding: 2% 2% 4%
}

.footer {
  text-align: center;
  padding-top: 1%;
  padding-bottom: 3.125%;
  background-color: #122d6a;
  background-image: url(img/bg_obi.png), url(img/bg_footer_repeat.png);
  background-repeat: no-repeat, repeat-X;
  background-position: center top, center top
}

.footer .btn_home {
  padding: 3.125% 26% 0;
  max-width: 960px
}

.footer .btn_home a,
.footer small {
  display: inline-block;
  margin: auto
}

.footer small {
  font-family: 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, 'Helvetica neue', Helvetica, Verdana, 'ＭＳ Ｐゴシック', Osaka, Arial, sans-serif;
  margin: 1.5% auto;
  color: #fff;
  text-shadow: none
}

@media screen and (min-width:640px) {
  .body_inner {
      background-size: auto;
  }
}

@media screen and (min-width:768px) {
  html {
      font-size: 80%
  }
}