@charset "utf-8";  

/* Footer-5 */  
#footer { background-color:#f7f7f7 ; padding:4rem 0 }
#footer::before {
    display:block ; content:"" ; width:100% ; height:1px ;
    background-color:rgba(0,0,0,0.1) ;
    position:absolute ; left:0 ; top:0
}
.footer__inner { width:96% ; margin:auto }
 
.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__nav , .footer__sns { font-size:0 ; text-align:center ; margin-bottom:2rem }
.footer__nav__item { display:inline-block ;  margin-right:0 ; padding-right:0 }
.footer__nav__item:not(:last-child){ margin-right:2rem ; padding-right:2rem ; position:relative } 
.footer__nav__item:not(:last-child)::after {
    display:block ; content:"" ; width:1px ; height:1.2rem ; 
    background-color:rgba(0,0,0,0.1) ;
    position:absolute ; right:0 ; top:55% ; transform:translateY(-50%) ;
}
.footer__nav__link {
    display:block ; transition:0.3s all ;
    font-size:1.6rem ; line-height:120% ;
}
.footer__nav__link:hover { color:#000000 }

.footer__sns {
    border-bottom:solid 1px rgba(0,0,0,0.1) ;
    padding-bottom:3rem ; margin-bottom:3rem ;
}
.footer__sns__item , .footer__sns__link { width:5rem ; height:5rem }
.footer__sns__item { display:inline-block ; margin:0.5rem }
.footer__sns__link { 
    display:block ; overflow:hidden ; position:relative ; border-radius:100% ;
    font-size:0 ; color:transparent ; text-indent:-99rem ;
}
.footer__sns__link , .footer__sns__link::before { transition:0.3s all }
.footer__sns__link { background-color:rgba(0,0,0,0.1) }
.footer__sns__link::before { 
    display:block ; content:"" ; width:4rem ; height:4rem ;
    background:url(../img/icon_sns.png) no-repeat left top ; background-size:auto 8rem ; 
    position:absolute ; left:50% ; top:50% ; transform:translate(-50%,-50%) ;
    opacity:0.3 ;
}
.footer__sns__link.in::before { background-position:0 0 }
.footer__sns__link.nb::before { background-position:-4rem 0 }
.footer__sns__link.fb::before { background-position:-8rem 0 }
.footer__sns__link.yb::before { background-position:-12rem 0 }
.footer__sns__link:hover { background-color:#ffffff }
.footer__sns__link:hover::before { opacity:0.7 ; transform:translate(-50%,-50%) scale(1.1) }
 
.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 }

#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) }






@media screen and (min-width:1024px){ 
  
    /* Footer-5 */  
    #footer { padding:5rem 0 }
    .footer__inner { width:96% ; max-width:120rem ; position:relative ; padding-left:15rem }
    .footer__logo  { margin:0 ; position:absolute ; left:0 ; top:0 }
    .footer__nav { text-align:left ; padding-top:1rem ; margin-bottom:4rem }
    .footer__nav , .footer__address , .footer__copy { width:60% }

    .footer__sns { 
        width:22rem ; text-align:right ; padding:0 ; margin:0 ; 
        position:absolute ; right:0 ; top:-0.7rem ;
        border:none
    }
    .footer__sns__item { margin:0 0 0 0.5rem }
    .footer__address , .footer__copy { text-align:left }
    .footer__address  { margin-bottom:0.5rem }

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




@media print {  }