@charset "utf-8";
/* CSS Document */
html,body{
	overflow-x:hidden;
}
body{
  color:#1a1919;
}
body a{
  color:#1a1919;
}
img{
	vertical-align:bottom;
  backface-visibility: hidden;
  max-width:100%;
}
.inner {
    max-width: 1100px;
}
.inner_s {
    max-width: 900px;
  margin:0 auto;
}
.bold{
  font-weight: bold;
}
main a{
  transition-duration: 0.3s;
}
main a:hover{
  opacity:0.7;
}
#main_v{
  height: 696px;
  position:relative;
  background:url("../img/mainv_bg.png") center top/cover repeat-x;
}
#main_v .heart{
  position:absolute;
}
#main_v .heart1{
      top: 213px;
    left: -169px;
  animation-delay: 0.2s;
}
#main_v .heart2{
    top: 146px;
    left: -9px;
  animation-delay: 0.6s;
}
#main_v .heart3{
    top: 349px;
    left: -80px;
  animation-delay: 0.4s;
}
#main_v .heart4{
    top: 148px;
    right: -21px;
}
#main_v .heart5{
    top: 240px;
    right: -170px;
  animation-delay: 0.3s;
}
#main_v .heart6{
    top: 358px;
    right: -82px;
  animation-delay: 0.5s;
}
#main_v .copy{
  top: 87px;
    right: 21%;
  position:absolute;
}
#main_v .book{
        top: 158px;
    right: 10%;
  position:absolute;
  animation: wobbling_3 0.8s ease-in-out infinite alternate, wobbling_4 1.1s ease-in-out infinite alternate;
}
@keyframes wobbling_1 {
	0% {
		margin-left: 8px;
	}

	100% {
		margin-left: 0px;
	}
}
@keyframes wobbling_2 {
	0% {
		margin-top: 0px;
	}

	100% {
		margin-bottom: 8px;
	}
}
@keyframes wobbling_3 {
	0% {
		margin-right: 8px;
	}

	100% {
		margin-right: 0px;
	}
}
@keyframes wobbling_4 {
	0% {
		margin-top: 0px;
	}

	100% {
		margin-top: 8px;
	}
}

#main_v h1{
  padding:10rem 0 0rem 0;
  display:inline-block;
  margin-left:12%;
  opacity:0;
}

.scrollin {
    -webkit-animation-name: bounceIn;
    animation-name: bounceIn;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}

.campaign_end{
  background-color:#f7f6e3;
  text-align: center;
  padding:2rem 0 2rem 0;
}


.lead{
  background:url("../img/lead_bg.png") center top no-repeat;
  background-color:#f7f6e3;
  text-align: center;
  padding:5rem 0 8rem 0;
}

#stamp{
  background:url("../img/stamp_bg.png") center 7rem no-repeat;
  background-color:#f7f6e3;
  padding-bottom:10rem;
}
#stamp h2{
  margin-bottom:8rem;
  text-align: center;
  opacity:0;
}
#stamp h3{
  margin-bottom:2rem;
  text-align: center;
}
#stamp h3 + div{
  text-align: center;
}
#stamp h3 + div p{
  display: inline-block;
  margin-bottom:2em;
  text-align: left;
}
#stamp .number{
  border:solid 7px #fdf12f;
  box-shadow: 0.3em 0.3em 0em 0em rgb(0 0 0 / 20%);
  border-radius:0.5em;
  background-color:#fcf9d4;
}
#stamp .number h4{
  background-color:#fdf12f;
  padding:2.5rem 0;
  text-align: center;
}
#stamp .number div{
  text-align: center;
  padding:3rem 2% 4rem;
}
#stamp .number div .caption{
  margin-top:3em;
  font-size:1.4rem;
  color:#692000;
}
#stamp .number div .btn{
  margin-top:2rem;
}
#present{
  background:url("../img/present_bg.png") center top repeat-x;
  padding-top:29rem;
  padding-bottom:14rem;
  text-align: center;
}
#present h2{
  margin-bottom:5rem;
  opacity:0;
}
#present li{
  margin-bottom:4rem;
  position:relative;
}
#present li p{
  position:absolute;
  right:-4rem;
  top:-16rem;
      animation: wobbling_3 0.8s ease-in-out infinite alternate, wobbling_4 1.1s ease-in-out infinite alternate;
}
#present li:last-child{
  margin-bottom:0px;
}
#present li:last-child p{
  right:auto;
  left:-9rem;
  top:auto;
  bottom:-3rem;
        animation: wobbling_1 0.8s ease-in-out infinite alternate, wobbling_2 1.1s ease-in-out infinite alternate;

}

#oubo{
  background:url("../img/oubo_bg.png") center top no-repeat;
  padding-top:14rem;
  padding-bottom:10rem;
  background-color:#fc937c;
}
#oubo h2{
  text-align: center;
  margin-bottom:0.5em;
  opacity:0;
}
#oubo h3{
  text-align: center;
}
#oubo h3 + p{
  color:#692000;
  text-align: center;
  padding:1em 0;
}
#oubo .step{
  border:solid 4px #00a75c;
  border-radius:1em;
  background-color:#FFF;
  padding:2rem 7% 5rem;
  margin-bottom:5.5rem;
}
#oubo .step .howto li{
  display:flex;
  padding:2rem 0;
  border-bottom:1px solid #666666;
}
#oubo .step .howto li span{
  font-size:2.4rem;
  color:#FFF;
  min-width: 1.5em;
  min-height: 1.5em;
  max-height: 1.5em;
  padding-top:0.1em;
  display:flex;
  justify-content: center;
  align-items: center;
  border-radius:50%;
  background-color:#e60012;
}
#oubo .step .howto li p{
  font-size:2.2rem;
  margin-left:0.5em;
}
#oubo .step .img{
  text-align: center;
  padding:3rem 0;
}
#oubo .step .caption{
  margin-bottom:1em;
}
#oubo .step .caption li{
  font-size:1.5rem;
  padding-left:1em;
  text-indent:-1em;
}
#oubo .step .btn{
  text-align: center;
}
#oubo .box{
  border:solid 4px #00a75c;
  margin-bottom:5.5rem;
}
#oubo .box h4{
  text-align: center;
  background-color:#00a75c;
  padding:2rem 0;
}
#oubo .box > div{
  background-color:#FFF;
  padding:3rem 7%;
}
#oubo .box table{
  width:100%;
  margin-bottom:1em;
}
#oubo .box table th{
  font-size:1.8rem;
  background-color:#c6e259;
  padding:0.5em;
  border:solid 2px #FFF;
}
#oubo .box table td{
  font-size:1.8rem;
  background-color:#fbf6dc;
  padding:0.5em;
  border:solid 2px #FFF;
  text-align: center;
  vertical-align: middle;
}
#oubo .box table td span{
  font-size:0.8em;
}
#oubo .box .caption li{
  font-size:1.5rem;
  color:#e60012;
  padding-left:1em;
  text-indent:-1em;
}
#oubo .box.kiyaku > div{
  box-sizing: border-box;
  height: 250px;
  overflow-y: scroll;
}
#oubo .box.kiyaku h5{
  text-align: center;
  font-size:1.8rem;
  font-weight: bold;
  margin-bottom:1em;
  font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "メイリオ", sans-serif;
}
#oubo .box.kiyaku .ttl{
  text-align: center;
  font-size:1.5rem;
  font-weight: bold;
  margin-bottom:1.5em;
}
#oubo .box.kiyaku .ttl2{
  text-align: center;
  font-size:1.8rem;
  font-weight: bold;
  margin-bottom:1em;
  background-color:#e70012;
  border-radius:0.2em;
  color:#FFF;
  padding:0.3em 0 0.2em 0;
}
#oubo .box.kiyaku p{
  margin-bottom:1em;
}
#oubo .box.kiyaku .flex{
  justify-content: flex-start;
}

#message{
  background:url("../img/message_bg.jpg") center top repeat;
  padding-top:10rem;
  padding-bottom:10rem;
  text-align: center;
}
#message .profile{
  margin-top:3.5rem;
}

#character{
  background:url("../img/character_bg_bottom.png") center bottom repeat-x , url("../img/character_bg.png") center top repeat-x;
  padding-top:16.5rem;
  padding-bottom:25.5rem;
  margin-bottom:7rem;
}
#character h2{
  text-align: center;
  margin-bottom:2em;
  opacity:0;
}
#character h3{
  text-align: center;
}
#character h3 + p{
  text-align: right;
  margin-top:-5rem;
  margin-bottom:2rem;
}
#character ul{
  width:95%;
  margin:0 auto;
  
}
#character ul li{
	width: 48.305%;
	height:413px;
  margin-bottom:3rem;
	text-align:center;
	position: relative;
	top: 0;
	left: 0;
	float: left;
	cursor: pointer;
}


#character ul li img{
	width: 100%;
	height: 100%;
	position: absolute;
    left: 0px;
    top: 0px;
    opacity:1.0;
	border-radius: 10px;
}
@keyframes a1_1 {
    0% {
        transform: rotateY(0deg)
    }
    50% {
        transform: rotateY(90deg);
        opacity:1.0;
    }
    51% {
        opacity:0.0;
    }
    100% {
        opacity:0.0;
    }
}
@keyframes a1_2 {
    0% {
        transform: rotateY(0deg)
        opacity:0.0;
    }
    50% {
        transform: rotateY(90deg);
        opacity:0.0;
    }
    51% {
        opacity:1.0;
    }
    100% {
        transform: rotateY(0deg);
        opacity:1.0;
    }
}

.ani1_1{
	animation: a1_1 0.5s forwards;
}
.ani1_2{
	animation: a1_2 0.5s forwards;
}

@keyframes a2_1 {
    0% {
        opacity:0.0;
        transform: rotateY(0deg)
    }
    50% {
        transform: rotateY(90deg);
        opacity:0.0;
    }
    51% {
        opacity:1.0;
    }
    100% {
        transform: rotateY(0deg);
        opacity:1.0;
    }
}
@keyframes a2_2 {
    0% {
        transform: rotateY(0deg)
        opacity:1.0;
    }
    50% {
        transform: rotateY(90deg);
        opacity:1.0;
    }
    51% {
        opacity:0.0;
    }
    100% {
        opacity:0.0;
    }
}



.ani2_1{
	animation: a2_1 0.5s forwards;
}
.ani2_2{
	animation: a2_2 0.5s forwards;
}

#character .banner{
  text-align: center;
  margin-top:7rem;
}


/*------------------
TOPに戻るボタン
--------------------*/
  #back-top {
             position: fixed;
             bottom: 3rem;
			 right:2rem;
			 z-index:9998;
			 display:none;
  }
  #back-top a {
             width: 5.1rem;
             display: block;
             text-decoration: none;
             color: #bbb;
  }
  #back-top a:hover {
             color: #000;
  }
  /* arrow icon (span tag) */
  #back-top span {
             width: 5.1rem;
             height: 5.1rem;
             display: block;
             background: url(../../img/btn_top.png) center center /contain no-repeat;
  }
	#back-top.fixed{
             bottom: 6rem;
	}

@media screen and (min-width: 768px) and (max-width: 1100px) {
  #main_v {
    height: 63vw;
    background: url(../img/mainv_bg.png) center top/177% no-repeat;
}  
  #main_v h1 {
      padding: 9vw 0 0rem 0;
      width: 50%;
  }
  #main_v .copy {
        top: 8vw;
    right: 20%;
    width: 30%;
}
    #main_v .book {
      top: 15vw;
    right: 12%;
    width: 27%;
  }
  #main_v .heart2 {
    top: 11vw;
}
#main_v .heart3 {
    top: 33vw;
}
  #main_v .heart4 {
    top: 13vw;
}
  #main_v .heart6 {
    top: 33vw;
}
  
  
  

}

@media screen and (min-width: 768px) and (max-width: 900px) {
  

  
  #present li p {
    width:25%;
    top: -9rem;
  }
  #character ul li {
    width: 45vw;
    height: 45vw;
  }
  #character h3 + p {
    margin-top: 2rem;
    margin-bottom: 2rem;
}
  .inner_s {
    padding: 0em 1.2rem;
}
  
  
}




@media screen and (max-width: 767px) {
  .inner {
    padding: 0rem 4vw;
}
  .inner_s {
    padding: 0rem 4vw;
}
#main_v {
  height: 186vw;
    background: url(../img/maintitle_sp.png) center top/100% no-repeat;
}
  #main_v .inner{
    padding:0px;
  }
  #main_v h1 {
    padding: 11vw 0 0rem 0;
    text-align: center;
    width:86%;
    margin:0 auto;
    display:block;
}
  
  #main_v .book {
    top: 81vw;
    width: 60%;
    right: 20%;
    z-index:1;
}
  .campaign_end {
    padding:1rem 0 3rem 0;
}
  .lead{
    padding-top:1rem;
    padding-bottom:5rem;
  }
  #main_v .heart{
    width:22vw;
  }
  #main_v .heart1 {
    top: 130vw;
    left: 9vw;
}
  #main_v .heart2 {
        top: 80vw;
    left: 0vw;
}
  #main_v .heart3 {
    top: 107vw;
    left: -3vw;
}
  #main_v .heart4 {
    top: 75vw;
    right: 24vw;
}
  #main_v .heart5 {
        top: 97vw;
    right: 0vw;
}
  #main_v .heart6 {
        top: 123vw;
    right: 2vw;
}
  
  
  
  
  
#stamp h2 {
    margin-bottom: 3rem;
}
  
#stamp h3 {
    margin-bottom: 4rem;
}
  #stamp .number h4 {
    padding: 1rem 10%;
}
  #stamp .number div {
    padding: 3rem 5% 3rem;
}
  #stamp .number div .caption{
    text-align: left;
    padding-left:1em;
    text-indent: -1em;
    font-size:1.3rem;
  }
  #stamp .number div .btn {

    padding:0 12%;
}
  #present {
    background: url(../img/present_bg_top.png) center top/100% no-repeat , url(../img/present_bg_bottom.png) center bottom/100% no-repeat;
    background-color:#41c6f3;
    padding-top: 14rem;
    padding-bottom: 10rem;
}
  #present h2{
    margin-bottom:3rem;
    padding:0 8%;
  }
  
  #oubo {
    padding-top: 7rem;
    padding-bottom: 1px;
    background-color: #fc937c;
}
  #oubo h2{
    padding:0 8%;
  }
  #oubo h3 + p {
    text-align: left;
    font-size:3vw;
    padding-left:1em;
    text-indent:-1em;
}
  #oubo .step {
    border: solid 3px #00a75c;
    padding: 1rem 5% 4rem;
}
  #oubo .step .howto li span{
    font-size:2rem;
  }
  #oubo .step .howto li p {
    font-size: 1.8rem;
}
  #oubo .step .caption{
    margin-bottom:2em;
  }
  #oubo .step .caption li {
    font-size: 1.3rem;
}
  #oubo .box {
    border: solid 3px #00a75c;
}
  #oubo .box h4 {
    padding:1rem 24% 1.5rem;
}
  #oubo .box > div {
    padding: 3rem 5%;
}
  #oubo .box table th {
    font-size: 1.2rem;
}
  #oubo .box table td {
    font-size: 1.4rem;
}
  #oubo .box .caption li {
    font-size: 1.2rem;
}
  #oubo .box.kiyaku h4 {
    padding: 1rem 7% 1.5rem;
}
  #oubo .box.kiyaku > div {
    height: 80vw;
    font-size:1.4rem;
}
  #message {
    background: url(../img/message_bg.jpg) center top repeat;
    padding-top: 7rem;
    padding-bottom: 7rem;
}
  #character {
    background: url(../img/character_bg_bottom_sp.png) center bottom/100% no-repeat , url(../img/character_bg_top.png) center top/100% no-repeat;
    background-color:#37aa76;
    padding-top: 10.5rem;
    padding-bottom: 14.5rem;
    margin-bottom: 5rem;
}
  #character h2{
    padding:0 8%;
    margin-bottom: 1em;
  }
  #character h3{
    padding:0 5%;
  }
  #character h3 + p {
    text-align: center;
    margin-top: 3rem;
    margin-bottom: 2rem;
    padding:0 32%;
}
  #character ul {
    width: auto;
}
  #character ul li{
    width: 83vw;
    height: 83vw;
    margin:0 auto 3rem;
}
  #character .banner {
    margin-top: 3rem;
}
  
  
/*------------------
TOPに戻るボタン
--------------------*/
#back-top {
    bottom: 8rem;
    right: 1rem;
}
	#back-top.fixed{
    bottom: 8rem;
	}
}