@charset "utf-8";
/* Common */
.container{max-width: 1440px; width: calc(100% - 40px); margin: 0 auto;}

.photo{position: relative;}
.cap{font-size: 1.1rem; line-height: 1.6;}
.cap[data-abs="left"]{position: absolute; bottom: 6px; left: 10px;}
.cap[data-abs="right"]{position: absolute; bottom: 6px; right: 10px;}

.txt-link:hover{text-decoration: underline; text-underline-offset: 0.2em;}
.txt-en{font-family: "El Messiri", sans-serif;font-weight: 700;}
.protect{user-select: none; -webkit-user-drag: none; -webkit-user-select: none; pointer-events: none;}
.tit01{font-size: min(3.5vw,6rem);letter-spacing: 0;line-height: 1.6;}
@media screen and (max-width: 768px){
	.cap{font-size: 1rem;}
    .tit01{font-size: 2.6rem;}
}
/* Furigana */
span[data-furigana]{position: relative; display: inline-block;}
span[data-furigana]:before{content: attr(data-furigana); position: absolute; top: -1em; left: 0; width: 100%; text-align: center; font-size: 0.9rem;}
span.txt-left[data-furigana]:before{text-align: left;}
span.txt-right[data-furigana]:before{text-align: right;}
/* Footer */
footer{text-align: center; padding: 90px 0 40px;}
.copyright{font-family: "El Messiri", sans-serif;font-weight: bold;}
.footer-logo{display: flex; justify-content: center; align-items: center; margin: 0 0 25px; line-height: 1;}
.footer-logo li:not(:last-of-type){margin-right: 30px;}
.footer-logo a:hover{opacity: .8;}

.footer-wrap{display: flex; justify-content: center; align-items: center; flex-wrap: wrap; font-size: 1.2rem; letter-spacing: auto; position: relative; z-index: 40;}
.footer-link{display: flex; justify-content: center; align-items: center;}
.footer-link li{margin: 0 0 0 30px;}
.footer-link a{text-decoration: underline; text-underline-offset: 0.2em;}
.footer-link a:hover{text-decoration: none; }


@media screen and (max-width: 768px){
    footer{padding: 60px 0 25px;}
    .footer-wrap{font-size: 1.2rem;}
    .footer-link{width: 100%; margin: 10px 0 0 0;}
}

/* Pagetop */
#pagetop{position: fixed; bottom: 20px; right: 20px; opacity: 0; transform: translateX(30%); transition: .5s; cursor: pointer; z-index: 99;}
#pagetop.is-show{opacity: 1; transform: translateX(0);}
#pagetop:hover{opacity: 0.8;}

@media screen and (max-width: 768px){
    #pagetop{width: 80px; bottom: 8px;right: 0;z-index: 99999;}
}

/* Animate */
@media screen{
    .fade-in{opacity: 0; transition: 1.2s;}
    .fade-in.is-view{opacity: 1;}

    .fade-up{opacity: 0; transform: translateY(30px); transition: 1.2s;}
    .fade-up.is-view{opacity: 1; transform: translateY(0);}

    .fade-right{opacity: 0; transform: translateX(-30px); transition: 1.2s;}
    .fade-right.is-view{opacity: 1; transform: translateX(0);}
    
    .fade-left{opacity: 0; transform: translateX(30px); transition: 1.2s;}
    .fade-left.is-view{opacity: 1; transform: translateX(0);}
    
    .zoom-in{overflow: hidden;}
    .zoom-in img{opacity: 0; transform: scale(1.15) translateY(15%); transition: 1.2s;}
    .zoom-in.is-view img{opacity: 1; transform: scale(1) translateX(0);}
}