@charset "UTF-8";

header.scrolled {
    top: 0 !important;
    padding: 1.4rem var(--padding) 1.0rem !important;
}

/*
header.scrolled .button div {color: var(--textColor) !important;}
header.scrolled .button span {background-color: var(--textColor) !important;}

header.pheader .Logo * {fill: var(--textColor) !important;}
*/



/*
.About header.pheader .Logo *,
.Words header.pheader .Logo * {fill: var(--backgroundColor) !important;}
.About header .button.menu-button div,
.Words header .button.menu-button div {color: var(--backgroundColor) !important;}
.About header .button.menu-button span,
.Words header .button.menu-button span {background-color: var(--backgroundColor) !important;}

.About header.pheader.scrolled .Logo *,
.Words header.pheader.scrolled .Logo * {fill: var(--textColor) !important;}
.About header.pheader.scrolled .button.menu-button div,
.Words header.pheader.scrolled .button.menu-button div {color: var(--textColor) !important;}
.About header.pheader.scrolled .button.menu-button span,
.Words header.pheader.scrolled .button.menu-button span {background-color: var(--textColor) !important;}
*/


@keyframes -global-scroll-animation {
	0% {
	  transform: translateY(1.5rem);
	  opacity: 0;
	}
	100% {
	  transform: translateX(0);
	  opacity: 1;
	}
}


@media screen and (min-width: 720px) {
    header.scrolled {
        padding: 1.4rem var(--pcPadding) 1.4rem !important;
    }
}


/*
#index-first *,
#index-second *,
#index-third *,
#index-fourth * {
    opacity: 0;
    filter: blur(3px);
    transform: translateY(10px);
    transition: 2.8s cubic-bezier(.4,.1,.1,1);
    will-change: transform, opacity, filter;
}
#index-first.visible *,
#index-second.visible *,
#index-third.visible *,
#index-fourth.visible * {
    filter: blur(0);
    transform: translateY(0);
    opacity: 1;
}
*/
.l-line {
    width: 100vw;
    height: .25px;
    background-color: #aaa;
    opacity: .5;
}

.js-scroll {
    opacity: 0;
    transform: translateY(10px);
    transition: 2.5s cubic-bezier(.4,.1,.1,1);
}
.js-scroll.active {
    opacity: 1;
    transform: translateY(0);
}

.Index {background-color: var(--backgroundColor);}

#index-projects .l-card div {height: inherit;}

/* Archives/slug */
/* Archives/slug */
/* Archives/slug */
/* Archives/slug */
/* Archives/slug */



.Projects .Menu ul li:nth-of-type(1) {opacity: .5;}
.About .Menu ul li:nth-of-type(2) {opacity: .5;}
.Words .Menu ul li:nth-of-type(3) {opacity: .5;}
.Log .Menu ul li:nth-of-type(4) {opacity: .5;}

.Menu ul li .jp {position: relative;}
.Menu ul li .jp::after {
    display: none;
    content: "";
    width: 1px;
    height: 100%;
    background-color: var(--backgroundColor);
    position: absolute;
    top: 50%;
    left: 57%;
    transform: translate(-50%,-50%);
    transition: 1s ease-in-out;
}

.Projects .Menu ul li:nth-of-type(1) .jp::after,
.About .Menu ul li:nth-of-type(2) .jp::after,
.Words .Menu ul li:nth-of-type(3) .jp::after,
.Log .Menu ul li:nth-of-type(4) .jp::after {display: block;}



.Word .icons {display: none;}




footer .footer-logo .Logo {width: 70vw !important;}

main {
    width: 100%;
    background-attachment: fixed;
    background-size: cover;
    background-color: var(--backgroundColor);
    background-blend-mode: lighten;
    /*
    background-image: url("../image/bg.webp");
    */
}



.section-head {margin-bottom: 3rem;}
.section-head h1 {margin: 1rem 0;}