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

#content {
	overflow: hidden;
	margin-left:300px;
	padding:0 110px 0 110px;
}
#content .wrap {
    margin-bottom: 100px;
}
#content .wrap .page-header {
	text-align:center;
	margin: 90px 0 50px 0;
}
#content .wrap .page-header .title_area {
	position: relative;
	margin:0 0 0 0;
}
#content .wrap .page-header .title_area h3,
#content .wrap .page-header .title_area h3 a {
	 font-size: 93px;
	 color: #23aaff;
	 line-height: 1em;
}
#content .wrap .page-header .title_area .jp {
    position: absolute;
    top: 0px;
    left: 50%;
    color: #fff;
    background-color: #000;
    font-size: 23px;
    line-height: 1em;
    display: inline-block;
    padding: 5px 10px;
    margin: 62px 0 0 0;
    transform: translate(-50%,0);
}
#content .wrap .page-header .title_area .jp a {
    color: #fff;
}
#content .wrap .content-area {}
#content .wrap .content-area .site-main {}
#content .wrap .content-area .site-main .chara_list_main {
    width: 850px;
    margin: 0 auto 50px auto;
    text-align: center;
}
#content .wrap .content-area .site-main .chara_list_main .chara_wrpr {
    position: relative;
    display: inline-block;
    text-align: left;
    /*width:432px;
    margin: 0 0 50px 0;*/
    width: 341px;
    margin: 0 40px 50px 40px;
}
#content .wrap .content-area .site-main .chara_list_main .chara_wrpr a {
    position: absolute;
    top:0;
    left:0;
    width: 100%;
    height: 100%;
}
#content .wrap .content-area .site-main .chara_list_main .chara_wrpr .chara_img {

}
#content .wrap .content-area .site-main .chara_list_main .chara_wrpr .name_area {
    position: absolute;
    top:275px;
    left:140px;
}
#content .wrap .content-area .site-main .chara_list_main .chara_wrpr .name_area .left {
    float:left;
    width:32px;
}
#content .wrap .content-area .site-main .chara_list_main .chara_wrpr .name_area .left .point {
    margin-top: 28px;
}
#content .wrap .content-area .site-main .chara_list_main .chara_wrpr .name_area .right {
    float: left;
}
#content .wrap .content-area .site-main .chara_list_main .chara_wrpr .name_area .right .kana {
    font-size: 13px;
    line-height: 1em;
    margin-bottom: 8px;
}
#content .wrap .content-area .site-main .chara_list_main .chara_wrpr .name_area .right .name_txt {
    font-size:32px;
    line-height: 1em;
    margin-bottom: 11px;
}
#content .wrap .content-area .site-main .chara_list_main .chara_wrpr .name_area .right .chara_voice {
    font-size:13px;
    line-height: 1em;
}



#content .wrap .content-area .site-main .chara_list_sub {
    width: 920px;
    margin: 0 auto;
    text-align: center;
}
#content .wrap .content-area .site-main .chara_list_sub .chara_wrpr {
    position: relative;
    display: inline-block;
    margin: 0 17px 50px 17px;
}
#content .wrap .content-area .site-main .chara_list_sub .chara_wrpr a {
    position: absolute;
    top:0;
    left:0;
    width: 100%;
    height: 100%;
}
#content .wrap .content-area .site-main .chara_list_sub .chara_wrpr .chara_img {

}
#content .wrap .content-area .site-main .chara_list_sub .chara_wrpr .name_area {
    text-align: center;
}
#content .wrap .content-area .site-main .chara_list_sub .chara_wrpr .name_area .left {
    margin: 15px 0;
}
#content .wrap .content-area .site-main .chara_list_sub .chara_wrpr .name_area .left .point {}
#content .wrap .content-area .site-main .chara_list_sub .chara_wrpr .name_area .right {}
#content .wrap .content-area .site-main .chara_list_sub .chara_wrpr .name_area .right .kana {
    font-size: 13px;
    line-height: 1em;
    margin-bottom: 8px;
}
#content .wrap .content-area .site-main .chara_list_sub .chara_wrpr .name_area .right .name_txt {
    font-size:32px;
    line-height: 1em;
    margin-bottom: 11px;
}
#content .wrap .content-area .site-main .chara_list_sub .chara_wrpr .name_area .right .chara_voice {
    font-size:13px;
    line-height: 1em;
}

/********** single **********/
.character_single {
    position: relative;
    width:850px;
    min-height: 790px;
    margin: 0 auto 100px auto;
}
.character_single .chara_img {
    position: absolute;
    top:0;
    left:0;
    width: 100%;
}
.character_single .chara_img img {
    width: 100%;
    height: auto;
}

.character_single .hdr_area {
    position: relative;
    /*overflow: hidden;*/
    margin: 0 0 36px 0;
}
.character_single .hdr_area .name_area {
    float: left;
    margin: 19px 0 0 0;
}
.character_single .hdr_area .name_area .ttl {
    text-align: left;
}
.character_single .hdr_area .name_area .ttl hr {
    float: left;
    border: none;
    border-top: 1px solid #000;
    width:30px;
    margin: 8px 7px 0 0;
}
.character_single .hdr_area .name_area .ttl p {
    float: left;
    font-size: 12px;
    line-height: 1.4em;
    color: #000;
    letter-spacing: 0.05em;
}
.character_single .hdr_area .name_area .ttl p br {
    line-height: 1em;
}
.character_single .hdr_area .name_area .alphabet {
    font-size: 12px;
    line-height: 1em;
    color: #000;
}
.character_single .hdr_area .link_area {
    float: right;
    /*overflow: hidden;*/
}
.character_single .hdr_area .link_area .btn_next {
    float: right;
}
.character_single .hdr_area .link_area .btn_prev {
    float:left;
    margin: 0 70px 0 0;
}
.character_single .hdr_area .link_area .btn_next a,
.character_single .hdr_area .link_area .btn_prev a {
    display: block;
    -webkit-transition: all 0.5s ease-out;
    -ms-transition: all 0.5s ease-out;
    -o-transition: all 0.5s ease-out;
    transition: all 0.5s ease-out;
    transform: translate(0, 0);
}
.character_single .hdr_area .link_area .btn_next a:hover { transform: translate(10px, 0); }
.character_single .hdr_area .link_area .btn_prev a:hover { transform: translate(-10px, 0); }
.character_single .content_chara {
    position: relative;
    padding: 0 0 0 38px;
}
.character_single .content_chara .kana {
    font-size: 18px;
    line-height: 1em;
    margin: 0 0 11px 0;
}
.character_single .content_chara h3 {
    font-size: 63px;
    line-height: 1em;
    margin: 0 0 24px 0;
}
.character_single .content_chara .cv {
    font-size: 18px;
    line-height: 1em;
    margin: 0 0 18px 0;
}
.character_single .content_chara .btn_cv_com {
    margin: 0 0 30px 0;
}
.character_single .content_chara .body_txt {
    width:430px;
    font-size: 15px;
    line-height: 1.9em;
}
.chara_list {
    width: 850px;
    margin: 0 auto;
    text-align: center;
}
.chara_list ul {
    margin-bottom: 25px;
}
.chara_list ul li {
    display: inline-block;
    margin: 0 5px;
}
.chara_list ul li a {
    display: inline-block;
    padding: 8px 11px;
    color:#fff;
    font-size:13px;
    background-color: #000;
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
}
.chara_list ul li.crnt a,
.chara_list ul li a:hover {
    background-color: #41beff;
}

#cast_comment {
    display: none;
    position: absolute;
    top:0;
    left:0;
    width: 100%;
    min-height: 100%;
    z-index: 3;
}
#cast_comment .pop_bg {
    position: fixed;
    top:0;
    left:0;
    width: 100%;
    height: 100%;
    background-color: #23aaff;
}
#cast_comment .btn_close {
    position: absolute;
    top:0;
    right:0;
}
#cast_comment .comment_wrpr {
    position: relative;
    width: 925px;
    margin: 145px auto;
}
#cast_comment .comment_wrpr .comment_box {
    margin-bottom: 75px;
}
#cast_comment .comment_wrpr .comment_box .hdr {
    overflow: hidden;
    vertical-align: top;
    margin: 0 0 35px 0;
}
#cast_comment .comment_wrpr .comment_box .hdr .title {
    float:left;
    font-size: 15px;
    margin: 14px 14px 0 0;
}
#cast_comment .comment_wrpr .comment_box .hdr .name {
    font-size: 34px;
    float:left;
    font-weight: 200;
}
#cast_comment .comment_wrpr .comment_box .hdr .en {
    font-size: 13px;
    font-weight: 300;
    clear: both;
}
#cast_comment .comment_wrpr .comment_box .txt_area {
    overflow: hidden;
}
#cast_comment .comment_wrpr .comment_box .txt_area p {
    font-size: 15px;
    line-height: 2.1em;
    color: #fff;
}
#cast_comment .comment_wrpr .comment_box .txt_area .thumb_area {
    float:left;
    width:310px;
}
#cast_comment .comment_wrpr .comment_box .txt_area .right_area {
    float:right;
    width:560px;
}


}

/********************************************* sp ******************************************/

@media screen and (max-width: 750px) {
#page {
    overflow: hidden;
}
#content {}
#content .wrap {
    margin: 0 0 6.666% 0;
}
#content .wrap .page-header {
    text-align:center;
    margin: 90px 0 50px 0;
}
#content .wrap .page-header .title_area {
    position: relative;
    margin:0 0 0 0;
}
#content .wrap .page-header .title_area h3,
#content .wrap .page-header .title_area h3 a {
     font-size: 93px;
     color: #23aaff;
     line-height: 1em;
}
#content .wrap .page-header .title_area .jp {
    position: absolute;
    top: 0px;
    left: 50%;
    color: #fff;
    background-color: #000;
    font-size: 23px;
    line-height: 1em;
    display: inline-block;
    padding: 5px 10px;
    margin: 62px 0 0 0;
    transform: translate(-50%,0);
}
#content .wrap .page-header .title_area .jp a {
    color:#fff;
}
#content .wrap .content-area {}
#content .wrap .content-area .site-main {}
#content .wrap .content-area .site-main .chara_list_main {
    width:78.666%;/*590*/
    margin: 0 auto 20% auto;
}
#content .wrap .content-area .site-main .chara_list_main .chara_wrpr {
    position: relative;
    overflow: hidden;
    margin-bottom: 5.333%;
}
#content .wrap .content-area .site-main .chara_list_main .chara_wrpr .chara_img {
    width:81.355%;
}
#content .wrap .content-area .site-main .chara_list_main .chara_wrpr .chara_img img {
    width: 100%;
    height: auto;
}
#content .wrap .content-area .site-main .chara_list_main .chara_wrpr .name_area {
    position: absolute;
    top:0;
    left:0;
    margin: 97.627% 0 0 47.457%;
    width: 100%;
}
#content .wrap .content-area .site-main .chara_list_main .chara_wrpr .name_area .left {
    float:left;
    width:7.118%;
    margin-right: 20px;
}
#content .wrap .content-area .site-main .chara_list_main .chara_wrpr .name_area .left .point {
    width:100%;
    margin-top: 47px;
}
#content .wrap .content-area .site-main .chara_list_main .chara_wrpr .name_area .left .point img {
    width: 100%;
    height: auto;
}
#content .wrap .content-area .site-main .chara_list_main .chara_wrpr .name_area .right {
    float: left;
}
#content .wrap .content-area .site-main .chara_list_main .chara_wrpr .name_area .right .kana {
    font-size: 26px;
    line-height: 1em;
    margin-bottom: 16px;
}
#content .wrap .content-area .site-main .chara_list_main .chara_wrpr .name_area .right .name_txt {
    font-size:52px;
    line-height: 1em;
    margin-bottom: 17px;
}
#content .wrap .content-area .site-main .chara_list_main .chara_wrpr .name_area .right .chara_voice {
    font-size:26px;
    line-height: 1em;
}
#content .wrap .content-area .site-main .chara_list_main .chara_wrpr a {
    position: absolute;
    top:0;
    left:0;
    width: 100%;
    height: 100%;
}

#content .wrap .content-area .site-main .chara_list_sub {
    width: 94.666%;/*710px*/
    margin: 0 auto 20% auto;
}
#content .wrap .content-area .site-main .chara_list_sub .chara_wrpr {
    position: relative;
    display: inline-block;
    margin:0 4.225% 4.225% 4.225%;/*0 30px*/
    width:41.54%;
}
#content .wrap .content-area .site-main .chara_list_sub .chara_wrpr .chara_img {
    
}
#content .wrap .content-area .site-main .chara_list_sub .chara_wrpr .chara_img img {
    width: 100%;
    height: auto;
}
#content .wrap .content-area .site-main .chara_list_sub .chara_wrpr .name_area {
    margin: 0 0 0 0;
    text-align: center;
}
#content .wrap .content-area .site-main .chara_list_sub .chara_wrpr .name_area .left {
    width:16px;
    margin: 0 auto 20px auto;
}
#content .wrap .content-area .site-main .chara_list_sub .chara_wrpr .name_area .left .point {
    
}
#content .wrap .content-area .site-main .chara_list_sub .chara_wrpr .name_area .left .point img {
    width: 100%;
    height: auto;
}

#content .wrap .content-area .site-main .chara_list_sub .chara_wrpr .name_area .right {
    
}
#content .wrap .content-area .site-main .chara_list_sub .chara_wrpr .name_area .right .kana {
    font-size: 20px;
}
#content .wrap .content-area .site-main .chara_list_sub .chara_wrpr .name_area .right .name_txt {
    font-size: 48px;
}
#content .wrap .content-area .site-main .chara_list_sub .chara_wrpr .name_area .right .chara_voice {
    font-size: 22px;
}
#content .wrap .content-area .site-main .chara_list_sub .chara_wrpr a {
    position: absolute;
    top:0;
    left:0;
    width: 100%;
    height: 100%;
}

.character_single {
    position: relative;
}
.character_single .hdr_area {}
.character_single .hdr_area .name_area {
    position: absolute;
    top:0;
    margin: 0 0 0 6.666%;
}
.character_single .hdr_area .name_area hr {
    float: left;
    border: none;
    border-top: 2px solid #000;
    margin: 16px 13px 0 0;
    padding: 0;
    width: 60px;
}
.character_single .hdr_area .name_area p {
    float:left;
    font-size: 24px;
    line-height: 1.4em;
}
.character_single .content_chara {
    margin: 0 6.666% 0 6.666%;
}
.character_single .content_chara .kana {
    font-size: 26px;
    line-height: 1em;
    letter-spacing: 0.05em;
    margin: 0 0 10px 0;
}
.character_single .content_chara h3 {
    font-size: 64px;
    line-height: 1em;
    letter-spacing: 0.05em;
    margin: 0 0 20px 0;
}
.character_single .content_chara .cv {
    font-size: 26px;
    line-height: 1em;
    letter-spacing: 0.05em;
    margin: 0 0 18px 0;
}
.character_single .content_chara .btn_cv_com {
    width: 53.23%;
}
.character_single .content_chara .btn_cv_com img {
    width: 100%;
    height: auto;
    margin: 0 0 42px 0;
}
.character_single .content_chara .body_txt {
    font-size:28px;
    line-height: 1.8em;
}

#content .wrap .content-area .site-main .link_area {
    position: relative;
    text-align: center;
    padding:3% 0;
    margin: 13% 0;
}
#content .wrap .content-area .site-main .link_area img {
    width: 100%;
    height: auto;
}
#content .wrap .content-area .site-main .link_area .btn_next {
    position: absolute;
    right:0px;
    top:0px;
    width: 7.2%;
    margin: 0 6.666% 0 0;
}
#content .wrap .content-area .site-main .link_area .to_list {
    width: 9.066%;
    margin: 0 auto;
}
#content .wrap .content-area .site-main .link_area .btn_prev {
    position: absolute;
    left:0px;
    top:0px; 
    width: 7.2%;
    margin: 0 0 0 6.666%;
}

#content .wrap .content-area .site-main .chara_list {
    display: none;
    /*overflow: hidden;
    position: absolute;*/
    overflow: scroll;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 2;
    width: 100%;
    /*min-height: 100%;*/
    height:100%;
    background-image: url(../images/news_sp/news_list_bg.jpg);
    background-repeat: no-repeat;
    background-position: center top;
    background-color: #24a9fe;
}
#content .wrap .content-area .site-main .chara_list ul.main {
    margin: 35% 0 0 0;
}
#content .wrap .content-area .site-main .chara_list ul.sub {
    margin: 18% 0 30% 0;
}
#content .wrap .content-area .site-main .chara_list ul li {
    text-align: center;
    margin-bottom: 69px;
}
#content .wrap .content-area .site-main .chara_list ul li a {
    color:#fff;
    font-size: 36px;
    line-height: 1em;
    letter-spacing: 0.05em;
}

#btn_cat_open {
    display: none;
    width:48%;
    text-align: center;
    font-size: 30px;
    position: fixed;
    bottom: 0px;
    left:0px;
    color: #fff;
    text-transform: uppercase;
    background-color: #23aaff;
    padding: 23px 0;
    margin:0 0 10% 26.8%;
    z-index: 100001;
}
#btn_cat_open.open {
    display: inline-block;
}
#btn_cat_open .point {
    display: inline-block;
}
#btn_cat_open .point img {
    display: inline-block;
    margin: 15px 0 0 10px;
}
#btn_cat_open a {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
}

#btn_cat_close {
    display: none;
    width:48%;
    text-align: center;
    font-size: 30px;
    position: fixed;
    bottom: 0px;
    left:0px;
    background-color: #fff;
    text-transform: uppercase;
    color: #23aaff;
    padding: 23px 0;
    margin:0 0 10% 26.8%;
    z-index: 100001;
}
#btn_cat_close.open {
    display: inline-block;
}
#btn_cat_close .point {
    display: inline-block;
}
#btn_cat_close .point img {
    display: inline-block;
    margin: 15px 0 0 10px;
}
#btn_cat_close a {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
}

#cast_comment {
    display: none;
    /*position: absolute;*/
    position: fixed;
    top:0;
    left:0;
    width: 100%;
    /*min-height: 100%;*/
    height: 100%;
    overflow: scroll;
    z-index: 100005;
}
#cast_comment .pop_bg {
    position: fixed;
    top:0;
    left:0;
    width: 100%;
    height: 100%;
    background-color: #23aaff;
}
#cast_comment .btn_close {
    position: fixed;
    top:0;
    right:0;
    width: 13.333%;
    z-index: 2;
}
#cast_comment .btn_close img {
    width: 100%;
    height: auto;
}
#cast_comment .comment_wrpr {
    position: relative;
    width: 86.666%;
    margin: 14.5% auto;
}
#cast_comment .comment_wrpr .comment_box {
    margin-bottom: 75px;
}
#cast_comment .comment_wrpr .comment_box .hdr {
    overflow: hidden;
    vertical-align: top;
    margin: 0 0 35px 0;
}
#cast_comment .comment_wrpr .comment_box .hdr .title {
    float:left;
    font-size: 30px;
    margin: 22px 14px 0 0;
}
#cast_comment .comment_wrpr .comment_box .hdr .name {
    font-size: 56px;
    float:left;
    font-weight: 200;
}
#cast_comment .comment_wrpr .comment_box .hdr .en {
    font-size: 26px;
    font-weight: 300;
    clear: both;
}
#cast_comment .comment_wrpr .comment_box .txt_area {
    overflow: hidden;
}
#cast_comment .comment_wrpr .comment_box .txt_area p {
    font-size: 28px;
    line-height: 2.1em;
    color: #fff;
    margin-bottom: 1em;
}
#cast_comment .comment_wrpr .comment_box .txt_area .thumb_area {
    margin-bottom: 5%;
}
#cast_comment .comment_wrpr .comment_box .txt_area .thumb_area img {
    width: 100%;
    height: auto;
}
#cast_comment .comment_wrpr .comment_box .txt_area .right_area {
}


}