/*


 */
 

body { color: #fff; background-image:none;  background-color:#fff; font-family: "Rounded Mplus 1c","ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Meiryo, "メイリオ", "ＭＳ Ｐゴシック", Arial, Helvetica, sans-serif; margin: 0;}

p {line-height: 1.6em;}



.pure-g [class*="pure-u"],
.pure-g.pure-g      {  font-family: 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif; }

#main { background:url("../img/main_bg.jpg") center top ;background-size: cover; z-index:1; opacity: 0; animation: 0.5s fadeIn 0.1s forwards;}
#main_chara{
	position: relative;
}
.chara{display: block;margin:0 auto;padding: 6vw 0 0; opacity: 0; animation: 0.5s fadeIn 0.5s forwards;width: 100%;max-width: 1000px;z-index: 10;position: relative;}
.top{position: relative; max-width: 1000px;margin: 0 auto;display: block;}
.chatch{position: absolute;top: 6vw; right: 50%;z-index: 30;width: 10%; max-width: 100px; margin: 0 auto;display: block;opacity: 0; animation: 0.7s fadeIn 0.7s forwards;
	transform: translate(450%);
    -webkit-transform: translate(450%);
    -ms-transform: translate(450%);}
.title{position: absolute;top: 9vw; left: 20%;z-index: 30;width: 50%; max-width: 470px; margin: 0 auto;display: block;opacity: 0; animation: 1.0s zoomOutAnime 0.7s forwards;
	transform: translate(-63%,50%);
    -webkit-transform: translate(-63%,50%);
    -ms-transform: translate(-63%,50%);}
.att{position: absolute;top: 2vw; right: 30%;z-index: 30;width: 30%; max-width: 306px; margin: 0 auto;display: block;opacity: 0; animation: 0.5s zoomOutAnime 1.2s forwards;
	transform: translate(65%,5%);
    -webkit-transform: translate(65%,5%);
    -ms-transform: translate(65%,5%);}
.credit{position: absolute;bottom: 0; right: 40%;z-index: 30;width: 40%; max-width: 526px; margin: 0 auto;display: block;opacity: 0; animation: 0.7s fadeIn 0.7s forwards;
	transform: translate(65%);
    -webkit-transform: translate(65%);
    -ms-transform: translate(65%);}
/*.chara_02{display: block;margin: 0 auto;opacity: 0; animation: 0.8s fadeIn 0.7s forwards;width: 100%;max-width: 640px;z-index: 5;position: absolute;top: 30vw; left: 50%;
	transform: translate(-50%);
    -webkit-transform: translate(-50%);
    -ms-transform: translate(-50%);} */

#contentswrap{
	background: url("../img/bg.jpg") center top ;background-size: cover;
}

#about{background: rgba(255,255,255,0.8); width: 100%;margin-top: -16px;padding: 10px;}
.about_h3{font-family: 'M PLUS 1p'; font-style: oblique; text-align: center;color: #ff598f;font-size: 59px;margin: 0px;opacity: 0; animation: 1.0s fadeIn 1.3s forwards;}
.about_chatch{margin: 0 auto; display: block;max-width: 866px;width: 95%;opacity: 0; animation: 1.0s fadeIn 1.4s forwards;}
.about_text{font-family: 'Noto Serif JP', serif;font-size: 18px; color: #3a3a3a;font-weight: 600;text-align: center;opacity: 0; animation: 1.0s fadeIn 1.5s forwards;text-shadow:0px 0px 10px #fff,0px 0px 10px #fff,0px 0px 10px #fff;}
.about_text strong{font-weight: bold;color: #ff598f;font-size: 19px;}
.about_text big{font-size: 24px;}

.about_img{margin: 0px auto 10px; display: block;width: 60%;max-width: 450px;}

#comment{background: rgba(255,255,255,0.8); width: 80%;margin: 30px auto 0px;padding: 10px;display: block;}
.comment_h3{font-family: 'M PLUS 1p'; font-style: oblique;text-align: center;color: #0099dd;font-size: 59px;margin: 0px;}
.comment_img{margin: 0 auto 10px;display: block;max-width: 738px; width: 96%;}


#story{background: rgba(255,255,255,0.8); width: 80%;margin: 30px auto 30px;padding: 10px;display: block;position: relative;}
.story_h3{font-family: 'M PLUS 1p'; font-style: oblique;text-align: center;color: #ff598f;font-size: 59px;margin: 0px;}
.story_text{font-size: 1.7vw; color: #3a3a3a;font-weight: 600;text-align: center;font-family: 'Noto Serif JP', serif;}
.story_text strong{font-weight: bold;color: #ff598f;}
.story_img01{position: absolute;bottom: 0; left: 0; max-width: 233px; width: 25%;}
.story_img02{position: absolute;bottom: 0; right: 0; max-width: 270px; width: 30%;}

#end{position: relative;
}
.end_img{margin: 30px auto; display: block;}



/* footer */
.footer { padding: 2%; margin: 0 auto;display: block;text-align: center;}
.footer_sns{ margin: 20px auto 10px; display:inline-block;transition:0.5s all;}
.footer_sns:hover{ transform:scale(1.05,1.05);  transition:0.5s all;}
.copyrights { font-size: 72%;  text-align: center;  margin: 1% auto; color: #666;font-family: 'Noto Serif JP', serif;} 
.copyrights big { font-size: 16px;} 
.banner{display: block;margin: 0 auto 20px;clear: both;transition:0.5s all;}
.banner:hover{transform:scale(1.05,1.05);  transition:0.5s all;}

sup{font-size: 30%;}




@keyframes fadeIn { 
    from { opacity: 0; }
    to { opacity: 1.0; }
  }

@keyframes SlideIn {
  0% {
    opacity: 0;/*初期状態では透明に*/
    transform: translateY(0%);
  }
  100% {
    opacity: 1;
    transform: translateY(10%);
  }
}

/* zoomOut */
.zoomOut{
	animation-name: zoomOutAnime;
	animation-duration:0.5s;
	animation-fill-mode:forwards;
}

@keyframes zoomOutAnime{
  from {
	transform: scale(1.2);
	opacity: 0;
  }

  to {
    transform:scale(1);
	opacity: 1;
  }
}

/* fadeUp */

.fadeUp{
animation-name: fadeUpAnime;
animation-duration:0.5s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeUpAnime{
  from {
    opacity: 0;
	transform: translateY(100px);
  }

  to {
    opacity: 1;
	transform: translateY(0);
  }
}


.fadeUpTrigger,{
    opacity: 0;
}


/* PC/SP出し分け */

.pc { display: block !important; }
.sp { display: none !important; }
 
@media only screen and (max-width: 680px) {
    .pc { display: none !important; }
    .sp { display: block !important; }
}


/*----------------------------------------
	for SP
----------------------------------------*/

@media screen and (max-width: 680px){
 


body { color: #fff; background-image:none;  background-color:#fff; font-family: "Rounded Mplus 1c","ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Meiryo, "メイリオ", "ＭＳ Ｐゴシック", Arial, Helvetica, sans-serif; margin: 0;}

p {line-height: 1.6em;}



.pure-g [class*="pure-u"],
.pure-g.pure-g      {  font-family: 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif; }

#main { background:url("../img/main_bg.jpg") center top ;background-size: cover; z-index:1; opacity: 0; animation: 0.5s fadeIn 0.1s forwards;}
#main_chara{
	position: relative;
}
.chara{display: block;margin:0 auto;padding: 13vw 0 0; opacity: 0; animation: 0.5s fadeIn 0.5s forwards;width: 100%;z-index: 10;position: relative;}
.top{position: relative; max-width: 1000px;margin: 0 auto;display: block;}
.chatch{position: absolute;top: 2vw; right: 68%;z-index: 30;width: 15%; max-width: 100px; margin: 0 auto;display: block;opacity: 0; animation: 0.7s fadeIn 0.7s forwards;
	transform: translate(450%);
    -webkit-transform: translate(450%);
    -ms-transform: translate(450%);}
.title{position: absolute;top: 15vw; left: 18%;z-index: 30;width: 52%; max-width: 470px; margin: 0 auto;display: block;opacity: 0; animation: 1.0s zoomOutAnime 0.7s forwards;
	transform: translate(-62%,10%);
    -webkit-transform: translate(-62%,10%);
    -ms-transform: translate(-62%,10%);}
.att{position: absolute;top: 1vw; right: 23%;z-index: 30;width: 45%; max-width: 306px; margin: 0 auto;display: block;opacity: 0; animation: 0.5s zoomOutAnime 1.2s forwards;
	transform: translate(65%,5%);
    -webkit-transform: translate(65%,5%);
    -ms-transform: translate(65%,5%);}
.credit{position: absolute;bottom: 0.1%; right: 47%;z-index: 30;width: 70%; max-width: 526px; margin: 0 auto;display: block;opacity: 0; animation: 0.7s fadeIn 0.7s forwards;
	transform: translate(65%);
    -webkit-transform: translate(65%);
    -ms-transform: translate(65%);}
/*.chara_02{display: block;margin: 0 auto;opacity: 0; animation: 0.8s fadeIn 0.7s forwards;width: 100%;max-width: 640px;z-index: 5;position: absolute;top: 30vw; left: 50%;
	transform: translate(-50%);
    -webkit-transform: translate(-50%);
    -ms-transform: translate(-50%);} */

#contentswrap{
	background: url("../img/bg.jpg") center top ;background-size: cover;
}

#about{background: rgba(255,255,255,0.8); width: 100%;margin: -16px;padding: 10px;}
.about_h3{font-family: 'M PLUS 1p'; font-style: oblique;text-align: center;color: #ff598f;font-size: 13vw;margin: 0px;opacity: 0; animation: 1.0s fadeIn 1.3s forwards;}
.about_chatch{margin: 0 auto; display: block;max-width: 866px;width: 96%;opacity: 0; animation: 1.0s fadeIn 1.4s forwards;}
.about_text{font-family: 'Noto Serif JP', serif;font-size: 4vw; color: #3a3a3a;font-weight: 600;text-align: center;opacity: 0; animation: 1.0s fadeIn 1.5s forwards;}
.about_text strong{font-weight: bold;color: #ff598f;font-size: 4vw;text-shadow:0px 0px 10px #fff,0px 0px 10px #fff,0px 0px 10px #fff;}
.about_text big{font-size: 4vw;}

.about_img{margin: 0px auto 10px; display: block;width: 80%;max-width: 450px;}	
	
#comment{background: rgba(255,255,255,0.8); width: 80%;margin: 30px auto 0px;padding: 10px;display: block;}
.comment_h3{font-family: 'M PLUS 1p'; font-style: oblique;text-align: center;color: #0099dd;font-size: 13vw;margin: 0px;}
.comment_img{margin: 10px auto 0;display: block;max-width: 738px; width: 100%;}


#story{background: rgba(255,255,255,0.8); width: 80%;margin: 30px auto 30px;padding: 10px;display: block;position: relative;}
.story_h3{font-family: 'M PLUS 1p'; font-style: oblique;text-align: center;color: #ff598f;font-size: 13vw;margin: 0px;}
.story_text{font-size: 4vw; color: #3a3a3a;font-weight: 600;text-align: center;font-family: 'Noto Serif JP', serif;}
.story_img{position: relative;  width: 100%;margin: 0 auto;display: block;}


#end{position: relative;
}
.end_img{margin: 30px auto; display: block;width: 80%;}



/* footer */
.footer { padding: 2%; margin: 0 auto;display: block;text-align: center;}
.footer_sns{ margin: 10px auto; display:inline-block;;}
.copyrights { font-size: 2vw;  text-align: center;  margin: 1% auto; color: #666;line-height: 2em;font-family: 'Noto Serif JP', serif;} 
.copyrights big { font-size: 4vw;line-height: 1.5em;} 
.banner{display: block;margin: 0 auto 20px;clear: both; width: 90%;}

sup{font-size: 30%;}




@keyframes fadeIn { 
    from { opacity: 0; }
    to { opacity: 1.0; }
  }


}

/* zoomOut */
.zoomOut{
	animation-name: zoomOutAnime;
	animation-duration:0.5s;
	animation-fill-mode:forwards;
}

@keyframes zoomOutAnime{
  from {
	transform: scale(1.2);
	opacity: 0;
  }

  to {
    transform:scale(1);
	opacity: 1;
  }
}

/* fadeUp */

.fadeUp{
animation-name: fadeUpAnime;
animation-duration:0.5s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeUpAnime{
  from {
    opacity: 0;
	transform: translateY(100px);
  }

  to {
    opacity: 1;
	transform: translateY(0);
  }
}


.fadeUpTrigger,{
    opacity: 0;
}