html {
    scroll-behavior: smooth;
}
#interview > h1 {
    display: flex;
}
#interview > h1 > .contents {
    display: flex;
    flex-direction: column;
    font-size: 0.5em;
}
#interview > h1 > .contents:before {
    content: '';
    font-size: 2.5em;
    text-indent: -.15em;
    line-height: 1.1em;
}
#interview > div {
    margin-bottom: 1em;
    padding: 1em;
    background: white;
    display: flex;
}
.interview-profile:not(#profile-abe) {
    opacity: 1;
    pointer-events: inherit;
}
.profile-main{
    float: none;
}
/*
#interview .interview-profile{
    opacity: 0;
    pointer-events: none;
    position: absolute;
}
#interview .interview-profile:target {
    opacity: 1;
    pointer-events: inherit;
    position: relative;
}
*/
#interview .interview-profile {
    position: static;
    padding-top: 2em;
    margin-bottom: 2em;
    min-height: 100vh;
    min-height: clamp(0px, 100vh, 1100px);
}

html:has(#interview ~ .video-overlay:target) {
    overflow: hidden;
}

#interview ~ .video-overlay {
    display:none;
    position: fixed;
    inset: 0;
    background-color: #000000B0;
    z-index: -1;
    transition: opacity 200ms ease-out;
}
#interview ~ .video-overlay:target {
    display: block;
    opacity: 1;
    z-index: 10;
}
#interview ~ .video-overlay:target iframe {
    width: 80dvw;
	aspect-ratio: 16 / 9;
	border: 0.5vw solid #FFF;
	background: #FFF;
    
    top: 50%;
	left: 50%;
	position: fixed;
	z-index: 2;
	transform: translate(-50%, -50%);
}

@media screen and (max-width: 500px) {
    #interview .profile-name-container {
        flex-wrap: nowrap;
        flex-direction: column;
        align-items: flex-start;
    }
    #interview .profile-name-container .profile-jpn-name {
        line-height: 1em;
    }
    #interview-sect {
        margin: 0;
    }
}