/*----------------------------------------
　　パンくずリスト
----------------------------------------*/
.path-link{
    margin-left:5%;
    font-size:12px;
    margin-bottom:18px;
}


/*----------------------------------------
　　汎用　　
----------------------------------------*/
.bb-solid1-fff{
    border-bottom:solid 1px #fff;
}


/*----------------------------------------
　　ciaocomidetail　　
----------------------------------------*/
.ciaocomidetail{
    color:#a89c9c;
}

/*----------------------------------------
　　ciaocomidetail　> mainArea　
----------------------------------------*/
.ciaocomidetail .mainArea{
    box-sizing:border-box;
    width:100%;
    background-color:#fff;
    padding:5%;
    margin-bottom:20px;
}
.ciaocomidetail .mainArea-right{
    font-size:14px;
    margin-left:10px;
}
.ciaocomidetail .mainArea-right .free{
    margin-bottom:10px;
}
.ciaocomidetail .mainArea-right .tit{
    font-size:28px;
    font-weight:bold;
    color:#000;
    line-height:1.065;
    margin-bottom:10px;
}
.ciaocomidetail .mainArea-right .author{
    font-size:22px;
    font-weight:bold;
    margin-bottom:10px;
}
.ciaocomidetail .mainArea-right > ul li{
    list-style:none;
    font-size:20px;
    border:solid 2px #000;
    color:#333;
    padding:3px 0 0;
    width:80px;
    text-align: center;
    border-radius:8px;
    font-weight:bold;
    margin-left:5px;
    position: relative;
    z-index:1;
}
.ciaocomidetail .mainArea-right > ul li::after{
    position: absolute;
    top:4px;
    left:4px;
    content:"";
    height:103%;
    width:102%;
    border-radius:8px;
    background-color:#b4ebeb;
    z-index:-1;
    opacity:0.8;
}
.ciaocomidetail .mainArea .mainArea_description{
    line-height:1.4;
    font-size:16px;
    margin-top:10px;
}


/*----------------------------------------
　　ciaocomidetail　> free-start　　
----------------------------------------*/
.ciaocomidetail .free-start{
    margin-bottom:40px;
}
.ciaocomidetail .free-start > div{
    width:90%;
    margin:0 auto;
    padding:10px;
    background-color:#b4ebeb;
    text-align: center;
    font-size:18px;
    
    font-weight:bold;
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
    border-bottom-right-radius: 30px;
    border-bottom-left-radius: 30px;
}
.ciaocomidetail .free-start > div a{
    text-decoration:none;
    color:#000;
}

/*----------------------------------------
　　ciaocomidetail　> storyArea　　
----------------------------------------*/
.ciaocomidetail .storyArea{
    border-top:solid 1px #fff;
    padding:5%;
    position:relative;
}
.ciaocomidetail .storyArea .borderBottom{
    border-bottom:solid 1px #fff;
}
.ciaocomidetail .storyArea:last-of-type{
    margin-bottom:40px;
}
.ciaocomidetail .storyArea .storyArea-left{
    margin-right:10px;
    position:relative;
}
.ciaocomidetail .storyArea .storyArea-left .newLabel{
    position:absolute;
    top:0;
    left:0;
    padding:0 14px;
    color:#000;
    font-weight:bold;
    background-color:rgba(254, 251, 50, 0.8);
}

.ciaocomidetail .storyArea .storyArea-right .count{
    font-weight:bold;
    color:#000;
    font-size:16px;
}
.ciaocomidetail .storyArea .storyArea-right .subtit{
    font-weight:bold;
    color:#000;
    font-size:16px;
    margin-bottom:10px;
}

.ciaocomidetail .storyArea .storyArea-right .date{
    font-size:12px;
}

.ciaocomidetail .storyArea .storyArea-openBtn{
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
    border-bottom-right-radius: 30px;
    border-bottom-left-radius: 30px;
    border:solid 1px #000;
    background-color:#b4ebeb;
    padding:3px 6px;
    text-align:center;
    margin:0 auto;
    position:absolute;
    top:40%;
    right:4%;
}
.ciaocomidetail .storyArea .storyArea-openBtn a{
    font-weight:bold;
    color:#000;
    text-decoration:none;
}

.ciaocomidetail .notActive{
    background-color:#e8e8e8;
}
.ciaocomidetail .notActive .storyArea-openBtn {
    background-color:#888;
    color:#fff;
}
.ciaocomidetail .notActive .storyArea-openBtn a{
    pointer-events:none;
}


/*----------------------------------------
　　ciaocomidetail　> comics-info　　
----------------------------------------*/
.ciaocomidetail .comics-info{
    margin-top:40px;
    margin-bottom:40px;
    padding:5%;
}
.ciaocomidetail .comics-info h3{
    font-size:21px;
    color:#0f3778;
    margin-bottom:20px;
}
.ciaocomidetail .comics-info .comicsBox{
    width:calc(100% / 3);
}
.ciaocomidetail .comics-info .comicsBox .tit{
    color:#000;
    font-size:18px;
    font-weight:bold;
    margin-bottom:10px;
}
.ciaocomidetail .comics-info .comicsBox .author{
    font-weight:bold;
}


/*----------------------------------------
　　ciaocomidetail　> author-comment　　
----------------------------------------*/
.ciaocomidetail .author-comment{
    margin-bottom:40px;
    padding:5%;
}
.ciaocomidetail .author-comment h3{
    font-size:21px;
    color:#0f3778;
    margin-bottom:20px;
}
.ciaocomidetail .author-comment .author-img{
   margin-right:10px;
   width:20%;
}
.ciaocomidetail .author-comment .author-txt{
    background-color:#fff;
    border-radius:10px;
    padding:3%;
    color:#000;
    font-weight:bold;
    width:76%;
}


/*----------------------------------------
　　ciaocomidetail　> work-list　　
----------------------------------------*/
.ciaocomidetail .work-list{
    margin-bottom:40px;
    padding:5% 0;
}
.ciaocomidetail .work-list h3{
    font-size:21px;
    color:#0f3778;
    margin-bottom:20px;
    padding-left:5%;
}
.ciaocomidetail .work-list .work-list_slider{
    position:relative;
}
.ciaocomidetail .work-list .work-list_slider:before{
    content:"<";
    position:absolute;
    top:40%;
    left:1%;
}
.ciaocomidetail .work-list .work-list_slider:after{
    content:">";
    position:absolute;
    top:40%;
    right:1%;
}
.ciaocomidetail .work-list .workBox{
    width:calc(90% / 3 + 5%);
}
.ciaocomidetail .work-list .workBox:first-child{
    margin-left:5%;
}

.ciaocomidetail .work-list .workBox p{
    color:#000;
    font-weight:bold;
}


/*----------------------------------------
　　ciaocomidetail　> relation　　
----------------------------------------*/
.ciaocomidetail .relation{
    margin-bottom:40px;
    padding:5%;
}
.ciaocomidetail .relation h3{
    font-size:21px;
    color:#0f3778;
    margin-bottom:20px;
}
.ciaocomidetail .relation .relationBox:first-of-type{
    margin-bottom:10px;
}
.ciaocomidetail .relation .relationBox-img{
    margin-right:10px;
}
.ciaocomidetail .relation .relationBox-txt .tit{
    color: #000;
    font-weight:bold;
    font-size:14px;
    margin-top:3px;
    line-height:1.4;
}
.ciaocomidetail .relation .relationBox-txt .date{
    font-size:12px;
}


/*----------------------------------------
　　ciaocomidetail　> ciao-groupArea　　
----------------------------------------*/
.ciaocomidetail .ciao-groupArea{
    margin-bottom:40px;
    padding:5%;
}

.ciaocomidetail .ciao-groupArea .ciao-group_item{
    width:calc(100% - 10% / 2);
    background-color:#ffa6c8;
    padding:10px 6px;
    border-radius:8px;
    margin-bottom:10px;
    text-align: center;
}
.ciaocomidetail .ciao-groupArea .ciao-group_item a{
    color: #000;
    font-weight:bold;
    font-size:21px;
    text-decoration:none;
}
.ciaocomidetail .ciao-groupArea .ciao-group_item:first-of-type{
    margin-right:10px;
}


/*----------------------------------------
　　ciaocomidetail　> snsArea
----------------------------------------*/
.ciaocomidetail .snsArea{
    width:80%;
    margin:0 auto 40px;
    display:flex;
    justify-content:center;
    align-items:center;
}
.ciaocomidetail .snsArea img{
    max-width:60px;
}
.ciaocomidetail .snsArea a{
    margin-right:20px;
}
.ciaocomidetail .snsArea a:last-child{
    margin-right:0;
}