@charset "utf-8";

/*----------------------------------------------------------------------
★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★
index.html ホーム・。・゜★・。・。☆・゜・。・゜。・。・゜★・。・。☆
★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★
------------------------------------------------------------------------*/
/*----------------------------------------------------------------------
初回ポップアップ・。・゜★・。・。☆・゜・。・゜。・。・゜★・。・。☆
------------------------------------------------------------------------*/
.overlay {
  display: none;
  width: 100%;
  height: 100%;
  background:url(../img/stripe.png) repeat center / 3%,#00d2e5;
  position: fixed;
  z-index: 7;
  }
  .btn_area {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  background: #fff;
  text-align: center;
  z-index: 8;
  }
  .btn_area .ttl {
  font-weight: bold;
  }
  .btn_area p {
  padding: 15px;
  }
  .btn_area button {
    position: absolute;
    right: 0%;
    top: -16%;
    display: block;
    margin: 0 auto;
    border: none;
    width: 8%;
  }
  .btn_area button:hover{
    background-color: transparent;
  }
  @media only screen and (max-width: 700px){
    .btn_area iframe{
      width:640px;
      height:360px;
    }
  }
  @media only screen and (max-width: 720px){
    .btn_area iframe{
      width:426px;
      height:240px;
    }
  }
 
  @media only screen and (max-width: 480px){
    .btn_area iframe{
      width:304px;
      height:171px;
    }
  }
  .btn_area button  img{
    width: 100%;
  }
  .btn_area button:hover {
    opacity: 0.5 ;
  }
/*----------------------------------------------------------------------
メインビジュアルPC・。・゜★・。・。☆・゜・。・゜。・。・゜★・。・。☆
------------------------------------------------------------------------*/
.mv_pc{
  width: 100%;
  padding: 0;
  background: url("../img/home_main_bg.jpg") 0 0 no-repeat;
  background-size: 100%;
}

.mv{
  position: relative;
}
/*キャラ*/
.mv_chara{
    text-align: center;
    opacity: 0;
    animation: fadeIn 1s linear;
  animation-fill-mode: both;
  animation-delay:1s;
  z-index: 2;
  }
  
  @keyframes fadeIn{
    0%{
      opacity: 0;
    }
    100%{
      opacity: 1;
    }
  }
.mv_chara img{
  width:100%;

}

/*花*/
.mv_flower{
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  animation: fadeIn 1s linear;
  animation-fill-mode: both;
  animation-delay:2s;
}

@keyframes fadeIn{
  0%{
    opacity: 0;
  }
  100%{
    opacity: 1;
  }
}

.mv_flower img{
  width:100%;
}
.mv_contents{
  opacity: 0;
  animation: fadeIn 1s linear;
  animation-fill-mode: both;
  animation-delay:3s;
  z-index: 10;
}

@keyframes fadeIn{
  0%{
    opacity: 0;
  }
  100%{
    opacity: 1;
  }
}
/*---------左側---------*/
.mv_contents_left{
  width: 20%;
  margin:2%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
}
/*ロゴ*/
.mv_logo img{
  width:100%;
}
/*twitter*/
iframe.twitter-timeline {
  width : auto !important;
}
.mv_twitter{
  padding:4% 0 10% 0 ;
}
.mv_twitter_inner{
  position: relative;
  transform: translateX(0px);
  opacity: 1;
  height:200px;
}
@media only screen and (max-width: 900px){
  .mv_twitter_inner{
    height:100px;
  }
}
.twitter{
  position: absolute;
  background-color: #fff;
  border: solid 2px #333333;
  margin: 0 auto;
  background-image: url(../img/twitter_bg.png);
  background-repeat: no-repeat;
  background-position: left top;
  background-size: auto 30%;
  z-index: 10;
}
@media only screen and (max-width: 900px){
  .twitter{
    height: 100px;
    overflow: hidden;
  }
}
.twitter_bg{
  position: absolute;
  width:100%;
  height:100%;
  background: url(../img/dot_fff.png) repeat center / 6%,#00d2e5;
  bottom: -20px;
  right: -10px;
  z-index: 1;
}

@media only screen and (max-width: 900px){
  .twitter_bg{
    position: absolute;
    width: 110%;
    height: 100%;
    background: url(../img/dot_fff.png) repeat center / 6%,#00d2e5;
    bottom: -6%;
    right: -16%;
    z-index: 1;
  }
}
@media only screen and (max-width: 820px){
  .twitter_bg{
    bottom: -6%;
    right: -20%;
  }
}
@media only screen and (max-width: 800px){
  .twitter_bg{
    width: 124%;
    height: 100%;
    bottom: -6%;
    right: -28%;
  }
}
/*movie*/
.mv_movie{
  padding: 4% 0 12% 0;
}
.mv_movie img{
  width:100%;

}
.mv_movie img:hover {
  opacity: 0.5 ;
}
/*ボタン*/
.mv_btn img{
  width:100%;
}
.mv_btn img:hover {
  opacity: 0.5 ;
}
/*---------右側---------*/
.mv_contents_right{
  width:15%;
  position: absolute;
  bottom: 4%;
  right: 0%;
  margin-right:2%;
  z-index: 3;
}
@media only screen and (max-width: 900px){
  .mv_contents_right{
    width:14%;
    position: absolute;
    bottom: 4%;
    right: 0%;
    margin-right:2%;
    z-index: 3;
  }
}
.mv_contents_right img{
  width:100%;
 
}
/*----------------------------------------------------------------------
メインビジュアルSP・。・゜★・。・。☆・゜・。・゜。・。・゜★・。・。☆
------------------------------------------------------------------------*/
.mv_sp{
  padding: 0;
  background: url("../img/home_main_bg_sp.jpg") 0 0 no-repeat;
  background-size: 100vw;
  width: 100%;
  height: auto;
}
.mv_inner_sp{
  position: relative;
}
.mv_chara_sp img{
  width:100%;
}
.mv_flower_sp{
  position: absolute;
  top: 0;
  width: 100%;
}
.mv_flower_sp img{
  width: 100%;
}
.mv_contents_bottom_sp{
position: absolute;
bottom:4%;
left: 4%;
}
.mv_logo_sp{
  width: 60%;
}
.mv_logo_sp img{
  width: 100%;
}

.mv_btn_sp{
  width: 60%;
}
.mv_btn_sp img{
  width: 100%;
}
.mv_btn_sp img:hover {
  opacity: 0.5 ;
}
.mv_movie_sp{
  position: absolute;
  right: 4%;
  width: 30%;
  bottom:4%;
  z-index: 2;
}
.mv_movie_sp img{
  width: 100%;
}

.mv_catch_sp{
  position: absolute;
  right:0;
  bottom:16%;
  width:24vw;
}
.mv_catch_sp img{
  width:100%;
}
/*キャラ*/
.mv_chara_sp{
  text-align: center;
  opacity: 0;
  animation: fadeIn 1s linear;
animation-fill-mode: both;
animation-delay:1s;
z-index: 2;
}

@keyframes fadeIn{
  0%{
    opacity: 0;
  }
  100%{
    opacity: 1;
  }
}
/*花*/
.mv_flower_sp{
opacity: 0;
animation: fadeIn 1s linear;
animation-fill-mode: both;
animation-delay:2s;
}

@keyframes fadeIn{
0%{
  opacity: 0;
}
100%{
  opacity: 1;
}
}
.mv_contents_sp,.mv_movie_sp{
opacity: 0;
animation: fadeIn 1s linear;
animation-fill-mode: both;
animation-delay:3s;
}

@keyframes fadeIn{
0%{
  opacity: 0;
}
100%{
  opacity: 1;
}
}
/*SPtwitter*/
.twitter_sp{
  background: #feeeac;
  position: relative;
  width: 100%;
}
.twitter_sp .wrapper:after {
  content: '';
  display: block;
  width: 100%;
  height: 31px;
  background: url(../img/bg_tri_yellow.png) center top repeat-x;
  background-size: auto 100%;
  position: absolute;
  left: 0;
  top: -15px;
  z-index: 1;
}
.twitter_sp h1{
width: 40%;
margin:0 auto;
padding-top:6%;
}
.twitter_sp h1 img{
  width:100%;
}
.mv_twitter_inner_sp{
  transform: translateX(0px);
  opacity: 1;
}

.twitter_box_sp{
  position: relative;
  z-index: 2;
  background-color: #fff;
  border: solid 2px #333333;
  margin: 0 auto;
  background-image: url(../img/twitter_bg.png);
  background-repeat: no-repeat;
  background-position: left top;
  background-size: auto 30%;
}
.twitter_box_sp iframe{
  width: 100% !important;
}

.twitter_bg_sp{
  position: absolute;
  width:100%;
  height:100%;
  background: url(../img/dot_fff.png) repeat center / 6%,#00d2e5;
  bottom: -17px;
    right: 0px;
  z-index: 1;
}
/*----------------------------------------------------------------------
本文PC・。・゜★・。・。☆・゜・。・゜。・。・゜★・。・。☆
------------------------------------------------------------------------*/
.wrapper{
  width:80%;
  margin:0 auto;
  padding:10% 0;
}

@media only screen and (min-width: 1280px){
	.wrapper{
    width:60%;
    margin:0 auto;
  }
}
@media only screen and (max-width: 700px){
	.wrapper{
    width:96%;
    margin:0 auto;
    padding: 10% 0 20% 0;
  }
}
/*howto*/
.howto{
  background:url(../img/home_howto_textbg.png) no-repeat bottom 1% left / 50% , url(../img/check.png) repeat-x bottom / 2%, url(../img/plaid.png) repeat center / 3%,#ff6292;
  position: relative;
}
@media only screen and (max-width: 700px){
	.howto{
    background:url(../img/home_howto_textbg.png) no-repeat bottom 0% center / 100% , url(../img/check.png) repeat-x bottom / 2%, url(../img/plaid.png) repeat center / 8%,#ff6292;
    position: relative;
  }
}
.howto .wrapper:after {
  content: '';
  display: block;
  width: 100%;
  height: 31px;
  background: url(../img/bg_tri_pink.png) center top repeat-x;
  background-size: auto 100%;
  position: absolute;
  left: 0;
  top: -15px;
  z-index: 1;
}
.howto_02{
  margin-top: 4%;
}
.howto_btn{
  width:60%;
  margin:8% auto 0 auto;
}
.howto_btn img:hover {
  opacity: 0.5 ;
}
@media only screen and (max-width: 700px){
  .howto_01{
    margin:0 auto 8% auto;
  }
	.howto_btn{
    width:92%;
    margin:2% auto 0 auto;
  }
}
.howto img{
  width:100%;
}
/*chara*/
.chara{
  background:url(../img/home_chara_textbg.png) no-repeat bottom 0% left / 50% , url(../img/stripe.png) repeat center / 3%,#00d2e5;
}
@media only screen and (max-width: 700px){
	.chara{
    background:url(../img/home_chara_textbg.png) no-repeat bottom 0% center / 100% , url(../img/stripe.png) repeat center / 3%,#00d2e5;
  }
}
.chara h1{
  width: 40%;
  margin: 0 auto;
  padding-bottom:4%;
}
.chara h1 img{
  width: 100%;
}
.slide img{
  width: 100%;
  margin:0 auto;
}
.slider-nav figure{
  width: calc(100% / 6);
} 
.slider-nav figure img{
  width:100%;
}
.chara_text{
  width: 80%;
  margin: 8% auto 0 auto;
}
.chara_text img{
  width:100%;
}
.chara_btn{
  width:60%;
  margin:8% auto 0 auto;
}
.chara_btn img{
  width: 100%;
}
.chara_btn img:hover {
  opacity: 0.5 ;
}
@media only screen and (max-width: 700px){
  .chara h1{
    width: 70%;
    }
  .chara_text{
    width: 92%;
  }
  .chara_btn{
    width:92%;
  }
  .slick-slider {
    overflow: hidden;
}
}
/*story*/
.story{
  background:url(../img/home_story_bg.png) no-repeat center;
  background-size: cover;
}
.story h1{
  width: 20%;
  margin: 0 auto;
  padding-bottom:4%;
}
.story h1 img{
  width: 100%;
}
.story_contents{
  width: 100%;
  margin:0 auto;
}
.story_contents img{
  width: 100%;
}
.story ul{
  background:url(../img/home_story_map.png) no-repeat right / 60%;
}
.story ul li{
  margin:3% 0;
}
.story li:nth-child(1) {
  transition-delay: .1s;
}
.story li:nth-child(2) {
  transition-delay: .2s;
}
.story li:nth-child(3) {
  transition-delay: .3s;
}
.story li:nth-child(4) {
  transition-delay: .4s;
}
.story li:nth-child(5) {
  transition-delay: .5s;
}
.story li:nth-child(6) {
  transition-delay: .6s;
}
.story li:nth-child(7) {
  transition-delay: .7s;
}
.story li:nth-child(8) {
  transition-delay: .8s;
}
.story li:nth-child(9) {
  transition-delay: .9s;
}
.story li:nth-child(10) {
  transition-delay: 1s;
}
.story li:nth-child(11) {
  transition-delay: 1.1s;
}
.story li:nth-child(12) {
  transition-delay: 1.2s;
}
.story li:nth-child(13) {
  transition-delay: 1.3s;
}
.story li:nth-child(14) {
  transition-delay: 1.4s;
}
.story li:nth-child(15) {
  transition-delay: 1.5s;
}
.story li:nth-child(16) {
  transition-delay: 1.6s;
}

@media only screen and (max-width: 700px){
  .story{
    width: 100%;
    background:url(../img/home_story_map_sp.png) no-repeat right bottom/ 100% , url(../img/home_story_bg.png) no-repeat center;
    background-size: cover;
  }
  .story h1{
    width: 36%;
    margin: 0 auto;
    padding-bottom:4%;
  }
  .story h1 img{
    width: 100%;
  }
  .story_contents{
    width: 100%;
    margin:0 auto;
  }
  .story ul{
    background:none;
  }
  .story ul li{
    margin:1% 0;
  }
  .story ul li img{
    width: 100%;
  }
}
/*plus*/
.plus{
  background:url(../img/home_chara_textbg.png) no-repeat bottom 0% left / 50% , url(../img/check.png) repeat-x top / 2%, url(../img/dot.png) repeat center / 3%,#6bcda3;
}
.plus_text{
  width:80%;  
  margin:0 auto;
}
@media only screen and (min-width: 700px){
	.plus_text{
    width:70%;  
    margin:0 auto;
  }
  
}
.plus_text img{
  width: 100%;
}
.plus_btn{
  display:block;
  width:60%;
  margin:8% auto 0 auto;
}
@media only screen and (min-width: 700px){
	.plus_btn{
    display:block;
    width:40%;
    margin:8% auto 0 auto;
  }
}
.plus_btn img{
  width: 100%;
}
.plus_btn img:hover {
  opacity: 0.5 ;
}
.plus_deco img{
width: 100%;
margin-top: -10%;
}
.plus_sp{
  background:url(../img/home_chara_textbg.png) no-repeat bottom 0% left / 50% , url(../img/stripe.png) repeat center / 3%,#00d2e5;
  margin-bottom: -1px;
}
.plus_sp img{
  width: 100%;
}
/*----------------------------------------------------------------------
★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★
system.html システム・。・゜★・。・。☆・゜・。・゜。・。・゜★・。・。☆
★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★
------------------------------------------------------------------------*/
.title{
  background:#000000;
  position: relative;
  padding-bottom: 1%;
}
.title img{
  width: 60%;
}
@media only screen and (max-width: 700px){
  .title img{
    width: 100%;
  }
}
.title_deco{
  content: '';
  display: block;
  width: 100%;
  height: 31px;
  background-size: auto 100%;
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 1;
  background: url(../img/check.png) repeat-x bottom/ 1% 
}
/*---------本文---------*/
.system{
  background:url(../img/yasi_left.png) no-repeat left top 10%/ 30%, url(../img/yasi_right.png) no-repeat right top 30% / 30%,url(../img/yasi_left.png) no-repeat left bottom 30% / 30%,url(../img/yasi_right.png) no-repeat right bottom 10%/ 30%,url(../img/stripe.png) repeat center / 2%,#6bcda3;
  color: #710006;
  font-family: 'M PLUS Rounded 1c', sans-serif;
  padding-bottom:10%;
}
@media only screen and (max-width: 700px){
  .system{
    background:url(../img/yasi_left.png) no-repeat left top 10%/ 30%, url(../img/yasi_right.png) no-repeat right top 30% / 30%,url(../img/yasi_left.png) no-repeat left bottom 30% / 30%,url(../img/yasi_right.png) no-repeat right bottom 10%/ 30%,url(../img/stripe.png) repeat center / 10%,#6bcda3;
    color: #710006;
    font-family: 'M PLUS Rounded 1c', sans-serif;
    padding-bottom:10%;
  }
}
.deaihen{
  padding: 10% 0;
}
@media only screen and (max-width: 700px){
  .deaihen{
    padding: 16% 0;
  }
}
.system .deaihen .wrapper{
  margin: 0 auto;
  background:url(../img/yajirusi_green.png) no-repeat left bottom / 30%, url(../img/flame.jpg) repeat-x top / 15px, url(../img/flame.jpg) repeat-x bottom/15px, url(../img/flame.jpg) repeat-y left / 15px, url(../img/flame.jpg) repeat-y right/15px , url(../img/top_right.png) no-repeat right 2% top 1% ,url(../img/top_left.png) no-repeat left 2% top 1%, url(../img/bottom_left.png) no-repeat bottom 1% left 2%,url(../img/bottom_right.png) no-repeat right 2% bottom 1%,url(../img/stripe_bottom_left.png) no-repeat right bottom / 60%,url(../img/notebook-dark.png) repeat center , url(../img/concrete-wall.png) repeat center ,#f3f9d0;
  position: relative;
  padding:8%;
}
@media only screen and (max-width: 700px){
  .system .deaihen .wrapper{
    margin: 0 auto;
    background:url(../img/yajirusi_green.png) no-repeat left bottom / 30%, url(../img/flame.jpg) repeat-x top / 10px, url(../img/flame.jpg) repeat-x bottom/10px, url(../img/flame.jpg) repeat-y left / 10px, url(../img/flame.jpg) repeat-y right/10px , url(../img/top_right.png) no-repeat right 2.5% top 1% / 20% ,url(../img/top_left.png) no-repeat left 2.5% top 1% / 20% , url(../img/bottom_left.png) no-repeat bottom 1% left 2.5% / 20% ,url(../img/bottom_right.png) no-repeat right 2.5% bottom 1% / 20% ,url(../img/stripe_bottom_left.png) no-repeat right bottom / 80%,url(../img/notebook-dark.png) repeat center , url(../img/concrete-wall.png) repeat center ,#f3f9d0;
    position: relative;
    padding:8%;
  }
}
.system .koibitohen .wrapper{
  margin: 0 auto;
  background:url(../img/yajirusi_green.png) no-repeat left bottom / 30%, url(../img/flame.jpg) repeat-x top / 15px, url(../img/flame.jpg) repeat-x bottom/15px, url(../img/flame.jpg) repeat-y left / 15px, url(../img/flame.jpg) repeat-y right/15px , url(../img/top_right.png) no-repeat right 2% top 1% ,url(../img/top_left.png) no-repeat left 2% top 1%, url(../img/bottom_left.png) no-repeat bottom 1% left 2%,url(../img/bottom_right.png) no-repeat right 2% bottom 1%,url(../img/stripe_bottom_left.png) no-repeat right bottom / 60%,url(../img/notebook-dark.png) repeat center , url(../img/concrete-wall.png) repeat center ,#d0f9f2;
  position: relative;
  padding:8%;
}
@media only screen and (max-width: 700px){
  .system .koibitohen .wrapper{
    margin: 0 auto;
    background:url(../img/yajirusi_green.png) no-repeat left bottom / 30%, url(../img/flame.jpg) repeat-x top / 10px, url(../img/flame.jpg) repeat-x bottom/10px, url(../img/flame.jpg) repeat-y left / 10px, url(../img/flame.jpg) repeat-y right/10px , url(../img/top_right.png) no-repeat right 2.5% top 1% / 20% ,url(../img/top_left.png) no-repeat left 2.5% top 1% / 20% , url(../img/bottom_left.png) no-repeat bottom 1% left 2.5% / 20% ,url(../img/bottom_right.png) no-repeat right 2.5% bottom 1% / 20% ,url(../img/stripe_bottom_left.png) no-repeat right bottom / 80%,url(../img/notebook-dark.png) repeat center , url(../img/concrete-wall.png) repeat center ,#d0f9f2;
    position: relative;
    padding:8%;
  }
}
.system h4{
width:60%;
margin:-20% auto 4% auto;
} 
@media only screen and (max-width: 700px){
  .system h4{
    width:80%;
    margin:-20% auto 4% auto;
    } 
}
.system h4 img{
  width: 100%;
}
.system h5{
  width:60%;
  margin:4% auto;
}
.system h5 img{
  width: 100%;
}
.system li{
  margin-bottom:10%;
}
.red{
  color:#ee202e;
  font-weight: bold;
  background: linear-gradient(transparent 50%, #ffd23e 50%);
}
.blue{
  color:#00d2e5;
  font-weight: bold;
  background: linear-gradient(transparent 50%, #ffd23e 50%);
}
.system_box{
  width: 100%;
  display: flex;
}
.system_text{
  width:56%;
}

.system_image{
  width:44%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 4%;
}
.system_image img{
  width: 100%;
}
.system h6{
  font-size: 24px;
  font-weight: bold;
}
.system h6 {
	position: relative;
	font-size: 26px;
  z-index: 2;
}

.system h6 span {
	position: relative;
	z-index: 1;
}

.system h6::before {
	content: attr(data-en);
	position: absolute;
	transform: rotate(-5deg);
	top: -80px;
	left: 0;
	color: rgba(224,66,114,0.6);
	font-size: 56px;
	font-weight: 400;
	font-family: timberline, sans-serif;
	font-style: italic;
}
.plus_system{
  background:url(../img/home_chara_textbg.png) no-repeat bottom 0% left / 50% , url(../img/check.png) repeat-x top / 2%, url(../img/dot.png) repeat center / 3%,#817c87;
}
.plus_deco {
  margin-bottom: -1px;
}
@media only screen and (max-width: 700px){
  .system p{
    font-size: 14px;
     margin-bottom: 8%;
  }
  .system h5{
    width:80%;
    margin:4% auto;
  }
  .system h6{
    font-size: 16px;
    font-weight: bold;
    padding-top: 0px;
    padding-left: 0px;
    margin: 0;
  }
  .system h6::before {
    content: attr(data-en);
    position: absolute;
    transform: rotate(-5deg);
    top: -120%;
    left: 0;
    color: rgba(224,66,114,0.2);
    font-size: 56px;
    font-weight: 400;
    font-family: timberline, sans-serif;
    font-style: italic;
    z-index: 1;
  }
}
/*----------------------------------------------------------------------
★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★
characters.html キャラクター・。・゜★・。・。☆・゜・。・゜。・。・゜★・。・。☆
★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★
------------------------------------------------------------------------*/
/*tabの形状*/
.tab{
  display: flex;
  margin: 0 auto;
    text-align: center;
    width: 60%;
    margin-top: -6%;
}
@media only screen and (max-width: 700px){
	.tab{
    margin: 0 0;
  }
}
@media only screen and (max-width: 700px){
	.tab{
    width: 60%;
  }
}
.tab li {
  position: relative;
}
.tab li p{
  position: absolute;
  top:0;
  right: 8%;
    width: 30%;
  z-index: 2;
}
.tab p img{
    width: 100%;
}
@media only screen and (max-width: 700px){
	.tab li p{
    position: absolute;
    top:0;
    right:0;
    width: 50%;
    z-index: 2;
  }
}
.tab li a{
  display: block;
  margin:0 2px;
  padding:10px 20px;
}
@media only screen and (max-width: 700px){
	.tab li a{
    display: block;
    margin:0 2px;
    padding:10px 0px;
  }
}
/*liにactiveクラスがついた時の形状*/
.tab li.active a{
}


/*エリアの表示非表示と形状*/
.area {
  display: none;/*はじめは非表示*/
  opacity: 0;/*透過0*/
  padding:50px 20px;
  margin: 0 20%;
  width: 60%;
}
@media only screen and (max-width: 700px){
	.area {
    display: none;/*はじめは非表示*/
    opacity: 0;/*透過0*/
    padding:0 0px 50px 0px;
  }
}
/*areaにis-activeというクラスがついた時の形状*/
.area.is-active {
    display: block;/*表示*/
    animation-name: displayAnime;/*ふわっと表示させるためのアニメーション*/
    animation-duration: 2s;
    animation-fill-mode: forwards;
    width: 100%;
    margin: 0 auto;
}

@keyframes displayAnime{
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
/*---------レイアウト---------*/
.characters{
  background:url(../img/characters_topright.png) no-repeat right top / 30% , url(../img/characters_bottomleft.png) no-repeat left bottom / 30%, url(../img/normal.png) repeat center / 3%,#ffffff;
}
@media only screen and (max-width: 700px){
.characters .wrapper{
  padding: 0% 0 20% 0;
}
}
.characters .wrapper img{
  width: 100%;
}
.characters_image{
  margin:0 20%;
  width:60%;
}
@media only screen and (max-width: 700px){
	.characters_image{
    margin:0 0%;
    width:100%;
  }
}
.characters01_voice{
  margin-top:8%;
  background:url(../img/yajirusi_pink.png) no-repeat right bottom / 30%, url(../img/flame.jpg) repeat-x top / 15px, url(../img/flame.jpg) repeat-x bottom/15px, url(../img/flame.jpg) repeat-y left / 15px, url(../img/flame.jpg) repeat-y right/15px , url(../img/characters_bg01.png) no-repeat right bottom / 32%,url(../img/notebook-dark.png) repeat center , url(../img/concrete-wall.png) repeat center ,#d0f9f2;
  position: relative;
  padding:8%;
}
.characters02_voice{
  margin-top:8%;
  background:url(../img/yajirusi_pink.png) no-repeat right bottom / 30%, url(../img/flame.jpg) repeat-x top / 15px, url(../img/flame.jpg) repeat-x bottom/15px, url(../img/flame.jpg) repeat-y left / 15px, url(../img/flame.jpg) repeat-y right/15px , url(../img/characters_bg02.png) no-repeat right bottom / 32%,url(../img/notebook-dark.png) repeat center , url(../img/concrete-wall.png) repeat center ,#d0f9f2;
  position: relative;
  padding:8%;
}
.characters03_voice{
  margin-top:8%;
  background:url(../img/yajirusi_pink.png) no-repeat right bottom / 30%, url(../img/flame.jpg) repeat-x top / 15px, url(../img/flame.jpg) repeat-x bottom/15px, url(../img/flame.jpg) repeat-y left / 15px, url(../img/flame.jpg) repeat-y right/15px , url(../img/characters_bg03.png) no-repeat right bottom / 32%,url(../img/notebook-dark.png) repeat center , url(../img/concrete-wall.png) repeat center ,#d0f9f2;
  position: relative;
  padding:8%;
}
.characters04_voice{
  margin-top:8%;
  background:url(../img/yajirusi_pink.png) no-repeat right bottom / 30%, url(../img/flame.jpg) repeat-x top / 15px, url(../img/flame.jpg) repeat-x bottom/15px, url(../img/flame.jpg) repeat-y left / 15px, url(../img/flame.jpg) repeat-y right/15px , url(../img/characters_bg04.png) no-repeat right bottom / 50%,url(../img/notebook-dark.png) repeat center , url(../img/concrete-wall.png) repeat center ,#d0f9f2;
  position: relative;
  padding:8%;
}
@media only screen and (max-width: 700px){
  .characters01_voice{
    margin-top:8%;
    background:url(../img/yajirusi_pink.png) no-repeat right bottom / 30%, url(../img/flame.jpg) repeat-x top / 15px, url(../img/flame.jpg) repeat-x bottom/15px, url(../img/flame.jpg) repeat-y left / 15px, url(../img/flame.jpg) repeat-y right/15px , url(../img/characters_bg01.png) no-repeat right bottom / 50%,url(../img/notebook-dark.png) repeat center , url(../img/concrete-wall.png) repeat center ,#d0f9f2;
    position: relative;
    padding:8%;
  }
  .characters02_voice{
    margin-top:8%;
    background:url(../img/yajirusi_pink.png) no-repeat right bottom / 30%, url(../img/flame.jpg) repeat-x top / 15px, url(../img/flame.jpg) repeat-x bottom/15px, url(../img/flame.jpg) repeat-y left / 15px, url(../img/flame.jpg) repeat-y right/15px , url(../img/characters_bg02.png) no-repeat right bottom / 50%,url(../img/notebook-dark.png) repeat center , url(../img/concrete-wall.png) repeat center ,#d0f9f2;
    position: relative;
    padding:8%;
  }
  .characters03_voice{
    margin-top:8%;
    background:url(../img/yajirusi_pink.png) no-repeat right bottom / 30%, url(../img/flame.jpg) repeat-x top / 15px, url(../img/flame.jpg) repeat-x bottom/15px, url(../img/flame.jpg) repeat-y left / 15px, url(../img/flame.jpg) repeat-y right/15px , url(../img/characters_bg03.png) no-repeat right bottom / 40%,url(../img/notebook-dark.png) repeat center , url(../img/concrete-wall.png) repeat center ,#d0f9f2;
    position: relative;
    padding:8%;
  }
  .characters04_voice{
    margin-top:8%;
    background:url(../img/yajirusi_pink.png) no-repeat right bottom / 30%, url(../img/flame.jpg) repeat-x top / 15px, url(../img/flame.jpg) repeat-x bottom/15px, url(../img/flame.jpg) repeat-y left / 15px, url(../img/flame.jpg) repeat-y right/15px , url(../img/characters_bg04.png) no-repeat right bottom / 70%,url(../img/notebook-dark.png) repeat center , url(../img/concrete-wall.png) repeat center ,#d0f9f2;
    position: relative;
    padding:8%;
  }
}
.area li{
  display: flex;
  justify-content: center;
  align-items: center;
}
.characters h5{
  position: absolute;
  top:-4%;
  left:4%;
  width: 20%;
}
.characters h6{
  width: 10%;
  margin: 2% 0;
}
@media only screen and (max-width: 700px){
	.characters h6{
    width: 20%;
  }
}
.characters p{
  margin-left :8%;
  font-weight: bold;
  font-family: 'M PLUS Rounded 1c', sans-serif;
  font-size: 18px;
  color:#312c2e;
}
.count5{
  animation-iteration-count: 5;/*この数字を必要回数分に変更*/
}
/*----------------------------------------------------------------------
★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★
プライバシーポリシー　利用規約　特定商法取引・。・゜★・。・。☆・゜・。・゜。・。・゜★・。・。☆
★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★
------------------------------------------------------------------------*/
.other{
  background: url(../img/stripe.png) repeat center / 2%,#00d2e5;
  color: #710006;
  font-family: 'M PLUS Rounded 1c', sans-serif;
  padding-bottom:10%;
}
.other dt{
  margin:8% 0 2% 0;
  font-weight: bold;
}


/*------新キャラ「宇佐美百」追加-----------------*/
/*-キャラクターページ　上部タブ調整-*/
@media only screen and (max-width: 700px){
	.tab{
    width: 80%;
  }
}
.tab li p{
  position: absolute;
  top:-10%;
  right: -5%;
    width: 40%;
  z-index: 2;
}

@media only screen and (max-width: 700px){
	.tab li p{
    position: absolute;
    top:0%;
    right:-8%;
    width: 50%;
    z-index: 2;
  }
}
.tab li a{
  display: block;
  margin:0 2px;
  padding:0 5px;
}
@media only screen and (max-width: 700px){
	.tab li a{
    display: block;
    margin:0 2px;
    padding:10px 0;
  }
}