@charset "utf-8";




/*----------------------------------------
	for PC
----------------------------------------*/


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



/*  */

body{background:transparent;}
#wrapper{width:919px;height:500px;background:transparent url(../img/character/base.png);}

#content{width:919px;height:500px;position:relative;}

.text_area{width:500px;position:absolute;left:80px;top:75px;z-index:10;}
.text_area .name img{display:block;}
.text_area .cv{color:#fff;font-size:16px;margin-left:15px;}
.text_area .cv .name_cv{font-size:24px;margin-left:0.5em;font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;}
.text_area p{color:#fff;width:350px;margin-left:15px;font-size:14px;margin-top:6px;}

.image_area{position:absolute;bottom:20px;right:31px;width:538px;height:460px;overflow:hidden;border-radius:0 0 40px 0;}
.image_area .zoom{position:absolute;bottom:0px;right:0px;width:538px;height:460px;transition:all 1s;opacity:1;}
.image_area .wide{position:absolute;bottom:0px;right:0px;width:538px;height:460px;transition:all 1s;opacity:0;}

.image_area.wide .zoom{opacity:0;}
.image_area.wide .wide{opacity:1;}

.work{width:148px;height:89px;position:absolute;left:50px;bottom:30px;}

.ruby{color: #fff5bd;padding-left: 10px;line-height: 1;font-size:13px;letter-spacing:5px;margin-top:-1em;}
.ruby.non{opacity:0;}

/*  */

#content a{width:58px;height:58px;background-image:url(../img/character/to_wide.png);display:block;text-indent:-9999px;position:absolute;right:60px;bottom:60px;border-radius:50%;box-shadow:rgba(0,0,0,0.5);overflow:hidden;}
#content a.wide{width:58px;height:58px;background-image:url(../img/character/to_zoom.png);display:block;text-indent:-9999px;position:absolute;right:60px;bottom:60px;border-radius:50%;box-shadow:rgba(0,0,0,0.5);overflow:hidden;}

#content a.btn_play{text-indent: 0px;background:none;width:200px;height:auto;display:block;border-radius:30px;box-shadow:2px 2px 3px rgba(0,0,0,0.3);position:relative;top:0;left:0;margin-top:1em;}
#content a.btn_play img{width:180px;display:block;}

.centering{text-align:center;}

}












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


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

	/* common */
  body{background:transparent;}
  #wrapper{width:90%;background-color:#000;overflow:hidden;position:relative;border-radius:30px;margin:0 auto;box-shadow:0px 0px 4px rgba(0,0,0,1);border:2px solid #242c59;}
  /* #wrapper:before{content:'';display:block;width:100%;height:5px;background-image:url(../img/top/news_line.jpg);z-index:20;position:absolute;top:0;}
  #wrapper:after{content:'';display:block;width:100%;height:5px;background-image:url(../img/top/news_line.jpg);z-index:20;position:absolute;bottom:0;} */


  .text_area{position:relative;z-index:10;background-color:#000;padding:8% 10% 0;margin-top:66%;padding-bottom:40px;background-color:#1a2146;}
  .text_area .name img{width:92%;margin-top:0px;display:block;}
  .text_area .cv{color:#fff;font-size:13px;margin-left:7px;}
  .text_area .cv .name_cv{font-size:18px;margin-left:0.5em;font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;}
  .text_area p{color:#fff;padding-top:0em;font-size:13px;}
  .text_area p br{display:none;}

  .image_area{position:absolute;width:100%;overflow:hidden;padding-top:85%;margin-bottom:50%;top:0;left:0;background:url(../img/character/base_sp.jpg);}
  .image_area .zoom{position:absolute;bottom:0px;right:0px;width:100%;transition:all 1s;opacity:1;}
  .image_area .wide{position:absolute;bottom:0px;right:0px;width:100%;transition:all 1s;opacity:0;}

  .image_area.wide .zoom{opacity:0;}
  .image_area.wide .wide{opacity:1;}

  .work{width:100px;position:absolute;left:1%;top:0px;}
  .work img{width:100%;display:block;}

  .ruby{color: #fff5bd;padding-left: 10px;line-height: 1;font-size:10px;letter-spacing:2px;margin-top:-1em;}
  .ruby.non{opacity:0;}

  /*  */

  #content a{width:50px;height:50px;background-image:url(../img/character/to_wide.png);display:block;text-indent:-9999px;position:absolute;right:12%;margin-top:66%;top:-25px;border-radius:50%;box-shadow:rgba(0,0,0,0.5);overflow:hidden;background-size:100%;z-index:90;background-color:rgba(255,255,255,0.8);}
  #content a.wide{background-image:url(../img/character/to_zoom.png);display:block;text-indent:-9999px;box-shadow:rgba(0,0,0,0.5);overflow:hidden;background-color:rgba(255,255,255,0.8);}

  #content a.btn_play{text-indent: 0px;background:none;width:200px;height:auto;display:block;border-radius:30px;box-shadow:2px 2px 3px rgba(0,0,0,0.3);position:relative;top:0;left:0;margin-top:1em;}
  #content a.btn_play img{width:180px;display:block;}

  .centering{text-align:center;}


}