@charset "UTF-8";
.character-contents {
   width: 100%;
    padding: min(2vw, 20px) 0 0 0 ;
}
.character-contents #crumb{
    width: 94%;
    max-width: 1080px;
}
.character-contents .carousel {
    /* スライダー内の最大幅に合わせて中央寄せ */
    max-width: 1080px;
    margin: min(3vw, 30px) auto 0 auto;
}
.character-list {
    width: 100%;
    max-width: 1080px;
    /* margin: min(3vw, 30px) auto 0 auto; */
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    position: relative;
}
/*prev、nextボタンを仮で配置*/
/* .character-list:before{
    content: "";
    width: min(4.2vw, 42px);
    height: min(4.2vw, 42px);
    display: block;
    background:url(../img/character/arrow.png) no-repeat left center;
    background-size:min(4.2vw, 42px);
    position: absolute;
    left: min(2vw, 25px);
} */
/* .character-list:after{
    content: "";
    width: min(4.2vw, 42px);
    height: min(4.2vw, 42px);
    display: block;
    background:url(../img/character/arrow.png) no-repeat left center;
     transform: scale(-1, 1);
    background-size:min(4.2vw, 42px);
    position: absolute;
    right: min(2vw, 25px);
} */
/* prevボタン */
.character-slider-prev{
    border: none;
    width: min(4.2vw, 42px);
    height: min(4.2vw, 42px);
    display: block;
    background:url(../img/character/arrow.png) no-repeat left center;
    background-size:min(4.2vw, 42px);
    position: absolute;
    left: min(2vw, 25px);
}
.character-slider-prev:hover{
    cursor: pointer;
}
/* nextボタン */
.character-slider-next{
    border: none;
    width: min(4.2vw, 42px);
    height: min(4.2vw, 42px);
    display: block;
    background:url(../img/character/arrow.png) no-repeat left center;
    transform: scale(-1, 1);
    background-size:min(4.2vw, 42px);
    position: absolute;
    right: min(2vw, 25px);
}
.character-slider-next:hover{
    cursor: pointer;
}
@media screen and (max-width:768px) {
     .character-contents {
        padding-top: 4.8vw;
    }
    /* .character-list {
        margin-top: 6.67vw;
    } */
    .character-contents .carousel {
        margin-top: 6.67vw;
    }
    .character-slider-prev{
        width: 7.2vw;
        height: 7.2vw;
        display: block;
        background:url(../img/character/arrow.png) no-repeat left center;
        background-size:7.2vw;
        position: absolute;
        left: 2.67vw;
    }
    .character-slider-next{
        width: 7.2vw;
        height:7.2vw;
        display: block;
        background:url(../img/character/arrow.png) no-repeat left center;
        transform: scale(-1, 1);
        background-size:7.2vw;
        position: absolute;
        right:2.67vw;
    }
 }
/*------------------------------------
  キャラクター紹介
-------------------------------------*/
.character {
    width: 100%;
    border-radius: min(4vw, 40px);
    border: min(.4vw, 4px) solid #f8c92e;
    height: min(46vw, 500px);
    color: #FFF;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    background: url(../img/common/bg_pattern.png) repeat-y;
    background-size: 100%;
    box-shadow: inset 0 0 40px rgba(0, 0, 0, .4);
}
.character-item {
    width: min(88vw, 940px);
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}
.character-item figure {
    width: 50%;
}
.character-item .character-item__txt {
    width: 48%;
   margin-right: 2%;
    border-radius: min(2vw, 20px);
    padding: min(4vw, 40px);
}
.character-item__txt .character-item__name {
    font-size: 8.53;
    line-height: 1;
    font-weight: 800;
    color: rgba(255, 255, 255, .7);
}
.character-item__txt .character-item__name span {
    display: block;
    padding-bottom: 10px;
    font-size: min(4vw, 40px);
    color: rgba(255, 255, 255, 1);
}
.character-item__txt .character-item__intro {
    font-size: min(2vw, 20px);
    line-height: 1.8;
    margin-top: min(1.5vw, 15px);
}
.character-item__txt .character-item__voice {
    font-size: min(1.7vw, 17px);
    color: rgba(255, 255, 255, .7);
    margin-top: min(1.6vw, 16px);
}
@media screen and (max-width:768px) {
    .character {
        border-radius: 10.67vw;
        border: 1.07vw solid #f8c92e;
        height: 160vw;
        color: #FFF;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        background: url(../img/common/bg_pattern.png) repeat-y;
        background-size: 200%;
    }
    .character-item {
        width: 92%;
        margin: 0 auto;
        display: block;
    }
    .character-item figure {
        width: 100%;
    }
    .character-item .character-item__txt {
        width: 100%;
        border-radius: 6.4w;
        padding: 6.67vw;
    }
    .character-item__txt .character-item__name {
        font-size: 4.27vw;
    }
    .character-item__txt .character-item__name span {
        font-size: 7.47vw;
        padding-bottom: 2vw;
    }
    .character-item__txt .character-item__intro {
        font-size: 4vw;
        margin-top: 4vw;
        line-height: 1.7;
    }
    .character-item__txt .character-item__voice {
        font-size: 3.47vw;
        margin-top: 2vw;
    }
}
/*------------------------------------
  スクロールバー
-------------------------------------*/
.character-scrollnav{
  width:min(54vw, 540px);
    height:min(5vw, 50px);
    margin: min(3vw, 30px) auto 0 auto;
    position: relative;
}
.character-scrollnav__range {
    display: block;
    margin: 0 auto;
    width: min(52.7vw, 527px);
    height: auto;
    appearance: none;
    background: transparent;
}
/* Chrome, Safari, Edge */
.character-scrollnav__range::-webkit-slider-runnable-track {
    background: #bebebe;
    height: min(1.6vw, 16px);
    border-radius: 50px;
}
/* Firefox */
.character-scrollnav__range::-moz-range-track {
    background-color: #bebebe;
    height: min(1.6vw, 16px);
    border-radius: 50px;
}
/* Chrome,Safari,Edge */
.character-scrollnav__range::-webkit-slider-thumb {
    appearance: none;
    background-color:transparent;
    background-image: url(../img/character/scrollbar.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: min(6.57vw, 65.7px);
    height: min(1.6vw, 16px);
    transform: scale(2.5);
}
.character-scrollnav__range::-webkit-slider-thumb:hover {
    cursor: pointer;
}
/* Firefox */
.character-scrollnav__range::-moz-range-thumb {
    background-color: transparent;
    background-image: url(../img/character/scrollbar.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: min(6.57vw, 65.7px);
    height: min(1.6vw, 16px);
    transform: scale(2.5);
    border: none;
}
.character-scrollnav__range::-moz-range-thumb:hover{
    cursor: pointer;
}
@media screen and (max-width: 768px) {
    .character-scrollnav {
        width: 73.33vw;
        height:8vw;
        margin: 8 auto 0 auto;
        position: relative;
    }
    .character-scrollnav__range {
        width: 70.27vw;
    }
    /* Chrome, Safari, Edge */
    .character-scrollnav__range::-webkit-slider-runnable-track {
        height: 2.13vw;
    }
    /* Firefox */
    .character-scrollnav__range::-moz-range-track {
        height: 2.13vw;
    }
    /* Chrome,Safari,Edge */
    .character-scrollnav__range::-webkit-slider-thumb {
        width: 8.75vw;
        height: 2.13vw;
        transform: scale(3);
    }
    /* Firefox */
    .character-scrollnav__range::-moz-range-thumb {
        width: 8.75vw;
        height: 2.13vw;
        transform: scale(3);
    }
}

/*------------------------------------
  キャラクターナビ
-------------------------------------*/
.character-btn {
    width: 100%;
    overflow-x: auto;
    padding: min(1vw, 20px) 0 min(2vw, 30px) 0;
    -ms-overflow-style: none; /* IE, Edge 対応 */
    scrollbar-width: none;    /* Firefox 対応 */
}
.character-btn::-webkit-scrollbar {
    display: none; /* Chrome, Safari 対応 */
}
.character-btn ul {
    width: 100%;
    display: flex;
    margin-top: min(2vw, 20px);
}
.character-btn ul li {
    min-width: 180px;
    width: 180px;
    text-align: center;
}
.character-btn ul li a {
    color: #333;
    transition-duration: 0.3s;
}
.character-btn ul li.active a {
    opacity: .6;
}
.character-btn ul li a:hover {
    opacity: .6;
    cursor: pointer;
}
.character-btn ul li a figure {
    text-align: center;
    width: min(14.44vw, 170px);
    margin: 0 auto;
}
.character-btn ul li a p {
    font-size: min(1.6vw, 17px);
    margin-top: min(.5vw, 5px);
}
@media screen and (max-width:1080px) {
    .character-contents #crumb {
        width: 94%;
    }
    .character-btn {
        width: 92.59vw;
        margin: 0 auto;
    }
    .character-btn ul li {
        min-width: 15.43vw;
        width: 15.43vw;
    }
}
@media screen and (max-width:768px) {
    .character-btn {
        width: 100%;
        overflow-x: auto;
        padding: 4vw 0 8vw 0;
    }
    .character-btn ul {
        width: 96%;
        margin-left: 4%;
        display: flex;
        margin-top: 5.33vw;
    }
    .character-btn ul li {
        min-width: 37.33vw;
        width: 37.33vw;
        text-align: center;
    }
    .character-btn ul li a figure {
        text-align: center;
        width: 96%;
    }
    .character-btn ul li a p {
        font-size: 3.73vw;
        margin-top: 1.33vw;
    }
}

.wilson{background-color: #e31223;}
.wilson .character-item .character-item__txt{background:rgba(168,3,7,.5);}

.brewster{background-color: #196db3;}
.brewster .character-item .character-item__txt{background:rgba(0,65,119,.5);}

.koko{background-color: #90c231;}
.koko .character-item .character-item__txt{background:rgba(113,169,8,.5);}

.hanzo{background-color: #0066b5;}
.hanzo .character-item .character-item__txt{background:rgba(74,142,194,.5);}

.actionchugge{background-color: #cd9847;}
.actionchugge .character-item .character-item__txt{background:rgba(164,115,40,.5);}

.pete{background-color: #4d4d4d;}
.pete .character-item .character-item__txt{background:rgba(37,37,37,.5);}

.frostini{background-color: #e6c956;}
.frostini .character-item .character-item__txt{background:rgba(164,135,26,.5);}

.jackman{background-color: #e50055;}
.jackman .character-item .character-item__txt{background:rgba(161,16,70,.5);}

.zack{background-color: #00367f;}
.zack .character-item .character-item__txt{background:rgba(6,41,88,.5);}

.hoottoot{background-color: #00abeb;}
.hoottoot .character-item .character-item__txt{background:rgba(9,146,198,.5);}

.harrison{background-color: #6f7ebd;}
.harrison .character-item .character-item__txt{background:rgba(73,89,154,.5);}

.emery{background-color: #bfbfbf;}
.emery .character-item .character-item__txt{background:rgba(120,120,120,.5);}

.hodge{background-color: #b14800;}
.hodge .character-item .character-item__txt{background:rgba(209,136,86,.5);}

.fletch{background-color: #007440;}
.fletch .character-item .character-item__txt{background:rgba(3,154,86,.5);}

.tyne{background-color: #ed6c00;}
.tyne .character-item .character-item__txt{background:rgba(245,155,80,.5);}

.skylar{background-color: #e9b800;}
.skylar .character-item .character-item__txt{background:rgba(160,127,1,.5);}

.calley{background-color: #eb612f;}
.calley .character-item .character-item__txt{background:rgba(205,76,30,.5);}

.zephie{background-color: #c0c501;}
.zephie .character-item .character-item__txt{background:rgba(148,152,4,.5);}

.pace{background-color: #ecb403;}
.pace .character-item .character-item__txt{background:rgba(207,157,0,.5);}

.mtambo{background-color: #d1ca57;}
.mtambo .character-item .character-item__txt{background:rgba(166,158,23,.5);}

.dunbar{background-color: #79975a;}
.dunbar .character-item .character-item__txt{background:rgba(83,124,41,.5);}

.speedy{background-color: #932a70;}
.speedy .character-item .character-item__txt{background:rgba(122,18,87,.5);}

.chatsworth{background-color: #b5afd1;}
.chatsworth .character-item .character-item__txt{background:rgba(127,119,161,.5);}

.asher{background-color: #e83828;}
.asher .character-item .character-item__txt{background:rgba(201,34,19,.5);}

.cormac{background-color: #64c0ab;}
.cormac .character-item .character-item__txt{background:rgba(70,166,144,.5);}

.decka{background-color: #ec6d65;}
.decka .character-item .character-item__txt{background:rgba(208,63,54,.5);}

.irving{background-color: #ab0911;}
.irving .character-item .character-item__txt{background:rgba(196,62,69,.5);}

.olwin{background-color: #007e6b;}
.olwin .character-item .character-item__txt{background:rgba(46,164,146,.5);}

.piper{background-color: #f39800;}
.piper .character-item .character-item__txt{background:rgba(214,122,14,.5);}

.vee{background-color: #00aabe;}
.vee .character-item .character-item__txt{background:rgba(100,203,215,.5);}