@charset "UTF-8";

/*////////////////////////////////////////////////////////////////////////

	UTILITY

		- スタイル調整
		- 汎用クラス

--------------------------------------------------------------------------

	MEDIA QUERY

		- 設定なし：390×844最適化（375×667・375×812・390×844・414×819／SP）
		- 600px以上：768×1024最適化（600×960・768×1024・810×1080／TAB縦）
		- 1024px以上：1366×768最適化（1024×768・1280×720・1366×768・1440×900・1536×864／TAB横・MB）
		- 1600px以上：1920×1080最適化（1600×900・1920×1080・2560×1440／DT）

////////////////////////////////////////////////////////////////////////*/


/*========================================================================


	WIDTH


========================================================================*/

._w100 { width: 100% !important; }


/*========================================================================


	EFFECT


========================================================================*/

/*------------------------------------------------------------------------
	fade / fade In
------------------------------------------------------------------------*/

._fade { visibility: hidden; opacity: 0; filter: blur(10vw); transition: 1000ms ease-in-out; }
._fade._fadeIn { visibility: visible; opacity: 1; filter: blur(0); }

/* home */
.home ._fade { transition-delay: 800ms; }

/*------------------------------------------------------------------------
	fade
------------------------------------------------------------------------*/

._scroll { visibility: hidden; opacity: 0; filter: blur(2vw); transition: 800ms ease-in-out; }
._scroll._scrollIn { visibility: visible; opacity: 1; filter: blur(0); }


/*========================================================================


	CURSOR


========================================================================*/

.cursor { display: none; }

@media screen and (min-width: 1024px) { /* 1366×768最適化 */
html, body, a { cursor: none; }
.cursor { display: block; opacity: 0; position: fixed; top: -0.5vw; left: -0.5vw; width: 1vw; height: 1vw; background: rgba(0, 0, 0, 0.7); border-radius: 50%; z-index: 2; transition: width 0.5s, height 0.5s, top 0.5s, left 0.5s; transform: translate(0, 0); pointer-events: none; 
    &.cursor--hover { top: -1.5vw; left: -1.5vw; width: 3vw; height: 3vw; background: rgba(255,255,255,0.5);  }
}
}

@media screen and (min-width: 1600px) { /* 1920×1080最適化 */
.cursor { top: -0.35vw; left: -0.35vw; width: 0.7vw; height: 0.7vw;
    &.cursor--hover { top: -1.25vw; left: -1.25vw; width: 2.5vw; height: 2.5vw;  }
}
}