@charset "UTF-8";

/*ローカル確認用　キャンペーン用補正 1056⇒1100pxへ */

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;
  list-style: none;
}

body{
  background:#DE2C20;
}

@media (min-width: 768px), print {
    .mod-wrap {
        width: 1056px;
        min-width: 1056px;
        margin: 0 auto;
        text-align: center;
    }


    .mod-wrap,.campaign .mod-wrap {
        width: 1100px;
        min-width: 1100px;
        margin: 0 auto;
    }




}


@media (max-width: 767px) {
    .mod-wrap-sp {
        padding-right: 0px;
        padding-left: 0px;
        text-align: center;
    }


    .area-contents img {
        max-width: 100%;

    }




}




/*ローカル確認用 ここまで*/

.area-contents {
  text-align: center;
}

.area-contents .mod-wrap{
  font-family:'Noto Sans JP', sans-serif;

}


@font-face
{
font-family: あおぞら明朝 bold;
src: url('AozoraMincho-bold_web.woff2')
     format("woff2");
}

@font-face
{
font-family: あおぞら明朝 Heavy;
src: url('AozoraMinchoHeavy_web.woff2')
     format("woff2");
}


#campaignBody {
   background:#DE2C20 url(../img/bg_wave.png) center top repeat;
   color: #362E2E;
   position: relative;
   padding-bottom:150px;
}

#headerArea{
  background:#DC281B;
  font-size: 0;
}

#headerArea img.pc{

}
#campaignBody #shinramen{
  position: relative;
}

#campaignBody #shinramen .star{
  position: absolute;
}

@keyframes kirakira {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
}

#campaignBody #shinramen #sparkle1{
  left:18%;
  top:5%;
  animation: kirakira 1.2s ease-in-out 1s infinite none;
}

#campaignBody #shinramen #sparkle2{
  right:16%;
  bottom:31%;
  animation: kirakira 1.2s ease-in-out 0.5s infinite none;
}

#campaignBody #title{
  margin-top:-50px;
  margin-bottom:40px;
  position: relative;
  transform:scale(1);
  opacity: 1;
  z-index: 20;
}
#campaignBody #fukidashi{
  position: absolute;
  top:-55px;
  right:50px;

}
#campaignBody .cloudmv{

}
#campaignBody #cloud1{
  position: absolute;
  top:-50px;
  left:130px;
  width: 230px;height: auto;
  transition: ease;
  animation: cloudmv 6s linear 2s infinite alternate both;
}

#campaignBody #cloud2{
  position: absolute;
  bottom:-20px;
  right:70px;
  width: 220px;height: auto;
  animation: cloudmv 7s linear 2s infinite alternate-reverse both;
}

@keyframes cloudmv {
  0% {
    transform: translate(0, 0);
  }

  33% {
    transform: translate(-30px, 0);
  }

  66% {
    transform: translate(0, 0);
  }

  100% {
    transform: translate(30px, 0);
  }
}

#campaignBody #pepper{
  position: absolute;
  bottom:-50px;
  width: 170px;height: auto;
  left:50%;
  transform: translateX(-50%);
}

#campaignBody #quesbody #cloud1{
  top:90px;
  left:20px;
  width: 180px;
}
#campaignBody #quesbody.result #cloud1{
  top:-10px;

}


#campaignBody #quesbody #cloud2{
  bottom:-30px;
  right:20px;
  width: 180px;
}






#campaignBody::before{
  content:'';
  display: block;
  height: 46px;
  width: 100%;
  background: url(../img/bar_top.png) center top repeat-x;

}


#campaignBody::after{
  content:'';
  display: block;
  height: 58px;
  width: 100%;
  background: url(../img/bar_bottom.png) center top repeat-x;
  position: absolute;
  bottom:0

}

#campaignBody img.btn{
  position: relative;
}
#campaignBody img.btn:hover{
  opacity: 0.8;
}


#campaignBody #quesbody{

  display: block;
  width: 950px;
  margin:125px auto 50px;
  background: #FFA988 url(../img/ques_bg.png) left bottom no-repeat;
  border-radius: 20px;
  box-shadow: 1px 2px 5px 3px rgba(70, 0, 0, 0.5);
  position: relative;
  box-sizing: border-box;
  /*min-height: 600px;*/
  display: flex;
  justify-content: center;
  align-items: center;
  padding:260px 30px 230px 70px;

}
#campaignBody #quesbody:before{
  position: absolute;
  width: 300px;
  height: 125px;
  background:url(../img/header_logo.png) center top/100% auto;
  content:'';
  top:-100px;;
  left:50%;
  transform: translateX(-50%);
  z-index: 50;
}
#campaignBody #quesbody.ans{
    padding:160px 50px 90px 50px;
    display: block;
}

#campaignBody #quesbody.ans p span{
  transform-origin: center;
  transform: scaleX(1);
}
#campaignBody #quesbody header{
  color:#FFF;
  height: 229px;
  position: absolute;
  top:-100px;
  left:50%;
  width: 875px;
  transform: translateX(-50%);
  background: url(../img/head_bg.png) center bottom/100% auto no-repeat;
}




#campaignBody #quesbody.result{
  display: block;
  padding: 50px 0px 100px 0px;

}
#campaignBody #quesbody.result:before{
  top:-60px;

}
#campaignBody #quesbody.result header{
  position: relative;
  top:0;
  height: 170px;
  margin:2em 0;

}

#campaignBody #quesbody.result #anataha{
  position: relative;
  width: 680px;
  height: 150px;

  margin:45px auto 20px;

}

#campaignBody #quesbody.result #anataha[num="0"]{
  background:url(../img/seikai0.png) center top/100% auto no-repeat;
}
#campaignBody #quesbody.result #anataha[num="1"]{
  background:url(../img/seikai1.png) center top/100% auto no-repeat;
}
#campaignBody #quesbody.result #anataha[num="2"]{
  background:url(../img/seikai2.png) center top/100% auto no-repeat;
}
#campaignBody #quesbody.result #anataha[num="3"]{
  background:url(../img/seikai3.png) center top/100% auto no-repeat;
}
#campaignBody #quesbody.result #anataha[num="4"]{
  background:url(../img/seikai4.png) center top/100% auto no-repeat;
}
#campaignBody #quesbody.result #anataha[num="5"]{
  background:url(../img/seikai5.png) center top/100% auto no-repeat;
}

#campaignBody #quesbody.result p{
  width: 100%;
  display: block;

}

#campaignBody #quesbody #shinlevel{
  position: absolute;
  bottom:28px;
  left:37px;
  width: 130px;
}

#campaignBody #quesbody.result #shinlevel{
  position: absolute;
  bottom:26px;
  left:30px;
  width: 134px;
}
#campaignBody #quesbody.result #bgcircle{

  display: block;
  width: 100%;
  height: auto;
  position: absolute;
  top:0px;
  left:0;

}
#campaignBody #quesbody #level{
  position: absolute;
  width: 502px;
  height: 52px;
  left:166px;
  bottom:50px;
  background: #44637A;
}

#campaignBody #quesbody #level #bar{
  position: absolute;
  top:0px;
  left:0px;
  height: 100%;
    transform: scaleX(1);
    transform-origin: left;
    opacity: 1;

}



#campaignBody #quesbody #shinmark{
  position: absolute;
  z-index: 30;
  margin-top:-14px;
  width: 84px;
  /**/
}



@keyframes shinmv {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
 }




#campaignBody #quesbody #level #cover{
  position: relative;
  z-index: 10;
  height: 100%;
  width: 100%;
}
#campaignBody .num{
font-family: "Alegreya", serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
}

#campaignBody header:after{
  display: inline-block;
  content: attr(percent2) ;
  background: url(../img/percent.png) right 27px / 38px auto no-repeat;
  font-size: 75px;
  line-height: 1;
  z-index: 40;
  position: absolute;
  width: auto;
  left:684px;
  bottom:45px;
  padding-right:45px;
}

#campaignBody header#percent3:after{
  display: inline-block;
  content: attr(percent) ;
  background: url(../img/percent.png) right 27px / 38px auto no-repeat;
  font-size: 75px;
  line-height: 1;
  z-index: 40;
  position: absolute;
  width: auto;
  left:684px;
  bottom:45px;
  padding-right:45px;
}

#campaignBody #quesbody.result #level{
  position: absolute;
  left:166px;
  bottom:64px;
  background: #44637A;
}


#campaignBody #quesbody.result header:after{
  font-size: 80px;
  padding-right:48px;
  background: url(../img/percent.png) 97% 65% / 44px auto no-repeat;
  bottom:55px;
  min-width:6rem;
  min-height: 5rem;
  left:700px;
}

#campaignBody #quesbody.result header #countup{
  display: block;
  background:none;
  font-size: 80px;
  padding-right:48px;
  line-height: 1;
  z-index: 40;
  position: absolute;
  width: auto;
  left:684px;
  bottom:55px;
  padding-right:45px;
  color:#FFF;
  min-width:6rem;
  display: none;

}


#campaignBody header[percent="0"] #bar{
  width: 0%;
}
#campaignBody header[percent="0"] #shinmark{
  left:-2%;
}

#campaignBody header[percent="10"] #bar{
  width: 10%;
}
#campaignBody header[percent="10"] #shinmark{
  left:2%;
}
#campaignBody header[percent="20"] #bar{
  width: 20%;
}
#campaignBody header[percent="20"] #shinmark{
  left:12%;
}
#campaignBody header[percent="30"] #bar{
  width: 30%;
}
#campaignBody header[percent="30"] #shinmark{
  left:22%;
}
#campaignBody header[percent="40"] #bar{
  width: 40%;
}
#campaignBody header[percent="40"] #shinmark{
  left:32%;
}
#campaignBody header[percent="50"] #bar{
  width: 50%;
}
#campaignBody header[percent="50"] #shinmark{
  left:42%;
}
#campaignBody header[percent="60"] #bar{
  width: 60%;
}
#campaignBody header[percent="60"] #shinmark{
  left:52%;
}
#campaignBody header[percent="70"] #bar{
  width: 70%;
}
#campaignBody header[percent="70"] #shinmark{
  left:62%;
}
#campaignBody header[percent="80"] #bar{
  width: 80%;
}
#campaignBody header[percent="80"] #shinmark{
  left:72%;
}
#campaignBody header[percent="90"] #bar{
  width: 90%;
}
#campaignBody header[percent="90"] #shinmark{
  left:80%;
}
#campaignBody header[percent="100"] #bar{
  width: 100%;
}
#campaignBody header[percent="100"] #shinmark{
  left:88%;
}




#campaignBody #quesbody ques{
  display: block;
  position: absolute;
  width: 86px;
  height: 250px;
  left:55px;
  margin-top:15px;
  z-index: 10;
}

#campaignBody #quesbody.ques p{
  position: relative;
  transform:scaleX(1);
  transform-origin: left;
  opacity: 1;
}
#campaignBody #quesbody p span+span{
  content:'';
  display: block;
  position: absolute;
  background:#2D2727;
  width: 100%;
  height: 100%;
  top:0;
  transform-origin: left;
  transform:scaleX(0);
}

#campaignBody #quesbody.ques p{

}

#campaignBody #quesbody ques[class="1"]{
  background: url(../img/ques1.png) center top / 100% auto no-repeat;
}
#campaignBody #quesbody ques[class="2"]{
  background: url(../img/ques2.png) center top / 100% auto no-repeat;
}
#campaignBody #quesbody ques[class="3"]{
  background: url(../img/ques3.png) center top / 100% auto no-repeat;
}
#campaignBody #quesbody ques[class="4"]{
  background: url(../img/ques4.png) center top / 100% auto no-repeat;
}
#campaignBody #quesbody ques[class="5"]{
  background: url(../img/ques5.png) center top / 100% auto no-repeat;
}

#campaignBody #quesbody p{
  font-family: あおぞら明朝 Heavy;
  font-size: 44px;
  line-height: 1.6;
  word-break: auto-phrase;
}



#campaignBody #quesbody.ans p span{
  font-size: 90%;
}
#campaignBody #quesbody.ans p.kaisetsu span{
  font-size: 76%;

}

#campaignBody #quesbody.ans p.kaisetsu img{
  margin:0.6rem 0;

}
#campaignBody #quesbody p.seikai:before{
  content:'';
  display: block;
  width: 170px;
  height: 70px;
  background: url(../img/seikaiha.png) center top/100% auto no-repeat;
  margin:0 auto;
}
#campaignBody #quesbody.ans p.seikai span{
  background:#FDD2C2;
  display: block;
  margin:0rem 1rem 3rem;
  padding:2rem 4rem;
  font-family: あおぞら明朝 Heavy;

}

#campaignBody #quesbody p.kaisetsu:before{
  content:'';
  display: block;
  width: 140px;
  height: 70px;
  background: url(../img/kaisetsu.png) center top/100% auto no-repeat;

  margin:0 auto;

}

#campaignBody #btnArea{
  display: inline-block;
}
#campaignBody #btnArea li{



}
#campaignBody #btnArea li a{
   width: 100%;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  line-height: 1.2;
  font-family: あおぞら明朝 Heavy;
  color:#362E2E;
  text-decoration: none;
  font-size:36px;
  background:#FFDD01 -webkit-linear-gradient(#FEEA96 0%, #FFD113 50%, #FFDD01 100%);
  text-shadow: -1px -2px 1px rgba(255, 255, 255, 0.83);
  border:6px solid #362E2E;
  border-radius: 2em;
  margin:1rem 0 0.5rem;
  box-shadow: 0px 0px 8px 4px rgba(253, 234, 192, 0.7),inset 0 -3px 0 2px rgba(194, 118, 24, 0.8);
  min-width: 6em;
  box-sizing: border-box;

}
#campaignBody #btnArea li{

}
#campaignBody #btnArea li span{
  padding:1rem 4rem 1.3rem;
  line-height: 1;
  word-break: auto-phrase;
}

#campaignBody #btnArea a img.next{
  height: 120px;
  }
#campaignBody #btnArea li a:hover,
#campaignBody #btnArea a img:hover{
  opacity:0.8;
}


footer:after{
  display: block;
  background: #352E2E;
  content:'Copyright © SKYLARK GROUP All rights reserved.';
  color:rgba(253, 210, 194, 0.35);
  text-align: center;
  line-height: 4;
  font-size: 80%;
  font-family: sans-serif;
}

/*** animation ****/

@keyframes blink {
  50% {
    opacity: 0.0;
  }
}

.pulse {
  animation: shinmv 1.3s linear 0s infinite alternate-reverse both;
}

.blink {
  animation: blink 0.7s step-start 0s infinite;
}

.black {
  color:rgba(28, 22, 22, 0) !important;
}

.count-up {
    position: relative;
    transform: scaleX(0);
    transform-origin: left;
    opacity: 0;
}

.slide-up {
    position: relative;
    transform: translateY(100px);
    opacity: 0;
}
.slide-down {
    position: relative;
    transform: translateY(-100px);
    opacity: 0;
}


.center{
  text-align: center;
}

.mg20{
margin:20px;
}

.mg30{
  margin:30px;
}

.pd20{
  padding: 20px;
}
.pd10{
  padding: 10px;
}
.pd1rem{
  padding:1rem;
}



hr{
  margin:0;
  border: none;
  box-sizing: content-box;

}



.clearfix::after {
   content: "";
   display: block;
   clear: both;
}

hr.clearfix{
  height: 1px;
}



.area-contents .pc { display:inline;}
.area-contents .sp { display: none !important;}


@media (max-width: 767px) {


  #campaignBody::before{
    height: 30px;
    background-size:cover;
  }

  #campaignBody::after{
    height: 36px;
    background-size:cover;
  }

  #campaignBody #shinramen{
    position: relative;
  }
  #campaignBody #shinramen #sparkle1{
    width: 10vw;
    left:6vw;
    top:2vw;
  }

  #campaignBody #shinramen #sparkle2{
    width: 9vw;
    right:4vw;
    bottom:10vw;
}

  #campaignBody #title{
  margin-top:-10vw;
  margin-bottom:0vw;
  position: relative;
  overflow: hidden;
  }

  #campaignBody #fukidashi{
  width:57vw;
  right:-1vw;
  top:0vw;
  z-index: 20;
  }

  #campaignBody #cloud1{
    width: 26vw;
    top:-1vw;
    left:2.5vw;
    z-index: 15;
  }

  #campaignBody #cloud2{
    width: 26vw;
    bottom:1vw;
    right:10vw;
  }

  #campaignBody img.btn{
    width:70vw;
    max-width: 360px;
    }

  #campaignBody #quesbody{

    width: 100%;
    margin:22vw auto 12vw;
    background: #FFA988 url(../img/ques_bg.png) 50% bottom / 130% auto no-repeat;
    border-radius: 0px;
    box-shadow: 1px 2px 5px 3px rgba(79, 36, 36, 0.7);
    position: relative;
    min-height: auto;
    padding:18vw 3vw 20vw 3vw;
    display: block;



  }
  #campaignBody #quesbody:after{
       content: "";
       display: block;
       clear: both;
  }


  #campaignBody #quesbody.ans{
  padding:17vw 2vw 15vw;
  }
  #campaignBody #quesbody.result{
    padding:5vw 2vw 10vw;
  }
  #campaignBody #quesbody header{

  top:-15vw;
  width: 97vw;

  }



  #campaignBody #quesbody ques{

  width: 100%;
  height: 14vw;
  position: relative;
  margin-top:0;
  left:auto;
  display: block;
  }

  #campaignBody #quesbody ques[class="1"]{
  background: url(../img/ques1_sp.png) center top / 23vw auto no-repeat;
  }
  #campaignBody #quesbody ques[class="2"]{
  background: url(../img/ques2_sp.png) center top / 23vw auto no-repeat;
  }
  #campaignBody #quesbody ques[class="3"]{
  background: url(../img/ques3_sp.png) center top / 23vw auto no-repeat;
  }
  #campaignBody #quesbody ques[class="4"]{
  background: url(../img/ques4_sp.png) center top / 23vw auto no-repeat;
  }
  #campaignBody #quesbody ques[class="5"]{
  background: url(../img/ques5_sp.png) center top / 23vw auto no-repeat;
  }

  #campaignBody #quesbody p{
  font-size: clamp(16px, 6vw, 37px);
  }



  #campaignBody #btnArea li span{
  padding:1rem 2rem 1.3rem;
  }

  #campaignBody #btnArea li a{
  font-size: clamp(16px, 5.5vw, 32px);
  border: 4px solid #362E2E;
  min-width: 5em;

  }

  #campaignBody #quesbody #shinlevel{
    position: absolute;
    bottom:3vw;
    left:5vw;
    width: 14vw;

  }
  #campaignBody #quesbody #level{
  position: absolute;
  width: 57vw;
  height: 6vw;
  left:20vw;
  top:14vw;
  }
  #campaignBody #quesbody.result #level{
  left:20.4vw;
  top:19vw;
  }


  #campaignBody #quesbody #shinmark{
    width: 11vw;
    margin-top:-2.5vw;
  }
  #campaignBody #quesbody.result #shinmark {
    margin-top:-1.8vw;

    }

  #campaignBody #quesbody header{
    height: 25vw;
  }
  #campaignBody #quesbody.result header{
    height: 30vw;

    margin:5vw 0;
    background: url(../img/head_bg.png) center bottom/100% 102% no-repeat;
  }
  #campaignBody #quesbody:before{

    width: 42vw;
    height: 17vw;
    top:-20vw;;
  }

  #campaignBody #quesbody.result:before{

    top:-8vw;;
  }

  #campaignBody header:after{
    background: url(../img/percent.png) right 2.4vw / 0.6em auto no-repeat;
    font-size:clamp(12px, 9vw, 65px);
    position: absolute;
    height: 1em;
    left:78vw;
    top:11.3vw;
    padding-right:0.6em;

  }

  #campaignBody #quesbody.result #bgcircle{
    top:15vw;
    }

  #campaignBody #quesbody.result #level{
  position: absolute;
  left:10vw;
  width: 61vw;
  height: 6.8vw;
  top:auto;
  bottom:6.4vw;
  }

  #campaignBody #quesbody.result #shinlevel{
    left:50%;
    transform: translateX(-50%);
    bottom:14vw;
    width: 19vw;

  }

  #campaignBody #quesbody.result header:after{
    font-size:clamp(12px, 11vw, 65px);
    background: url(../img/percent.png) 95% 70% / 0.4em auto no-repeat;
    right:auto;
    top:auto;
    bottom:5.4vw;
    width: auto;
    min-width: auto;
    padding-right:0.47em;
    left:84.5vw;
    box-sizing: border-box;
    min-height: auto;
  }


  #campaignBody #quesbody.result header #countup{
    font-size:clamp(12px, 11vw, 65px);
      right:auto;
    top:auto;
    bottom:5.4vw;
    width: auto;
    min-width: auto;
    padding-right:0.47em;
    left:73.5vw;
    box-sizing: border-box;
  }
  #campaignBody #quesbody.result #anataha{

    width:90vw;
    height: 21vw;
    margin:12vw auto 0vw;

  }

  #campaignBody #quesbody #cloud1{
    top:5vw;
    left:3vw;
    width: 21vw;
  }

  #campaignBody #quesbody.result #cloud1{
    top:-3vw;
    left:3vw;
    width: 21vw;
  }

  #campaignBody #quesbody #cloud2{
    bottom:-6vw;
    right:8vw;
    width: 25vw;
  }

  @keyframes cloudmv {
    0% {
      transform: translate(-5vw, 0);
    }
    100% {
      transform: translate(8vw, 0);
    }
  }

  #campaignBody #pepper{
  bottom:-8vw;
  width: 20vw;height: auto;}

  #campaignBody #quesbody.ans p.seikai span{
    padding:1.5rem 0rem;
  }
  #campaignBody #quesbody p.seikai:before{
  width: 28vw;
  height: 10vw;
  }
  #campaignBody #quesbody p.kaisetsu:before{
  width: 23vw;
  height: 10vw;
    }

  #campaignBody #quesbody.ans p.kaisetsu img{
    }
  #campaignBody #btnArea a img.next{
    height: 18vw;
  }

  .area-contents .pc { display: none !important;}
  .area-contents .sp { display: inline !important;}


  }




/*アニメーション用 ***/

.zoom-in{
transform:scale(0);
opacity: 0;
transform: translateY(40px);
}

.slide-up{
  position: relative;
  transform: translateY(100px);
  opacity: 0;
}

.fade-in{
  transform:scale(1);
  opacity: 0;
}
.prizea, .prizeb ,.prizec{
  transform: translateY(130px);
  opacity: 0;
}

#campaignBody #btnArea a {
  display: inline-block;
  line-height: 0;
}

a:active {
  transform: scale(0.95) translateY(3px);
  transition: transform 0.1s ease;
}

li a:active {
  box-shadow: 0px 0px 4px 2px rgba(253, 234, 192, 0.5),
              inset 0 1px 4px rgba(0, 0, 0, 0.2);
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}


a img.next:active {
  transform: scale(0.95) translateY(3px);
  filter: brightness(0.9);
  transition: transform 0.1s ease, filter 0.1s ease;
}

a:active img.next {
  transform: scale(0.95) translateY(3px);
  filter: brightness(0.9);
  transition: transform 0.1s ease, filter 0.1s ease;
}