@charset "UTF-8";
.articleList{
    width:100%;
    background-color:#fff;
}
.articleList .expositionTx{
    font-size::17px;
    margin-bottom:1.5em;
}
.articleList .ttl03{
    font-size:25px;
    font-weight:700;
    color:#C95102;
    border-bottom:4px solid #C95102;
    padding:0 0 4px 2px;
    margin-bottom:30px;
}
.articleList .ttl03b{
    font-size:17px;
    font-weight:400;
    color:#C95102;
    margin-bottom:24px;
    background-image: url("../_img_bg/icon_eye.svg");
    background-repeat: no-repeat;
    background-position: left center ;
    background-size:1.3em auto;
    padding-left:1.5em;
}
.articleList .ctgDiscript{
    font-size:15px;
    font-weight:400;
    margin-bottom:40px;
}
.articleList .exLink{
    font-size:15px;
    font-weight:400;
    padding-top:0.5em;
}
.articleList .exLink a{
    color:#1E77C9;
    text-decoration:underline;
    text-underline-offset: 3px;
}
.articleList .topPickup{
    width:100%;
    margin-bottom:40px;
}
.articleList .topKv{
    margin-bottom:8px;
    text-align:center;
    border-radius:8px;
}
.articleList .topKv img{
    border-radius:8px;
}
.articleList .DateCate{
    display:flex;
    margin-bottom:16px;
}
.articleList .category{
    width:50%;
    font-size:15px;
    font-weight:400;
    /* color:#E08500; */
}
.articleList .releaseDate{
    width:50%;
    font-size:15px;
    font-weight:400;
    color:#999999;
    text-align:right;
}
.articleList .afterPup{
    margin:0;
    padding:0;
    list-style:none;
}
.articleList .each{
    margin-bottom:40px;
}
.articleList .each a{
    display:flex;
    justify-content: left;
    color:#333333;
}
.articleList .each a:hover{
    text-decoration:none;
}
.articleList .each .narKV{
    margin-right:16px;
    border-radius:8px;
}
.articleList .narKV img{
    border-radius:8px;
}
.articleList .each .narTtl{
    width:277px;
}

.articleList .each .narTtl .ttl{
    font-size:19px;
    margin-bottom:8px;
}
.articleList .CateDate{
    display:flex;
    justify-content: left; 
    white-space:nowrap;
}
.articleList .CateDate .ctg{
    font-size:15px;
    font-weight:700;
    /* color:#E08500; */
    width:60%;
}   
.articleList .CateDate .date{
    font-size:15px;
    font-weight:700;
    color:#999999;
    text-align:right;
    width:40%;
}   

/* --- ランキング --- */
.articleList.rabking .ttl03{
    font-size:33px;
    line-height:1.2;
    padding-bottom:0.2em;
    font-weight:700;
    color:#E67F38;
    border-bottom :5px solid #E67F38;
    margin-bottom:40px;
    background-image: url("/magazine/_img_bg/heading_character_pose03.png");
    background-size:76px auto;
    background-repeat: no-repeat;
    background-position: 5.2em bottom;
}
.rabking .txp01{
    margin:40px 0;
    font-size:15px;
    font-weight:400;
}
.rabking .topKv{
    position:relative;
    margin-bottom:8px;
}
.rabking .topKv img{
    text-align:center;
    border-radius:8px;
}
.rabking .narKV{
    position:relative;
    margin-right:16px;
    border-radius:8px;
}
.rabking .narKV img{
    border-radius:8px;
}

.badgeA::after{
    position: absolute;
    width: 48px;
    top: 0;
    left: 0;
}
.rank1::after{
    content: url("/magazine/_img_bg/icon_rank_L_1.svg");
}
.rank1{
    border:4px solid #EFBF00;
    background-color:#EFBF00;
}
.rank2::after{
    content: url("/magazine/_img_bg/icon_rank_L_2.svg");
}
.rank2{
    border:4px solid #BCCED1;
    background-color:#BCCED1;
}
.rank3::after{
    content: url("/magazine/_img_bg/icon_rank_L_3.svg");
}
.rank3{
    border:4px solid #D67A1E;
    background-color:#D67A1E;
}
.badgeB::after{
    position: absolute;
    width: 28px;
    top: 0;
    left: 0;
}
.rank4::after{
    content: url("/magazine/_img_bg/icon_rank_M_4.svg");
}
.rank5::after{
    content: url("/magazine/_img_bg/icon_rank_M_5.svg");
}
.rank6::after{
    content: url("/magazine/_img_bg/icon_rank_M_6.svg");
}
.rank7::after{
    content: url("/magazine/_img_bg/icon_rank_M_7.svg");
}
.rank8::after{
    content: url("/magazine/_img_bg/icon_rank_M_8.svg");
}
.rank9::after{
    content: url("/magazine/_img_bg/icon_rank_M_9.svg");
}
.rank10::after{
    content: url("/magazine/_img_bg/icon_rank_M_10.svg");
}

/* --- 連載 XD6,8,16,17 --- */

.seriesList .seriesBox{
    border: 2px solid #C95102;
    border-radius: 24px;
    box-shadow: 4px 4px 0px #C95102;
    padding:24px;
    box-sizing:border-box;
    display:block;
    margin-bottom:40px;
}
.seriesThumb{
    width:100%;
    position:relative;
}
.seriesThumb img{
    width:100%;
    vertical-align:bottom;
}
.seriesThumb .seriesName{
    position:absolute;
    left:0;
    bottom:0;
    color:#fff;
    font-size:21px;
    font-weight:700;
    width:100%;
    height:3.5em;
    background-color: rgba(0,0,0,.88);
    padding:0.5em 1em 1em;
    line-height:1.5;
}
.seriesTtl .ttl{
    font-size:17px;
    font-weight:700;
    color: #C95102;
    padding:8px 0 10px;
}
.articleList .CateDate .ctg2{
    font-size:15px;
    font-weight:700;
    /* color:#D03C6C; */
    width:50%;
}   

/* --- 個別連載一覧 --- w528 */

.seriesIcon{
    margin-bottom:24px;
    display:flex;
    justify-content: left;
    align-items: center;
    gap: 0 10px;
}
.seriesIcon .ttl{
    display:block;
    width:3em;
    text-align:center;
    font-size:14px;
    line-height:1.5;
    background-color:#C95102;
    color:#fff;
    padding:0 4px;
    box-sizing:border-box;
    white-space:nowrap;
}
.seriesIcon .mline{
    display:block;
    width:95%;
    height:1px;
    background-color:#C95102;
    margin:0;
    padding:0;
}
.seriesList .ttl03{
    font-size:25px;
    font-weight:700;
    color: #C95102;
    margin-bottom:24px;
    line-height:1.5;
}
.seriesPickup{
    width:100%;
    padding-bottom:40px;
    margin-bottom:40px;
    border-bottom:1px solid #C95102;
}
.seriesPickup .aboutTx{
    line-height:1.6;
    font-size:16px;
}
.seriesPickup img{
    width:100%;
}
.seriesPickup .topKv{
    position:relative;
    margin-bottom:24px;
}
.seriesPickup .topKv img{
    border-radius:20px;
}

.topKv .seriesName{
    position:absolute;
    left:0;
    bottom:0;
    color:#fff;
    font-size:21px;
    font-weight:700;
    width:100%;
    height:3.5em;
    background-color: rgba(0,0,0,.88);
    padding:0.5em 1em 1em;
    line-height:1.5;
    border-radius: 0 0 20px 20px / 0 0 20px 20px;
}

.seriesList .afterPup{
    margin:0;
    padding:0;
    list-style:none;
}
.seriesList .seriesEach{
    margin-bottom:40px;
}
.seriesList .seriesEach a{
    display:flex;
    justify-content: left;
    color:#333333;
}
.seriesList .seriesEach a:hover{
    text-decoration:none;
}
.seriesList .seriesThmb{
    position:relative;
    text-align:center;
    margin-right:16px;
    border-radius:8px;
}
.seriesThmb .num{
    position:absolute;
    top:-3px;
    left:-3px;
    color:#fff;
    font-size:13px;
    font-weight:400;
    width:2.1em;
    height:2.1em;
    line-height:2em;
    text-align:center;
    background-color:#C95102;
    z-index:100;
    border-radius:3em;
}
.seriesList .seriesEach img{
    border-radius:8px;
}

.seriesList .seriesEach .narTtl{
    width:277px;
}
.seriesList .seriesEach .narTtl .ttl{
    font-size:19px;
    margin-bottom:8px;
}
.seriesList .CateDate{
    display:flex;
    justify-content: left; 
}
.seriesList .CateDate .ctg{
    font-size:15px;
    font-weight:700;
    /* color:#E08500; */
    width:50%;
}   
.seriesList .CateDate .date{
    font-size:15px;
    font-weight:700;
    color:#999999;
    text-align:right;
    width:50%;
}   

/* --- 検索結果 --- */
.articleList .ttl03 .or{
    font-size:75%;
}
.ttlTail{
    font-size:19px;
    font-weight:700;
}
.ttlTail i{
    font-weight:400;
    text-decoration:none;
    font-style:normal;
}

/* --- 結果0の場合 --- */
.sorrybox{
    margin-bottom:80px;
}

.sorrybox .tx1{
    color:#C95102;
    font-weight:400;
}
.sorrybox .tx2{
    color:#333;
}
.sorryKid{
    display:block;
    width:114px;
    margin:8px auto 0;
}

.speechBubble {
    position: relative;
    width:100%;
    margin-bottom: 10px;
    padding: 16px;
    border: 1px solid #fdd0b2;
    border-radius: 8px;
    text-align: center;
    font-size: 17px;
    line-height:1.6;
    box-sizing:border-box;
}

.speechBubble::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    border-style: solid;
    border-width: 10px 7.5px 0 7.5px;
    border-color: #fdd0b2 transparent transparent;
    translate: -50% 100%;
}

.speechBubble::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    border-style: solid;
    border-width: 8.3px 6.3px 0 6.3px;
    border-color: #ffffff transparent transparent;
    translate: -50% 100%;
}

.searchRanking .btn{
    text-align:center;
    margin:40px 0  80px;
}
.searchRanking .btn a{
    display:block;
    width:305px;
    height:56px;
    border:1px solid #E67F38;
    border-radius:50px;
    margin:0 auto;
    font-size:15px;
    font-weight:700;
    line-height:56px;
    background:url("/magazine/_img_bg/icon_arrow.svg") no-repeat right 1em center;
    background-size: 24px auto;
}

.carTypeTx{
    font-weight:400;
    white-space:nowrap;
    font-size:13px;
}
.carModel{
    font-size:13px;
    margin-top:1em;
}
.carModel b{
    border:1px solid #FDD0B2;
    border-radius:2em;
    line-height:1;
    padding:0.25em 0.8em;
}

/* --- 車種から探す --- */
.carModelBtns{
    margin:0 0 40px;
    padding:0;
    display:flex;
    flex-wrap: wrap;
    justify-content: left; 
    gap: 16px 16px;
}
.carModelBtns li{
    list-style-type:none;
    white-space:nowrap;
    border:1px solid #FDD0B2;
    background-color:#fff;
    font-size:14px;
    line-height:1;
    padding:0.5em 0.7em;
    border-radius:2em;
}
.carModelBtns li a{
    color:#000;
    text-decoration:none;
    opacity:1;
    transition: 0.3s ease;
}
.carModelBtns li a:hover{
    text-decoration:none;
    opacity:0.5;
    transition: 0.2s ease;
}
.searchForm .fldQstr3{
    width:300px;
    height:45px;
    margin:0 8px 0 0;
}

.searchForm.mgnb{
    margin-bottom:20px;
}





/* --- SP --- */
@media screen and (max-width:768px){
    .articleList{
        width:100%;
    }
    .generalListforSP{
        background-color:#FFFAF7;
        padding:10vw 6.4vw 15vw;
    }
    
    .articleList .expositionTx{
        font-size::4vw;
        margin-bottom:1.5em;
    }
    .articleList .ttl03{
        font-size:6.67vw;
        padding:0 0 4px 2px;
        margin-bottom:8vw;
    }
    .articleList .ttl03b{
        font-size:4.53vw;
        margin-bottom:6.4vw;
    }
    .articleList .ctgDiscript{
        font-size:4vw;
        margin-bottom:10vw;
    }
    .articleList .exLink{
        font-size:4vw;
    }
    .articleList .topPickup{
        width:100%;
        margin-bottom:10vw;
    }
    .articleList .topKv{
        margin-bottom:2.2vw;
    }
    .articleList .DateCate{
        margin-bottom:2.2vw;
    }
    .articleList .category{
        font-size:3.47vw;
    }
    .articleList .releaseDate{
        font-size:3.47vw;
    }
    .articleList .each{
        margin-bottom:10vw;
    }
    .articleList .each a{
        display:block;
    }
    .articleList .each .narKV{
        margin-right:0;
        margin-bottom:2.2vw;
    }
    
    /* --- 一般リストの場合 --- */
    .generalListforSP .each .narTtl{
        width:100%;
    }
    .articleList .each .narTtl .ttl{
        font-size:4.53vw;
        margin-bottom:2.2vw;
    }
    /* --- 記事画像 --- */
    .generalListforSP .thumbImg{
        width:87.2vw;
        height:65.3vw;
        text-align:center;
        background-color:#eee;
    }
    
    .generalListforSP .each .narTtl{
        width:100%;
        display:flex;
        flex-wrap: wrap;
        flex-direction: column-reverse;
        margin-bottom:10vw;
    }
    .generalListforSP .each .narTtl .ttl{
        font-size:4.53vw;
        margin-top:2.2vw;
        margin-bottom:0;
    }
    /* --- 一般リストの場合ここまで --- */
    
    /* --- ランキング --- */
    .articleList.rabking .ttl03{
        font-size:6.67vw;
        margin-bottom:10vw;
        background-image: url("/magazine/_img_bg/heading_character_pose03.png");
        background-size:16vw auto;
        background-repeat: no-repeat;
        background-position: 5.5em bottom;
    }
    .rabking .txp01{
        margin-bottom:10vw;
        font-size:4vw;
        font-weight:400;
    }
    .rabking .topKv{
        margin-bottom:2.13vw;
    }
    .rabking .topKv img{
        border-radius:8px;
    }
    .rabking .narKV{
        margin-right:0;
        border-radius:8px;
    }
    .rabking .narKV img{
        border-radius:8px;
    }
    .badgeA::after{
        width: 12vw;
    }
    
    .badgeB::after{
        width: 8vw;
    }
    
    /* --- 連載 XD6,8,16,17 --- */
    .seriesList .seriesBox{
        border-radius: 6.4vw;
        padding:6.4vw;
        margin-bottom:10vw;
    }
    .seriesThumb .seriesName{
        position:absolute;
        left:0;
        bottom:0;
        color:#fff;
        font-size:4vw;
        font-weight:400;
        width:100%;
        height:3.5em;
        background-color: rgba(0,0,0,.77);
        padding:0.5em 0.5em 0.7em;
        line-height:1.5;
    }
    .seriesTtl .ttl{
        font-size:4.5vw;
        padding:2.13vw 0 2.5vw;
    }
    .articleList .CateDate .ctg2{
        font-size:15px;
        font-weight:700;
        color:#D03C6C;
        width:50%;
    }   

    /* --- 個別連載一覧 --- */
    .seriesIcon{
        margin-bottom:4.3vw;
    }
    .seriesIcon .ttl{
        font-size:3.7vw;
    }
    .seriesList .ttl03{
        font-size:5.6vw;
        margin-bottom:6.4vw;
    }
    .seriesPickup{
        padding-bottom:10vw;
        margin-bottom:10vw;
    }
    .seriesPickup .aboutTx{
        line-height:1.6;
        font-size:4vw;
    }
    .seriesPickup .topKv{
        margin-bottom:5vw;
    }
    .topKv .seriesName{
        position:absolute;
        left:0;
        bottom:0;
        color:#fff;
        font-size:3.7vw;
        font-weight:400;
        width:100%;
        height:3.7em;
        background-color: rgba(0,0,0,.77);
        padding:0.5em 0.7em 0.7em;
        line-height:1.5;
        border-radius: 0 0 20px 20px / 0 0 20px 20px;
    }
    .seriesList .seriesEach{
        margin-bottom:10vw;
    }
    .seriesList .seriesThmb{
        margin-right:3vw;
    }
    .seriesThmb.thumbImg{
        width:27.5vw;
        height:20.5vw;
        text-align:center;
        background-color:#eee;
    }
    .seriesThmb .num{
        position:absolute;
        top:-3px;
        left:-3px;
        font-size:3.47vw;
        font-weight:400;
        width:2.1em;
        height:2.1em;
        line-height:2em;
        border-radius:3em;
    }
    .seriesList .seriesEach .narTtl{
        width:57.5vw;
    }
    .seriesList .seriesEach .narTtl .ttl{
        font-size:4vw;
        line-height:1.6;
        margin-bottom:8px;
    }
    .seriesList .CateDate .ctg{
        font-size:3.47vw;
        font-weight:400;
    }   
    .seriesList .CateDate .date{
        font-size:3.47vw;
        font-weight:400;
    }   

    /* --- 検索結果 --- */
    .searchResSP{
        background-color:#FFFAF7;
        padding:10vw 6.4vw 5vw;
    }
    .searchResSP .ttl03{
        font-size:6.5vw;
    }
    .ttlTail{
        font-size:4.5vw;
        font-weight:400;
    }
    .ttlTail i{
        font-size:4vw;
        font-weight:400;
    }
    
    .searchResSP .each a{
        display:flex;
        justify-content: left;
        color:#333333;
    }
    .searchResSP .thumbImg{
        width:27.5vw;
        height:20.5vw;
        text-align:center;
        background-color:#eee;
    }
    .searchResSP .narTtl{
        width:57.5vw;
        margin-left:2.2vw;
    }
    .searchResSP .each .narTtl .ttl{
        font-size:4vw;
        line-height:1.5;
        font-weight:400;
        margin-bottom:2.2vw;
    }
    .searchResSP .each .CateDate .ctg{
        font-size:3.47vw;
        font-weight:400;
    }   
    .searchResSP .each .CateDate .date{
        font-size:3.47vw;
        font-weight:400;
    }   

    /* --- 結果0の場合 --- */
    .sorrybox{
        margin-bottom:20vw;
    }
    .speechBubble .tx1{
        font-size:4.53vw;
        font-weight:700;
    }
    .speechBubble .tx2{
        font-size:4.53vw;
        font-weight:400;
    }
    .sorryKid{
        display:block;
        width:30vw;
        margin:2.13vw auto 0;
    }
    .speechBubble {
        margin-bottom: 2.67vw;
        font-size: 4.53vw;
        line-height:1.6;
        box-sizing:border-box;
        background-color:#fff;
    }
    .speechBubble::before {
        /* border-width: 10px 7.5px 0 7.5px; */
        border-width: 2.67vw 2vw 0 2vw;
    }
    .speechBubble::after {
        /* border-width: 8.3px 6.3px 0 6.3px; */
        border-width: 2.2vw 1,7vw 1.7vw;
    }
    .forSPbg{
        background-color:#FFFAF7;
        padding:0 0 4vw 0;
    }  
    
    .searchRanking{
        width:100%;
        background-color:#FFFAF7;
    }
    
    .searchRanking .afterPup{
        padding:0 6.4vw;
    }
    .searchRanking .ttl03b{
        width:87vw;
        margin:0 auto 4.27vw;
    }

    .searchRanking .each a{
        display:flex;
        justify-content: left;
        color:#333333;
    }
    .searchRanking .thumbImg{
        width:27.5vw;
        height:20.5vw;
        text-align:center;
        background-color:#eee;
    }
    .searchRanking .narTtl{
        width:57.5vw;
        margin-left:2.2vw;
    }

    .searchRanking .each .narTtl .ttl{
        font-size:4vw;
        line-height:1.6;
        margin-bottom:8px;
    }
    .searchRanking .narTtl .CateDate .ctg{
        font-size:3.47vw;
        font-weight:400;
    }   
    .searchRanking .narTtl .CateDate .date{
        font-size:3.47vw;
        font-weight:400;
    }   

    .searchRanking .btn{
        text-align:center;
        margin:10vw 0  20vw;
    }
    .searchRanking .btn a{
        width:81vw;
        height:14.9vw;
        border-radius:3em;
        font-size:4vw;
        font-weight:700;
        line-height:14.9vw;
        background-size: 6.4vw auto;
    }
    
    .carTypeTx{
        font-size:3.47vw;
    }
    .carModel{
        font-size:3.47vw;
    }




    /* --- 車種から探す --- */
    .carModelBtns{
        margin:0 0 10vw;
        gap: 4.27vw 4.27vw;
    }
    .carModelBtns li{
        font-size:3.47vw;
    }
    .carModelBtns li a{
        opacity:1;
    }
    .carModelBtns li a:hover{
        opacity:1;
    }
    .searchForm .fldQstr3{
        width:73vw;
        height:12vw;
        margin:0 2vw 0 0;
    }
    .searchForm.mgnb{
        margin-bottom:5.5vw;
    }

}/* SP */