@charset "UTF-8";
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}

body {
  line-height: 1;
  word-break: normal;
  word-wrap: break-word;
}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}

ul {
  list-style: none;
}

li {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote:before, blockquote:after, q:before, q:after {
  content: '';
  content: none;
}

a {
  margin: 0;
  padding: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}

input, select {
  vertical-align: middle;
  border: none;
}

textarea {
  resize: none;
}

body {
  background: #000;
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  color: #000;
}

* {
  box-sizing: border-box;
}

a {
  text-decoration: none;
  -webkit-transition: 0.2s;
  transition: 0.2s;
}
a:hover {
  text-decoration: underline;
  filter: alpha(opacity=80);
  -webkit-opacity: 0.80;
  opacity: 0.80;
}

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

.wrap {
  width: 100%;
  margin: 0 auto;
  text-align: center;
  overflow: hidden;
  position: relative;
}

.inner {
  width: 100%;
  max-width: 980px;
  margin: 0 auto;
  padding: 0 2.04082%;
}

.opening-scale {
  transform: scale(1.6);
  opacity: 0;
  transition: all .2s ease;
}
.opening-scale.show {
  transform: scale(1);
  opacity: 1;
}

.opening-fade {
  opacity: 0;
  transition: all .2s ease-in-out;
}
.opening-fade.show {
  opacity: 1;
}

.opening-slide {
  transform: translateY(10px);
  opacity: 0;
  transition: all .6s ease-in-out;
}
.opening-slide.show {
  transform: translateY(0);
  opacity: 1;
}

@media screen and (min-width: 768px) {
  .inner {
    padding: 0 20px;
  }
}
@media screen and (max-width: 767px) {
  a:hover {
    text-decoration: underline;
    filter: alpha(opacity=100);
    -webkit-opacity: 1.0;
    opacity: 1.0;
  }

  .inner {
    padding: 0 2.66667%;
  }
}
/*================ メイン ================*/
.visual {
  background: url(../images/visual_bg_pc.jpg) no-repeat 50% 50%;
  background-size: cover;
  padding-top: 55%;
  position: relative;
}
.visual h1 {
  width: 36.28571%;
  position: absolute;
  top: 5.32468%;
  left: 33.42857%;
  z-index: 5;
  opacity: 0;
}
.visual p, .visual div {
  position: absolute;
  opacity: 0;
}
.visual__text01 {
  width: 72.28571%;
  top: 32.33766%;
  left: 13.28571%;
  z-index: 3;
}
.visual__text01 .end {
  position: absolute;
  top: 74.18699%;
  left: 0;
  right: 0;
  display: block;
}
.visual__img01 {
  width: 31.57143%;
  top: 5.84416%;
  left: 8.21429%;
  z-index: 1;
}
.visual__img02 {
  width: 24%;
  top: 1.81818%;
  left: 65.5%;
  z-index: 2;
}
.visual__img03 {
  width: 20.85714%;
  top: 33.37662%;
  left: 2%;
  z-index: 4;
}
.visual__end {
  width: 15.78571%;
  top: 9.35065%;
  left: 4.78571%;
  z-index: 5;
}

@media screen and (max-width: 767px) {
  .visual {
    background: url(../images/visual_bg_sp.jpg) no-repeat 50% 50%;
    background-size: cover;
    padding-top: 137.86667%;
  }
  .visual h1 {
    width: 78.4%;
    top: 0%;
    left: 13.86667%;
  }
  .visual__text01 {
    width: 100%;
    top: 61.41199%;
    left: 0;
  }
  .visual__text01 .end {
    width: 100%;
  }
  .visual__img01 {
    width: 52.53333%;
    top: 27.75629%;
    left: 5.33333%;
  }
  .visual__img02 {
    width: 50.13333%;
    top: 31.62476%;
    left: 47.6%;
  }
  .visual__img03 {
    width: 34.4%;
    top: 41.19923%;
    left: 0%;
  }
  .visual__end {
    width: 29.46667%;
    top: 39.07157%;
    left: 0;
    right: 0;
    margin: 0 auto;
    z-index: 5;
  }
}
/*================ 問題 ================*/
.question {
  background: url(../images/questions_bg_pc.jpg) no-repeat 50% 0;
  background-size: cover;
}
.question p {
  width: 84.04255%;
  margin: 0 auto 40px;
}
.question h2 {
  width: 100%;
}
.question .inner {
  padding-top: 4.59184%;
  padding-bottom: 9.18367%;
  position: relative;
}
.question .inner div {
  width: 25.74468%;
  position: absolute;
  right: -13.29787%;
  bottom: 0;
}
.question .answer {
  width: 60%;
  margin: 50px auto 0;
}

@media screen and (min-width: 980px) {
  .question .inner {
    padding-top: 45px;
    padding-bottom: 90px;
    position: relative;
  }
}
@media screen and (max-width: 767px) {
  .question {
    background: url(../images/questions_bg_sp.jpg) no-repeat 50% 0;
    background-size: cover;
  }
  .question p {
    width: 87.32394%;
    margin: 0 auto 8.4507%;
  }
  .question h2 {
    width: 99.71831%;
  }
  .question .inner {
    padding-top: 8%;
    padding-bottom: 7.33333%;
  }
  .question .inner div {
    width: 26.4%;
    right: 0.66667%;
    bottom: 22.66667%;
  }
  .question .answer {
    width: 90%;
    margin: 30px auto 0;
  }
}
/*================ プレゼント ================*/
.present__title {
  background: url(../images/present_title_bg.jpg) repeat-x 50% 0;
  background-size: auto 100%;
}
.present__title .inner {
  padding-top: 10.10204%;
  text-align: center;
  position: relative;
}
.present__title h2 {
  width: 72.85714%;
  position: absolute;
  top: 7.07071%;
  left: 0;
  right: 0;
  margin: auto;
}
.present__contents {
  background: url(../images/present_bg_pc.jpg) no-repeat 50% 50%;
  background-size: cover;
}
.present__contents .inner {
  padding-top: 5.61224%;
  padding-bottom: 6.22449%;
}
.present__contents p:nth-of-type(1) {
  width: 97.87234%;
  margin: 0 auto;
}
.present__contents p:nth-of-type(2) {
  width: 97.65957%;
  margin: 0 auto 2.95918%;
}
.present__contents p:nth-of-type(3) {
  width: 99.78723%;
  margin: 0 auto;
}

@media screen and (min-width: 980px) {
  .present__title .inner {
    padding-top: 99px;
  }
  .present__contents .inner {
    padding-top: 55px;
    padding-bottom: 61px;
  }
}
@media screen and (max-width: 767px) {
  .present__title .inner {
    padding-top: 16%;
  }
  .present__title h2 {
    width: 93.33333%;
    top: 11.66667%;
  }
  .present__contents {
    background: url(../images/present_bg_sp.jpg) no-repeat 50% 50%;
    background-size: cover;
  }
  .present__contents .inner {
    padding: 6.66667% 0 9.33333%;
  }
  .present__contents p:nth-of-type(1) {
    width: 95.73333%;
    margin: 0 auto 4.53333%;
  }
  .present__contents p:nth-of-type(2) {
    width: 90.93333%;
    margin: 0 0 6.66667% 3.06667%;
  }
  .present__contents p:nth-of-type(3) {
    width: 90.66667%;
  }
}
/*================ 背景：青 ================*/
.contents-bg {
  background: url(../images/contents_bg.jpg) repeat 50% 0;
}
.contents-bg .inner {
  padding-top: 5.20408%;
  padding-bottom: 3.06122%;
}

@media screen and (min-width: 980px) {
  .contents-bg .inner {
    padding-top: 51px;
    padding-bottom: 30px;
  }
}
@media screen and (max-width: 767px) {
  .contents-bg {
    background-size: 21.6% auto;
  }
  .contents-bg .inner {
    padding-top: 7.33333%;
    padding-bottom: 5.33333%;
  }
}
/*================ 動画 ================*/
.movie h2 {
  width: 94.68085%;
  margin: 0 auto;
  position: relative;
  z-index: 3;
}
.movie .media-box {
  background: url(../images/movie_bg.png) no-repeat 50% 0;
  background-size: contain;
  width: 100%;
  margin-top: -5.53191%;
  padding-top: 67.65957%;
  text-align: center;
  position: relative;
  z-index: 1;
}
.movie .media-box img,
.movie .media-box iframe {
  width: 92.76596%;
  height: 77.67296%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}
.movie p {
  width: 55.10638%;
  margin: -5.53191% auto 1.59574%;
  position: relative;
  z-index: 2;
}

@media screen and (max-width: 767px) {
  .movie h2 {
    width: 101.69014%;
    margin: 0 0 0 -1.69014%;
  }
  .movie p {
    width: 72.95775%;
    margin: -7.32394% auto 4.22535%;
  }
}
/*================ クイズに答える！ ================*/
.answer p {
  margin: 0 auto 2.76596%;
}
.answer p:nth-of-type(1) {
  width: 45.74468%;
}
.answer p:nth-of-type(2) {
  width: 24.89362%;
}
.answer .btn {
  display: block;
  width: 75.31915%;
  margin: 0 auto 2.12766%;
}

@media screen and (max-width: 767px) {
  .answer p:nth-of-type(1) {
    width: 60.56338%;
    margin: 0 auto 4.92958%;
  }
  .answer p:nth-of-type(2) {
    width: 36.61972%;
    margin: 0 auto 12.67606%;
  }
  .answer .btn {
    display: block;
    width: 100%;
    margin: 0 auto 3.52113%;
  }
}
/*================ 応募要項 ================*/
.application {
  background: #fff;
  margin-bottom: 8.51064%;
  padding: 2.65957% 6.38298% 6.38298%;
  text-align: left;
  border: 5px solid #000;
  border-radius: 10px;
}
.application h2 {
  width: 22.71605%;
  margin: 0 auto;
}
.application h3 {
  margin-top: 6.17284%;
  color: #1e4c9f;
  font-size: 20px;
}
.application h3 a {
  color: inherit;
  font-size: inherit;
}
.application .attention {
  margin-top: 0.61728%;
  color: #c50000;
  font-size: 22px;
  line-height: 1.6;
}
.application dl {
  font-size: 16px;
  line-height: 1.75;
}
.application dl dt {
  margin-top: 3.7037%;
  font-weight: bold;
}
.application ul li {
  padding-left: 1em;
  text-indent: -1em;
}
.application ul.disc li:before {
  content: '・';
}
.application ul.notes li:before {
  content: '※';
}
.application a {
  color: #000;
  text-decoration: underline;
}
.application a:hover {
  text-decoration: none;
}
.application .mt-35 {
  margin-top: 4.26829%;
}

@media screen and (max-width: 767px) {
  .application {
    margin: 0 -2.8169% 10.66667%;
    padding: 10.66667% 5.6338% 16%;
    border: none;
    border-top: 3px solid #000;
    border-bottom: 3px solid #000;
    border-radius: 0;
  }
  .application h2 {
    width: 27.46269%;
  }
  .application h3 {
    margin-top: 35px;
    font-size: 18px;
  }
  .application .attention {
    margin-top: 10px;
    font-size: 20px;
  }
  .application dl {
    font-size: 14px;
  }
  .application dl dt {
    margin-top: 35px;
  }
  .application .mt-35 {
    margin-top: 35px;
  }
}
/*================ SNSボタン ================*/
.sns-link {
  display: block;
  margin-bottom: 3.19149%;
  opacity: 1 !important;
}
.sns-link li {
  display: inline-block;
  width: 14.68085%;
  margin: 0 0.31915%;
}
.sns-link li:nth-of-type(3) {
  display: none;
}
.sns-link a {
  display: block;
}

.banner {
  width: 31.91489%;
  margin: 0 auto;
  opacity: 1 !important;
}

@media screen and (max-width: 767px) {
  .sns-link {
    margin-bottom: 5.6338%;
  }
  .sns-link li {
    width: 19.43662%;
    margin: 0 0.42254%;
  }
  .sns-link li:nth-of-type(3) {
    display: inline-block;
  }

  .banner {
    width: 42.25352%;
  }
}
/*================ フッター ================*/
footer {
  background: #000;
  padding: 2.65957% 0 8.51064%;
}
footer .footer-logo {
  width: 23.61702%;
  max-width: 222px;
  margin: 0 auto;
}
footer .policy {
  margin-top: 2.80899%;
}
footer .policy a {
  font-family: "メイリオ", Meiryo, sans-serif;
  color: #fff;
  font-size: 22px;
}
footer .copy {
  color: #fff;
  margin-top: 1.40449%;
  font-size: 24px;
}

@media screen and (min-width: 980px) {
  footer {
    padding: 25px 0 80px;
  }
}
@media screen and (max-width: 767px) {
  footer {
    padding: 2.66667% 0;
  }
  footer .footer-logo {
    width: 32.39437%;
  }
  footer .policy {
    margin-top: 4.22535%;
  }
  footer .policy a {
    font-size: 8px;
  }
  footer .copy {
    margin-top: 2.8169%;
    font-size: 9px;
  }
}