@charset "utf-8";
/* Common */
.container{max-width: 960px; width: calc(100% - 40px); margin: 0 auto;}
.protect{user-select: none; -webkit-user-drag: none; -webkit-user-select: none; pointer-events: none;}

/* Furigana */
[data-furigana]{position: relative; display: inline-block; font-size: 100%;}
[data-furigana]:before{content: attr(data-furigana); position: absolute; top: -0.1em; left: -1em; width: calc(100% + 2em); height: 1em; font-size: 1rem; line-height: 1; text-align: center; display: block; font-weight: 700;}

@media screen and (max-width: 768px){
    [data-furigana]:before{font-size: 0.9rem; top: -0.4em;}
}

/* Footer */
footer{padding: 4rem 0 6rem; text-align: center; font-size: 1.2rem; line-height: 1; letter-spacing: 0.05em;}

@media screen and (max-width: 768px){
    footer{padding: 3rem 0 10.5rem; font-size: 1rem; letter-spacing: 0.03em;}
}

/* Pagetop */
#pagetop{position: fixed; bottom: 2rem; right: 3rem; text-align: center; line-height: 1; width: 8.5rem; cursor: pointer;
opacity: 0; pointer-events: none; visibility: hidden; transform: translateY(30px); transition: .5s; z-index: 20;}
#pagetop span{width: 5.4rem; height: 5.4rem; border-radius: 100%; background: #1CB1D8; color: #fff; display: flex; justify-content: center; align-items: center; align-content: center; flex-wrap: wrap; font-weight: 600; letter-spacing: 0.05em; font-size: 1.2rem; line-height: 1.1; margin: 0 0 0.3rem 2rem; padding: 0.3em 0 0 0;}
#pagetop span::before{content: ""; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 6px solid #fff; display: block; margin: 0 10px 3px;}
#pagetop.is-show{opacity: 1; pointer-events: auto; visibility: visible; transform: translateY(0);}

@media screen and (min-width: 769px){
    #pagetop:hover span{transform: translateY(-5px);}
    #pagetop:hover figure{transform: rotate(-15deg);}
}

@media screen and (max-width: 768px){
    #pagetop{bottom: 1rem; right: 1rem; width: 52px;}
    #pagetop span{width: 4.6rem; height: 4.6rem; font-size: 1rem; line-height: 1.2; margin: 0 0 0.2rem 0.8rem;}
    
    #pagetop.is-active span{transform: translateY(-5px);}
    #pagetop.is-active figure{transform: rotate(-15deg);}
}

/* Animate */
@media screen{
    .fade-in{opacity: 0; transition: 1.2s;}
    .fade-in.is-view{opacity: 1;}
    
    .fade-up{opacity: 0; transform: translateY(20px); transition: opacity 1s, transform 1s;}
    .fade-up.is-view{opacity: 1; transform: translateY(0);}
}