@charset "utf-8";
 
/* TITLE */
.K31__title {
    font-size:3rem ; line-height:3.6rem ; color:#111111 ; font-weight:500 ;
    letter-spacing:-0.2rem ; text-align:center ;
    margin-bottom:3rem ;
}



/* BOOK */
.K31__book , .K31__book__img::after , .K31__book__header , .K31__book__title ,
.K31__book__info , .K31__BI__item , .K31__book__body , .K31__BB__title , .K31__book__list ,
.K31__book__btns { width:100% ; box-sizing:border-box }

.K31__book { margin-bottom:6rem }
.K31__book:last-child { margin-bottom:0 }
.K31__book__img , .K31__book__img img { width:100% ; position:relative }
.K31__book__img , .K31__book__img::after { border-radius:0.6rem }
.K31__book__img { margin:0 auto 3rem ; overflow:hidden ; max-width:28rem }
.K31__book__img::after {
    content:"" ; height:100% ; display:block ;
    border:solid 1px rgba(0,0,0,0.1) ;
    position:absolute ; left:0 ; top:0 
}
.K31__book__title , .K31__BI__item , .K31__book__body { border:solid 1px rgba(0,0,0,0.1) ; border-radius:0.6rem ; margin-bottom:0.5rem }
.K31__book__title { padding:1rem 0.5rem 1.2rem 5rem ; position:relative ; overflow:hidden }
.K31__book__title > span { 
    font-size:2.2rem ; line-height:3rem ; font-weight:500 ; color:#111111 ;
    word-break:keep-all ; letter-spacing:-0.1rem ;
} 
.K31__book__title::before {
    width:100% ; height:0.2rem ; display:block ; content:"" ;
    background-color:#67b828 ;
    position:absolute ; left:0 ; top:0
}
.K31__book__title > b {
    width:3rem ; height:3rem ; display:block ; overflow:hidden ; border-radius:100% ; box-sizing:border-box ;
    font-size:1.6rem ; line-height:1.8rem ; color:#ffffff ; font-weight:600 ; text-align:center ;
    background-color:#111111 ; padding-top:0.5rem ;
    position:absolute ; left:1.5rem ; top:1.2rem
}
.K31__BI__item , .K31__BB__title , .K31__book__list li { font-size:1.8rem ; line-height:3rem  }
.K31__BI__item { padding:1rem 0.5rem 1.2rem 1.5rem }
.K31__BI__item > span , .K31__BI__item > b { font-size:inherit ; line-height:inherit ; word-break:keep-all }
.K31__BI__item > span { margin-right:1rem }
.K31__BI__item > b { color:#111111 ; font-weight:500  }

.K31__book__body { padding:1rem 1.5rem ; margin-bottom:0.5rem }
.K31__BB__title {
    border-bottom:solid 1px rgba(0,0,0,0.1) ;
    display:block ; padding-bottom:1rem ; margin-bottom:1rem ;
}
.K31__book__list li   { word-break:keep-all }
.K31__book__list > li { margin-bottom:1rem }
.K31__book__list ul   { padding-left:2rem }
.K31__book__list ul > li { margin-bottom:0.5rem }

.K31__book__btns { font-size:0 ; text-align:center }
.K31__btn , .K31__btn > span , .K31__btn::before , .K31__btn > span::before { transition:0.3s all }
.K31__btn { 
    display:inline-block ; overflow:hidden ; margin:0.5rem 1.5rem ;
    border:solid 1px rgba(0,0,0,0.1) ; border-radius:0.6rem ;
    padding:1rem 2rem 1.2rem ; position:relative ;
}
.K31__btn > span { 
    font-size:1.8rem ; line-height:2.2rem ; font-weight:400 ;
    display:inline-block ; position:relative ; 
    padding-left:3rem ;
}
.K31__btn > span::before {
    width:2.4rem ; height:2.4rem ; display:block ; overflow:hidden ; content:"" ;
    background:url(../img_sub/icon_pc.png) no-repeat center ; background-size:cover ;
    position:absolute ; left:0 ; top:50% ; transform:translateY(-50%) ;
    opacity:0.5 ; 
}
.K31__btn:hover > span::before , .K31__btn:focus > span::before { 
    background-image:url(../img_sub/icon_pc_white.png) ;
    opacity:1 ;
}
.K31__btn::before {
    width:100% ; height:100% ; display:block ; content:"" ;
    background:linear-gradient(#67b828,#73be38) ;
    position:absolute ; left:0 ; top:95% ; z-index:-1 ;
}
.K31__btn:hover , .K31__btn:focus { 
    box-shadow:0 0.1rem 0.3rem rgba(0,0,0,0.3) ;
    border-color:#67b828 ; box-shadow:0 0.1rem 0.3rem rgba(0,0,0,0.3) ;
}
.K31__btn:hover > span , .K31__btn:focus > span { color:#ffffff ; text-shadow:0 0 0.3rem rgba(0,0,0,0.3) }
.K31__btn:hover::before , .K31__btn:focus::before { top:0 }
 
.K31__btn.copy { background-color:#111111 ; border-color:#111111 }
.K31__btn.copy::before { display:none } 
.K31__btn.copy > span { color:#ffffff }
.K31__btn.copy > span::before , .K31__btn.copy:hover > span::before , .K31__btn.copy:focus > span::before { 
    background-image:url(../img_sub/icon_doc_white.png) ;
    opacity:1 ;
}
.K31__btn.copy:hover , .K31__btn.copy:focus { 
    background-color:#1891e5 ;
    border-color:#1891e5 ;
}





/* PC **********/
@media all and (min-width:1100px){
 
    /* BOOK */ 
    .K31__book { position:relative }
    .K31__book__img { position:absolute ; right:0 ; top:0 ; margin:0 ; width:25.45% }
    .K31__book__header , .K31__book__body { 
        width:70.90% ; overflow:hidden ;
        border-bottom:solid 1px rgba(0,0,0,0.1) ;
    }
    .K31__book__title , .K31__BI__item { float:left }
    .K31__book__title , .K31__BI__item , .K31__book__body , .K31__BB__title { border:0 ; border-radius:0 ; margin:0 }
    .K31__book__title { border-bottom:solid 1px rgba(0,0,0,0.1) ; padding:1.3rem 0.5rem 1.5rem 4.5rem }    
    .K31__book__title > b { 
        width:3.6rem ; height:3.6rem ; left:0.2rem ; top:1.2rem ;
        font-size:1.8rem ; line-height:2rem ; padding-top:0.7rem ;
    }
    .K31__BI__item { 
        box-sizing:border-box ;
        padding:1rem 0.5rem 1.2rem 0.2rem 
    }
    .K31__BI__item:first-of-type { width:60% }
    .K31__BI__item:last-of-type  { width:40% }

    .K31__book__body { 
        position:relative ; box-sizing:border-box ;
        padding:2rem 1rem 1rem 5rem ; margin:0 ;
        border-bottom:solid 1px rgba(0,0,0,0.1) ;
        height:28.8rem ; overflow:hidden 
    }
    .K31__book__box { width:100% ; height:100% ; overflow:auto }
    .K31__book__list { overflow:auto } 

    .K31__BB__title {
        width:5rem ;
        padding:0 ; padding-left:0.2rem ; box-sizing:border-box ;
        position:absolute ; left:0 ; top:2rem
    }
    .K31__book__btns { padding:1rem 0 0 ; text-align:left }
    .K31__btn { margin:0 2rem 0 0 }

    .periodical .K31__book__header { border-bottom:none }
    .periodical .K31__book__list > li { padding-left:1.5rem ; position:relative }
    .periodical .K31__book__list > li::before {
        display:block ; content:"" ;
        width:0.5rem ; height:0.2rem ; background-color:rgba(0,0,0,0.3) ;
        position:absolute ; left:0 ; top:1.6rem ;
    } 
}