@charset "UTF-8";
/* CSS Document */
html{
     scroll-behavior: smooth;
}

#wrap{
  overflow:hidden;
}

#loading{
/* position:absolute; */
position:fixed;
inset:0;
top:0;
left:0;
width:100%;
height:100%;
overflow:hidden;
/* background-color: #000;  */
transition:opacity 2s;
z-index: 1000;

}

/* 画像 */

picture{
width:100%;
height:100%;
}

picture img{
width:100%;
height:100%;
object-fit:cover;
}

#loading img{
position:absolute;
width:100%;
height:100%;
object-fit:cover;
transition:opacity 1s;
left: 0;
}

/* ヒビ */

#crack{
opacity:0;
pointer-events:none;
transition:0.1s;

object-fit:cover;
opacity:1;

/* 最初は中心だけ表示 */
clip-path:circle(0% at 50% 50%);

pointer-events:none;

}

@keyframes crackSpread{

0%{
clip-path:circle(0% at 50% 50%);
}

100%{
clip-path:circle(150% at 50% 50%);
}

}



/* 揺れ */

.shake{
animation:shake 0.4s;
}

@keyframes shake{

0%{transform:translate(0,0)}
20%{transform:translate(-10px,5px)}
40%{transform:translate(10px,-5px)}
60%{transform:translate(-8px,4px)}
80%{transform:translate(8px,-4px)}
100%{transform:translate(0,0)}

}

/* ガラス破片 */

.piece{
position:absolute;
background-size:cover;
transition:1.4s cubic-bezier(.2,.8,.2,1);
}

.fadeout{
animation:fade 2s forwards;
}

@keyframes fade{
0%{opacity:1}
100%{opacity:0}
}


/* レイヤー */
#img2{
  position:absolute;
top:0;
left:0;
width:100%;
height:100%;
z-index:998;
/* opacity:0; */
}

#img1{
  position:absolute;
top:0;
left:0;
width:100%;
height:100%;
z-index:999;
}

#img1 img,
#img2 img{
width:100%;
height:100%;
object-fit:cover;
}

#crack{
  z-index: 1000;
}

.piece{
z-index:1000;
}


/* スクロール禁止 */
.no-scroll{
overflow: hidden;
height: 100vh;
}


/* -------------------------------------------------------------------------------------------------------------------
SP 縦-                                                                                                           
------------------------------------------------------------------------------------------------------------------- */
@media (orientation: portrait) {
  .pc {
    display:none;
  }
  .tb {
    display: block;
  }
  .sp {
    display: block;
  }
  .pcBr {
    display: none;
  }
  .spBr {
    display: block;
  }

  #loading{
width:100%;
height:100%;
}
    
  #img1{
object-position:center bottom;
}

  #img2{
object-position:center center;
}

#crack{
  object-position:50% 90%;

}
    
    

}

/* -------------------------------------------------------------------------------------------------------------------
SP 横-                                                                                                           
------------------------------------------------------------------------------------------------------------------- */
@media (orientation: landscape) {
  .pc {
    display:none;
  }
  .tb {
    display: block;
  }
  .sp {
    display: block;
      margin: 0 auto;
  }
  .pcBr {
    display: none;
  }
  .spBr {
    display: block;
  }
    
    
}

/* -------------------------------------------------------------------------------------------------------------------
iPad 縦-                                                                                                           
------------------------------------------------------------------------------------------------------------------- */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation:portrait) {
  .pc {
    display:none;
  }
  .tb {
    display: block;
  }
  .sp {
    display: block;
  }
  .pcBr {
    display: none;
  }
  .spBr {
    display: block;
  }
    

}






/* -------------------------------------------------------------------------------------------------------------------
961px-                                                                                                           
------------------------------------------------------------------------------------------------------------------- */
@media screen and (min-width: 960px) {
	.pc {
		display: block;
	}
  .sp {
	  display: none;
	}


  #img1{
object-position:center center;
}
	
#img2{
object-position:center top;
}

#crack{
  object-position:50% 80%;
  transform:scale(1.05);
}

    
}