@charset "UTF-8";

/* ====================================
	アニメーション設定
 ==================================== */

/* ===============================
	mobile
=============================== */
@media only screen and (max-width: 767px) {
}

/* ====================================
	タブレット、印刷専用スタイル
===================================== */
@media only screen and (min-width: 768px) and (max-width: 1199px) {
	.lead-container {
		position: relative;
	}
	#mainVisual .illust02,
	#mainVisual .illust01 {
		transform-origin: center 200%;
		transition: all 2s cubic-bezier(0.190, 1.000, 0.220, 1.000) .5s;
	}
	#mainVisual:not(.loaded) .illust01 {
		transform: translate(-50%, 100%);
	}
}

/* ====================================
	PC大画面専用スタイル
===================================== */
@media only screen and (min-width: 1200px) {
	.lead-container {
		position: relative;
	}
	#mainVisual .illust02,
	#mainVisual .illust01 {
		opacity: 1;
		transform-origin: center 200%;
		transition: all 2s cubic-bezier(0.190, 1.000, 0.220, 1.000) 1s;
	}
	#mainVisual:not(.loaded) .illust01 {
		opacity: 0;
		transform: translate(120px, 100%) rotate(20deg);
	}
	#mainVisual:not(.loaded) .illust02 {
		opacity: 0;
		transform: translate(-140px, 100%) rotate(-20deg);
	}
	#mainVisual .hotcook {
		transform: translate(-50%, 0);
	}
	#mainVisual .hotcook-anime1,
	#mainVisual .hotcook-anime2 {
		opacity: 0;
	}
	#mainVisual.loaded .hotcook-anime1 {
		animation-name: bounceIn;
		animation-duration: .75s;
		animation-fill-mode: forwards;
		transform-origin: center
	}
	#mainVisual.loaded .hotcook-anime2 {
		animation-name: bounceIn;
		animation-duration: .75s;
		animation-delay: .75s;
		animation-fill-mode: forwards;
		transform-origin: center
	}
	/* 吹き出し */
	#mainVisual .hukidashi {
		opacity: 0;
		transform: translate(0, 100%) scale(.2);
	}
	#mainVisual .hukidashi01 {
		transition: all 1s cubic-bezier(0.190, 1.000, 0.220, 1.000) 1.75s;
	}
	#mainVisual .hukidashi02 {
		transition: all 1s cubic-bezier(0.190, 1.000, 0.220, 1.000) 1.5s;
	}
	#mainVisual .hukidashi03 {
		transition: all 1s cubic-bezier(0.190, 1.000, 0.220, 1.000) 2s;
	}
	#mainVisual.loaded .hukidashi {
		opacity: 1;
		transform: translate(0, 0) scale(1);
	}
}