@charset "utf-8";

/* common */
.pc_display {
  display: inline !important;
}
.sp_display {
  display: none !important;
}
.fadein { opacity: 0; transition: all 0.5s; position: relative; top: 2em; }

.fadein.scrollin { opacity: 1; transform: translate(0, 0); top: 0em; }
main {
  font-family: '游ゴシック体', YuGothic, '游ゴシック', 'Yu Gothic', 'メイリオ',
    sans-serif;
  font-weight: normal;
  overflow: hidden;
  display: block;
  background: url(../img/bg01.jpg) left top repeat;
}
main .inner {
  max-width: 110rem;
  margin: 0 auto;
  position: relative;
}
main img {
  max-width: 100%;
}
main a:hover {
  opacity: 0.7;
}
section {
  display: block;
}
h1,
h2 {
  margin-bottom: 0;
}
h2,
h3 {
  font-family: '游ゴシック体', YuGothic, '游ゴシック', 'Yu Gothic', 'メイリオ',
    sans-serif;
}
sup {
  position: relative;
  font-size: 0.8em;
  top: 0;
}

/* parts */
.header_wrap {
    background-color: #FFF;
}
main .main_bg {
    position: fixed;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: -1;
    background: url(/jagarico2930/img/mainv_bg.png) center 0px no-repeat;
}
main .content {
    width: 616px;
    margin: 0 auto;
    position: relative;
    z-index: 100;
}

main h1{
  font-size:0px;
}

#main_v{
  position:relative;
}
#main_v ul{
  position:absolute;
  bottom:4%;
  left:0px;
  width:100%;
  display:flex;
  justify-content: center;
  height: 33.4%;
}
#main_v ul li{
  background:url("../img/btn_vote01.png") 0 0/contain no-repeat;
  width:39.067%;
  height: 100%;
  margin:0 2%;
  transition-duration: 0.3s;
}
#main_v ul li:hover{
  background:url("../img/btn_vote01_hover.png") 0 0/contain no-repeat;
}
#main_v ul li:nth-of-type(2){
  background:url("../img/btn_vote02.png") 0 0/contain no-repeat;
}
#main_v ul li:nth-of-type(2):hover{
  background:url("../img/btn_vote02_hover.png") 0 0/contain no-repeat;
}
#main_v ul li a{
  display:block;
  width:100%;
  height: 100%;
  font-size:0px;
}

#lead{
  background:url("../img/lead_bg.jpg") 0 0/100% no-repeat;
  padding-top:11rem;
  padding-bottom:10rem;
}
#lead p{
  margin-bottom:6rem;
}

#vote01{
  background:url("../img/bg_kirin.png") 0 0/100% repeat-y;
  padding-top:6rem;
  padding-bottom:11rem;
}
#vote01 h3{
  position:relative;
}
#vote01 h3 span{
  position:absolute;
  left:0px;
  top:-12rem;
}
#vote01 h3 + p{
  font-size:2.2rem;
  text-align: center;
  line-height: 1.3;
  font-weight: bold;
  margin-top:1em;
  margin-bottom:0.5em;
}
#vote01 h3 + p span{
  color:#EB0100;
}
#vote01 .slide{
  
}
#vote01 .slide .kirin{
  font-size:0px;
}
#vote01 .slide .bg{
  background-color:#FFF;
  border-left:3px solid;
  border-right:3px solid;
  border-bottom:3px solid;
  width:538px;
  margin:0 auto;
  box-sizing: border-box;
  position:relative;
  left:-1px;
}
#vote01 .slide .slick-slide {
  margin: 0 1rem;
}
#vote01 .slide .slick-slide p{
  text-align: center;
  font-size:2rem;
  font-weight: bold;
  margin-top:1em;
  line-height: 1.3;
  min-height: 2.8em;
}

.slide .btn{
  text-align: center;
  padding:3rem 0;
  font-size:1.8rem;
  font-weight: bold;
}
#vote01 .slide .btn img{
  width:52%;
}
main a{
  transition-duration: 0.3s;
}

#vote02{
  background:url("../img/bg_green.png") 0 0 repeat;
  padding-top:6rem;
  padding-bottom:10rem;
}
#vote02 h3{
  position:relative;
}
#vote02 h3 span{
  position:absolute;
  left:0px;
  top:-12rem;
}
#vote02 h3 + p{
  font-size:2.2rem;
  text-align: center;
  line-height: 1.3;
  font-weight: bold;
  margin-top:-2em;
  margin-bottom:2.5em;
  color:#FFF;
}
#vote02 h3 + p span{
  color:#fde021;
}
#vote02 .slide .bg{
  background-color:#FFF;
  border:3px solid;
  width:538px;
  margin:0 auto;
  box-sizing: border-box;
  position:relative;
  left:-1px;
}
#vote02 .slide .bg .kirin{
  width:95%;
  margin:0 auto -6rem;
  position:relative;
  top:-8rem;
}
#vote02 .slide .slide_wrap ul {
  display:flex!important;
  justify-content: space-between;
  flex-wrap: wrap;
  margin:0 auto;
  padding:0 6%;
}
#vote02 .slide .slide_wrap ul li{
  width:46%;
  margin-bottom:2rem;
}
#vote02 .slide .slide_wrap ul li p{
  font-size:2rem;
  text-align: center;
  line-height: 1.3;
  margin-top:0.5em;
  font-weight: bold;
}
#vote02 .slide .btn{
  text-align: center;
  padding:3rem 0;
}
#vote02 .slide .btn img{
  width:52%;
}
#vote02 .slide .bg .illust{
      position: absolute;
    bottom: -3rem;
    left: -5%;
    width: 21%;
}
#notice{
}
#attention{
  background-color:#FFF;
}
#attention h3{
  background-color:#000;
  text-align: center;
  color:#FFF;
  font-size:3rem;
  padding:1.8em 0 1em;
  font-weight: bold;
}
#attention h4{
  text-align: center;
  background:url("../img/attention_bg.png") center center/100% no-repeat;
  font-size:2.8rem;
  font-weight: bold;
  padding:2em 0;
  color:#000;
}
#attention h4 span{
  font-size:0.6em;
  display:block;
  padding-left:1em;
  text-indent:-1em;
  line-height: 1.5;
  text-align: left;
  width:62%;
  margin:1em auto 0;
}
#attention ul{
  width:85%;
  margin:0 auto;
}
#attention ul li{
  font-size:2.3rem;
  font-weight: bold;
  padding-left:1em;
  text-indent:-1em;
  margin-bottom:0.5em;
}
#attention ul li:last-child{
  margin-bottom:0px;
}
main ul.banner{
  background-color:#FFF;
  padding:9rem 0;
  text-align: center;
}
main ul.banner li{
  margin-bottom:0.5em;
}

#result{
  background:url("../img/result_bg.png");
}
#result h2{
  padding:3rem 0 5rem;
}
#result h4{
  padding:4rem 0 6rem;
}
#result h4.pt0{
  padding:0 0 6rem;
}


@media screen and (min-width: 768px) and (max-width: 1100px) {
  .pc_display {
    display: block !important;
  }
  main img {
    width: 100%;
  }
  main .inner {
    padding-left: 5%;
    padding-right: 5%;
  }
}

@media screen and (max-width: 767px) {
  /* common */
  .pc_display {
    display: none !important;
  }
  .sp_display {
    display: block !important;
  }
  main .inner {
    width: 100%;
  }
  main img {
    width: 100%;
  }
  main .inner {
    padding-left: 4vw;
    padding-right: 4vw;
  }

  /* parts */
    main .main_bg {
        background: none;
    }
  main .content {
        width: 100%;
    }
  #lead {
    padding-top: 8rem;
    padding-bottom: 5rem;
}
  #lead p {
    margin-bottom: 4rem;
}
  #vote01 {
    padding-bottom: 8rem;
}
#vote01 h3 span {
    top: -9rem;
}
  #vote01 h3 + p {
    font-size: 1.6rem;
    margin-top: 0.5em;
}
  #vote01 .slide .bg {
    border-left: 0.7vw solid;
    border-right: 0.7vw solid;
    border-bottom: 0.7vw solid;
    width: 87.8vw;
    left: -0.3vw;
}
  #vote01 .slide .slick-slide p{
    font-size:1.6rem;
  }
  #vote02 {
    padding-bottom: 6rem;
}
  #vote02 h3 span {
    top: -10rem;
}
  #vote02 h3 + p {
    font-size: 1.6rem;
    margin-top: -2em;
    margin-bottom: 2.5em;
}
  #vote02 .slide .bg {
    border: 0.7vw solid;
    width: 87.8vw;
    left: -0.3vw;
}
  #vote02 .slide .bg .kirin {
    top: -6rem;
}
  #vote02 .slide .slide_wrap ul li p{
    font-size:1.6rem;
  }
  #vote02 .slide .btn {
    padding:2rem 0;
}
  #attention h3 {
    font-size: 2.4rem;
}
  #attention h4 {
    font-size: 1.8rem;
}
  #attention ul li {
    font-size: 1.6rem;
}
  
  main ul.banner {
    padding: 6rem 10%;
}

  

}
