@charset "utf-8";  

/* Archive */ 
.archive__header , .archive__tab , .archive__list  { font-size:0 }
.archive__header { margin-bottom:3rem }
.archive__tab    { text-align:left }
.archive__tab > li { display:inline-block ; margin:0 0.5rem 0.2rem 0 }
.archive__tab > li:last-child { margin-right:0 }
.archive__btn , .archive__btn::after { border-radius:0.4rem ; box-sizing:border-box ; transition:0.3s all }
.archive__btn { 
    display:block ; position:relative ;
    font-size:1.6rem ; line-height:180% ; font-weight:600 ; letter-spacing:-0.05rem ;
    padding:0.5rem 1.5rem 0.6rem ; background-color:#f7f7f7 ;
}
.archive__btn::after {
    display:block ; content:"" ; width:100% ; height:100% ;
    position:absolute ; left:50% ; top:50% ; transform:translate(-50%,-50%) ;
    border:solid 1px rgba(0,0,0,0.1)
}
.archive__btn:hover , .archive__btn.now { background-color:#444444 ; color:#111111 }
.archive__btn.now   { background-color:#379eda ; color:#ffffff ; text-shadow:0 0 0.3rem rgba(0,0,0,0.15) }
 
.archive__item { border:solid 1px rgba(0,0,0,0.1) ; border-radius:0.4rem ; margin-bottom:0.5rem } 
.archive__item:hover , .now.archive__item { box-shadow:0 0.1rem 0.3rem rgba(0,0,0,0.2) ; border-color:rgba(0,0,0,0.2) }
.now.archive__item { border-color:#379eda } 
.archive__item:last-child { margin-bottom:0 } 
.archive__item__header    { position:relative }
.now .archive__item__header { background-color:#379eda }
.archive__title { 
    display:block ; padding:0.8rem 5rem 1rem 1.5rem ;
    font-size:2rem ; line-height:2.8rem ; font-weight:800 ; letter-spacing:-0.1rem ;
}
.now .archive__title { color:#ffffff ; font-weight:600 ; text-shadow:0 0 0.3rem rgba(0,0,0,0.15) }
.archive__btn__more  {
    font-size:0 ; color:transparent ; 
    width:100% ; height:100% ; display:block ; 
    position:absolute ; left:0 ; top:0 
}
.archive__btn__more > span {
    display:block ; width:2rem ; height:2rem ; opacity:0.5 ; 
    position:absolute ; right:0.5rem ; top:50% ; transform:translate(-50%,-50%)
}
.archive__btn__more:hover > span { opacity:1 ; transform:translate(-50%,-50%) rotate(90deg) }

.archive__btn__more > span::before , .archive__btn__more > span::after { 
    display:block ; content:"" ; width:1.2rem ; height:0.2rem ;
    background-color:#111111 ;
    position:absolute ; left:50% ; top:50% ; transform:translate(-50%,-50%) ;
}
.archive__btn__more > span::after { transform:translate(-50%,-50%) rotate(90deg) }

.now .archive__btn__more > span { opacity:1 }
.now .archive__btn__more:hover > span { transform:translate(-50%,-50%) rotate(180deg) }
.now .archive__btn__more > span::before { background-color:#ffffff }
.now .archive__btn__more:hover > span::before { width:1.6rem }
.now .archive__btn__more > span::after  { opacity:0 }

.archive__item , .archive__btn__more > span ,
.archive__btn__more > span::before , .archive__btn__more > span::after ,
.archive__item__header , .archive__item__body { transition:0.3s all }
 
.archive__item__body { display:block ; padding:0 1.5rem ; position:relative }
.now .archive__item__body { padding-bottom:3rem }

.archive__close  { display:none ; position:absolute ; left:50% ; bottom:1rem ; transform:translateX(-50%) }
.now .archive__close { display:block }

.archive__item__container { display:none ; padding-top:2rem }
.now .archive__item__container { display:block }

.archive__list { text-align:center } 
.archive__list > li   { display:inline-block ; width:16% ; min-width:18rem ; margin:0 0.3rem 1.5rem }
.archive__link , .archive__link::after , .archive__link > b  { border-radius:0.4rem }
.archive__link { 
    display:block ; position:relative ;
    font-size:1.6rem ; line-height:2.8rem ; text-align:center ;
}
.archive__link::after {
    display:block ; content:"" ; width:100% ; height:100% ; box-sizing:border-box ;
    position:absolute ; left:50% ; top:50% ; transform:translate(-50%,-50%) ;
    border:solid 1px rgba(0,0,0,0.1)
}
.archive__link > b , .archive__link > strong { display:block }
.archive__link > b { 
    padding:0.5rem 0.2rem 0.7rem ; background-color:#222222 ;
    color:#ffffff ; font-weight:600 ;
}
.archive__link > strong {
    padding:0.8rem 0.2rem 1rem ;
    word-break:keep-all ; text-align:center 
}
.archive__link::after , .archive__link > b , .archive__link > strong { transition:0.3s all }

.archive__link:hover::after { border-color:#379eda }
.archive__link:hover > b    { background-color:#379eda }
.archive__link:hover > b , .archive__link > strong { color:#111111 }

.archive__link br { display:none }

 



@media screen and (min-width:1024px){ 
 
    /* Archive */ 
    .archive__link br { display:block }

} 
 





@media print { }