.content-box12 {
    width: 100%;
    height: 99.9vh;
    overflow: hidden;
    position: relative;
}

.passage {
    background-color: black;
}

.passage,
.passage1 {
    width: 100%;
    height: 100vh;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    overflow: hidden;
    z-index: 2;
}



.passage1 {
   /* background-color: white;*/
    clip-path: circle(18vw at 500px  54.5%);
    cursor: pointer;
}
.passage1 p{
    color: black;
    margin:0 ;
    font-size: .93vw;
    position: absolute;
    bottom: 16%;
    left: 17.5%;
    width: 100%;
}

.content-box12 img {
    position: absolute;
    z-index: 2;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    object-fit: cover;
    width: 100vw;
    height:100%;
}

.and{
    opacity: 0;
    display: none;
}
.andContent-box12 {
    position: relative;
    width: 100%;
    height:100vh;
}

.andPassage {
    background-color: black;
}

.andPassage,
.andPassage1 {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    overflow: hidden;
    z-index: 2;
}



.andPassage1 {
    background-color: white;
    clip-path: circle(36px at 50% 85vh);
    cursor: pointer;
    transition: .3s;
}

.andActive {
    animation: andAll 0.5s;
}

@keyframes andAll {
    100% {
        clip-path: polygon(0% 0%, 100% 0, 100% 100%, 0 100%);
    }
}

.andPassageImg {
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    z-index: 5;
    pointer-events: none;
    
}

.andPassageExplain {
    position: absolute;
    top: 1.36rem;
    left: .36rem;
    z-index: 2;
}

.andPassageExplain h2 {
    color: #FFFFFF;
    font-size: .5rem;
}

.andPassageExplain p{
    color: #FFFFFF;
    margin-top: 2.03vw;
    font-size: .3rem;
}

.andPassage1 p {
    position: absolute;
    bottom: 13.2vh;
    left: 44%;
    margin-top: 2vw;
    font-size:3vw;
    color: #666;;
    z-index: 99;
	/*text-shadow: 1px 1px 2px rgb(0 0 0 / 50%);*/
}