@charset "utf-8";

/* book */
.book { margin-bottom:6rem }
.book:last-child { margin-bottom:0 }
.book__img { max-width:30rem ; margin:0 auto 1rem }
.book__info__title , .book__tag , .book__info__item , .book__index li { word-break:keep-all }
.book__info__title {
    overflow:hidden ; border-radius:0.4rem ; padding:1rem 1rem 1.2rem ;
    font-size:2rem ; line-height:2.8rem ; color:#ffffff ; font-weight:600 ; text-align:center ;
    background-color:#0e1ea3 ; text-shadow:0 0 0.3rem rgba(0,0,0,0.3) ;
}
.book__info__list , .book__index { border-bottom:solid 1px rgba(0,0,0,0.1) ; padding:1rem 0 } 
.book__info__item { display:inline-block ; margin-right:6rem }
.book__info__item:last-child { margin-right:0 }
.book__info__item { font-size:1.8rem ; line-height:2.8rem }
.book__tag { 
    display:inline-block ; padding:0 1.3rem 0.2rem 0.2rem ; margin-right:0.7rem ;
    font-size:1.4rem ; line-height:2.8rem ; font-weight:500 ; color:#111111 ; 
    position:relative ;
}
.book__tag::after {
    display:block ; content:"" ; width:1px ; height:1rem ;
    background-color:#000000 ; opacity:0.1 ;
    position:absolute ; right:0 ; top:50% ; transform:translateY(-50%) ;
}  
.book__index ul { font-size:0 }
.book__index li { font-size:1.8rem ; line-height:2.8rem ; margin-bottom:1rem } 
.book__index ul ul { padding-left:2rem ; padding-top:1rem }
.book__index ul ul li { display:inline-block ; margin-right:6rem }
.book__index ul ul li:last-child { margin-right:0 }

.book__index ul.dot > li { padding-left:1rem ; position:relative }
.book__index ul.dot > li::before {
    display:block ; content:"" ; width:0.4rem ; height:0.4rem ; background-color:#000000 ; opacity:0.2 ;
    position:absolute ; left:0 ; top:1.3rem
} 

.book__btns { text-align:center ; padding:2rem 0 0 ; font-size:0 }
.book__btn , .book__btn > span , .book__btn > span::before { transition:0.3s all ; display:inline-block }
.book__btn  { 
    overflow:hidden ; border-radius:0.4rem ; 
    padding:1rem 3rem 1rem ; margin:0.3rem 0.5rem ; 
    font-size:1.6rem ; line-height:2.8rem ; font-weight:500 ;
    border:solid 1px rgba(0,0,0,0.1) ; background-color:#ffffff ;
}
.book__btn > span { 
    position:relative ; padding:0 0 0.2rem 4rem ;
    font-size:inherit ; line-height:inherit ; color:inherit ; font-weight:inherit ; text-shadow:inherit }

.book__btn > span::before {
    display:block; content:"" ; width:3rem ; height:3rem ;  
    position:absolute ; left:0 ; top:50% ; transform:translateY(-50%) ;
    background:url(../img/icon_sprite.png) no-repeat ; background-size:auto 6rem ;
}
.book__btn.info  {
    color:#ffffff ; text-shadow:0 0 0.3rem rgba(0,0,0,0.3) ;
    background-color:#0e1ea3 ; border-color:#0e1ea3 ;
}

.book__btn.info > span::before { background-position:-12rem 0 ; opacity:0.7 }
.book__btn.copy > span::before { background-position:-15rem -3rem ; opacity:0.4 }

.book__btn.info:hover , .book__btn.info:focus { background-color:#111111 ; border-color: #111111 }
.book__btn.info:hover > span::before , .book__btn.info:focus > span::before { opacity:1 }

.book__btn.copy:hover , .book__btn.copy:focus { border-color:rgba(0,0,0,0.2) ; box-shadow:0 0.1rem 0.3rem rgba(0,0,0,0.2) ; color:#111111 }
.book__btn.copy:hover > span::before , .book__btn.copy:focus > span::before { opacity:1 }

 



/* PC */
@media screen and (min-width:1024px){ 
     
    /* book */
    .book { position:relative ; padding-left:33rem ; min-height:49.5rem }
   
    .book__info__title { 
        text-align:left ; font-size:2.4rem ; line-height:3.8rem ;
        padding:1rem 1rem 1.2rem 2.5rem
    }
    .book__img { position:absolute ; left:0 ; top:0 }
    .book__info__list { border:0 }
    .book__info__list::after { display:block ; content:"" ; clear:both  }
    .book__info__item { margin:0 ; font-size:2rem }
    .book__info__item:nth-child(1) { float:left ; width:35% ; padding-left:2.1rem }
    .book__info__item:nth-child(2) { float:right ; width:60% }
    .book__index {
        border:solid 1px rgba(0,0,0,0.1) ; border-radius:0.4rem ;
        position:relative ; padding:2rem 2rem 2rem 7.5rem ;
    }
    #K31__sec1 .book__index { height:39.4rem ; overflow:auto }

    .book__index .book__tag { position:absolute ; left:2rem ; top:2rem }
    .book__index ul ul li { width:49% ; margin-right:0 }

    .book__btns { 
        width:30rem ; padding:0 ;
        position:absolute ; left:0 ; top:45rem
    }
    .book__btn  { display:block ; width:100% ; margin:0 0 0.5rem }
    #K31__sec2 .book__info__title { margin-bottom:1rem } 
    #K31__sec2 .book__index       { padding-left:12rem }
    #K31__sec2 .book__index { height:49rem ; overflow:auto }
    


    /* book - add */
    #book12 .book__index > ul > li { width:49% ; display:inline-block  } 
} 





/* PRINT */
@media print {  

    /* book */
    .book__img { max-width:17rem ; margin:0 0 0 3rem ; float:right }
    .book__btns { display:none }
    .book__info__list { margin-bottom:0 ; border:0 }
}