@charset "utf-8";

/* LAYOUT */
.jolib__inner { width:96% ; margin:auto }
#jolib_img , #jolib_box , .img__inner { width:100% ; margin:auto } 
#jolib_img    { margin-bottom:5rem ; max-width:50rem }
.JL__p.wide   { display:block ; margin-bottom:0.5rem }



/* IMG */
.img__inner { position:relative ; text-align:center }
.img        { max-width:100% ; transition:0.3s all }
.img.now    { border:solid 0.2rem #f26922 }
#img_header , #img_aside { position:absolute }
#img_header { left:50% ; top:0 ; transform:translateX(-50%) }
#img_visual { margin-bottom:1rem }
#img_aside  { right:0 ; bottom:1rem }
#img_footer { margin-top:2rem }



/* LIST */
.acc { width:100% ; margin-bottom:0.5rem } 

.acc__body , .acc__header , .acc__item__btn , .acc__item a , .acc__header > label ,
.acc__item__btn::before , .acc__item a::before , .acc__btn__open > span , .acc__input { transition:0.3s all }
.acc__header    { 
    display:block ; padding:0.5rem 0 0.7rem 1.5rem ;
    background-color:#401f4c ; border-radius:0.4rem ; position:relative } 
.accOpen .acc__header { background-color:#f26922 }
 
.acc__header > label  { 
    text-transform:capitalize ; text-shadow:0 0 0.3rem rgba(0,0,0,0.3) ;
    display:block ; font-size:1.8rem ; line-height:2.8rem ; color:#ffffff ; font-weight:500 ; text-align:left }
.acc__header:hover > b { color:#fbb514 }
.accOpen .acc__header:hover > b { color:#ffffff }
.acc__btn__open , .acc__btn__open > span{ position:absolute }
.acc__btn__open { 
    width:100% ; height:100% ; display:block ;
    left:0 ; top:0 ; 
}
.acc__btn__open > span , .acc__input { 
    display:inline-block ; content:"" ;
    right:1rem ; top:50% ; transform:translateY(-50%) ;
    font-size:1.2rem ; line-height:1.8rem ; font-weight:500 ; 
    background-color:#ffffff ; border-radius:2rem ;
    padding:0rem 1rem 0.2rem ;
}
.acc__input { 
    display:block ; width:6rem ; text-align:center ;
    position:absolute ; right:6rem ;
    padding-left:0 ; padding-right:0 ;
}
.accOpen .acc__input { right:1rem }
.acc__btn__open:hover > span , .acc__btn__open:focus > span {
    background-color:#fbb514 ; color:#111111
}
.accOpen .acc__btn__open { display:none }
.acc__body { width:100% ; overflow:hidden ; height:0 ; padding:0 ; text-align:center }
.acc__body .JL__p   { margin-bottom:1.5rem ; font-size:1.6rem ; line-height:2.4rem }
.accOpen .acc__body { height:auto ; padding:1rem 0 3rem ; border-bottom:solid 1px rgba(0,0,0,0.1) }
.acc__list { margin-bottom:1rem ; text-align:left }
.acc__item { 
    display:inline-block ; overflow:hidden ; margin:0.5rem 0.2rem ; padding:0.3rem 0.3rem 0.3rem ;
    border-radius:4rem ; background-color:#f1d9a7 ;
    font-size:0 ; 
} 
.acc__item:last-child { margin-right:0 }
.acc__item b , .acc__item__btn , .acc__item a { 
    display:inline-block ; padding:0.2rem 0.5rem 0.4rem ;
    font-size:1.6rem ; line-height:2.8rem ;
} 
.acc__item b { width:3rem ; color:#111111 ; text-align:center }
.acc__item:first-of-type b { width:6.7rem }
.acc__item__btn , .acc__item a , .acc__item__btn::before , .acc__item a::before { width:3.4rem ; height:3.4rem }
.acc__item__btn , .acc__item a { 
    overflow:hidden ; 
    font-size:0 ; color:transparent ; 
    position:relative ; border-radius:100% ;
    background-color:#ffffff ; overflow:hidden ;
}
.acc__item a { margin-left:0.3rem }
.acc__item__btn::before , .acc__item a::before {
    display:block ; content:"" ; width:100% ; height:100% ; opacity:0.4 ;
    background:url(../img/icon_chk.png) no-repeat left top ; background-size:6.8rem auto  ;
    position:absolute ; left:50% ; top:50% ; transform:translate(-50%,-50%) scale(0.8) ;
} 
.acc__item a::before { background-position:right top }
.acc__item__btn:hover::before , .acc__item a:hover::before ,
.acc__item__btn:focus::before , .acc__item a:focus::before { 
    transform:translate(-50%,-50%) scale(1) ;
    opacity:1 ;
}

.chk .acc__item__btn { background-color:#f26922 } 
.chk .acc__item__btn::before { background-position:left bottom ; opacity:1 ; transform:translate(-50%,-50%) scale(1) }

.acc__btn__close , .acc__btn__close::before , .acc__btn__close::after { transition:0.3s all ; display:block }
.acc__btn__close::before , .acc__btn__close::after { content:"" }
.acc__btn__close , .acc__btn__close::before { overflow:hidden ; border-radius:0.4rem }
.acc__btn__close {
    position:relative ;
    border:solid 1px rgba(0,0,0,0.1); width:8rem ; box-sizing:border-box ;
    font-size:1.6rem ; line-height:2.4rem ; text-align:center ; font-weight:500 ; color:#ffffff ;
    letter-spacing:0 ;
    background-color:#111111 ; text-shadow:0 0 0.3rem rgba(0,0,0,0.3) ;
    padding:0.5rem 0.5rem 0.7rem ; margin:auto
}
.acc__btn__close::after {
    width:0.6rem ; height:0.6rem ; border:solid 0.2rem #ffffff ;
    border-left:none ; border-bottom:none ;
    position:absolute ; right:1rem ; top:50% ; 
    transform:translate(-50%,-50%) rotate(45deg) ;
}
.acc__btn__close:hover , .acc__btn__close:focus { background-color:#401f4c }
.acc__btn__close::before , .acc__btn__send::before , .acc__btn__prev::before {
    content:"" ; width:100% ; height:100% ;
    position:absolute ; left:0 ; top:95% ;
    background-color:rgba(255,255,255,0.2) ; 
}
.acc__btn__close:hover::before , .acc__btn__close:focus::before ,
.acc__btn__send:hover::before , .acc__btn__send:focus::before ,
.acc__btn__prev:hover::before , .acc__btn__prev:focus::before { top:50% }
.acc__btn__close:hover::after , .acc__btn__close:focus::after { right:0.5rem }


#jolib_form , .jolib__btns { width:100% }
.jolib__btns  { text-align:center ; font-size:0 ; padding-top:2rem }
.acc__btn__send , .acc__btn__prev , .acc__btn__send::before , .acc__btn__prev::before { transition:0.3s all }
.acc__btn__send , .acc__btn__prev {
    display:inline-block ; overflow:hidden  ; margin:0.5rem ; padding:0.7rem 2.5rem 0.9rem ;
    font-size:1.8rem ; line-height:2.8rem ; font-weight:500 ;
    border:solid 1px rgba(0,0,0,0.1) ; border-radius:0.4rem ;
    position:relative ;
}
 
.acc__btn__send { background-color:#401f4c ; color:#ffffff }
.acc__btn__send:hover , .acc__btn__send:focus { background-color:#f26922 ; text-shadow:0 0 0.6rem rgba(0,0,0,0.3) } 
.acc__btn__prev::before { background-color:rgba(0,0,0,0.1)} 




/* PC **********/
@media screen and (min-width:1100px){
  
    /* LAYOUT */
    .jolib__inner::after { display:block ; content:"" ; clear:both }
    .jolib__inner { width:98% ; max-width:110rem }
    #jolib_img , #jolib_box { margin:0 }
    #jolib_img { float:left ; width:50% }
    #jolib_box { float:right ; width:51.81% ;  max-width:57rem }

    .JL__p.wide   { display:none }
 
}