@charset "utf-8";  

/* Footer-3 */
#footer { background-color:#f7f7f7 ; padding-bottom:5rem ; position:relative }
#footer::before {  
    display:block ; content:"" ; width:100% ; height:1px ;
    background-color:rgba(0,0,0,0.1) ;
    position:absolute ; left:0 ; top:0
}
.footer__header {  
    border-bottom:solid 1px rgba(0,0,0,0.1) ;
    padding:1.5rem 0 1rem ; margin-bottom:3rem ;
}
.footer__nav , .footer__body { width:96% ; margin:auto ; font-size:0 }
.footer__nav { text-align:center } 
.footer__nav__item:not(:last-child) { padding-right:2rem ; margin-right:2rem ; position:relative }
.footer__nav__item { display:inline-block ; margin-bottom:0.5rem }
.footer__nav__item:not(:last-child)::after {
    display:block ; content:"" ; width:1px ; height:1rem ;
    background-color:rgba(0,0,0,0.1) ; 
    position:absolute ; right:0 ; top:50% ; transform:translateY(-50%) ;
}
.footer__nav__link {
    font-size:1.6rem ; line-height:120% ; word-break:keep-all ;
    padding-bottom:0.2rem ; transition:0.3s all ;
}
.footer__nav__link:hover { color:#111111 }


#family_site , .fs__btn__open { position:relative }
#family_site { width:96% ; min-width:20rem ; max-width:30rem ; margin:0 auto 4rem }  

.fs__btn__open , .fs__btn__open::before , .family__site { border-radius:0.4rem }
.fs__btn__open {
    display:block ; width:100% ; padding:1.5rem ; padding-right:3rem ;
    font-size:1.6rem ; line-height:110% ; text-align:left ;
}
.fs__btn__open:hover , .familyOpen .fs__btn__open { background-color:#222222 ; color:#ffffff }
.fs__btn__open > span {
    display:block ; overflow:hidden ; width:1px ; height:1px ;
    font-size:0 ; color:transparent ; text-indent:-99rem ;
    position:absolute ; right:0 ; top:0
}
.fs__btn__open , .fs__btn__open::before , .fs__btn__open::after , .familyOpen .family__site ,
.family__site__list a , .family__site__list a::after  { transition:0.3s all }
.fs__btn__open::before ,  .fs__btn__open::after {
    display:block ; content:"" ; 
    position:absolute ; top:50% ; transform:translate(-50%,-50%) ;
    box-sizing:border-box ;
}
.fs__btn__open::before { 
    width:100% ; height:100% ; border:solid 1px rgba(0,0,0,0.1) ;
    left:50%
}
.fs__btn__open::after {
    right:1rem ; top:45% ; width:1rem ; height:1rem ; 
    border:solid 0.2rem #000000 ; border-left:none ; border-top:none ;
    transform:translate(-50%,-50%) rotate(45deg) scale(0.8) ;
    opacity:0.3 ;
}
.fs__btn__open:hover::after , .familyOpen .fs__btn__open::after { 
    border-color:#ffffff ; opacity:1 ; 
    transform:translate(-50%,-50%) rotate(45deg) scale(1) ;
}
.familyOpen .fs__btn__open::after {
    transform:translate(-50%,-50%) rotate(225deg) scale(0.9) ; 
    top:55%
}

.family__site , .family__site__container { width:100% }
.family__site { 
    display:block ; height:0 ; overflow:hidden ; padding:0 2rem ;
    position:absolute ; left:0 ; bottom:5rem ;
    opacity:0 ;
}
.familyOpen .family__site { 
    height:auto ; overflow:initial ; padding-top:2rem ; padding-bottom:3rem ;
    background-color:#ffffff ; box-shadow:0 0 0.3rem rgba(0,0,0,0.1) ;
    border:solid 1px rgba(0,0,0,0.1) ;
    opacity:1 ;
}
.family__site__list   { margin-bottom:1rem }
.family__site__list a {
    display:block ; padding:1rem 0.2rem ; position:relative ;
    font-size:1.6rem ; line-height:120% ; text-align:left ; word-break:keep-all  ;
    border-bottom:solid 1px rgba(0,0,0,0.1) ;
}
.family__site__list a::after {
    display:block ; overflow:hidden ; content:"" ; width:0 ; height:1px ; 
    background-color:#ff6600 ;
    position:absolute ; left:0 ; bottom:-1px ;
}
.family__site__list a:hover { color:#111111 }
.family__site__list a:hover::after { width:100%}
.family__site__container { display:none ; overflow:auto ; height:25rem }
.familyOpen .family__site__container { display:block }

.fs__btn__close , .fs__btn__close::before , .fs__btn__close::after { transition:0.3s all }  
.fs__btn__close { 
    display:block ; overflow:hidden ; width:2rem ; height:2rem ; margin:auto ;
    font-size:0 ; color:transparent ; text-indent:-99rem ;
    position:relative ; opacity:0.3 ;
    position:absolute ; left:50% ; bottom:0.5rem ; transform:translateX(-50%) ;
}
.fs__btn__close:hover { opacity:0.6 }
.fs__btn__close::before , .fs__btn__close::after {
    display:block ; content:"" ; width:1.4rem ; height:1px ;
    background-color:#000000 ;
    position:absolute ; left:50% ; top:50% ; transform:translate(-50%,-50%) ;
}
.fs__btn__close::before { transform:translate(-50%,-50%) rotate(45deg) }
.fs__btn__close::after  { transform:translate(-50%,-50%) rotate(-45deg) }
.fs__btn__close:hover::before , .fs__btn__close:hover::after { width:1.8rem }
.fs__btn__close:hover::before { transform:translate(-50%,-50%) rotate(135deg) }
.fs__btn__close:hover::after  { transform:translate(-50%,-50%) rotate(45deg) }
 
.footer__logo {
    display:block ; width:10rem ; height:3.5rem ; margin:0 auto 2rem ;
    font-size:0 ; color:transparent ;
    background:url(../img/logo.png) no-repeat left top ; background-size:10rem auto ;
    opacity:0.4 ;
} 

.footer__address { font-size:0 ; text-align:center ; margin-bottom:1rem }
.footer__addr__item , .footer__copy { font-size:1.4rem ; line-height:120% ; word-break:keep-all }
.footer__addr__item { display:inline-block ; padding-bottom:0.2rem ; margin-bottom:0.5rem }
.footer__addr__item:not(:last-child) { position:relative ; margin-right:1.5rem ; padding-right:1.5rem }
.footer__addr__item:not(:last-child)::after {
    display:block ; content:"" ; width:1px ; height:1rem ; 
    background-color:rgba(0,0,0,0.1) ;
    position:absolute ; right:0 ; top:50% ; transform:translateY(-50%) ;
}
.footer__copy { text-align:center }




@media screen and (min-width:1024px){ 
 
    /* Footer-3 */
    .footer__nav , .footer__body { width:98% ; max-width:120rem ; margin:auto }
    .footer__header { padding:1.5rem 0 ; margin-bottom:4rem  }
    .footer__nav::after { display:block ; content:"" ; clear:both }
    .footer__nav { text-align:left }
    .footer__nav__item { margin-bottom:0 }
    .footer__nav__item:last-child { float:right}
    .footer__nav__item:nth-last-child(2) { margin-right:0 ; padding-right:0 }
    .footer__nav__item:nth-last-child(2)::after { display:none }

    .footer__body { position:relative }
    .footer__logo { margin:0 0 3rem }

    #family_site { 
        width:22rem ; min-width:auto ; max-width:none ; margin:0 ;
        position:absolute ; right:0 ; top:0
    }

    .footer__address , .footer__copy { text-align:left }
    .footer__addr__item , .footer__copy { font-size:1.6rem }
  
} 
    




@media print {  }