.section{
    position: relative;
}
/* section_background ------------------------------------------------------------ */
.section .img_bg{
    width: 100%;
    height: 100vh;  
    position: relative;
    min-height: 900px;
    max-height: 1100px;
}
.section1 .img_bg{
    background: url(../images/character/section1.webp) center;
    background-size:cover;
}
.section2 .img_bg{
    background: url(../images/character/section2.webp) center;
    background-size:cover;
}   
.section3 .img_bg{
    background: url(../images/character/section3.webp) center;
    background-size:cover; 
}
.section4 .img_bg{background: url(../images/character/section4.webp) center;
    background-size:cover; 
}
.section5 .img_bg{
    background: url(../images/character/section5.webp) center;
    background-size:cover; 
}


.character_nav{
    position: fixed;
    right: 30px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 700;
}

.character_menu li a{
    display: block;
    width: 32px;
    height: 32px;
    opacity: 0.5;
    -webkit-filter: grayscale(100%); /* Safari */
    filter: grayscale(100%);
}
.character_menu li{
    margin: 20px 0;
    position: relative;
}
.character_menu li+li::before{
    content: '';
    display: block;
    width: 2px;
    height: 14px;
    background: url(../images/character/char_nav_point.webp) no-repeat;
    position: absolute;
    top:-16px;
    left: 50%;
    opacity: 0.4;
    margin-left: -1px;
}
.character_menu li a img{
    height: 100%;
    width: auto;
}
.character_menu li a.active,.character_menu li a.active:hover,.character_menu li a:hover{
    opacity: 1;
    -webkit-filter: grayscale(0%); /* Safari */
    filter: grayscale(0%);
}
.chara_pic_mob{
    display: none;
}
.char_title{
    padding-top: 130px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.char_title img{
    height: 60px;
}
.char_title::before{
    content: '';
    display: block;
    width: 162px;
    height: 64px;
    background: url(../images/title_left_icon.webp);
}
.char_title::after{
    content: '';
    display: block;
    width: 158px;
    height: 67px;
    background: url(../images/title_right_icon.webp);
}
.area_title{
    padding-top: 80px;
    margin-bottom: 20px;
    opacity: 0;
    animation: area_title 0.4s 0.1s forwards ease-in-out ;
}
.section1 .area_title{
    padding-top: 25px;
    margin-bottom: 0px;
}
@keyframes area_title{
    0%{
      transform: translateY(50px);
      opacity:0;
    }
    100%{
        transform: translateY(0px);
        opacity:1;
    }
  }
.character_list_pc{
    position: relative;
    width: 1400px;
    height: 650px;
    margin: 0 auto;
    opacity: 0;
    animation: character_list_pc 0.3s 0.2s forwards ease-in-out ;
}
@keyframes character_list_pc{
    0%{
      transform:scale(0.8);
      opacity:0;
    }
    100%{
        transform:scale(1);
        opacity:1;
    }
  }
.section1 .character_list_pc{
    margin-top: -85px;
}
.character_list_pc a{
    display: block;
    position: absolute;
    transition: all 0.2s ease-in-out;
}
.character_list_pc a.chara_pc_act{
    transform: scale(1.07);
    z-index: 41;
    -webkit-filter: brightness(110%); /* Safari */
    filter: brightness(110%);
}
.character_list_pc a.chara_pc_act_b{
    -webkit-filter: brightness(50%); /* Safari */
    filter: brightness(50%);
    transform: scale(0.95);
}
.character_list_pc img{
    width: 100%;
}
/* pc_character pic*/
.character_list_pc .chara_pc_s1_1{ width:446px; left:0; z-index: 38;}
.character_list_pc .chara_pc_s1_2{ width:420px; left: 260px; top:84px; z-index: 39;}
.character_list_pc .chara_pc_s1_3{ width:234px; z-index: 40; left:495px;top:90px;}
.character_list_pc .chara_pc_s1_4{ width: 315px; left:678px; top:90px; z-index: 37;}
.character_list_pc .chara_pc_s1_5{ width:492px;left:930px;top:24px; z-index: 36;}

.character_list_pc .chara_pc_s2_2{ width:510px; left:-68px; z-index: 38;}
.character_list_pc .chara_pc_s2_3{ width:337px; z-index: 40; left:335px;top:45px;}
.character_list_pc .chara_pc_s2_4{ width: 479px; left:600px; top:35px; z-index: 36;}
.character_list_pc .chara_pc_s2_5{ width:500px;left:967px;top:25px; z-index: 37;}

/* .character_list_pc .chara_pc_s2_1{ width:439px; left:-160px; top: 16px; z-index: 39;}
.character_list_pc .chara_pc_s2_2{ width:510px; left:168px; z-index: 38;}
.character_list_pc .chara_pc_s2_3{ width:337px; z-index: 40; left:522px;top:45px;}
.character_list_pc .chara_pc_s2_4{ width: 479px; left:715px; top:35px; z-index: 36;}
.character_list_pc .chara_pc_s2_5{ width:500px;left:1035px;top:25px; z-index: 37;} */

.character_list_pc .chara_pc_s3_1{ width:422px; left:95px; top: 0px; z-index: 39;}
.character_list_pc .chara_pc_s3_2{ width:336px; left:512px; top: 12px; z-index: 40;}
.character_list_pc .chara_pc_s3_3{ width:415px; z-index:38; left:800px;top:15px;}

/* .character_list_pc .chara_pc_s3_1{ width:422px; left:196px; top: 0px; z-index: 39;}
.character_list_pc .chara_pc_s3_2{ width:336px; left:512px; top: 12px; z-index: 40;}
.character_list_pc .chara_pc_s3_3{ width:415px; z-index:38; left:680px;top:15px;}
.character_list_pc .chara_pc_s3_4{ width:378px; left:1070px; top:20px; z-index: 37;}
.character_list_pc .chara_pc_s3_5{ width:402px; left:-45px; top:-30px; z-index: 37;} */

.character_list_pc .chara_pc_s4_1{ width:435px; left:-68px; top: 0px; z-index: 39;}
.character_list_pc .chara_pc_s4_2{ width:391px; left:360px; top: 8px; z-index: 38;}
.character_list_pc .chara_pc_s4_3{ width:243px; z-index:40; left:1167px;top:30px;}
.character_list_pc .chara_pc_s4_4{ width:438px; left:730px; top:5px; z-index: 40;}

/* .character_list_pc .chara_pc_s4_1{ width:435px; left:-146px; top: 0px; z-index: 39;}
.character_list_pc .chara_pc_s4_2{ width:391px; left:230px; top: 8px; z-index: 38;}
.character_list_pc .chara_pc_s4_3{ width:243px; z-index:40; left:1180px;top:30px;}
.character_list_pc .chara_pc_s4_4{ width:438px; left:535px; top:5px; z-index: 40;}
.character_list_pc .chara_pc_s4_5{ width:479px; left:740px; top:2px; z-index: 36;} */

.character_list_pc .chara_pc_s5_1{ width:533px; left:-50px; top: 4px; z-index: 39;}
.character_list_pc .chara_pc_s5_2{ width:293px; left:520px; top: 8px; z-index: 40;}
.character_list_pc .chara_pc_s5_3{ width:513px; z-index:37; left:845px;top:-80px;}

.arrow{
    position: absolute;
    left: 50%;
    margin-left: -19px;
    width: 37px;
    bottom: 3%;
    z-index: 45;
}
.arrow >div{
    position: relative;
    width: 37px;
    height: 40px;
}
.arrow img{
    position: absolute;
    top: 0;
    left: 0;
}
.arrow img:first-child{
    animation: chara_arrow 1.6s infinite  ;
}
.arrow img:last-child{
    margin-top: -15px;  
    animation: chara_arrow2 1.6s 1.6s infinite ;
}

@keyframes chara_arrow{
    0%{
      transform: translateY(-20px);
      opacity:0;
    }
    50%{
        transform: translateY(0px);
        opacity: 1;
    }
    100%{
        transform: translateY(0px);
        opacity: 1;
    }
  }
  @keyframes chara_arrow2{
    0%{
      transform: translateY(-20px);
      opacity:0;
    }
    50%{
        transform: translateY(0px);
        opacity:0.7;
    }
    100%{
        transform: translateY(0px);
        opacity:0.7;
    }
  }
  .character_list_mob,.character_list_mob.slick-slider{
    display: none;
  }

@media screen and (max-width:1600px) {
    .character_list_pc{
        width:94%;
        height: auto;
        margin: 0 auto;
    }
/* pc_character pic*/
.character_list_pc .chara_pc_s1_1{ width:29.7%; left:0; z-index: 38;}
.character_list_pc .chara_pc_s1_2{ width:28%; left:20.6%; top:5.6vw; z-index: 39;}
.character_list_pc .chara_pc_s1_3{ width:16%; z-index: 40; left:36.7%;top:6vw;}
.character_list_pc .chara_pc_s1_4{ width: 21%; left:48.5%; top:6vw; z-index: 37;}
.character_list_pc .chara_pc_s1_5{ width:32.8%;left:65.3%;top:1.6vw; z-index: 36;}

.character_list_pc .chara_pc_s2_2{ width:34%; left:-1%; z-index: 38;}
.character_list_pc .chara_pc_s2_3{ width:22.4%; z-index: 40; left:26%;top:3vw;}
.character_list_pc .chara_pc_s2_4{ width: 31.9%; left:43.6%; top:2.3vw; z-index: 36;}
.character_list_pc .chara_pc_s2_5{ width:33.3%;left:68%;top:1.6vw; z-index: 37;}

/* .character_list_pc .chara_pc_s2_1{ width:29.2%; left:-8.2%; top:1vw; z-index: 39;}
.character_list_pc .chara_pc_s2_2{ width:34%; left:11%; z-index: 38;}
.character_list_pc .chara_pc_s2_3{ width:22.4%; z-index: 40; left:34.8%;top:3vw;}
.character_list_pc .chara_pc_s2_4{ width: 31.9%; left:47.6%; top:2.3vw; z-index: 36;}
.character_list_pc .chara_pc_s2_5{ width:33.3%;left:72.3%;top:1.6vw; z-index: 37;} */

.character_list_pc .chara_pc_s3_1{ width:27.5%; left:8%; top: 0px; z-index: 39;}
.character_list_pc .chara_pc_s3_2{ width:22.4%; left:38.4%; top:0.2vw; z-index: 40;}
.character_list_pc .chara_pc_s3_3{ width:27.6%; z-index:38; left:57%;top:0.45vw;}

/* .character_list_pc .chara_pc_s3_1{ width:27.5%; left:19%; top: 0px; z-index: 39;}
.character_list_pc .chara_pc_s3_2{ width:22.4%; left:38.4%; top:0.2vw; z-index: 40;}
.character_list_pc .chara_pc_s3_3{ width:27.6%; z-index:38; left:48%;top:0.45vw;}
.character_list_pc .chara_pc_s3_4{ width:25.5%; left:74%; top:0.5vw; z-index: 37;}
.character_list_pc .chara_pc_s3_5{ width:27.8%; left:3.2%; top:-4vw; z-index: 37;} */

.character_list_pc .chara_pc_s4_1{ width:27%; left:2%; top: 0.8vw; z-index: 39;}
.character_list_pc .chara_pc_s4_2{ width:24.5%; left:28%; top:0.5vw;  z-index: 38;}
.character_list_pc .chara_pc_s4_3{ width:15.5%; z-index:40; left:79%;top:1.5vw;}
.character_list_pc .chara_pc_s4_4{ width:27.3%; left:52%; top:0.6vw; z-index: 40;}

/* .character_list_pc .chara_pc_s4_1{ width:27%; left:-10px; top: 0.8vw; z-index: 39;}
.character_list_pc .chara_pc_s4_2{ width:24.5%; left:22.2%; top:0.5vw; z-index: 38;}
.character_list_pc .chara_pc_s4_3{ width:15.5%; z-index:40; left:81%;top:1.5vw;}
.character_list_pc .chara_pc_s4_4{ width:27.3%; left:41%; top:0.6vw; z-index:40;}
.character_list_pc .chara_pc_s4_5{ width:29.5%; left:54%; top:0.7vw; z-index: 37;} */

.character_list_pc .chara_pc_s5_1{ width:35.5%; left:2%; top:0.2vw; z-index: 39;}
.character_list_pc .chara_pc_s5_2{ width:19.5%; left:39%; top:0.5vw; z-index: 40;}
.character_list_pc .chara_pc_s5_3{ width:35%; z-index:37; left:59.5%;top:-5.2vw;}
}
@media screen and (max-width:1200px) {
    .section .img_bg{
        min-height:768px;
    }
    .area_title img{
        width: auto;
        height: 70px;
    }
    .section3 .area_title img,.section5 .area_title img{
        height:100px;
    }
    .section1 .character_list_pc {
        margin-top: -65px;
    }
}
@media screen and (max-width:960px) {
    .section .img_bg{
        height: auto;  
        min-height:  auto;  
        max-height: auto; 
        padding-bottom:70px; 
    }
    .section1 .img_bg{
        background: url(../images/character/section1.webp) center center;
        background-size:auto 100%;
    }
    .section2 .img_bg{
        background: url(../images/character/section2.webp) center center;
        background-size:auto 100%;
    }   
    .section3 .img_bg{
        background: url(../images/character/section3.webp) center center;
        background-size:auto 100%; 
    }
    .section4 .img_bg{background: url(../images/character/section4.webp) center center;
        background-size:auto 100%; 
    }
    .section5 .img_bg{
        background: url(../images/character/section5.webp) center center;
        background-size:auto 100%; 
    }
    .character_list_pc{
        display:none;
    }
    .character_list_mob.slick-slider{
        display: block;
        width: 82%;
        margin: 0 auto;
        margin-bottom:120px;
    }
    .character_list_mob .slick-dots{
        bottom: -65px;
    }
    .character_list_mob img{
        width:96%;
        margin: 0 auto;
        max-width: 227px;
    }
    .area_title{
        animation: none;
        opacity: 1;
        padding-top: 60px;
        margin-bottom: 20px;
    }
    .section1 .area_title{
        margin-bottom: 20px;
    }
    .character_nav{
        display: none;
    }
    .area_title img{
        height:85px;
    }
    .section3 .area_title img,.section5 .area_title img{
        height:124px;
    }
    .character_list_mob .slick-prev{
        left : -54px;
    }
    .character_list_mob .slick-next{
        right: -54px;
    }
    .char_title img {
        height:7vw;
        max-height: 70px;
    }
    .char_title::before{
        width:18%;
        height:7vw;
        background: url(../images/title_left_icon.webp) no-repeat center right;
        background-size: auto 100%;
    }
    .char_title::after{
        width:17%;
        height:7vw;
        background: url(../images/title_right_icon.webp) no-repeat center left;
        background-size: auto 100%;
    }
    #btn_top{
        display: none;
    }
}
@media screen and (max-width:600px) {
    .section1 .img_bg{
        background: url(../images/character/mbg_s_r1.webp) center center;
        background-size:100% 100%;
    }
    .section2 .img_bg{
        background: url(../images/character/mbg_s_r2.webp) center center;
        background-size:100% 100%;
    }   
    .section3 .img_bg{
        background: url(../images/character/mbg_s_r3.webp) center center;
        background-size:100% 100%; 
    }
    .section4 .img_bg{background: url(../images/character/mbg_s_r4.webp) center center;
        background-size:100% 100%; 
    }
    .section5 .img_bg{
        background: url(../images/character/mbg_s_r5.webp) center center;
        background-size:100% 100%; 
    }
    .char_title {
        padding-top: 80px;
    }
    .area_title img{
        height:16vw;
        max-height: 60px;
    }
    .section3 .area_title img,.section5 .area_title img{
        height:20vw;
        max-height:124px;
    }
    .section .img_bg{
        padding-bottom:1px;
    }
    .character_list_mob.slick-slider {
        width:80%;
        margin-bottom: 100px;
    }
    .area_title {
        padding-top:30px;
        margin-bottom: 30px;
    }
    .character_list_mob .slick-dots{
        bottom: -50px;
    }
    .character_list_mob .slick-dots li button:before {
        background: url(../images/slide_point_g.webp) no-repeat center;
        opacity: 0.8;
    }
    .character_list_mob .slick-next,.character_list_mob .slick-prev{
        width: 25px;
        height: 28px;
    }
    .character_list_mob .slick-next {
        right: -30px;
    }
    .character_list_mob .slick-prev{
        left: -30px;
    }
    .character_list_mob .slick-dots li.slick-active button:before {
        background: url(../images/slide_point_act_g.webp) no-repeat center;
    }
    .arrow{
        display: none;
    }

}