.snap-canvas {  
position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100svh;
    z-index: 1056;
    display: none;
}
.home .snap-canvas {
    display: block;
}
.snap {
    position: absolute;
    width: 15%;
    max-width: 420px;
    padding-top: 10%;
    transform-origin: center center;
    border: 1px solid #fff;
    border-radius: 0px;
    background: #ccc center/cover no-repeat;
    cursor: default;
    transition: all 0.5s 0s ease;
    box-shadow: 1px 1px 1px rgba(0,0,0,.2);
}
.photo-viewmore {
    position: absolute;
    font-size: 1.4em;
    text-align: center;
    color: #fff;
    transition: all 0.5s 0s ease;
}
.photo-viewmore p {
   font-size: .5em;    	
}
.snap.off {
   diplay block;
}

.snap.n1 {
   background-image: url('../img/snap/1.jpg');
}
.snap.n2 {
   background-image: url('../img/snap/2.jpg');
}
.snap.n3 {
   width: 10%;
   padding-top: 13%;
   background-image: url('../img/snap/3.jpg');
}
.snap.n4 {
   background-image: url('../img/snap/4.jpg');
}
.snap.n5 {
   background-image: url('../img/snap/5.jpg');
}

/* SP - 1フレーム目 */
.photo-viewmore.frame1 {
    top: 47%;
    left: 22%;
 }
.snap.n1.frame1 {
    top: 26%;
    left: 30%;
    transform: scale(3.4) rotate(-10deg);
    z-index: 1061;
}
.snap.n2.frame1 {
    top: 46%;
    left: 66%;
    transform: scale(2.4) rotate(-5deg);
    z-index: 1059;
}
.snap.n3.frame1 {
    top: 66%;
    left: 12%;
    transform: scale(2.4) rotate(5deg);
    z-index: 1058;
}
.snap.n4.frame1 {
    top: 66%;
    left: 41%;
    transform: scale(1.7) rotate(-10deg);
    z-index: 1057;
}
.snap.n5.frame1 {
    top: 69%;
    left: 72%;
    transform: scale(1.7) rotate(10deg);
    z-index: 1057;
}

/* SP - 2フレーム目 */
.photo-viewmore.frame2 {
    top: 44%;
    left: 14%;
 }
.snap.n1.frame2 {
top: 39%;
    left: 36%;
    transform: scale(1.6) rotate(-8deg);
    z-index: 1056;
}
.snap.n2.frame2 {
    top: 22%;
    left: 15%;
    transform: scale(2.4) rotate(-10deg);
    z-index: 1060;
}
.snap.n3.frame2 {
    top: 67%;
    left: 16%;
    transform: scale(2.6) rotate(10deg);
    z-index: 1059;
}
.snap.n4.frame2 {
top: 23%;
    left: 60%;
    transform: scale(2) rotate(17deg);
    z-index: 1058;
}
.snap.n5.frame2 {
top: 58%;
    left: 56%;
    transform: scale(2.6) rotate(-14deg);
    z-index: 1057;
}

/* 3フレーム目 */
.snap.n1.frame3 {
	top: 0;
	left: 0;
	transform scale(1) rotate(0deg);
}
.snap.n2.frame3 {
	top: 0;
	left: 0;
	transform: scale(1) rotate(0deg);
}
.snap.n3.frame3 {
	top: 0;
	left: 0;
	transform: scale(1) rotate(0deg);
}
.snap.n4.frame3 {
	top: 0;
	left: 0;
	transform: scale(1) rotate(0deg);
}
.snap.n5.frame3 {
	top: 0;
	left: 0;
	transform: scale(1) rotate(0deg);
}

/* PC */
@media screen and (min-width: 1024px) {
.snap-canvas {  
    position: absolute;
    top: 0;
    left: 0;
    width: 1480px;
    height: 830px;
    z-index: 1056;
    display: none;
}
.home .snap-canvas {
    display: block;
}
.snap {
    position: absolute;
    width: 15%;
    max-width: 420px;
    padding-top: 10%;
    transform-origin: center center;
    touch-action: none;
    border: 1.5px solid #fff;
    border-radius: 0px;
    background: #ccc center/cover no-repeat;
    cursor: default;
    transition: all 0.5s 0s ease;
}
.photo-viewmore {
    position: absolute;
    font-size: 1.4em;
    text-align: center;
    color: #fff;
    transition: all 0.5s 0s ease;
}
.photo-viewmore p {
    font-size: .5em;    	
}
.snap.off {
    diplay block;
}

.snap.n1 {
   background-image: url('../img/snap/1.jpg');
}
.snap.n2 {
   background-image: url('../img/snap/2.jpg');
}
.snap.n3 {
   width: 10%;
   padding-top: 13%;
   background-image: url('../img/snap/3.jpg');
}
.snap.n4 {
   background-image: url('../img/snap/4.jpg');
}
.snap.n5 {
   background-image: url('../img/snap/5.jpg');
}

/* PC 1フレーム目 */
.photo-viewmore.frame1 {
    top: 53%;
    left: 18%;
}
.snap.n1.frame1 {
    top: 24%;
    left: 10%;
    transform: scale(1.8) rotate(-10deg);
    z-index: 1061;
}
.snap.n2.frame1 {
    top: 29%;
    left: 38%;
    transform: scale(1.5) rotate(8deg);
    z-index: 1059;
}
.snap.n3.frame1 {
    top: 68%;
    left: 10%;
    transform: scale(1.3) rotate(5deg);
    z-index: 1058;
}
.snap.n4.frame1 {
    top: 57%;
    left: 26%;
    transform: scale(1) rotate(-10deg);
    z-index: 1057;
}
.snap.n5.frame1 {
    top: 85%;
    left: 26%;
    transform: scale(1.2) rotate(13deg);
    z-index: 1057;
}

/* PC 2フレーム目 */
.photo-viewmore.frame2 {
    top: 53%;
    left: 20%;
 }
.snap.n1.frame2 {
    top: 50%;
    left: 27%;
    transform: scale(1) rotate(-8deg);
    z-index: 1056;
}
.snap.n2.frame2 {
    top: 26%;
    left: 9%;
    transform: scale(1.8) rotate(-16deg);
    z-index: 1060;
}
.snap.n3.frame2 {
    top: 74%;
    left: 11%;
    transform: scale(1.7) rotate(-8deg);
    z-index: 1059;
}
.snap.n4.frame2 {
    top: 79%;
    left: 33%;
    transform: scale(1.4) rotate(17deg);
    z-index: 1058;
}
.snap.n5.frame2 {
    top: 22%;
    left: 38%;
    transform: scale(1.5) rotate(5deg);
    z-index: 1057;
}

/* 3フレーム目 */
.snap.n1.frame3 {
	top: 0;
	left: 0;
	transform scale(1) rotate(0deg);
}
.snap.n2.frame3 {
	top: 0;
	left: 0;
	transform: scale(1) rotate(0deg);
}
.snap.n3.frame3 {
	top: 0;
	left: 0;
	transform: scale(1) rotate(0deg);
}
.snap.n4.frame3 {
	top: 0;
	left: 0;
	transform: scale(1) rotate(0deg);
}
.snap.n5.frame3 {
	top: 0;
	left: 0;
	transform: scale(1) rotate(0deg);
}
}