@charset "UTF-8";

/* =======================================
    共通パーツ
======================================= */
/* ------ Reset -------*/
* {
  padding: 0;
  margin: 0;
}
ul {
  list-style: none;
}
img {
  vertical-align: bottom;
  max-width: 100%;
}
html,body {
  -webkit-text-size-adjust: 100%;
}

/* ------ Responsive -------*/
.pc {
  display: block;
}
.sp {
  display: none;
}
@media screen and (max-width: 767px) {
  .pc {
    display: none;
  }
  .sp {
    display: block;
  }
  img{
    width: 100%;
    height: auto;
  }
}

/* ------ box -------*/
body {
  background-color: #fff;
  min-width: 750px;
  overflow-y: scroll;
}
@media screen and (max-width: 767px) {
  body {
    min-width: 100%;
  }
}
#pageWrapper{
  margin: 0 auto;
  max-width: 750px;
  overflow: hidden;
  position: relative;
  width: 100%;
}
section {
  box-sizing: border-box;
  margin: 0 auto 50px;
  position: relative;
  width: 88.5%;
}
.container {
  box-sizing: border-box;
  position: relative;
  padding: 0 45px;
  width: 100%;
}
.case{
  position: relative
}
@media screen and (max-width: 767px) {
  #pageWrapper{
    width: 100%;
  }
  section {
    margin-bottom: 10.667vw;
    /* margin-bottom: 40px; */
  }
  .container {
    padding: 0 5.333vw;
    /* padding: 0 20px; */
  }
}

/* ------ flex-box -------*/
.col2,.col3{
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
}
@media screen and (max-width: 767px) {
  .col2,.col3{
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }
}

/* ------ fadeInUp -------*/
.fadeInUp{
  -webkit-transform: translateZ(0);
  /* display: none; */
  opacity: 0;
}
.fadeInUp.animated {
  /* アニメーションのプロパティを指定 */
  -webkit-transform: translateZ(0);
  animation-name: animated;
  animation-duration: 1s;
  animation-timing-function: ease;
  position: relative;
  opacity: 1;
}
@keyframes animated {
  from {
    opacity: 0;
    bottom: -20px;
  }
  to {
    opacity: 1;
    bottom: 0;
  }
}

/* ------ text -------*/
html {
  font-size: 62.5%;
}
body{
  color: #231815;
  font-family: "Zen kaku Gothic Antique","Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
  font-size: min(2.133vw ,1.6rem);
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.6;
}
main p{
  margin-bottom: 1.5em;
}
main p:last-child{
  margin-bottom: 0;
}
.txt_center{
  text-align: center;
}
.txt_red{
  color: #e60020;
}
@media screen and (max-width: 767px) {
  body{
    font-size: min(3.733vw ,1.5rem);
    /* font-size: 14px; */
  }
}

/* ------ title -------*/
.ttl_main{
  background-color: #663507;
  color: #fff;
  line-height: 1;
  letter-spacing: 0.1em;
  padding: 10px;
  margin-bottom: 1em;
  text-align: center;
}
.ttl_caution{
  background-color: #e60020;
  color: #fff;
  line-height: 1;
  letter-spacing: 0.1em;
  padding: 10px;
  padding-bottom: 5px;
  text-align: center;
}
@media screen and (max-width: 767px) {
  .ttl_main{
    padding: 8px;
  }
  .ttl_main img{
    display: block;
    height: 5.333vw;
    max-height: 20px;
    margin: 0 auto;
    width: auto;
  }
  .ttl_caution img{
    display: block;
    height: 4.8vw;
    max-height: 18px;
    margin: 0 auto;
    width: auto;
  }
}

/* ------ btn -------*/
.btn, a.btn {
  box-sizing: border-box;
  color: #fff;
  cursor: pointer;
  display: block;
  margin: 0 auto;
  text-align: center;
  text-decoration: none;
  transition: 0.3s all;
  max-width: 372px;
}
.btn.btn_link{
  max-width: 448px;
}
@media screen and (min-width: 768px) {
  .btn:hover{
    text-decoration: none;
    transform:scale(0.95);
    transition: 0.3s all;
  }
}
@media screen and (max-width: 767px) {
  .btn,a.btn{
    width: 49.6vw;
  }
  .btn.btn_dl{
    width: 53.333vw;
    /* width: 200px; */
  }
  .btn.btn_link{
    width: 74.667vw;
    /* width: 280px; */
  }
  .btn.btn_apply{
    width: 61.333vw;
    /* width: 230px; */
  }
}
.btn.none{
  pointer-events: none;
}

/* a.link_txt */
a.link_txt{
  color: #000;
  text-decoration: underline;
}
a.link_txt.txt_red{
  color: #e60020;
}
@media screen and (min-width: 768px) {
  a.link_txt:hover{
    text-decoration: none;
  }
}


/* ------ list_box -------*/
.list_box li{
  position: relative;
  line-height: 1.7;
  padding-left: 1.2em;
}
.list_box li::before{
  content: '●';
  position: absolute;
  left: 0;
}



/* =======================================
    以下、コンテンツ
======================================= */
/* ------ #mainvisual_box -------*/
#mainvisual_box{
  margin-bottom: 0;
  width: 100%;
}
#mainvisual_box .mainvisual{
  display: block;
  height: auto;
  width: 100%;
}
#mainvisual_box .link_box{
  position: absolute;
  width: 100%;
  bottom: 6.5%;
  z-index: 1;
}
@media screen and (max-width: 767px) {
  #mainvisual_box .link_box{
    bottom: 6%;
  }
}


/* ------ #period_box -------*/
#period_box{
  background-color: #f08658;
  margin-bottom: 0;
  width: 100%;
}
#period_box .container{
  padding: 30px 70px;
}
.ttl_period{
  background-color: #fff;
  color: #663507;
}
#period_box p img{
  margin: 0 auto;
}
@media screen and (max-width: 767px) {
  #period_box .container{
    padding: 5.333vw 10.667vw;
    /* padding: 20px 40px; */
  }
}

/* .txt_period */
@media screen and (max-width: 767px) {
  p.txt_period img{
    width: 80%;
    max-width: 350px;
  }
}

/* .txt_deadline */
@media screen and (max-width: 767px) {
  p.txt_deadline img{
    max-width: 441px;
  }
}


/* ------ #prize_box -------*/
#prize_box {
  background: url(../img/bg_prize.png) no-repeat bottom center / 100% auto;
  background-color: #ffec8e;
  margin-bottom: 40px;
  width: 100%;
}
#prize_box .container{
  padding: 20px 0 40px;
}
.ttl_prize{
  margin: 0 auto 20px;
  text-align: center;
}
.ttl_prize img{
  max-width: 96%;
}
.txt_prize{
  display: block;
  margin: 0 auto;
  margin-top: -40px;
  position: relative;
  height: auto;
  max-width: 84.4%;
  z-index: 1;
}
@media screen and (max-width: 767px) {
  #prize_box {
    background-size: 120% auto;
    margin-bottom: 10.667vw;
    /* margin-bottom: 40px; */
  }
  #prize_box .container{
    padding: 2.667vw 0 5.333vw;
    /* padding: 10px 0 20px; */
  }
  .ttl_prize{
    margin: 0 auto 4vw;
  }
  .txt_prize{
    margin-top: -5.333vw;
    /* margin-top: -20px; */
  }
}

/* --- prize_box --- */
.prize_list_box{
  margin: 0 auto;
  padding-left: 1%;
  width: 90%;
}
.prize_list_box li{
  margin-bottom: 20px;
  position: relative;
}
.prize_list_box li:last-child{
  background: none;
  padding-bottom: 0;
  margin-bottom: 0;
}
.prize_list_box img{
  display: block;
  height: auto;
  max-width: 100%;
  margin: 0 auto;
  width: 100%;
}
.prize_list_box .btn_youtube{
  position: absolute;
  top: 32%;
  right: 5%;
  z-index: 1;
  width: 23.407%;
}
.prize_list_box .btn_youtube img{
  width: 100%;
  height: auto;
}
@media screen and (max-width: 767px) {
  .prize_list_box li{
    margin-bottom: 2.667vw;
    /* margin-bottom: 10px; */
  }
}

/* --- link_box --- */
#prize_box .link_box{
  margin-top: 60px;
  text-align: center;
}
.ttl_prize_sub{
  margin-bottom: 1em;
  line-height: 1;
  text-align: center;
}
@media screen and (max-width: 767px) {
  #prize_box .link_box{
    margin-top: 13.333vw;
    /* margin-top: 50px; */
  }
  .ttl_prize_sub{
    margin-bottom: 2.667vw;
    /* margin-bottom: 10px; */
  }
  .ttl_prize_sub img{
    display: block;
    margin: 0 auto;
    width: 57.067%;
  }
}


/* ------ #how-to-apply_box -------*/
#how-to-apply_box .container{
  padding: 0 30px;
}
#how-to-apply_box .case{
  margin-bottom: 40px;
}
#how-to-apply_box .case:last-child{
  margin-bottom: 0;
}
@media screen and (max-width: 767px) {
  #how-to-apply_box .container{
    padding: 0;
  }
  #how-to-apply_box .case{
    margin-bottom: 10.667vw;
    /* margin-bottom: 40px; */
  }
}

/* top_box */
#how-to-apply_box .ttl_how-to-apply{
  line-height: 1;
  text-align: center;
}
#how-to-apply_box .ttl_how-to-apply img{
  max-width: 90%;
}

/* step_box */
.step_box{
  display: flex;
  flex-wrap: wrap;
}
.step_box li{
  text-align: center;
  margin-top: 60px;
  width: 50%;
}
.img_step{
  margin-bottom: 30px;
  height: 234px;
  width: auto;
}
@media screen and (max-width: 767px) {
  .step_box li{
    font-size: 10px;
    margin-top: 10.667vw;
    /* margin-top: 40px; */
  }
  .img_step{
    height: 37.333vw;
    /* height: 140px; */
    margin-bottom: 4vw;
    /* margin-bottom: 15px; */
  }
}

/* .caution_box */
.caution_box ul{
  border: 6px solid #e60020;
  padding: 15px 35px;
}
@media screen and (max-width: 767px) {
  .caution_box ul{
    border: 4px solid #e60020;
    padding: 4vw;
    /* padding: 15px; */
  }
}


/* ------ #application-terms_box -------*/
#application-terms_box .case{
  margin-bottom: 1.5em;
}
#application-terms_box .case:last-child{
  margin-bottom: 0;
}
#application-terms_box h3{
  font-size: 100%;
  margin-bottom: 0.25em;
}
#application-terms_box ol{
  padding-left: 1.25em;
  margin-bottom: 1em;
}
#application-terms_box .link_box{
  margin-top: 40px;
}
@media screen and (max-width: 767px) {
  #application-terms_box .link_txt{
    line-height: 1.2;
    display: inline-block;
    font-size: 99%;
  }
  #application-terms_box .link_box{
    margin-top: 5.333vw;
    /* margin-top: 20px; */
  }
}

/* --- list_info --- */
.list_info li{
  position: relative;
  padding-left: 1em;
}
.list_info li::before{
  content: "※";
  position: absolute;
  left: 0;
}


/* ------ #contact_box -------*/
#contact_box .case{
  margin-bottom: 40px;
}
#contact_box .case:last-child{
  margin-bottom: 0;
}
#contact_box .case.top_box{
  margin-bottom: 70px;
}
#contact_box p{
  color: #623118;
  margin-bottom: 1em;
}
#contact_box p.txt_top{
  font-size: 1.8rem;
  margin-bottom: 0.5em;
  text-align: center;
}
#contact_box a.txt_mail{
  color: #623118;
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  font-size: 3rem;
  font-weight: bold;
  margin-bottom: 1em;
  text-decoration: none;
}
#contact_box a.txt_mail::before{
  content:'';
  display: inline-block;
  background-image: url(../img/icon_mail.svg);
  background-size: 100% auto;
  background-repeat: no-repeat;
  margin-right: 12px;
  height: 27px;
  width: 38px;
}
@media screen and (min-width: 768px) {
  #contact_box a.txt_mail:hover{
    text-decoration: none;
    opacity: 0.7;
    -webkit-transition: 0.3s ease-in-out;
    -moz-transition: 0.3s ease-in-out;
    -o-transition: 0.3s ease-in-out;
    transition: 0.3s ease-in-out;
  }
}

#contact_box li{
  color: #623118;
  font-size: 1.5rem;
}

@media screen and (max-width: 767px) {
  #contact_box .case{
    margin-bottom: 8vw;
    /* margin-bottom: 30px; */
  }
  #contact_box .case.top_box{
    margin-bottom: 8vw;
    /* margin-bottom: 30px; */
  }
  #contact_box p, #contact_box li{
    font-size: min(3.467vw, 1.4rem);
    /* font-size: 13px; */
  }
  #contact_box p.txt_top{
    font-size: min(4vw, 1.6rem);
    /* font-size: 15px; */
    margin-bottom: 1.5em;
  }
  #contact_box a.txt_mail{
    font-size: min(4.533vw, 1.8rem);
    /* font-size: 17px; */
    line-height: 1.2;
    margin-bottom: 8vw;
    /* margin-bottom: 30px; */
    text-align: left;
  }
  #contact_box a.txt_mail::before{
    margin-right: 2.667vw;
    /* margin-right: 10px; */
    height: 5.867vw;
    /* height: 22px; */
    width: 8vw;
    /* width: 30px; */
  }
}


/* ------ coming soon -------*/
.comingsoon#pageWrapper::before{
  content: '';
  display: block;
  background-color: rgba(255, 255, 255, 0.7);
  position: absolute;
  top: 0;
  height: 100%;
  width: 100%;
  z-index: 1;
}
.txt_comingsoon{
  display: none;
  font-size: 8rem;
  font-weight: bold;
  position: absolute;
  top: 338px;
  text-align: center;
  width: 100%;
  z-index: 2;
}
.comingsoon .txt_comingsoon{
  display: block;
}
@media screen and (max-width: 767px) {
  .txt_comingsoon{
    font-size: 5rem;
    top: 200px;
  }
}