@import 'renovation.css';

#mv {
    display:flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    height:calc(100vh - (var(--padding) * 2));
    max-height:1200px;
    margin-top:var(--padding);
    padding:0 var(--padding);
}
#mv > div {
    height:100%;
}
#mv > div figure {
    border-radius:100%;
    overflow:hidden;
    height:100%;
    width:0;
    margin-inline:auto;
    animation:mv-bg 1.4s ease 0.2s forwards;
}
#mv > div figure img {
    object-fit: cover;
    width:100%;
    height:100%;
    filter:brightness(0.4);
    filter: blur(20px);
    scale: 1.4;
    animation:mv-bg-img 2s ease 0.4s forwards;
}
#mv > div h1 {
    width:70px;
    position:absolute;
    top:50%;
    left:50%;
    translate: -50% -50%;
    margin:0;
    font-size:clamp(1.2em, 4vw, 1.4em);
    font-weight:normal;
    color:var(--color-white);
    filter: drop-shadow(0 0 14px rgb(72 71 76 / .6));
}
#mv > div h1 img {
    opacity:0;
    filter: blur(20px);
    animation:mv-h1-img 1s ease 2s forwards;
}
#mv > div h1 div {
    writing-mode: vertical-rl;
}
#mv > div h1 div span {

}
#mv > div h1 div span:first-of-type {
    opacity:0;
    filter: blur(20px);
    top:-40px;
    animation:mv-h1-span-1 1s ease 1.0s forwards;
}
#mv > div h1 div span:last-of-type {
    opacity:0;
    filter: blur(20px);
    bottom:-40px;
    animation:mv-h1-span-2 1s ease 1.4s forwards;
}

@keyframes mv-bg {
    0% {
		width:0;
        border-radius:100%;
	}
    100% {
		width:100%;
        border-radius:var(--radius-inner);
	}
}
@keyframes mv-bg-img {
    0% {
		filter:brightness(0.4);
        filter: blur(20px);
        scale: 1.4;
	}
    100% {
		filter: brightness(1);
        filter: blur(0);
        scale: 1;
	}
}
@keyframes mv-h1-img {
    0% {
		opacity:0;
        filter: blur(20px);
	}
    100% {
		opacity:1;
        filter: blur(0);
	}
}
@keyframes mv-h1-span-1 {
    0% {
		opacity:0;
        filter: blur(20px);
        top:-40px;
	}
    100% {
		opacity:1;
        filter: blur(0);
        top:0;
	}
}
@keyframes mv-h1-span-2 {
    0% {
		opacity:0;
        filter: blur(20px);
        bottom:-40px;
	}
    100% {
		opacity:1;
        filter: blur(0);
        bottom:0;
	}
}

#mv h2 {
    color:var(--color-white);
    font-size:1.2em;
/*    font-family: "Noto Sans JP", sans-serif; */
    letter-spacing: 10px;
    margin:0;
    position:absolute;
    left:0;
    bottom:var(--padding);
    width:100%;
    text-align:center;
}
/*
#mv h2 {
    flex:1;
    display:flex;
    align-items: center;
    justify-content: center;
    font-size:1.2em;
    font-family: "Noto Sans JP", sans-serif;
    letter-spacing: 10px;
    padding-left:10px;
    margin:0;
}
*/

#mv .scroll {
    height:80px;
    position:absolute;
    bottom:0;
    right:20px;
}
#mv .scroll::after {
    content: "";
    position: absolute;
    top: 20px;
    left: 50%;
    width: 1px;
    height: 60px;
    background: var(--color-white);
    animation: scroll-line 1.4s ease-in-out infinite;
    opacity: 0;
}
#mv .scroll span {
    font-size: 0.8em;
    color: var(--color-white);
}

@keyframes scroll-line {
    0% {
        height: 0;
        top: 20px;
        opacity: 0;
    }
    30% {
        height: 60px;
        opacity: 1;
    }
    100% {
        height: 0;
        top: 80px;
        opacity: 0;
    }
}

#about h2 {
    color:var(--color-white);
    background:var(--color-black);
/*    font-family: "Noto Sans JP", sans-serif; */
    font-size:1.2em;
    width:fit-content;
    margin-inline:auto;
    padding:calc(var(--padding) / 2);
    border-radius:var(--radius-inner);
}
#about p {
    padding:0 var(--padding);
    font-family: "Hina Mincho", serif;
}


#renovation article {
    background:url(../_img/index/renovation_image.webp) center / cover;
}

#case {
    padding-top:0;
}
#case h1 {
    text-align:center;
    margin:0;
    position:absolute;
    font-size:1.4em;
    line-height:1;
    padding:20px;
    top:0;
    left:50%;
    translate:-50% -50%;
    width:fit-content;
    white-space: nowrap;
    border:solid 1px var(--color-lightgray);
    border-radius:var(--radius);
    background:var(--color-super-white);
}
#case > div {
    border:solid 1px var(--color-lightgray);
    border-radius:var(--radius);
    padding:calc(var(--gap) * 2);
    background:var(--color-super-white);
}
#case li h2 {
    display:flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color:var(--color-gray);
}
#case li h2 span {
    font-family: "Noto Sans JP", sans-serif;
    font-size:0.6em;
    line-height:1;
}
#case li h2 strong {
    font-size:1.6em;
    margin:0;
    line-height:1;
}
#case li figure {
    border-radius:var(--radius-inner);
}
#case li div figure + i {
    color:var(--color-lightgray);
    font-size:2em;
}

#exterior article {
    background:url(../_img/index/exterria_image.webp) right / cover;
}


#news {
    background:linear-gradient(to bottom, transparent 0, transparent 59px, #97A0AC 59px, #97A0AC calc(100% - 59px), transparent calc(100% - 59px));
    padding-top:calc(var(--section-space) + 60px);
    padding-bottom:calc(var(--section-space) + 60px);
    margin-top:var(--section-space);
}
#news::before {
    content:'';
    position:absolute;
    display:block;
    height:60px;
    width:100%;
    top:0;
    background:url(../_img/index/news_wall_top.svg) top center / 110vw 60px no-repeat;
}
#news::after {
    content:'';
    position:absolute;
    display:block;
    height:60px;
    width:100%;
    bottom:0;
    background:url(../_img/index/news_wall_bottom.svg) bottom center / 110vw 60px no-repeat;
}
#news h1 {
    color:var(--color-white);
    font-size:1.6em;
}
#news .button {
    border-color: var(--color-white);
    color: var(--color-white);
}
#news .button:hover {
    color: var(--color-black);
}


@media (max-width: 1300px) {
	#renovation .bg {
		width:calc(100% - var(--padding));
	}
}

@media (max-width : 920px) {
    #case ul.grid {
        gap:var(--gap);
    }
    #case > div {
        padding:calc(var(--gap) * 2) var(--padding) var(--padding) var(--padding);
    }
}
@media (max-width : 720px) {
    #case {
        margin-top:var(--section-space);
    }
    #case h1 {
        width:80%;
    }
    #case > div {
        padding:calc(var(--gap) * 2);
    }
    #case ul.grid {
        grid-template-columns: repeat(1, 1fr);
    }
}
@media (max-width : 520px) {
    #mv {
        height:calc(100svh - 100px);
        margin-bottom:100px;
    }
    #mv > div {
        aspect-ratio: auto;
    }
    #mv > div h1 {
        width:60px;
    }

    #about h1 {
        text-align:center;
    }

    #case > div {
        padding:calc(var(--gap) * 2) var(--padding) var(--padding) var(--padding);
    }

    #news > .grid {
        grid-template-columns: repeat(1, 1fr);
    }
}