@charset "utf-8";
/* CSS Document */
html, body {
	overflow-x: hidden;
}
.fadein { opacity: 0; transition: all 0.5s; position: relative; top: 2em; }

.fadein.scrollin { opacity: 1; transform: translate(0, 0); top: 0em; }

main img{
  max-width: 100%;
}
main {
  background: url("../img/bg_main.jpg") center top repeat-y;
  padding-top:5vw;
}

main .inner{
  max-width:900px;
  margin:0 auto;
}
main .inner .in{
  width:77%;
  margin:0 auto;
}
main a{
  transition-duration: 0.3s;
}
main a:hover{
  opacity:0.7;
}
main .end_txt {
    color: #fcf903;
    font-size: 3.6rem;
    font-weight: bold;
    line-height: 1.8;
    text-align: center;
    width: 90%;
    height: 60%;
    background-color: rgba(0, 0, 0, .8);
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  z-index:1;
}
main #campaign01 .end_txt {
    height: 30%;
  transform: translate(-50%, 0);
  top: 1%;
}
main #campaign02 .end_txt {
    height: 9%;
  transform: translate(-50%, 0);
  top: 21%;
}

#mainimg{
  position:relative;
}
#mainimg .bg{
  opacity:0;
  transition-duration: 1s;
  font-size: 0px;
}
#mainimg .bg.show{
  opacity:1;
}
#mainimg h1{
  position:absolute;
  width:30vw;
  left:34.5vw;
  top:6.5vw;
  opacity:0;
}
#mainimg h1.show{
  opacity:0;
  animation: bounds 1000ms linear;
	animation-fill-mode: forwards;
}
@keyframes bounds {
	0% {
		opacity: 0;
		transform: scale(0);
	}
	8% {
		opacity: 1;
		transform: scale(1.2);
	}
	17% {
		opacity: 1;
		transform: scale(1.4);
	}
	34% {
		opacity: 1;
		transform: scale(1);
	}
	51% {
		opacity: 1;
		transform: scale(1.1);
	}
	68% {
		opacity: 1;
		transform: scale(1);}
	84% {
		opacity: 1;
		transform: scale(1.05);
	}
	100% {
		opacity: 1;
		transform: scale(1);
	}
}
#mainimg .img1{
  position: absolute;
  width: 7.5vw;
  top: 1vw;
  right: 23vw;
  opacity:0;
  transition-duration: 0.7s;
}
#mainimg .img1.show{
  opacity:1;
  right:31vw;
}
#mainimg .img2{
  position: absolute;
  width: 8.5vw;
  top: 17vw;
  left: 22vw;
  opacity:0;
  transition-duration: 0.7s;

}
#mainimg .img2.show{
  opacity:1;
  left:33vw;
}
#mainimg .img3{
  position: absolute;
  width: 10vw;
  top: 22vw;
  left: 68vw;
  opacity:0;
  transition-duration: 0.7s;
}
#mainimg .img3.show{
  opacity:1;
  left:58vw;
}

nav{
  background:url("../img/navi_bg.jpg") center bottom no-repeat;
  padding:3rem 0;
  position:relative;
}
nav p{
  margin-bottom:1em;
  text-align: center;
  font-size:3rem;
  background-color:#f36e4b;
  font-weight: bold;
  color:#FFF;
}
nav .flex{
  flex-wrap:nowrap;
}
nav .flex li:first-child{
  margin-left:-3%;
  margin-right:2%;
}
.main_bg{

  padding:10rem 0;
}

.campaign{
  background-color:#f4fae8;
  border-radius:1em;
  padding-bottom:5rem;
  position:relative;
}
.campaign h2{
  text-align: center;
  padding-top:5rem;
  position:relative;
}
.campaign h2 > img{
  width:38%;
}
.campaign h2 .left{
  position:absolute;
  left:-12%;
  top:0px;
  width:20.5%;
}
.campaign h2 .left.scrollin{
  left:0;
}
.campaign h2 .right{
  position: absolute;
  right: -15%;
  top: -35%;
  width: 17%;
}
.campaign h2 .right.scrollin{
  right: 5%;
}
.campaign h3{
  text-align: center;
  margin-bottom:1.5em;
}
.campaign .period{
  width:77%;
  margin:0 auto;
  background-color:#f68262;
  font-size:2.4rem;
  color:#FFF;
  text-align: left;
  padding:0.5em 1.5em 0.5em 9.5em;
  box-sizing: border-box;
  font-weight:bold;
}
.campaign .period img{
  position:absolute;
  top:0px;
  left:16%;
  
}
.campaign .period span{
  font-size:0.7em;
}
.campaign .period dl{
  border-top:2px dotted #FFF;
  padding-top:0.3em;
}
.campaign .period dl .flex{
  justify-content: flex-start;
}
.campaign .period dl dt{
  width:5em;
  min-width: 5em;
  position:relative;
  font-size:1.8rem;
  text-align: left;
  padding-top:0.3em;
}
.campaign .period dl dt:after{
  content:":";
  position:absolute;
  right:0px;
  top:0.3em;
}
.campaign .period dl dd{
  padding-left:0.3em;
}
.campaign .present{
  width:77%;
  margin:0 auto 5rem;
  text-align: center;
}
.campaign .present h4{
  text-align: center;
  padding:5rem 0 1rem;
}
.campaign .present .prize{
  flex-wrap: nowrap;
  justify-content: center;
}
.campaign .present .prize li{
  margin:0 2px;
}
.campaign .present .name{
  text-align: center;
  padding:2.3rem 0;
}
.campaign .present .detail{
  display:inline-block;
}
.campaign .present .detail dl div{
  display:flex;
  align-items: start;
  margin-bottom:0.5em;
}
.campaign .present .detail dl div dt{
  color:#FFF;
  font-size:1.35rem;
  background-color:#f06d49;
  width:4em;
  border-radius: 3em;
}
.campaign .present .detail dl div dd{
  font-size:1.4rem;
  color:#f06d49;
  font-weight: bold;
  margin-left:0.7em;
  text-align:left;
}
.campaign .present .detail .caption{
  font-size:1.3rem;
  color:#6e706f;
}
.campaign h5{
  text-align: center;
  padding:7rem 0 3rem;
}
.campaign .condition h5 + p{
  font-size:3rem;
  text-align: center;
  font-weight: bold;
  margin-bottom:1em;
}
.campaign .condition .package{
  text-align: center;
  top:0px;
  margin-right:-20%;
}
.campaign .condition .package.scrollin{
  margin-right:0;
}
.campaign .condition .package + p{
  text-align: center;
  font-size:3rem;
  line-height: 1.4;
  font-weight: bold;
  margin:1em 0;
}
.campaign .condition .package + p span{
  color:#f06d49;
}
.campaign .condition .list{
  border:solid 1px #000;
  background-color:#FFF;
  padding:1.5em 4%;
}
.campaign .condition .list table{
  width:100%;
}
.campaign .condition .list tr{
  border-bottom:1px dashed;
}
.campaign .condition .list th{
  color:#00864e;
  font-size:1.8rem;
  text-align: center;
}
.campaign .condition .list td{
  font-size:2rem;
  font-weight: bold;
  padding:0.5em 0;
}
.campaign .condition .list td:last-child{
  background-color:#f4fae8;
  color:#00864e;
  text-align: center;
}
.campaign .condition .list + p{
  font-size:1.4rem;
  padding-left:1em;
  text-indent:-1em;
  margin-top:0.5em;
}
.campaign .howto{
  text-align: center;
}
.campaign .howto h5 + p{
  font-size:2.4rem;
  font-weight: bold;
  margin-bottom:1em;
  text-align: left;
}
.campaign .btn_form{
  margin-top:3em;
  text-align: center;
}
/*`.campaign .btn_form a { display: inline-block; color: #fff; font-size: 2.8rem; font-weight: bold; text-align: center; padding: 0.4em 3em 0.8em; background: #d0d0d0; border-radius: 3em; box-shadow: 0 6px 0 0 #9e9e9e; transition-duration: .3s; }*/
.campaign .btn_form a { display: inline-block; color: #fff; font-size: 2.8rem; font-weight: bold; text-align: center; padding: 0.4em 3em 0.8em; background: #fd7939 url(../../img/campaign_collab_icon_btn.png) no-repeat center right 1em / 1.2em; border-radius: 3em; box-shadow: 0 6px 0 0 #c14e17; transition-duration: .3s; }
.campaign .btn_form a:hover { box-shadow: none; transform: translateY(6px); opacity:1; }
.campaign .btn_form a span{
  font-size:0.6em;
}
.campaign .flow dl{
  border-bottom:1px dashed;
}
.campaign .flow dl div{
  display:flex;
  flex-wrap: nowrap;
  border-top:1px dashed;
  padding:1em 0;
}
.campaign .flow dl div dt{
  min-width:6rem;
  text-align: center;
}
.campaign .flow dl div dd{
  font-size:2.4rem;
  font-weight: bold;
}
.campaign .flow .caption{
  margin-top:1em;
  margin-bottom:3em;
}
.campaign .flow .caption li,.campaign .detail .caption li{
  font-size:1.4rem;
  padding-left:1em;
  text-indent:-1em;
  text-align:left;
}
.campaign .flow .img{
  text-align: center;
  top:0px;
  margin-right:-20%;
}
.campaign .flow .img.scrollin{
  margin-right:0px;
}
.campaign .flow .btn_form a {
    background: #00864e url("../img/arrow_green.png") no-repeat center right 1em / 1.2em;
    box-shadow: 0 6px 0 0 #005733;
}
.campaign .flow .btn_form a:hover { box-shadow: none; transform: translateY(6px); opacity:1; }

.campaign .kiyaku{
  border:solid 1px;
  margin-top:8rem;
}
.campaign .kiyaku .title{
  background-color:#f9f5e3;
  text-align: center;
  padding:3rem 0 2rem;
  border-bottom:1px solid;
}
.campaign .kiyaku .title p{
  font-size:1.4rem;
  font-weight: bold;
  margin-top:0.5em;
}
.campaign .kiyaku .scroll{
  background-color:#FFF;
  padding:1em 1.5em;
  overflow: scroll;
  overflow-x: hidden;
  height: 20em;
}
.campaign .kiyaku .scroll a{
  text-decoration: underline;
}
.campaign .kiyaku .scroll a:hover{
  text-decoration: none;
  opacity: 1;
}

#campaign02{
  margin-top:12rem;
  
}
#campaign02 h2{
  padding-top:6rem;
}
#campaign02 h2 .right {
    position: absolute;
    right: -16%;
    top: -29%;
    width: 34%;
}
#campaign02 h2 .right.scrollin {
    right: -6%;
}
#campaign02 .period {
    background-color: #2f5b8b;
  text-align: center;
}
#campaign02 h4{
  text-align: center;
  padding:2rem 0;
}
#campaign02 h4 + ul{
  display:flex;
  justify-content: center;
  margin-right:-20%;
  top:0px;
}
#campaign02 h4 + ul.scrollin{
  margin-right:0px;
}
#campaign02 h4 + ul li{
  width:32.222%;
  margin:0 2%;
  position:relative;
}
#campaign02 h4 + ul li a:hover{
  opacity:1;
}
#campaign02 h4 + ul li span{
  position:absolute;
  width:61.378%;
  top:3%;
  right:-42%;
}
#campaign02 .attention{
  background-color: #FFF;
  border: solid 1px;
  padding: 1.5em 4% 1.5em;
  margin-top: 5rem;
}
#campaign02 .attention a{
  text-decoration: underline;
}
#campaign02 .attention a:hover{
  opacity:1;
  text-decoration: none;
}
#campaign02 .anchor{
  background:url(../img/anchor_bg.png) center top;
  display:flex;
  justify-content: center;
  padding:3rem 0;
  margin-top:8rem;
  margin-bottom:7rem;
}
#campaign02 .anchor li a{
  font-size:2rem;
  color:#19aa9b;
  display:block;
  width:13em;
  text-align: center;
  background-color:#FFF;
  padding:0.5em 0;
  border-radius: 3em;
  border:solid 2px;
  margin:0 0.5em;
}
#campaign02 #que{
  background-color:#FFF;
  border:solid 1px;
  padding:3em 4% 1.5em;
  margin-bottom:3.5rem;
}
#campaign02 #que h5{
  padding-top:0px;
}
#campaign02 #que dl{
  border-bottom:1px dashed;
}
#campaign02 #que dl dt{
  font-size:2rem;
  font-weight: bold;
  padding:0.8em 2em 0.8em 0.5em;
  border-top:1px dashed;
  background:url("../img/icon_plus.png") 98% center/0.75em no-repeat;
  cursor: pointer;
}
#campaign02 #que dl dt.btn_on{
  background:url("../img/icon_mainus.png") 98% center/0.75em no-repeat;
  background-color:#cfe7da;

}
#campaign02 #que dl dt span{
  color:#008649;
}
#campaign02 #que dl dd{
  padding:1em 0;
  display:none;
}
#campaign02 #use{
  background-color:#FFF;
  border:solid 1px;
  padding:3em 4% 1.5em;
  margin-bottom:3.5rem;
}
#campaign02 #use h5{
  padding-top:0px;
}
#campaign02 #use dt{
  font-size:2rem;
  padding:0.5em 0;
  border-top:1px dashed;
  border-bottom:1px dashed;
  font-weight: bold;
  margin-bottom:0.5em;
}
#campaign02 #use dd + dt{
  margin-top:1.5em;
}


@media screen and (max-width: 767px) {
  
  main {
    padding-top: 8vw;
    background-size: 300%;
  }  
  
    main .end_txt {
        font-size: 2.2rem;
        width: 95%;
        height: 83%;
    }
  main #campaign02 .end_txt {
    height: 14%;
    top: 14%;
}
  #mainimg h1 {
    width: 74vw;
    left: 12vw;
    top: 24vw;
  }
  #mainimg .img1 {
    width: 23vw;
    top: 4vw;
    right: -10vw;
  }
  #mainimg .img1.show {
      opacity: 1;
      right: 4vw;
    left:auto;
  }
  #mainimg .img2 {
      width: 27vw;
      top: 46vw;
      left: -10vw;
  }
  #mainimg .img2.show {
    left: 0;
}
  #mainimg .img3 {
    width: 27vw;
    top: 61.5vw;
    right: -10vw;
}
  #mainimg .img3.show {
    right: 1vw;
    left: auto;
}
  nav {
    background: url(../img/navi_bg.jpg) 0 bottom/cover no-repeat;
    padding: 3rem 0;
}
  nav p{
  font-size:2.4rem;
}
.main_bg {
    /*background: url(../img/bg_top_sp.jpg) center top no-repeat, url(../img/bg_main_sp.jpg) center 50vw repeat-y;*/
    padding: 3rem 0;
}
  .campaign h2 {
    padding-top: 7rem;
    margin-bottom:0.5em;
}
.campaign h2 .right.scrollin {
    right: 2%;
}
.campaign h2 .right {
    right: -15%;
    top: -20%;
    width: 22%;
}
  .campaign h2 .left {
    width: 31.222%;
}
  
  .campaign h2 > img {
    width: 55.888%;
}
  .campaign h3{
    width: 92%;
    margin: 0 auto;
  }
  .campaign h3 img{
    
  }
  .campaign .period {
    width: 90%;
    font-size: 1.8rem;
    padding: 0.5em 0.2em 0.5em 3.5em;
    margin-top:5vw;
}
  .campaign .period img {
    left: 1%;
    width:15%;
}
  .campaign .period dl {
    margin-top:0.3em;
}
.campaign .period dl dt {
    font-size: 1.3rem;
}
  .campaign .period dl dd {
    font-size: 1.5rem;
}
  .campaign .present {
    width: 90%;
    margin: 0 auto 3rem;
}
  .campaign .present h4 {
    padding: 3rem 2% 0rem;
}
.campaign .present .prize {
  display:block;
  padding:0 16%;
}
  .campaign .present .name {
    padding: 2.3rem 0;
}
  .campaign .present .detail dl div dt {
    font-size: 1.2rem;
}
  .campaign .present .detail dl div dd {
    font-size: 1.4rem;
}
  .campaign .present .detail .caption li{
    font-size: 1.2rem;
    padding-left:1em;
    text-indent:-1em;
    text-align: left;
}
    
  .campaign h5 {
    padding: 4rem 0 2rem;
}
  .campaign h5 img{
    height: 12vw;
    width:auto;
  }
  main .inner .in {
    width: 90%;
}
  .campaign .condition h5 + p {
    font-size: 1.8rem;
}
  .campaign .condition .package + p {
    font-size: 1.6rem;
}
  .campaign .condition .list th {
    white-space: nowrap;
    font-size: 1.4rem;
    padding-bottom:0.5em;
}
  .campaign .condition .list td {
    font-size: 1.4rem;
}
.campaign .condition .list + p {
    font-size: 1.2rem;
}
  .campaign .howto{
    margin-bottom:5rem;
  }
  .campaign .howto h5 + p {
    font-size: 1.7rem;
    margin-bottom:2em;
}
  .campaign .howto h5 + p + img{
    width:60%;
  }
  .campaign .btn_form {
    margin-top: 1em;
}
  .campaign .btn_form a {
    font-size: 1.5rem;
    padding: 0.4em 2.5em 0.8em;
}

.campaign .flow dl div dt {
    min-width: 4rem;
  width:4rem;
    padding:0 0.7rem;
}
  .campaign .flow dl div dd {
    font-size: 1.6rem;
}
  .campaign .flow .btn_form a {
    font-size:1.8rem;
    padding: 0.4em 3.5em 0.8em;
}
  .campaign .kiyaku .title img{
    height: 12vw;
    width:auto;
  }

  #campaign02 h2 {
    padding-top: 10rem;
}
  #campaign02 h2 .right.scrollin {
    right: -3%;
}
#campaign02 h2 .right {
    right: -16%;
    top: -29%;
    width: 49%;
}
  #campaign02 h4 {
    padding: 2rem 7%;
}
  #campaign02 h4 + ul{
    display:block;
    padding:0 20%;
  }
  #campaign02 h4 + ul li{
    width:100%;
    margin:0px;
    margin-bottom:5vw;
  }
  #campaign02 h4 + ul li span {
    width: 56.378%;
    top: -8%;
    right: -37%;
}
  #campaign02 .attention{
  margin-top: 3rem;
}
  #campaign02 .anchor li a {
    font-size: 1.4rem;
    width: 11em;
}
  #campaign02 .anchor {
    padding: 1.5rem 0;
    margin-top: 5rem;
    margin-bottom: 5rem;
}
  #campaign02 #que {
    padding-top:3rem;
}
  #campaign02 #que h5 img{
    height: 6vw;
}
  #campaign02 #que dl dt {
    font-size: 1.45rem;
    padding-left:1.4em;
    text-indent:-1.4em;
}
  #campaign02 #que dl dd{
    font-size: 1.45rem;
  }
  #campaign02 #use h5 img{
    height: 6vw;
}

  
  
  
}